lance10030
lance10030
[TOC] # webpack原理与实践（二）：实现一个webpack插件 ## 关于 `loader` 和 `plugin` 1. `webpack` 本身只能处理`js`文件。那如何处理如 `css`、`内联图像` 、 `html` 等这些文件了呢。这就需要用 `loader` 来进行转化。 2. 通常 `loader` 功能比较单一，只专注于语言的转化。但是我们会有像压缩，分离文件这样的需求，这就需要通过插件来实现 ## 实现一个插件 插件本身为一个构造函数，除了自己定义的方法外，会有一个 `apply` 方法 , `apply` 方法中传入全局唯一的 `compiler`...
# `webpack` 原理与实践（一）：打包流程 ## 写在前面的话 在阅读 `webpack4.x` 源码的过程中，参考了《深入浅出webpack》一书和众多大神的文章，结合自己的一点体会，总结如下。 ## 总述 `webpack` 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。 `webpack` 通过 `Tapable` 来组织这条复杂的生产线。 `webpack` 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 `webpack` 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 --吴浩麟《深入浅出webpack》 ## 核心的概念 `entry`，`loader`，`plugin`，`module`，`chunk` 不论文档还是相关的介绍都很多了，不赘述，有疑问的移步文档。 ## 构建流程 `webpack`...
# 骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. ## 关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。 借个图举例如下:  ## 两类用途 简介中作了关于用途的说明,但是仍然可以继续细分: 1. 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用. 2. 作为首屏渲染的优化. ### 第一类用途 第一类用途需要自己编写骨架屏,推荐两个成熟方便定制的svg组件定制为骨架屏的方案 - [react-content-loader](https://github.com/danilowoz/react-content-loader) - [vue-content-loader](https://github.com/egoist/vue-content-loader) ### 作为首屏渲染(自动化方案) 该方案是饿了么在骨架屏的实践中总结出的一套方案: - 骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面. - 原理相关[eleme骨架屏插件实现原理](https://github.com/Jocs/jocs.github.io/issues/22)...
# 结合`Vue`源码谈谈发布-订阅模式 最近的工作学习中接触到了发布-订阅模式。该思想编程中的应用也是很广泛的, 例如在 `Vue`中也大量使用了该设计模式,所以会结合Vue的源码和大家谈谈自己粗浅的理解. ## 发布订阅模式主要包含哪些内容呢? 1. 发布函数，发布的时候执行相应的回调 2. 订阅函数，添加订阅者,传入发布时要执行的函数,可能会携额外参数 3. 一个缓存订阅者以及订阅者的回调函数的列表 4. 取消订阅(需要分情况讨论) 这么看下来,其实就像 `JavaScript` 中的事件模型,我们在DOM节点上绑定事件函数,触发的时候执行就是应用了发布-订阅模式. ## 我们先按照上面的内容自己实现一个 `Observer` 对象如下: ``` //用于存储订阅的事件名称以及回调函数列表的键值对 function Observer() { this.cache = {}...
# `javaScript` 中的垃圾回收和内存泄漏 之前接触的js的内存管理方面的内容一直比较零散,最近在这一块做了一些系统的学习.学习过程中的一些总结在这里分享给大家.欢迎批评指正,共同学习,共同进步. 在一部分语言中是提供了内存管理的接口的,例如C语言中的 `molloc()`和 `free()`; 而在 `JavaScript` 中会自动进行内存的分配和回收的,因为**自动**这两个字,就让很多的开发者认为我们是不需要去关心内存方面的问题,当然,这是一种错误的看法.关注内存的管理,避免内存的泄漏也是性能优化重要的一项. ## 变量的生命周期 `Javascript` 变量的生命周期要分开来看,对于全局变量,他的生命周期会持续到页面关闭(这就涉及到了后面要总结的内存泄漏的一种方式).而对于局部变量,在所在的函数的代码执行之后,局部变量的生命周期结束,他所占用的内存会通过垃圾回收机制释放(即垃圾回收). ## 垃圾回收机制 垃圾回收通常有两种方式来实现: ### 引用计数 这种算法在`MDN`文档中被称为最"天真"的垃圾回收算法;核心原理是: 判断一个对象是否要被回收就是要看是否还有引用指向它,如果是"零引用",那么就回收.说这种算法天真,是因为它存在着较为严重的缺陷---循环引用: ``` function f(){ var o = {}; var o2...
# `chrome devtools` 官方文档阅读笔记(十分钟上手performance面板的基本使用) 本文参考自 `chrome` 的官方文档: [传送门](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/?hl=zh-cn)(需要科学上网) chrome 的开发者工具中提供了很多高效工具方便我们对页面进行性能分析.之前自己只用着一些基本的功能, 最近详细的过了一下官方文档,特别是 `performance` 面板(大部分都是之前的Timeline面板) 的使用(需要相对新一些的chrome浏览器版本). Tip: 本文旨在分享给大家使用 `chrome` 进行性能分析基本方法, 在具体性能问题产生的原因的点上不会太过深入 ## 准备工作 首先,开始分析之前是一些准备工作: 1. 进入隐身模式,这是为了避免浏览器插件带来的干扰 2. 打开 `performance` 选项卡 3. 点击最右边的设置的小齿轮图标,如果是移动端项目,打开...
# 异常处理，"try..catch" [译] [原文地址](https://javascript.info/try-catch) 不管你多么的精通编程，有时我们的脚本总还是会有一些错误。可能是因为我们的编写出错，或是与预期不同的用户输入，或是错误的的服务端返回或者是其他总总不同的原因。 通常，一段代码会在出错的时候“死掉”（停止执行）并在控制台将异常打印出来。 但是有一种更为合理的语法结构 `try..catch`，它会在捕捉到异常的同时不会使得代码停止执行而是可以做一些更为合理的操作。 ## "try..catch" 语法 `try..catch` 结构由两部分组成：`try` 和` catch`： ```js try { // 代码... } catch (err) { // 异常处理 } ``` 它按照以下步骤执行： 1....