01xm-CSDN博客

原创【ES6】阮一峰ES6学习之Module的加载实现

HTML 网页中，浏览器通过标签加载 JavaScript 脚本。默认情况下，浏览器是同步加载 JavaScript 脚本，也就是渲染引擎遇到标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。用户体验感很差。所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。或属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而

2022-12-14 17:54:21 1059 2

原创【ES6】阮一峰ES6学习之Module的语法

在 ES6 之前主要有CommonJS和AMD两种。CommonJS 用于服务器，AMD 用于用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。进入了大一统阶段。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。// CommonJS模块 let {

2022-12-14 15:06:08 689

原创【ES6】阮一峰ES6学习之编程风格

可能会有多线程的实现（比如 Intel 公司的 River Trail 那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。如果模块默认输出一个对象，对象名的首字母应该大写，表示这是一个配置值对象。如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。，尤其是在全局环境，不应该设置变量，只应设置常量。

2022-12-12 17:24:11 647

原创【ES6】阮一峰ES6学习之Class的继承

ES5 是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。比如，Array构造函数有一个内部属性[[DefineOwnProperty]]，用来定义新属性时，更新length属性，这个内部属性无法在子类获取，导致子类的length属性行为不正常。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。作为对象时，在普通方法中，指向父类的原型对象；

2022-12-12 16:22:59 388

原创【ES6】阮一峰ES6学习之Class(一)

基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor()方法。类的属性和方法，除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。类相当于实例的原型，所有在类中定义的方法，都会被实例继承。事实上，类的所有方法都定义在类的。

2022-12-08 17:18:07 818

原创【ES6】阮一峰ES6学习之Generator 函数(一)

总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。ES6 没有规定，function关键字与函数名之间的星号，写在哪个位置。Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个。方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。属性表示当前的内部状态的值，是。语句，就执行到函数结束）。方法，返回的都是这个值。

2022-12-08 15:47:09 172

原创【ES6】阮一峰ES6学习之迭代器和for...of循环

并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

2022-12-08 14:54:29 603

原创【ES6】阮一峰ES6学习之Promise(一)

Promise 是异步编程的一种解决方案简单来说就是一个容器，里面保存着未来才会结束的事件( 通常是一个异步操作 )的结果。从语法上来说，Promise是个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。一旦状态改变，就不会再改变，任何时候都可以得到这个结果。状态改变只有两种状态从变为和从变为。ES6

2022-12-07 18:30:03 9342 1

原创【ES6】阮一峰ES6学习(六) Proxy

es6中全新设计了一个叫的类型，Proxy这个词的原意是代理，用在这里表示由它来”代理“某些操作，可以译为”代理器“，Proxy就是专门为对象设置访问代理器的，无论是读还是写都要经过代理，通过proxy就能轻松监视对象的读写过程。如何使用监视对象的读写过程呢？定义一个对象，对象当中有一个属性和属性，然后通过的方式为创建一个代理对象的构造函数需要2个参数，一个是需要代理的目标对象，另一个是代理的处理对象，在这个处理对象中可以通过方法监视对象属性的访问，通过方法监视对象设置属性的过程1. get()方法ge

2022-12-07 17:22:12 5904

原创【JavaScript】数组的方法汇总(更新至ES7~)

向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。参数可以添加一个至多个。2. ，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。3. 删除并返回数组的最后一个元素，若该数组为空，则返回。原数组改变。方法从数组中删除最后一个元素。的返回值是已删除的项目。4. 删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回。原数组改变。5. 方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时

2022-12-07 11:54:33 692

原创【JavaScript】字符串方法汇总(方法最新至ES7~)

方法一：查找某个字符，有则返回第一次匹配到的位置，否则返回-1方法二：返回第n个位置字符方法三：返回第n个位置字符的ASCII值对于方法来说，如果参数不在和字符串的之间，则返回；而对于方法来说，则返回，而不是或。方法四：从后向前检索一个字符串方法五：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。方法六：返回布尔值，表示是否找到了参数字符串。2. 增方法一：用于将一个或多个字符串拼接成一个新字符串3. 删这

2022-12-07 10:50:08 251

原创【ES6】阮一峰ES6学习(五)Set和Map联系及区别

：Set对象允许你存储任何类型的值，无论是原始值或者是对象引用。类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。2. 属性和方法：添加某个值，返回Set结构本身。：删除某个值，返回一个布尔值，表示删除是否成功。：返回一个布尔值，表示该值是否为的成员。：清除所有成员，没有返回值。方法可以将结构转为数组。这就提供了去除数组重复成员的另一种方法。3. 遍历：返回键名的遍历器；：返回键值的遍历器；：返回键值对的遍历器；：使用回调函

2022-12-06 17:02:42 1169 1

原创【ES6】阮一峰ES6学习(四) 对象的扩展

