前端知識1-3：模塊化+瀏覽器詳解

script標簽兩個變量參數 - async & defer
    <script src="main.js" async></script>
  • 普通 - 解析到標簽，立刻pending，并且下載執行
  • defer - 解析到標簽，開始異步下載，解析完成之后開始執行
  • async - 解析到標簽，開始異步下載，下載完成后立刻執行并阻塞原解析，執行結束后，繼續解析
問題出現：
  • 污染作用域=>不利于大型項目的開發以及多人團隊的共建

commonjs規范

nodejs制定

  • 優點：
    CJS率先在服務實現了從框架層面解決依賴、模塊化的問題
  • 缺憾
    針對的是服務端，對于異步依賴沒有很友好地處理解決

特征：

  • 通過module+export對外暴露接口
  • 通過require進行其他模塊的調用

main.js

    const depModule1 = require('./dependecncyModule1')const depModule2 = require('./dependecncyModule2')let count = 0;const obj = {increase: () => ++count;reset: () => {count = 0;// fn(depModule1);// depModule1, depModule2}}exports.increase = increase;exports.reset = reset;module.export = {increase,reset}

    const {increase,reset} = require('main.js');increase();reset();

實際執行處理

    (function(thisValue, exports, require, module) {const depModule1 = require('./dependecncyModule1')const depModule2 = require('./dependecncyModule2')// 業務邏輯……}).call(thisValue, exports, require, module);// 部分開源源碼，分別傳入全局、指針、框架作為參數(function(window, _, undefined) {// 業務邏輯……})(window, lodash);// window// 1. 避免全局變化 ｜ 全局作用域轉化為局部的時候，提升效率// 2. 編譯時候優化壓縮 (function(c){c}(window))// lodash// 1. 獨立定制復寫，保障穩定// 2. 防止全局工具的全局污染// undefined// 防止被重寫

AMD規范

通過異步加載 + 允許定制回調函數
經典框架：require.js

    define(id, [depModule], callback);require([module], callback);// 例子define('amdModule', [depModule1, depModule2], (depModule1, depModule2) => {let count = 0;const obj = {increase: () => ++count;reset: () => {count = 0;// fn(depModule1);// depModule1, depModule2}}// ....})// 使用require(['amdModule'], amdModule => {amdModule.increase();})

CMD規范 - sea.js

  • 優點：按需加載，依賴就近
  • 缺憾：依賴打包，加載邏輯存在于每個模塊中，擴大了模塊的體積
    define('module', (require, exports, module) => {let $ = require('jquery');let depModule1 = require('./dependencyModule1');// ……})

ESM

引入——import
導出——export

    import depModule1 from './dependecncyModule1';import depModule2 from './dependecncyModule2';let count = 0;const obj = {increase: () => ++count;reset: () => {count = 0;// fn(depModule1);// depModule1, depModule2}}export default {increase,reset}// 異步加載import('xxx').then(a => {// ../})

瀏覽器相關

一、認識瀏覽器運行態下的JS

包含：BOM DOM ECMAScript
    (function(global, context, undefined) {const _class = ['js', 2, {name: 'vue_base'}, {name: 'vue_promote',index: {}}];global.classArr = _class.map(item => item);const _url = location.href; // 路徑地址相關document.title = 'browser';document.getElementById('app');})(window, this)// 簡述// ECMAScript - 基礎邏輯、數據處理// DOM - 對于瀏覽器視窗內HTML文本的相關操作// BOM - 對瀏覽器本身功能區域做的處理

二、BOM

1. location

location.href => ‘https:// www.course.com/search?class=browser#comments’
.origin => https://www.course.com
.protocol => https
.host => www.course.com
.port => ‘’
.pathname => /search/
.search => ?class=browser
.hash => #comments

location.assign(‘url’) 跳轉到指定path，并替換pathname => path
.replace(‘url’) 效果同上，同時替換瀏覽歷史
.reload()
.toString()

  • 面試方向
  1. location本身api操作
  2. 路由相關：跳轉、參數、操作 => 場景：history hash
  3. url處理 —— 正則 or 手寫處理
2. history

history.state => 存儲獲取當前頁面狀態
.replaceState => 替換當前狀態

3. navigator
  • 瀏覽器系統信息大集合
    navigator.userAgent

面試方向：

  1. UA讀取系統信息 => 瀏覽器兼容性
  2. 剪切板、鍵盤
  3. 系統信息采集 => 數據上報 => 數據采集匯總
4. screen

表示顯示區域 —— 屏幕

  • 面試方向 - 判斷區域大小
    window視窗判斷：
    全局入口處
    window.innerHeight
    window.innerWidth

    文本處獲取
    document.documentElement.clientHeight
    document.documentElement.clientWidth

    網頁內容size => offsetHeight = clientHeight + 滾動條 + 邊框
    document.documentElement.offsetHeight
    document.documentElement.offsetWidth

    定位：
    scrollLeft / scrollTop - 距離常規左/上滾動的距離
    offsetLeft / offsetTop - 距離常規左/上距離

    el.getBoundingClientRect()
    el.getBoundingClientRect().top
    el.getBoundingClientRect().left
    el.getBoundingClientRect().bottom
    el.getBoundingClientRect().right

    • 兼容性 - IE會多出2像素

三、事件模型

    <div id="app"><p id="dom">Click</p></div>// 冒泡： p => div => body => html => document// 捕獲：document => html => body => div => pel.addEventListener(event, function, useCaption) // useCaption 默認 - false// 追問：// 1. 如何去阻止事件傳播？event.stopPropagation(); // => 無法阻止默認事件的發生，比如：a標簽跳轉// 2. 如何阻止默認事件event.preventDefault();// 3. 相同節點綁定了多個同類事件，如何阻止？event.stopImmediatePropagation();// 面試核心：區分不同阻止// 4. 手寫，實現一個多瀏覽器兼容的事件綁定// attachEvent vs addEventListener// 區別：// a. 傳參 attachEvent對于事件名需要加上’on‘// b. 執行順序 attachEvent - 后綁定先執行；addEventListener - 先綁定先執行// c. 解綁 dettachEvent vs removeEventListener// d. 阻斷 e.cancelBubble = true vs e.stopPropagation()// e. 阻斷默認事件 e.returnValue vs e.preventDefaultclass bindEvent {constructor(element) {this.element = element;}addEventListener = (type, handler) => {if (this.element.addEventListener) {this.element.addEventListener(type, handler, false);} else if (this.element.attachEvent) {const element = this.element;this.element.attachEvent('on' + type, () => {handler.call(element);});} else {this.element['on' + type] = handler;}}removeEventListener = (type, handler) => {if (this.element.removeEventListener) {this.element.removeEventListener(type, handler, false);} else if (this.element.detachEvent) {const element = this.element;this.element.detachEvent('on' + type, () => {handler.call(element);});} else {this.element['on' + type] = null;}}static stopPropagation(e) {if (e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}}static preventDefault(e) {if (e.preventDefault) {e.preventDefault();} else {e.returnValue = false;}}}// 5. 性能優化 - 事件代理<ul class="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="content"></div>var list = document.querySelector(".list");var li = list.getElementsByTagName("li");var content = document.querySelector(".content");// 硬碰硬for(var n = 0; n < li.length; n++) {li[n].addEventListenr('click', function() {// 點擊邏輯})}// 代理后 - 利用冒泡function onClick(e) {var e = e || window.event;if (e.target.nodeName,toLowerCase() === 'li') {const liList = this.querySelectorAll("li")index = Arrary.prototype.indexOf.call(liList, target);}}list.addEventListener('click', onClick, false)

四、網絡

    // 實例化const xhr = new XMLHttpRequest()// 發送// 初始化連接 - open初始化連接不會發起真正的請求xhr.open(method, url, async)// 發送請求// 當請求方法為post時 - body請求體// 當請求方法為get時 - 可以為空// 都需要encodeURIComponent進行轉碼xhr.send(data)// 接受xhr.readyStatus// 0 - 尚未調用open// 1 - 已調用open// 2 - 已調用send// 3 - 已接受請求返回數據// 4 - 已完成請求xhr.onreadystatechange = () => {if (xhr.readyStatus === 4) {if (xhr.status === 200) {// 邏輯}}}// 超時xhr.timeout = 1000;// 超時觸發方法xhr.ontimeout = () => {// trace}// 手寫請求封裝ajax({url: 'reqUrl',method: 'get',async: true,timeout: 30000,data: {payload: 'text'}}).then(res => console.log('成功'),err => console.log('失敗'))function ajax(options) {// 參數讀取const {url,method,async,data,timeout} = options;// 實例化const xhr = new XMLHttpRequest()return new Promise((resolve, reject) => {// 成功xhr.onreadystatechange = () => {if (xhr.readyStatus === 4) {if (xhr.status === 200) {// 邏輯resolve && resolve(xhr.responseText)} else {reject && reject()}}}// 失敗xhr.ontimeout = () => reject && reject('超時')xhr.onerror = () => reject && reject(err)// 傳參處理let _params = []let encodeDataif (data instanceof Object) {for (let key in data) {_params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))}encodeData = _params.join('&')}// methods處理// get類型拼接到urlif (method === 'get') {const index = url.indexOf('?')if (index === -1) {url += '?'} else if (index !== url.length -1) {url += '&'}url += encodeData}// 建立連接xhr.open(method, url, async)if (method === 'get') {xhr.send(null)} else {xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;chartset=UTF-8')xhr.send(encodeData)}})}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/16404.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/16404.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/16404.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

內存函數詳解，包含部分字符串函數

內存函數詳解，包含部分字符串函數

目錄 一&#xff0c;memcpy內存函數的介紹 二memmove函數的介紹 三&#xff0c;memset的函數使用 四&#xff0c;memcmp的介紹 五&#xff0c;內存函數的模擬實現&#xff0c;以及一個字符串函數strstr的模擬實現 5.1memcpy函數的實現 5.2memmove的模擬實現 5.3memcmp的模擬…
閱讀更多...
Shell環境變量深入：自定義系統環境變量

Shell環境變量深入：自定義系統環境變量

Shell環境變量深入&#xff1a;自定義系統環境變量 目標 能夠自定義系統級環境變量 全局配置文件/etc/profile應用場景 當前用戶進入Shell環境初始化的時候會加載全局配置文件/etc/profile里面的環境變量, 供給所有Shell程序使用 以后只要是所有Shell程序或命令使用的變量…
閱讀更多...
H.機房【藍橋杯】/數組鏈式前向星建圖+堆優化版dijkstra

H.機房【藍橋杯】/數組鏈式前向星建圖+堆優化版dijkstra

機房 數組鏈式前向星建圖堆優化版dijkstra #include<iostream> #include<queue> #include<cstring> #include<vector> using namespace std; typedef pair<int,int> pii; //無向圖開兩倍 int e[200005],ne[200005],v[200005],h[200005],du[1000…
閱讀更多...
STL---unordered set和unordered multiset【無序集合】

STL---unordered set和unordered multiset【無序集合】

1.1 定義及初始化&#x1f357; 下面列出常用的初始化方式 #include <unordered_set> #include <iostream> using namespace std; //輸出s中的所有元素 template<typename T> void Show(const T& s) {for (auto& x : s) …
閱讀更多...
Python的pip配置、程序運行、生成exe文件

Python的pip配置、程序運行、生成exe文件

一、安裝Python 通過官網下載對應的版本&#xff0c;安裝即可。 下載地址&#xff1a;Download Python | Python.org Python標準庫查看&#xff08;Python自帶庫&#xff09; Python 標準庫文檔 安裝Python的時候&#xff0c;如果選第二個自定義安裝要記得勾選安裝pip 二、…
閱讀更多...
2024/05/25學習記錄

2024/05/25學習記錄

1、面經復習&#xff1a;前端廣度 2、代碼隨想錄刷題&#xff1a;動態規劃 3、rosebush 完成input組件基礎
閱讀更多...
閑置商標轉讓出現這些狀態時注意！

閑置商標轉讓出現這些狀態時注意！

近日以前做轉讓的一個朋友的商標轉讓證明下來&#xff0c;正好是2個半月&#xff0c;普推知產老楊發現這個時間也太快&#xff0c;以前差不多四個月左右&#xff0c;有些朋友需要購買閑置商標&#xff0c;3個月內所有權就變成自己的。 在購買閑置商標時要注意有一些細節&#x…
閱讀更多...
Python限制輸入的數范圍

Python限制輸入的數范圍

在Python中&#xff0c;我們可以使用多種方法來限制用戶輸入的數值范圍。 1.使用while循環和try-except語句的方法 以下是一個使用while循環和try-except語句的示例&#xff0c;該示例將要求用戶輸入一個在指定范圍內的整數。 假設我們要限制用戶輸入的數在1到100之間&#…
閱讀更多...
MySQL的索引, 到底怎么創建?

MySQL的索引, 到底怎么創建?

目錄 前言 MySQL的數據結構 索引是一把雙刃劍 索引創建原則 如何給一個列挑選索引? 索引列的基數, 要盡量小 索引列的類型盡量小 索引長字符串的前綴 不要對索引列進行計算操作或者函數計算. 不要老想著查詢, 想想插入該怎么辦? 避免索引冗余和重復 前言 今天在…
閱讀更多...
TOTP 算法實現：雙因素認證的基石(C/C++代碼實現)

TOTP 算法實現：雙因素認證的基石(C/C++代碼實現)

雙因素認證&#xff08;Two-Factor Authentication, 2FA&#xff09;扮演著至關重要的角色。它像是一道額外的防線&#xff0c;確保即便密碼被竊取&#xff0c;不法分子也難以輕易突破。在眾多雙因素認證技術中&#xff0c;基于時間的一次性密碼&#xff08;Time-Based One-Tim…
閱讀更多...
ubuntu/部分docker容器無法訪問https站點

ubuntu/部分docker容器無法訪問https站點

ubuntu/部分docker容器無法訪問https站點 解決方案 解決方案 默認的系統內可能沒有安裝根證書&#xff0c;需要安裝一下 apt install ca-certificates如果官方源比較慢&#xff0c;可以換為國內源&#xff0c;但是不要使用https
閱讀更多...
今天說的什么好呢

今天說的什么好呢

先這樣吧
閱讀更多...
【fastapi+mongodb】使用motor操作mongodb

【fastapi+mongodb】使用motor操作mongodb

上一篇文章&#xff0c;我們在電腦上安裝了mongodb數據庫。這篇文章&#xff0c;我們在fastapi后端使用motor操作mongodb 如果你還沒看過上一篇文章&#xff0c;鏈接在這里&#xff1a;【MongoDB】安裝與使用 安裝 motor motor 是一個用于操作 mongodb 數據庫的 python 庫&a…
閱讀更多...
計算機網絡 1

計算機網絡 1

兩臺主機想通信&#xff0c;其實本質就是兩個文件的資源交換&#xff0c;但是長距離的通信&#xff0c;面臨的是很多的問題。這個時候需要通過一些方式來保證可靠性 什么是協議 這樣一個例子&#xff0c;我是住在農村&#xff0c;我讀高中了我需要去縣里面讀書。這個時候呢&…
閱讀更多...
VL15 優先編碼器Ⅰ

VL15 優先編碼器Ⅰ

兩種思路 module encoder_83(input [7:0] I ,input EI ,output wire [2:0] Y ,output wire GS ,output wire EO );reg [4:0] temp1 ; always (*) begincasex({EI,I}) 9b0_xxxx_xxxx:begin temp1 5b000_0_0;…
閱讀更多...
冒泡排序和遞歸排序

冒泡排序和遞歸排序

目錄 一.冒泡排序 1.1概念&#xff1a; 1.2原理&#xff1a; 1.3簡單示例講解&#xff1a; 二.遞歸排序 1.1概念&#xff1a; 1.2原理&#xff1a; 1.3簡單示例講解&#xff1a; 一.冒泡排序 1.1概念&#xff1a; 冒泡排序是一種最基礎的交換排序。 通過反復交換相鄰…
閱讀更多...
Jupyter Lab 軟件安裝與使用

Jupyter Lab 軟件安裝與使用

軟件簡介 Jupyter Lab 軟件是一個基于web 的交互式開發環境&#xff0c;集成了代碼編輯器、終端、文件管理器等功能&#xff0c;使得開發者可以在一個界面中完成各種任務。JupyterLab是Jupyter Notebook的全面升級&#xff0c;是一個集文本編輯器、終端以及各種個性化組件于一…
閱讀更多...
Java進階學習筆記29——Math、System、Runtime

Java進階學習筆記29——Math、System、Runtime

Math&#xff1a; 代表的是數學&#xff0c;是一個工具類&#xff0c;里面提供的都是對數據進行操作的一些靜態方法。 示例代碼&#xff1a; package cn.ensourced1_math;public class MathTest {public static void main(String[] args) {// 目標&#xff1a;了解Math類提供…
閱讀更多...
那智不二越機器人維修案例分享

那智不二越機器人維修案例分享

那智不二越工業機器人在工業范圍內廣泛應用于各種生產領域。其示教器作為人機交互的重要設備&#xff0c;常常需要定期維護和Nachi不二越機械手示教盒修理。 【Nachi不二越機器人示教器維修步驟】 1. 關閉電源 在進行任何那智不二越機器人維修操作之前&#xff0c;務必確保機器…
閱讀更多...
＜商務世界＞《75 微課堂＜茶葉（1）-質量分級＞》

＜商務世界＞《75 微課堂＜茶葉（1）-質量分級＞》

1 中國茶葉分級 中國的10級標準是按照茶葉的外觀、香氣、滋味、湯色、葉底五個方面進行評分&#xff0c;分別用10分制進行評分&#xff0c;總分為50分&#xff0c;得分越高&#xff0c;茶葉的品質就越高。具體的分數和等級如下表所示&#xff1a; 2 每級的特點 茶葉的質量等級…
閱讀更多...
最新文章

Copyright @ 2022~2023