JavaScript之深入Class类
1.1 类定义12// 类声明class Person {} //类声明不能提升，且收块级作用域限制
类的构成包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，空的类一样有效。
12345678910class Foo { } //空类有效class Foo { constructor() {} //构造函数}class Foo { get myBaz() {} //有获取函数}class Qux { static myQux() {} //有静态方法}
类可以看做是一个特殊函数。并且有显式原型prototype，该原型也有一个constructor指向自身。并且类也可以用instanceof检查是否存在于实例的原型链中。
1.2 类构造函数new一个类的操作如下
在内存中创建一个新对象
这个新对象内部的[[Prototype]]指针被赋值为构造函数的prototype属性
构造函数内部的this被赋值 ...
JavaScript之常用设计模式
1. 适配器模式1.1 适配器的意义比作一个插头，与一个接口不兼容，但是接上了适配器，就可以通过适配器的另一端去与接口适配上了。相同的也有USB转接口、电源适配器、港式插头转换器等。
1.1 适配器的应用适配器只有在接口无法正常工作的时候能用上。实例场景：
1234567891011121314151617181920212223var renderMap = function( map ){ if ( map.show instanceof Function ){ map.show(); //渲染定图的接口方法为show } };var googleMap = { show: function(){ //谷歌地图方法为show console.log( '开始渲染谷歌地图' ); } }; var baiduMap = { display: function(){ //百度地图方法为display cons ...
JavaScript之深入继承
1. 原型链继承子类如果需要覆盖父类的方法，或者增加父类没有的方法，需要在原型赋值后，再添加到原型上。如果在赋值前重写方法会破坏(重写)之前的原型链。原型链继承的问题：
原型链继承的对象，会在所有实例间共享，会多出一些不必要的属性，如果修改也会影响到其他实例
子例在实例化时不能给父类型的构造函数传参
2. 借用构造函数继承在子类中调用父类构造函数。
1234567891011121314151617function SuperType() { //相当于在子类中运行了父类的初始化代码，每个实例都有自己的属性 this.colors = ["red", "blue", "green"]; } function SubType() { // 继承 SuperType SuperType.call(this); }//也可以传入参数function SuperType(name){ this.name = name; } function SubType() & ...
Webpack学习
1. webpackwebpack：静态(static)模块(module)化打包(bundler)工具。主要打包资源输出到静态资源。脚手架的由来就是webpack。按需求编写loader和plugin。webpack不会被vite取代，并且也在改进和进步。学好webpack，一样可以学好vite。webpack可以将浏览器不认识的语法转译成浏览器可以运行的代码。npm init初始化package.json文件，’script’中配置指令，可以局部执行。
1.2 webpack如何打包
根据命令或者配置文件找到入口文件；
从入口开始，会生成依赖关系图，该图会包含应用程序中所需的所有模块
然后遍历图结构，打包一个个模块(根据不同文件使用不同loader解析)
2. webpack核心配置//‘script’中的命令行npx webpack –entry ./src/main.js –output-path ./build //指定入口和出口命令配置可在官方文档的API命令行接口中查询常规情况下会创建一个webpa ...
ES6之生成器
1. 生成器是什么？拥有在一个函数块内暂停和恢复代码执行的能力的结构。生成器的形式可以是一个函数，在函数名称前加一个表示它是一个生成器(箭头函数不能定义生成器函数)，的位置不影响函数生成器的定义。调用生成器函数会产生生成器对象。然后处于暂停执行的状态，调用next()函数会让生成器开始或恢复执行。next的返回器与Iterator相同，有done属性和value属性。生成器自己实现了迭代器接口，默认的迭代器是自引用的。
2. 通过yield中断执行在生成器中，yield可以作为暂停操作，并且yield后的返回值会作为next()函数返回的值。并且生成器内部的yield为可迭代对象，可以迭代生成器内部的yield。yield也可以实现输入与输出，将参数传入函数，通过yield返回或展示，也可以迭代调用yield实现生成器函数。yield加上*可以迭代一个可迭代对象，使他一次next只能返回一个单独值。也可以将生成器作为迭代值返回，可以迭代一个可迭代的生成器对象。
3. 如果提前终止生成器
return()该方法会强制生成器进入关闭状态，提供给return方法的值就是终止迭代器对象的值 ...
ES6之迭代器
1. 迭代器是啥迭代器(iterator)为可以对数组或集合进行遍历的工具。只有实现了迭代器工厂函数的数据类型才能使用Iterable接口：
字符串(StringIterator)
数组(ArrayIterator)
映射(MapIterator)
集合(SetIterator)
arguments对象(ArrayIterator)
NodeList等DOM集合类型(ArrayIterator)
并且迭代器与可迭代对象的属性是同步的，如果可迭代对象在迭代期间被修改了，那么迭代器会反映相应的变化。迭代器维护着一个可迭代对象的引用，会阻止垃圾回收程序回收可迭代对象。
2. 自定义迭代器123456789101112131415161718192021222324252627class Counter { constructor(limit) { this.limit = limit; } [Symbol.iterator]() { let count = 1, limit = this.limit; ...
Webpack小结
1. Webpackwebpack是自动化打包解决方案，也是一个模块打包机。将浏览器不能直接运行的语言或资源打包为合适的格式供浏览器使用。webpack能做到：- 代码转换：TypeScript编译成JavaScript、SCSS，LESS编译成CSS- 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器2. Webpack常见配置有哪些
Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。
Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。
mode：提供mode配置选项，告知webpack使用相应模式的内置优化。
Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。
Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
Load ...
Vue-Router原理
1.路由注册Vue-router可以通过vue.use进行注册，在use中，会将router当成插件install，然后存储到installedPlugins中。
123456789101112131415161718192021222324Vue.mixin({ //通过混入将router对象与options合并，混入时会调用init初始化 beforeCreate () { if (isDef(this.$options.router)) { this._routerRoot = this this._router = this.$options.router this._router.init(this) Vue.util.defineReactive(this, '_route', this._router.history.current) } else { this._routerRoot = (this.$pa ...
Vuex原理
1.Vuex初始化import Vuex的时候，引用的是一个对象，定义在index.js中，他同样存在一个install方法，install中通过混入一个beforeCreate钩子函数，将options.store保存在所有组件的$store中，这个options.store就是实例化的Store对象。所以我们可以通过this.$store访问到这个实例。
1.1 Store实例化1234567891011121314151617181920212223const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ...
Vue全局API原理
1.Vue.util123456Vue.util = { warn, extend, mergeOptions, defineReactive,};
Vue.util是Vue内部的工具方法，不推荐业务组件去使用，因为可能随着版本发生变动，不开发第三方Vue插件会比较少用
2.Vue.set/Vue.delete123456789101112131415161718192021222324export function set(target: Array<any> | Object, key: any, val: any): any { // 如果是数组 直接调用我们重写的splice方法 可以刷新视图 if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; ...