允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。上面代码中，变量直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例子。除了属性简写，方法也可以简写。下面是一个实际的例子。这种写法用于函数的返回值，将会非常方便。模块输出一组变量，就非常合适使用简洁写法。简洁写法在打印对象时也很有用。2. 属性名表达式JavaScript 定义对象的属性，有两种方法。方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号

2022-12-06 11:21:25 524 1

原创【ES6】阮一峰ES6学习(三) 数组的扩展

扩展运算符（spread）是三个点扩展运算符的应用（1）复制数组 (浅拷贝)（2）合并数组 (浅拷贝)（3）字符串扩展运算符还可以将字符串转为真正的数组。方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。类似数组：本质特征只有一点，即必须有属性，所以任意有length属性的对象，都可以通过方法转为数组。一般实际应用中，常见的类似数组的对象是 DOM 操作返回的 Node

2022-12-06 09:56:04 254

原创【ES6】阮一峰ES6学习(二)模板字符串、新增的字符串方法、函数扩展、rest参数、箭头函数

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。字符串新增方法传统上，JavaScript 只有方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。方法返回一个新字符串，表示将原字符串重复次。参数如果是小数，会被取整。如果的参数是字符串，则会先转换成数字。用于头部补全，用于尾部补全。和一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符

2022-12-05 18:39:25 478

原创【ES6】阮一峰ES6学习(一) let、const、解构赋值

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。4. 不允许重复声明：允许在相同作用域内，重复声明同一个变量。第一种场景，内层变量可能会覆盖外层变量。上面代码的原意是，代码块的外部使用外层的，内部使用内层的。但是，函数f执行后，输出结果为，原因在于变量提升，导致内层的变量覆盖了外层的变量。第二种场景，用来计数的循环变量泄露为全局变量。（很常见）上面代码中，变量只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。为 JavaScript 新增了块级作用域。运行后输出

2022-12-05 17:03:33 450

原创【JavaScript】前端工程化

传统开发模式的主要问题命名冲突文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

2022-10-17 12:00:00 113

原创【JavaScript】常见的性能优化方法

浏览器从服务器上下载CSS、js和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而CDN可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN具有更好的可用性，更低的网络延迟和丢包率。为了提高用户加载页面的速度，对静态资源进行缓存是非常必要的，根据是否需要重新向服务器发起请求来分类，将HTTP缓存规则分为两大类(强制缓存，对比缓存)缓存：对DOM查询进行缓存、频繁DOM操作，合并到一起插入DOM结构。懒加载：组件/路由的懒加载。

2022-10-14 13:00:00 206 1

原创【Vue】长列表实践

长列表实践

2022-09-26 15:00:00 433 1

原创【JavaScript】循环优化

可以看到，倒序操作实际上就是将i和数组长度的比较和判断为true或false这两步合并，不用比较长度了，也不用判断了，以此来得到性能上的优化。每次我们都要去查找一次length的值，那么我们为什么不先在设置初始条件时使用一个变量来存储arr的length值呢。2、把能在循环外计算的，尽量在循环外计算，减少在内层的运算，有判断条件的语句和与循环不相关的操作语句尽量放在for外面。3、应当将最长的循环放在最内层，最短的循环放在最外层，以减少CPU跨切循环层的次数。1.i==true的判断（i为0时等式即成立）

2022-09-19 16:00:00 1409

原创【小记】浏览器完整的渲染过程

js是单线程的，浏览器是多线程的：有的负责加载资源，有的线程负责执行脚本，有的负责渲染页面。解析遇到link，script、img标签时，浏览器会向服务器发送请求资源。script的执行会阻塞html解析，其他下载线程以及渲染线程。浏览器绘制元素的样式、颜色、背景等（很耗性能）浏览器按照从上向下的原则解析整个html标签。计算出每个节点的位置和形状（很耗性能）

2022-08-26 12:30:00 355

原创【小记】每日学习（1）

默认值为none，标示，不会在动画结束或者未开始时给元素添加样式常用属性值为：（1）forwards:表示动画结束后，元素直接接使用当前样式。（2）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时）

2022-08-25 12:00:00 162

原创 URL和相对路径、绝对路径

URLURL（Uniform Resource Locator）：统一资源定位符，也就是我们通常所说的网址。就好比一个城市里的街道门牌号码一样。它指定了如HTTP或FTP等Internet协议，是惟一能够识别Internet上具体的计算机、目录或文件位置的命名约定。URL的格式由下列三部分组成：第一部分是协议(或称为服务方式);第二部分是存有该资源的主机IP地址(有时也包括端口号);第三部分是主机资源的具体地址，如目录和文件名等。第一部分和第二部分之间用“：//”符号隔开，第二部分和第三部分用

2022-07-18 20:05:43 2815

原创 css盒子模型

概念页面就是由一个个盒模型堆砌起来的，每一个HTML元素就是一个盒模型，盒模型由外到内是margin，border，padding，content。他在页面中所占的实际宽度就是margin+border+padding+content。盒模型分为和，...

2022-07-15 19:44:19 45

原创 position

