- 博客(166)
- 收藏
- 关注
RSS订阅原创 前端设计模式
单例模式singletonclass Singleton { constructor (){ const instance = this.constructor.instance if(instance){ return instance } this.constructor.instance = this }}monostate单态// 不改变构造函数 但实例能共享属性class Super
2021-08-15 21:43:50
108
原创 认识及实现MVC
M：Model 数据模型（模型层）→ 操作数据库（对数据进行增删改查）V：View视图层 → 显示视图或视图模板C：Controller 控制器层 →逻辑层 数据和视图关联挂载和基本的逻辑操作API层 前端请求的API对应的是控制器中的方法服务端渲染View需要数据 → Controller对应的方法 → 调用Model的方法 → 获取数据 → 返回给Controller对应的方法 → render到View中前端渲染前端 → 异步请求URL → 对应Controller中某个方.
2021-08-13 06:34:46
158
原创 Webpack性能优化
优化构建速度 优化产出体积WDS Webpack DevServerHMR Hot Module ReplacementLive Reloading 自动刷新vue：HMR性能优化主要是对开发环境而言的，因为生产一般只构建一次文件内容不变，计算的hash值就不变，可以利用浏览器缓存加快速度1. 优化babel-loader适用于开发/生产环境{ test: /\.js$/, use: { loader: 'babel-loader', ..
2021-08-13 06:14:40
324
原创 APP拉起小程序
结论：APP可以唤起小程序，前提是APP开发者在微信开放平台帐号下申请移动应用，通过审核并关联小程序，参考如下：准备工作:APP开发者认证微信开放平台 https://kf.qq.com/faq/170824URbmau170824r2uY7j.htmlAPP开发者创建应用 https://open.weixin.qq.com/cgi-bin/frame?t=home/app_tmpl&lang=zh_CNAPP关联小程序 https://developers.weixin.qq
2021-08-11 17:37:48
4173
原创 Webpack进阶（三）
懒加载 lazy loading用到的时候才加载vue 首屏不加载index.jsconst oBtn = document.getElementById('j-button')oBtn.onclick = async function () { const div = await createElement() document.body.appendChild(div)}async function createElement() { const { defau
2021-08-10 20:33:20
123
原创 Webpack进阶（二）代码分割 Code Splitting
源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入（如lodash包）的代码 1mb若更新了业务逻辑代码，但在浏览器运行时每次都下载2mb的index.js显然不合理，第三方包是不会变的
2021-08-10 06:15:54
251
原创 Webpack进阶（一） tree shaking与不同mode
Tree Shaking生产环境去除没有使用到的内容（开发环境没有删除，会影响调试）只支持ESM规范（静态引入，编译时引入），不支持CJS（动态引入，执行时引入）// webpack.config.js// 和devServer同级// 开发环境会自动加上，可不写optimization:{ usedExports: true}由于@babel/polyfill并没有export而是在window上挂载，因此不应当检查shaking对于没有导出内容的都应该忽略// packa
2021-08-08 21:06:10
154
原创 Webpack基础
webpack.config.js该文件若有更新，需要重启/* * @Author: your name * @Date: 2021-04-18 15:44:29 * @LastEditTime: 2021-08-08 17:58:22 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \newToDoc:\hyy\webpack\webpack.config
2021-08-08 18:00:48
238
1
原创 ES6-24 生成器与迭代器的应用
手写生成器var arr = [1,2]function generator(arr){ var i = 0; return{ next(){ var done = i > arr.length ? true : false, value = done ? 'undefined' : arr[i++]; return { value : value,
2021-07-30 07:26:55
124
原创 【重要】ES6-23 JavaScript模块化
前端js模块化的演变发展 模块化解决的问题 传统模块化、插件化 CommonJS AMD/CMD ES6模块化ES6以前 没有js引擎一开始js写在html的script标签里js内容增多，抽取出index.js文件，外部引入js再增加，index.html对应index.js index2.html对应index2.js（模块化概念的诞生）含有可复用的代码，提出公共的common.js引入common.js的所有内容不合理 → 不能光以页面为基准来区分程序块、分js文件..
2021-07-29 22:46:31
224
原创 ES6-22 手写实现之『ES6 Promise』
doSth().then(function(data){ console.log(data) // 10})function doSth(){ let data = 10 return { then(callback){ callback(data) } }}function doSth() { let data = 30 return new Promise(function (resolve
2021-07-28 07:36:12
107
原创 【co】ES6-20/21 iterator与generator
iterator内部迭代器：系统定义好的迭代器接口（如数组Symbol.iterator）外部迭代器：手动部署（可以给obj定义外部迭代器）对于遍历器对象来说，done: false和value: undefined属性都是可以省略的除了next之外还可以增加return(){}，在for…of循环中凡是使用break或者throw new Errow()来终止循环的，会走returnlet obj = { a: 1, b: 2, c: 3, [Symbo.
2021-07-26 22:25:49
124
原创 ES6-18/19 异步的开端-promise
ES6-18异步的开端-promiseES6-19 promise的使用方法和自定义promisifytry catch只能捕获同步异常，不能捕获异步的等待所有异步都执行完，打印结果，比较笨拙的方法，在每个异步操作加arr.length === 3 && show(arr)Promise是构造函数原型上的方法then、catch、finally其余都在构造函数上：all、race、reject、resolve实例化的参数executor是一个函数exe
2021-07-25 19:01:21
132
2
原创 ES6-17 class与对象
class模拟类的方式语法糖（把以前的写法换了一个方式）类内部的方法是不可枚举的ES5用Object.assign拓展的原型属性是可枚举的function Point(x, y) { this.x = x; this.y = y;}// 这样定义的原型上方法eat\drink是可枚举的Point.prototype = Object.assign(Point.prototype, { eat: function () { }, drink: funct
2021-07-24 10:33:33
147
1
原创 ES6-16 WeakMap与WeakSet、proxy与reflect
WeakMap/WeakSet原型上不存在遍历方法(没有部署iterator接口)成员只能是对象垃圾回收机制不考虑对成员对象的应用WeakSet/WeakMap 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。这是因为垃圾回收机制根据对象的可达性（reachability）来判断回收，如果对象还能被访问到，垃圾回收机制就不会释放这块内存
2021-07-22 07:21:29
222
1
原创 ES6-15 map与set
Promise、Proxy、Map、Set这些ES6新增的api无法用babel实现语法降级，需要使用到polyfillSet成员是唯一的，不能重复有iterator接口，可迭代具有iterator接口的所有类型，都能作为new Set()的参数，如类数组、数组const myS = new Set()console.log(myS)myS.add(1) // 只能传1个参数console.log(myS)myS.add(1) // 添加重复的则无效果,成员是唯一的consol.
2021-07-21 21:47:26
129
1
原创 ES6-14 Unicode表示法、字符串方法、模板字符串
Unicode表示法本身能正常识别的，加{}也能识别，花括号内的内容表示码点parseInt('0061',16) // 十进制的97，97在ASCII码中对应aconsole.log('\u0061') // aconsole.log('\u{0061}') // aconsole.log('\u{61}') // a原型上方法codePointAt(十进制)字符串的长度是字符的长度，需要4个字节表示的字符，长度为2charCodeAt返回的也是码点凡是超过oxffff的，用
2021-07-20 16:25:32
271
原创 正则 - 阮一峰
学习地址一 正则实例方法1. test正则实例.test返回布尔值var r = /x/g;var s = '_x_x';r.lastIndex // 0r.test(s) // truer.lastIndex // 2r.test(s) // truer.lastIndex // 4r.test(s) // false死循环，因为while循环的每次匹配条件都是一个新的正则表达式，导致lastIndex属性总是等于0。var count = 0;while (/
2021-07-19 21:45:51
743
1
原创 ES6-13 正则方法、修饰符yus、UTF_16编码方式
修饰符m multiLine 对于str中含\n的情况g globali ignoreCase元字符反斜杠加转义元字符含义简写\w匹配字母、数字、下划线。等价于’[A-Za-z0-9_]’。word\W匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。space\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。[
2021-07-19 07:30:19
296
2
原创 ES6-12 array/数值拓展、ArrayOf、ArrayFrom
要使用…须有迭代器接口数组方法构造器上的方法Array.of()声明数组替代new Array()的方式声明数组new Array()不传参数返回空数组，只传1个参数时，代表数组长度，内容用empty填充，传多个参数，则代表数组内容，容易有歧义console.log(new Array()) // []console.log(new Array(1)) // [empty]console.log(new Array(1, 2, 3)) // [1, 2, 3]console.log(
2021-07-18 16:42:02
184
原创 对转义字符的思考
ASCII码计算机存储文字时用的是二进制，ASCII码就是一张对照表，什么字符对应什么码，将二进制码存储下来0-127位表示基础的ASCII码0-31，和127表示非打印控制字符（如换行、回车、响铃、文头、文尾）32-126表示空格，数字，大小写，标点，运算符号127-256 是ASCII的扩展，表示英语以外的西文字符，不同国家的表示不同亚洲文字（这里以汉字为例），使用GB2312,GBK,Unicode表示，一个文字2个字节转义字符第一类 字符实体所有ASCII码可以用\加数字表示
2021-07-17 18:11:31
224
3
原创 ES6-11 Symbol、iterator、forOf、typeArray
…剩余运算符const obj1 = { a: 1, b: 2}const obj2 = { a: 100, b: 2, c: 300}const obj = { ...obj1, ...obj2}console.log(obj) // 和Object.assign(obj, obj1, obj2)结果相同[Symbol.hasInstance]Symbol构造函数上的属性，默认调用了方法iterator迭代器对数据结构读
2021-07-17 10:19:38
110
原创 ES6-10 super、4种遍历方式、原型、symbol遍历
由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 [[Prototype]]即__proto__在各个浏览器和 JavaScript 引擎上都是一个很慢的操作。一 Object原型方法1 Object.setPrototypeOf(obj, proto)用该方法而不是直接修改__proto__返回值是设置好原型的obj，即第一个参数若第一个参数不是对象，则该操作没有效果，将第一个参数构造函数的原型作为obj的原型const n = new Number(1).
2021-07-16 07:37:28
234
2
原创 ES6-9 对象密封4种方式、assign、取值函数的拷贝
一 对象密封1 Object.preventExtensions 禁止对象拓展，仍可删除严格模式下报错const origin = { a: 1}const fixed = Object.preventExtensions(origin)console.log(origin === fixed) // trueconsole.log(Object.isExtensible(origin)) // false 不可拓展origin.b = 100console.log(origi
2021-07-15 07:46:56
163
1
原创 ES6-8 - 函数名/对象拓展、描述符、getter/setter
函数名有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。bind函数名// 以bound开头function foo() { }const fnName = foo.bind().nameconsole.log(fnName) // bound foogetter setter如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方
2021-07-14 07:49:07
365
1
原创 ES6-7 - 箭头函数的实质、箭头函数的使用场景
箭头函数返回对象// 这种情况要要用(),否则会将对象的{}解释为块const fn = (a, b) => ({a:1, b:2})箭头函数的特点this指向由外层函数的作用域来决定，它本身没有this，不能通过call、apply、bind改变不能作为构造函数使用不可以使用arguments对象，该对象在函数体内不存在，可用rest代替不可以使用yield命令，因此箭头函数不能用作 Generator 函数。function foo() { console.log('
2021-07-13 07:16:41
244
1
原创 ES6-6 - this指向、箭头函数基本形式、rest运算符
一 chrome断点调试观察函数调用栈// 25minvar x = 1;function foo(x, y = function () { x = 2; console.log(2) }) { var x = 3; y(); console.log(x)}foo()console.log(x)// 2 3 1var x = 1;function foo(x, y = function () { x = 2; console.log(x) }) {
2021-07-12 07:45:55
115
1
原创 ES6-4/5 解构赋值、函数默认值、数组解构、对象解构
一 解构赋值1 虚值含义：在Boolean转换结果为假的值falsy2 函数默认值es6除了undefined给默认值，其余取传入的值// es5写法function foo(x, y) { // x = x || 1; // y = y || 2; // 以上写法，遇0出bug // 计算类型的，要取得正确结果，要考虑0的情况，应如下 if (x !== 0) { x = x || 1; } if (y !==
2021-07-11 10:43:00
314
原创 ES6-3 let进阶、const、全部变量与顶层对象
一 const1. 定义常量1.1 引入模块时const test = require('http')1.2 定义时必须赋值(初始化)且不可修改const a;// Uncaught SyntaxError: Missing initializer in const declaration若赋值为原始值，不可修改若赋值为引用值，对于的地址不可修改，但指向空间的内容是可变的const a = {};a.num = 10;// 转义后"use strict";var a =
2021-07-10 21:03:42
122
原创 ES6-2 块级作用域与嵌套、let、暂行性死区
阮一峰ES6 - let思考，在编写代码时，有es5、es6的语法，究竟是否有块级作用域？ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。1. var关键字可以重复声明var num1 = 1;var num1 = 100;console.log(num1) // 1002. let块级作用域2.1 同一作用域下不能重复声明（无论是let/var/const声明）let num1 = 1;var num1 = 100
2021-07-10 17:17:05
1357
原创 ES6-1 ES6版本过渡历史
一 历史HTMLHTML 1, HTML 2, HTML 3 1991-1997 IETF(the Internet Engineering Task Force) 国际互联网工程任务组1997.1 HTML3.2 W3CJavaScript1995 liveScript(后改名为JavaScript1996年改名)1996 javascript 1.0 1.1;1997 Jscript1997.6 ECMAScript 1.01998.6 ECMAScript 2.01999.1
2021-07-10 10:07:01
234
原创 DOM-15/16【实战】鼠标行为预测技术
鼠标预测行为动作复杂，使用事件代理得不偿失，在数量有限的情况下，使用循环绑定更好用户从menu斜着向右下角滑入时，可能是进入main，也可能是要选择子菜单，在判断前先做延迟如何判断用户进入main的意图，数组前一个点p1，和main左上下两个顶点组成一个三角形，当后一个点p2在三角形内，认为有进入main的意图，否则认为是切换菜单如何判断一个点是否在三角形内：向量 + 叉乘公式pointInTriangle(p, a, b, c)...
2021-06-23 07:57:50
227
原创 DOM-14 【实战】解决事件代理和鼠标移动事件的窘态
鼠标的滑入滑出案例事件现象应用场景mouseover/mouseout绑定在父元素时，对她的所有子元素，事件都生效dom结构简单mouseenter/mouseleave只对她绑定的元素有效，对window绑定无效dom结构复杂mousemove长触发// 绑定在父元素上// 即使取消冒泡，这个结果也不变，证明这个现象不是冒泡造成的<body> <div class="outer"> <div
2021-06-22 07:25:35
159
1
原创 DOM-13 【实战】输入及状态改变事件、京东搜索框
模块化IIFEwindow.onload = function () { init()}function init() { keySearch() others() // 多人开发的模块}var keySearch = (function () { var searchKw = document.getElementById('J_search_kw'), autoKw = document.getElementById('J_autoK
2021-06-21 21:24:05
124
原创 DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
鼠标事件深入点击事件 = mousedown + mouseupposition: absolute 会将内联元素变为块级（比如a）a标签的协议限定符（伪协议，防止跳转和刷新，让href不生效），javascript:;，可以让点击和拖拽分离模块的声明：xx变量 = function () { } / IIFE等待型模块和立即执行的模块用按下、抬起的时间差值来判断是拖拽还是点击边界问题浏览器可能有计算误差，可以适当将范围缩小1像素，防止出现滚动条鼠标点击鼠标右键、中键没有o
2021-06-20 12:04:32
202
原创 DOM-10 面向对象开发Todolist
将插件配置项写在html的div里，data-config自定义属性，外单引号，内双引号（内部是JSON字符串）<div class="todo-wrap" data-config='{ "plusBtn":"j-show-input", "inputArea":"input-wrap", "addBtn":"j-add-item", "list":"list-wrap", "itemClass":"item"}'></div>/.
2021-06-19 18:32:54
166
原创 DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装
鼠标行为e.属性含义相关属性clientX/Y鼠标位置相对于当前可视区域的坐标x/y（FF火狐部分版本不支持）pageX/Y(IE9以下不支持)鼠标位置相对于当前文档的坐标layerX/Y (IE11以下同clientX/Y)screenX/Y鼠标位置相对于显示器屏幕的坐标offsetX/Y鼠标位置相对于块元素的坐标（以左上角为顶点，包括边框，Safari不包括边框）pageXY封装// 兼容性写法：获取相对文档的位置function pa
2021-06-19 10:04:17
87
原创 DOM-9 【实战】模块化开发Todolist（面向过程）
模块化分类按dom结构划分按功能划分（组件化开发）模块与模块之间可以相互依赖，但互不影响模块：IIFE赋值给一个变量，当引入模块时，IIFE会立即执行单标签闭合才符合W3C规范display、position放在上面css是有顺序的，先宽高、margin、box-shadow、border-radius级联选择器，css样式是从右到左查找，效率更高绝对定位会让块级元素变成内联块级元素，原先占满整行的会收缩showInput = !showInput没有条件语句里明确false
2021-06-19 07:43:39
198
原创 ES5-拓展 原型链、继承、类
Symbol不是构造函数object不是原型是实例对象 他的构造器继承原型上的构造器undefined是未定义 null是空指针函数也是实例对象构造函数Object是由Function构造出来的Foo.__proto__ === Function.prototype // trueObject.__proto__ === Function.prototype // trueFunction.prototype.constructor === Function // trueFun.
2021-06-17 07:28:45
104
原创 61-1 认识webpack
认识webpack面向过程开发的不便引入外部js执行顺序面向对象开发加载多个文件耗时更多 增加了http请求 引入过多js变量来源不明优化 使用前先import 但使用import语法需要借助工具webpack翻译为浏览器可以解析的语法安装node自动携带npmwebpack若没有全局安装 需要使用npx命令找到bin目录下webpack的可执行文件webpack npx webpack index.jswebpack cli是让命令行可以通过webpack执行指令的工具包翻译
2021-06-16 08:00:35
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人