blog
blog copied to clipboard
huruji
红日初升，其道大光:sun_with_face::house_with_garden:请star或watch，不要fork
 ## webpack 的 Hooks Webpack 的 Compiler 对象主要有以下 Hooks： + entryOption webpack 处理完 entry 配置项后触发，这是一个同步串行的 SyncBailHook 钩子，只要监听函数有一个函数的返回值不为undefined，则直接跳过剩下逻辑 无参数 + afterPlugins 处理完初始化插件后触发，这是一个同步的 SyncHook 钩子，不关心返回值 参数是 compiler 对象 + afterResolvers Resolve...
最近想要了解一下 webpack 的 plugin 怎么写，于是各种文章就会告诉你想要写一个 plugin 那么你首先需要了解一下 Compilation、compiler 对象，然后 plugin 插件其实是一个含有 apply 方法的 class，而 apply 方法的参数就是 compiler 对象，compiler 对象里有各种钩子，这些钩子分别会在 webpack 的运行过程中触发，而实现这些钩子的核心是 [tapable](https://github.com/webpack/tapable) ，这个 tapable 还算好理解，可以把它看做是一个更高级的 发布-订阅。然后我想实现以下 done 这个 hook 的功能，你就会发现这个...
## [user-select](https://css-tricks.com/almanac/properties/u/user-select/) 是否允许用户选中文字，这在 **防止用户copy内容** 的时候非常有用，值有以下： - **none** ： 不允许用户选中文字 - **text**：允许用户选中文字，默认 - **all**：一并选中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选 ## 自定义scrollbar webkit浏览器很早开始就支持自定义滚动条，利用提供的伪元素即可实现，scrollbar提供的部分有 - **::-webkit-scrollbar** { /* 1 */ } // 滚动条整体部分 - **::-webkit-scrollbar-button** { /* 2...
 minipack是一个非常简单的通过babel实现的、旨在讲述打包工具原理的仓库，这个仓库本身已经包含了详细的注释。 大致过程可以梳理如下，从主入口中将代码转换为AST后找出主入口的依赖关系，通过这个依赖关系可以构建依赖图，最后通过依赖图转化为类commonjs模块的代码，打包在一块。 ### babylon babylon是babel的js代码解析器，目前已经babel官方已经将仓库迁移到了@babel域下，改名为babel-parser，可以通过以下命令安装 ```bash npm install -D @babel/parser ``` 使用这个可以生成js代码的AST ```js const babelParser = require('@babel/parser'); const fs = require('fs'); const content = fs.readFileSync('./index.js'); babelParser.parse(content, { sourceType: 'module'...
 先来看看打包一个模块，打包之后的内容如下： ```js /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/...
 编写babel插件时最常使用的是库 `@babel/core` 、`@babel/types` babel插件需要返回一个function，function内返回visitor。 ```js module.exports = function() { return { visitor: { // plugin code } } } ``` visitor里我们可以编写针对各类 AST type 的处理方式，从而达到修改AST的效果，关于 babel 转换得到的各类 AST 究竟有哪些类型，可以在 [这里](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)...
* [1.Object.create(null)与{}的区别](#1) * [2.``~~``的作用](#2) * [3.JavaScript对象与JSON的区别](#3) * [4. `javascript:void 0`到底意味着什么 ](#4) * [5.javascript中语句和表达式的区别 ](#5) 1.Object.create(null)与{}的区别 Object.create(null)创建的对象没有继承任何原型，也就是说他的原型链没有上一层，而{}显然是Object的实例   我们要知道Object.create()方法的第一个参数是**新建对象的原型对象**呀！！！ Object.create(null)显然比{}的好处就是不用考虑和原型对象的属性重名的问题 > Object.create(null)常常会在很多流行的开源项目中出现，我初次见到的时候就开始一脸懵逼了，完全不明白这有啥意义，等我明白之后不得不承认这就是大神呀 2.``~~``的作用 首先``~``的作用是取反，使用两次就是取回原值，但是如果是小数的话，就是取整了，因为``~``取反时面对小数时会先取整，而且``~~``取整是所有取整方法中最快的方法 * [格式化](#格式化) * [时间差](#时间差) * [Unix...
 开发中，链式取值是非常正常的操作，如： ```js res.data.goods.list[0].price ``` 但是对于这种操作报出类似于`Uncaught TypeError: Cannot read property 'goods' of undefined` 这种错误也是再正常不过了，如果说是res数据是自己定义，那么可控性会大一些，但是如果这些数据来自于不同端（如前后端），那么这种数据对于我们来说我们都是不可控的，因此为了保证程序能够正常运行下去，我们需要对此校验： ```js if (res.data.goods.list[0] && res.data.goods.list[0].price) { // your code } ``` 如果再精细一点，对于所有都进行校验的话，就会像这样: ```js if (res &&...
 ## 灰度滤镜 将颜色的RGB设置为相同的值即可使得图片为灰色，一般处理方法有： 1、取三种颜色的平均值 2、取三种颜色的最大值（最小值） 3、加权平均值：0.3*R + 0.59*G + 0.11*B ```js for(var i = 0; i < data.length; i+=4) { var grey = (data[i] + data[i+1] + data[i+2]) /...