11 2019 档案
摘要：tl;dr: 想要保持页面的快速运行，你需要仅加载当前页面所需的 JavaScript 代码。优先考虑用户所需，之后运用代码分离懒加载其他内容。 Is it happening - 在这个时期，你可以开始往屏幕上分发内容（页面是否开始跳转？服务端是否开始响应？）。 Is it useful - 在这
阅读全文
摘要：JavaScript的事件驱动机制让JavaScript更加丰富，浏览器好比就是一个事件驱动的机器，错误也是一种事件。当一个错误发生时，一个事件就在某个点抛出。 解释起来就是，当发生错误时，JavaScript会去调用栈检查异常事件。 开始时，这个函数定义了一个空的对象foo，注意 bar() 没有
阅读全文
摘要：Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候， 大家肯定会好奇，这到底施了什么魔法，可以让渲染提升如此之显著。3个小tips: 1）background-attachment:fixed改成了position: f
阅读全文
摘要：1.在调试 JS 代码时，很多人倾向于使用 alert() 或者 console.log() 方法来输出信息，正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是， console 对象拥有多种方法可以更好的呈现信息，从
阅读全文
摘要：// Shape 类function Shape(id, x, y) { this.id = id; this.setLocation(x, y);}// 设置坐标的原型方法Shape.prototype.setLocation = function(x, y) { this.x = x; this
阅读全文
摘要：问：类继承和原型继承不是同一回事儿吗，只是风格选择而已？ 答：不是！ 类继承和原型继承不论从本质上还是从语法上来说，都是两个截然不同的概念。 二者之间有着区分彼此的本质性特征。要完全看懂本文，你必须牢牢记住以下几点： 类继承中，实例继承自模版（类），并且创建子类关系。换言之，你不能像使用实例一样使用
阅读全文
摘要：DOM 的全称是 Document Object Model (文档对象模型) 响应式 UI const ThinkerWithHat = ({ hat }) => ( <div> <Hat type={hat} /> <Thinker /> </div>); 注意，你只需定义你想要的 (戴帽子的思
阅读全文
摘要：我们考察child组件，发现它跟一般的组件有以下两点不同： 多了一个events字段，里面定义了许多事件及其对应的回调方法。 methods方法中调用了$dispatch和$broadcast，用来触发及传播事件。 事件初始化 我们需要将事件及其回调函数注册到child实例上，这样当其他组件（无论是
阅读全文
摘要：全文有5个部分组成 1.JavaScript 引擎工作流程：介绍 JavaScript 引擎的处理流水线，这一部分会涉及到解释器／编译器的内容，且会分点介绍不同引擎间的差别与共同点； 2.JavaScript 对象模型； 3.属性访问的优化：通过 Shapes、Transistion 链与树、ICs
阅读全文
摘要：组件 第一步是将 UI 分解成多个组件。例如，我们可以这样来拆分房子: 现在来编码！ House: <div> <Roof /> // 房顶 <Wall /> // 墙 <Window /> // 窗 <Door /> // 门 </div> 等一下，怎么看起来这么像 HTML ？没错！React
阅读全文
摘要：数据劫持，也叫数据代理。 所谓数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。另外还有已经被废弃的 Object.observe()，
阅读全文
摘要：JSX的背后 这个过程一般在前端会称为“转译”，但其实“汇编”将是一个更精确的术语。 React开发人员敦促你在编写组件时使用一种称为JSX的语法，混合了HTML和JavaScript。但浏览器对JSX及其语法毫无头绪，浏览器只能理解纯碎的JavaScript，所以JSX必须转换成JavaScrip
阅读全文
摘要：作为当下最流行的 JavaScript 编译器，Babel 替我们转译 ECMAScript 语法，而我们不用再担心如何进行向后兼容。 零、前言 虽然在 JavaScript 中对象无处不在，但这门语言并不使用经典的基于类的继承方式，而是依赖原型，至少在 ES6 之前是这样的。当时，假设我们要定义一
阅读全文
摘要：pushState/replaceState/popstate 解析 HTML5提供了对history栈中内容的操作。通过history.pushState/replaceState实现添加地址到history栈中。 pushState/replaceState() 方法 pushState() 需
阅读全文
