Leslie Waong

模块化的背景JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境（例如 Node.js）。 因此，近年来，有必要开始考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node.js 已经提供这个能力很长时间了，还有很多的 JavaScript 库和框架 已经开始了模块的使用（例如， CommonJS 和基于 AMD 的其他模块系统 如 RequireJS, 以及最新的 Webpack 和 Babel）。 好消息是，最新的浏览器开始原生支持模块功能了，这是本文要重点讲述的。这会是一个好事情 — 浏览器能够最优化加载模块，使它比使用库更有效率：使用库通常需要做额外的客户端处理。 早期模块化模块化发展原始写法模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 1234567function m1(){ //.. ...

计算机网络体系结构 TCP/IP体系结构相当于将OSI体系结构的物理层和数据链路层合并为了网络接口层，并去掉了会话层和表示层。 教学时经常把TCP/IP体系结构的网络接口层分成了物理层和数据链路层。 应用层最上层的，也是我们能直接接触到的就是应用层(Application Layer)，我们电脑或手机使用的应用软件都是在应用层实现。那么，当两个不同设备的应用需要通信的时候，应用就把应用数据传给下一层，也就是传输层。 所以，应用层只需要专注于为用户提供应用功能，不用去关心数据是如何传输的，就类似于，我们寄快递的时候，只需要把包裹交给快递员，由他负责运输快递，我们不需要关心快速是如何被运输的。 而且应用层是工作在操作系统中的用户态，传输层及以下则工作在内核态。 对于不同的网络应用需要不同的应用层协议。在互联网中应用层协议很多，如域名系统DNS，支持万维网应用的HTTP协议，支持电子邮件的SMTP协议等等。我们把应用层交互的数据单元称为报文。 传输层应用层的数据包会传给传输层，传输层(Transport Layer)是为应用层提供网络支持的。 在传输层会有两个传输协议，分别是TCP和UDP ...

Class 的基本语法类是用于创建对象的模板。他们用代码封装数据以处理该数据。 JS中的类建立在原型上，但也具有某些语法和语义未与ES5类相似语义共享。 定义类实际上，类是“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。 类声明定义类的一种方法是使用类声明。要声明一个类，你可以使用带有class关键字的类名（这里是“Rectangle”）。 123456class Rectangle { constructor(height, width) { this.height = height; this.width = width; }} 提升函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出ReferenceError： 12let p = new Rectangle(); // ReferenceErrorclass Rectangle {} 类表达式类表达式是定义类的另一种方法 ...

严格模式严格模式的理解概念理解：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：”严格模式”（strict mode）。 顾名思义，这种模式使得Javascript在更严格的语法条件下运行。 目的： 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为 消除代码运行的一些不安全之处，为代码的安全运行保驾护航 为未来新版本的Javascript做好铺垫 使用 针对整个脚本文件：将use strict放在脚本文件的第一行，则整个脚本文件将以严格模式运行。 针对单个函数：将use strict放在函数体的第一行，则整个函数以严格模式运行。 PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。 脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。 严格模式和普通模式的区别1.全局变量必须显式声明在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。 严格模式禁止这种用法，全局变量必须显式声明。 示例： 12345"use strict ...

纯CSS3实现卡通人物眼睛的动画特效项目展示展示地址 展示动图 注意： 对移动端进行了自适应。 鼠标移入三勾玉或轮回圈部分有动画。 在苹果的设备上会有展示bug， drop-shadow()在轮回眼上无法生效。 Web端无法使用缩放功能。 功能实现 自适应布局 vw,vh 三角形胡须 利用border画三角形 眼睛 使用box-shadow和border-radius可以获得类似边框的效果。filter眼影 居中 absolute + transform Flex 写轮眼 轮回眼 animation transform opacity absolute 背景渐变线性渐变（linear-gradient）基础用法： 1background:linear-gradient(angle,start-color,soft-line,end-color); angle是渐变角度，不写则默认从上到下，也就是to bottom，当然其他类似的直角方向还有to right,to top,to left。其他的对角方向包括to left top,to right top,to bott ...

三栏布局 问题：假设容器的高度默认100px，请写出三栏布局，其中左栏、右栏的宽度各为300px，中间的宽度自适应。 方法浮动左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。 绝对定位左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。 使用article标签作为容器，包裹左、中、右三个部分。 Flexbox布局flex：1即为flex-grow：1，经常用作自适应布局，将父容器设置display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。 表格布局 table设置整个容器的宽度为100%，设置三个部分均为表格，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应。 网格布局 grid设置容器为网格布局display: grid，宽度为100% 设置网格为三列，并设置每列的宽度grid-template-columns: 300px auto 300px。 效果 代码1234567891 ...

CSS选择器及优先级选择器类别 选择器 语法 元素（标签）选择器 标签名{} p{} h1{} div{} id选择器 #id属性值{} #box{} #red{} 类选择器 .class属性值{} 通配选择器 * 选中页面中的所有元素 交集选择器 选择器1选择器2选择器3选择器n{} 选择器分组（并集选择器） 选择器1,选择器2,选择器3,选择器n{} 子元素选择器 父元素 > 子元素 后代元素选择器 祖先 后代 选择下一个兄弟 前一个 + 下一个 选择下边所有的兄弟 兄 ~ 弟 属性选择器 [属性名] [属性名=属性值] ……a[href="https://example.com"] { } 伪类选择器 伪类一般情况下都是使用:开头 伪元素选择器 伪元素使用 :: 开头 样式 ...

行内元素与块元素，H5的内容模型inline，block，inline-block的区别 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的Flow content类别，而”行内“类别相当于 HTML5 中的Phrasing content类别，不过除了这两个还有其他类别。 一般情况下，行内元素只能包含数据和其他行内元素。行内元素适合显示具体内容，一般是内容的容器。 而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构，适合做布局。 块级元素(block) 块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。 可以设置宽高。即使设置宽度也还是独占一行。当块级元素没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow ...

JS数组常用方法总结 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。 常见的数组定义：数组是存放在连续内存空间上的相同类型数据的集合。 但是！==JavaScript 数组的长度和元素类型都是非固定的。== 因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 TypedArray。 只能用整数作为数组元素的索引，而不能用字符串。后者称为关联数组（即对象，因为每个属性都有一个用于访问它的字符串值）。使用非整数并通过方括号或点号来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的属性集合上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。 123var myCar = new Object();// var myCar = {}; myCar.make = "Ford";myCar ...

前端性能优化 作者：黑色的枫链接：https://juejin.cn/post/6904517485349830670来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 重要性当我们面试的时候，前端性能优化方面算是必考的知识点，但是工作中我们又很少会重点的对项目进行前端优化，它真的不重要吗？ 如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%~10%。而如果关注前端性能，同样是将其响应时间减少一半，则整体响应时间可以减少40%~45%。 改进前端通常只需要较少的时间和资源，减少后端延迟会带来很大的改动。 只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件上。 定位技术上的选择在前端日常开发中，技术上的选择是非常重要的。为什么要讲这个呢？因为现象频发。 前端工程化严重的当下，轻量化的框架慢慢被遗忘掉了。并不是所有的业务场景都适合使用工程化框架，react/vue 并不轻量。 复杂的框架是为了解决复杂的业务 如果研发h5、PC展示等场景简单的业务时候，javascript原生 配合 ...

Set数据结构Set ES6 提供了新的数据结构 Set（集合）。 Set本身是一个构造函数，用来生成 Set 数据结构。 Set 对象允许你存储任何类型的唯一值，无论是基本类型或者是对象引用。 Set对象是值的集合，实现了 iterator接口，所以可以使用扩展运算符和for…of…进行遍历，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。 属性和方法属性Set 结构的实例有以下属性。 Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。 操作方法Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 Set.prototype.add(value)：添加某个值，返回 Set 结构本身。 Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。 ...

如需要文章隐藏功能，请装插件 hexo-generator-indexed 或者 hexo-hide-posts hexo-hide-posts本 Hexo 插件可以在博客中隐藏指定的文章，并使它们仅可通过链接访问。 当一篇文章被设置为「隐藏」时，它不会出现在任何列表中（包括首页、存档、分类页面、标签页面、Feed、站点地图等），也不会被搜索引擎索引（前提是搜索引擎遵守 noindex 标签）。 只有知道文章链接的人才可以访问被隐藏的文章。 安装1$ npm install hexo-hide-posts --save 使用在文章的 front-matter 中添加 hidden: true 即可隐藏文章。 比如我们隐藏了 source/_posts/lorem-ipsum.md 这篇文章： 1234567---title: 'Lorem Ipsum'date: '2019/8/10 11:45:14'hidden: true---Lorem ipsum dolor sit amet, consectetur adipiscing elit ...