Position有五个属性值，分别是static、fixed、relative、absolute、sticky；

2022-07-15 19:34:47 83

原创 flex布局

决定了元素在主轴上的排列方式，默认是flex-start左对齐，center居中；space-between两侧对齐，项目之间的间隔相等；flex是flex-grow、flex-shrink和flex-basis三个属性的缩写；它的值为1的话就是flex-grow为1，元素占据剩余宽度的一份；center居中；warp-reveser换行，第一行在下方；经常用做自适应布局，将内容区设置为flex1，内容区则会自动放大占满剩余空间。是flex-direction和flex-wrap的简写形式；......

2022-07-15 18:16:27 235

原创 CSS中的那些属性是可以继承的以及属性优先级

当一个属性不是继承属性的时候，可以使用inhert关键字来指定一个属性应该从它的父元素继承值。inhert关键字用于显示的指定继承性。

2022-07-15 14:44:53 308

原创 CSS-块级元素和行内元素的区别

块级元素和行内块元素

2022-07-14 15:23:34 198

原创 text-align：center居中

text-align:center 居中

2022-07-14 15:06:19 470

原创 CSS水平垂直居中的几种实现方式

水平垂直居中1.利用 `position:absolute`2. 利用`margin:auto`3. 利用弹性盒子4. 利用水平对齐和行高1.利用 position:absolute<div class="father"> <div class="son"></div></div>当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半<style> .father{

2022-04-24 17:00:25 812 1

原创 js 冒泡排序和选择排序

冒泡for(let i=0;i<arr.length-1;i++){ //控制趟数 for(let j=0;j<arr.length-i-1;j++){ //控制交换次数 if(arr[j]>arr[j+1]){ var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } }}选择for(let i=0;i

2022-02-13 23:01:51 403

原创【Redux】

1. 简单理解redux是一个专门用于做状态管理的JS库。有很多组件，A、B、C、D、E几个组件，现在C内有状态，A、B、E都想用，如果采用以前的方法，找他们之间的关系，或者用消息订阅与发布方法，这样的工作量很大，代码很多；这时redux独立于所有组件存在的，有一个专门存放这些状态的仓库store，C的需要共享的状态在里面存着，谁想用就去redux里取，用就取，不用就不取，集中式管理多个组件共享的状态，这样就节省了工作量。2. 简介组件可以派发(dispatch)行为(action)给store,

2022-01-09 16:03:36 332

原创【React】面向组件编程 - 基本理解和使用 | 组件三大核心属性state-props-refs | 事件处理 | 非受控组件 | 受控组件

1. 基本理解和使用1.1 函数式组件// 1. 创建函数式组件function MyComponent(){ console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2>}// 2. 渲染组件到页面ReactDOM.render(<MyComponent/>, document.getElementById('test')

2022-01-01 22:56:44 683

原创【浏览器】Ajax 是什么? Ajax的基本流程？

AjaxAjax的基本流程（前言）web基础知识Web服务器HTTP协议HTTP协议——请求消息HTTP协议——响应信息什么是Ajax？Ajax的原理是什么？Ajax的使用1. 创建Ajax核心对象XMLHttprequest（记得考虑兼容性）2. 向服务器发送请求3. 服务器响应处理(区分同步和异步两种情况)1、同步处理2、异步处理什么是readyState？什么是status？常见的状态码GET和POST请求数据区别Ajax的基本流程（前言）浏览器输入网页以后需要向服务器获取网页资源，当浏览器渲染了

2021-12-09 16:02:00 1438

原创【数据库】数据库基础理论

数据库基础理论一、数据库二、数据库管理系统(DBMS)三、数据库系统（DBMS）的组成四、数据库系统的特点五、数据库应用系统六、数据库系统的体系结构七、概念模型八、常用的数据模型关系模型1、关系模型中的基本术语2、关系的性质3、关系数据库中的表之间的关系4、关系模型的完整性约束5、关系代数一、数据库数据库(Database，DB)是长期存储在计算机内的、有组织的、可共享的、统一管理的相关数据的集合。按照字面的理解，数据库就是存放数据的仓库。二、数据库管理系统(DBMS)DBMS的功能：数据库定义

2021-12-07 18:08:10 351

原创【JavaScript】ES6之面向对象的对象、类、构造函数、原型对象、对象原型、原型链

ES6面向对象1、面向对象1.1、对象1.2、类1.2.1、创建类1.2.2、构造函数1.2.3、类中添加方法1.3 、类的继承1.4、super关键字1.4.1、调用父类的构造函数1.4.2、调用父类的普通函数1.4、三个注意点2、构造函数和原型2.1、概述2.2、构造函数2.2.1、静态成员和实例成员2.2.2、构造函数的问题2.3、构造函数原型 prototype2.4、对象原型 __ proto __constructor 构造函数2.6、构造函数、实例、原型对象三者关系2.7、原型链查找规则2.8

2021-11-30 20:29:26 1029

空空如也

空空如也