摘要：前段时间实在太忙, 都没时间写博客, 最新稍微好点, 必须安排一个。 思路 项目越来越大,总是感觉编译一次越来越慢,不能忍... 既然想要提速, 就需要知道webpack的整个编译的过程原理, 包括: 输入是什么 编译过程是什么 输出又是什么 输入 先来分析一下输入, 以现在流行的SPA来说, 从入
阅读全文
随笔分类 - Full-Stack Front-End
摘要：1. 没有模块化的时代 在JS没有模块化标准的时代，如果存在以下依赖关系： main.js → b.js → a.js 那么我们必须把js文件的顺序按照模块的依赖关系顺序放到页面中(简单的举例，不考虑循环依赖等复杂情况) <!-- NoModule.html --> <head> <link rel
阅读全文
摘要：源码版本: 17.0.1 1. useState在哪？ //myReact.js import { useState } from 'react'; //react\src\index.js export { useState } from './src/React'; //react\src\Re
阅读全文
摘要：都知道React的类组件在setState的时候有异步和同步的区别，但是具体哪些是同步哪些是异步？ 原理在这里就不细说了，感兴趣的同学可以看看源码：源码有个inBatchUpdate的Flag，在React自身的事件流/生命周期中这个Flag是true，setState请求会放入一个队列里，在做更新
阅读全文
摘要：算法 排序算法 稳定排序 待排序序列中相等元素在排序完成后，原有先后顺序不变。 非稳定排序 有序度 待排序序列中有序关系的元素对个数。 逆序度 1. 插入排序 遍历有序数组,对比待插入的元素大小,找到位置。把该位置后的元素依次后移。 时间复杂度: O(N2) 2. 选择排序 区分已排序区间和未排序区
阅读全文
摘要：复杂度分析 大O复杂度表示法 常见的有O(1), O(n), O(logn), O(nlogn) 时间复杂度除了大O表示法外,还有以下情况 最好情况时间复杂度 最坏情况时间复杂度 平均情况时间复杂度 均摊时间复杂度 代码执行效率分析 大多数情况下,代码执行的效率可以采用时间复杂度分析,但是大O表示法
阅读全文
摘要：1. 集合对象 1.1 Object 关于Object类型的创建和底层存储原理我在另一篇文章有说明: "JavaScript 对象属性底层原理" 我们知道了大多数情况下Object底层都是Hash结构,我们再看看V8中从Object派生的继承图 1.2 Array 数组是一种类列表对象,可以存储重复
阅读全文
摘要：1. SQL注入 虽然现在SQL注入发生的情况总的来说越来越少,还是提二句。关于什么是SQL注入大家都知道就不多说了。 1.1 原理 我们在做前端页面的时候,少不了会又各种输入框,然后通过GET或者POST发送至后端。 那么如果后端在处理时直接使用SQL拼接的话就会产生问题。 1.2 防范手段 1.
阅读全文
摘要：1. 报文结构 1.1 请求报文结构 Start Line 单行，包括 Method + URL + HTTP Version Headers 多行，形式为 Name：Value Body 可选，主体部分 1.2 响应报文结构 Status Line 单行，包括 HTTP Version + Sta
阅读全文
摘要：1. EventLoop 1.1 调用栈 当一个方法执行时内部调用另外的方法,则会形成调用栈,如图： 1.2 任务队列 JavaScript有一个主线程执行当前任务,主线程的代码同步执行,并把遇到的事件和回调注册到事件表中。 当事件表中的事件被触发时,将会把对应的处理函数推送到任务队列当中。 每一次
阅读全文
摘要：Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说。 JavaScript function jsonpCallBack(data){ console.log(data.msg); } $(document).ready(fun
阅读全文
摘要：JS中实现继承的几种方式 1. 原型链继承 核心： 将父类的实例作为子类的原型 优点： 非常纯粹的继承关系，实例是子类的实例，也是父类的实例 父类新增原型方法/原型属性，子类都能访问到 简单，易于实现 缺点： 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造
阅读全文
摘要：事件 1. DOM0级事件 通过函数赋值给事件处理程序属性。 注意：this指针指向当前元素(作用域为元素作用域) 2. DOM2级事件 通过addEventListener()添加的事件处理程序。 3. 事件类型 UI事件 DOMActivate,load(所有一切加载完毕),unload,abo
阅读全文
摘要：Browser Object Model BOM是所有JavaScript的核心，所有的功能其实都建立在BOM基础之上。各浏览器提供的BOM的功能存在很大差异，BOM在HTML5中已经有很大一部分被放入了标准。 Window对象 window对象代表全局作用域。 如果页面包括frame，则每个fra
阅读全文
摘要：Promise 1. 定义 注意：Promise构造函数的参数是一个函数，并且该函数的二个参数也是函数。 注意：Promise的实例用.then指定resolved和rejected状态的回调函数。其中，第二rejected回调函数可以为空。 注意：.then指定的回调函数是异步回调函数，需要注意运
阅读全文
摘要：对象属性类型 1. 数据属性 [[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，特性默认值为true [[Enumberable]]：表示能否通过for in循环返回属性，特性默认值为true [[Wtiteabl
阅读全文
摘要：webpack模块处理 1. ES6 静态Import ES6的import会被转化为commonjs格式或者是AMD格式,babel默认会把ES6的模块转化为commonjs规范的。 两种写法只需选一种，避免在代码中同时使用造成混淆。 2. ES6 动态Import 语法：Import.then
阅读全文
摘要：1. prototype/\_\_proto\_\_/constructor JS原型链和继承网上已经烂大街了，5毛可以买一堆，这里只提一下： constructor：普通对象和函数对象都有，指向创建它的函数 prototype: 函数对象才有，指向构造函数的原型对象(另一个普通对象) \_\_pr
阅读全文
摘要：函数调用和this指针 1. 全局环境的this指针 浏览器全局环境下this指向window对象 nodejs环境下this指向global对象 2. 函数中的this指针 2.1 全局环境下函数调用 非严格模式this指向window,严格模式除箭头函数外指向undefine 2.2 作为对象方
阅读全文
摘要：作用域 1. 全局环境 window: JS的全局执行环境，顶层对象。this指针在全局执行环境时就指向window。 2. 局部环境 什么情况会具有局部环境? 答: function声明(包括常规声明，箭头函数，匿名函数)的花括号{}内部会形成局部环境。 局部环境有什么特征? 答： 局部环境是运行
阅读全文
