前端知识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.mzph.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