潘绳杰的技术博客

2019-08-08发表生活19 分钟读完 (大约2796个字)

2019日本京都奈良大阪自由行游记

本次旅游了日本的京都、奈良、大阪三个地方，共花了8天7夜的时间，对本次的旅行记录一下回顾和感想，其中分为三个部分来描述，游记、攻略和感想。

游记

关于这次的旅行，是年初的时候就计划好的，关于地点是台北和日本京都选择其一的，最终选择了日本，理由是先感受一下日本的文化和风情；关于时间，起初计划的时间是9月份的，正好这段时间离职了，老婆也正好也有时间，就排上这次旅行。

总的图片集合可以访问日本自由行图片集合

2019-08-04发表前端开发21 分钟读完 (大约3078个字)

通过从零实现redux来学习redux的原理

理解Redux的原理，一个比较好的方式就是自己实现一个Redux，这样便知道它背后的原理以及对应的API。

这里主要是参考Learn Redux by Building Redux from Scratch
这篇文章，并且使用意译，并非完全按照原文翻译，不过不影响对redux原理的理解，跟着文章的思路实现一遍redux就能了解背后的基本思路。

欢迎访问博客原文通过从零实现redux来学习redux

概念

Redux的核心概念:

Redux is a predictable state container for JavaScript apps.

也就是说Redux是JavaScript应用中作为一个可预测的状态容器的存在。

Redux通常用于保存应用状态，应用状态由两部分输入组成:

从服务端异步请求的数据
用户在UI上的交互

Redux在store（仓库）中管理应用状态。状态本身只是一个纯粹的JavaScript对象。仓库另外提供方法来
更新状态和读取状态。

Redux的核心在于基于观察者模式下的发布订阅模式，有点类似在JS中的事件驱动架构。在Redux中，当用
户和UI交互时，会派发（dispatch）一个action（也就是发布）。action的概念不需要过度考虑，它
仅仅只是一个纯JS对象，包含一个type作为唯一键值和一个payload负载数据。

使用action，状态可以根据接收到的type和payload进行更新。组件可以订阅状态的变化，并基于
新的状态树更新UI。

一个数据流的简单表示如下:

用户交互发布一个action -> reducer更新状态 -> 订阅组件基于新状态更新UI

基于这个概念，Redux有3个核心的原则:

单一数据源。整个UI的状态只有一个对象驱动。
状态是只读的。视图和异步回调均不能直接改写状态。状态只有在触发一个纯JS对象的action作为
reducer的参数来进行修改。
改动是有纯函数执行的。reducer函数接收前一个状态（也是纯对象），并基于前一个状态和action
创建一个新的状态。你只能返回一个新的对象，永远不要修改当前的状态。

实现

Redux是围绕着store为核心的。store是一个包含状态、更新方法(dispatch())和读取方
法(subscribe()/getState())的JavaScript对象。还有listeners（监听器）用于组件订阅状态
变化执行的函数。

store形式如下:

const store = {
    state: {}, // 状态是一个对象
    listners: [], // 监听器是一个函数数组
    dispatch: () => {}, // dispatch是一个函数
    subscribe: () => {}, // subscribe是一个函数
    getState: () => {}, // getState是一个函数
};

为了使用这个仓库对象来管理状态，我们要够一个createStore()函数，代码如下:

const createStore = (reducer, initialState) => {
    const store = {};
    store.state = initialState;
    store.listners = [];
    
    store.getState = () => store.state;
    
    store.subscribe = (listner) => {
        store.listners.push(listener);
    };
    
    store.dispatch = (action) => {
        store.state = reducer(store.state, action);
        store.listeners.forEach(listener => listener());
    };
    
    return store;
};

createStore函数接收两个参数，一个是reducer和一个initialState。reducer函数会在后续
详细介绍，现在只要知道这是一个指示状态应该如何更新的函数。

createStore函数开始于创建一个store对象。然后通过store.state = initialState进行初
始化，如果开发者没有提供则值会是undefined。state.listeners会被初始化为空数组。

store中定义的第一个函数是getState()。当调用时只是返回状态，
store.getState = () => store.state。

我们允许UI订阅(subscribe)状态的变化。订阅实际上是传递一个函数给subscribe方法，并且这个
函数作为监听器会被添加到监听器数组中。typeof listener === 'function'的结果是true。

在每一个状态变化的时候，我们会遍历所有的监听器函数数组，并逐个执行。

1	store.listeners.forEach(listener => listener());

接下来，定义了dispatch函数。dispatch函数是当用户和UI交互时，组件进行调用的。dispatch接收
一个单一的action对象参数。这个action应该要完全描述用户接收到的交互。action和当前状态一起，
会被传递到reducer函数，并且返回一个新的状态。

在新的状态被reducer创建后，监听器数组会被遍历，并且每个函数会执行。通常，getState函数
在监听器函数内部会被调用，因为监听的目的是响应状态变化。

注意到数据流向是一个非常线性和同步的过程。监听器函数添加到一个单独的监听器数组中。当用户
和应用交互时，会产生一个用于dispatch的action。这个action会创建一个可预测和独立的状态改变。
接着这个监听器数组被遍历，让每个监听器函数被调用。

这个过程是一个单向的数据流。只有一个途径在应用中创建和响应数据变化。没有什么特别的技巧发生，
只是一步一步针对交互并遵循明确统一模式的路径。

Reducer函数

reducer是一个接收state和action的函数，并返回新的状态。形式如下:

const reducer = (prevState, action) => {
    let nextState = {}; // 一个表示新状态的对象
    
    // ...
    // 使用前一个状态和action创建新状态的代码
    // ...
    
    return nextState;
};

这里的prevState, nextState和action都是JavaScript对象。

让我们详细看一下action对象来理解它是如何用于更新状态的。我们知道一个action会包含
一个唯一的字符串type来标识由用户触发的交互。

例如，假设你使用Redux来创建一个简单的todo list应用。当用户点击提交按钮来添加项目到列表中时，
将会触发一个带有ADD_TODO类型的action。这是一个既对人类可读和理解，并且对Redux关于aciton目的
也是清晰的指示。当添加一个项目时，它将会包含一个text的todo内容作为负载(payload)。因此，
添加一个todo到列表中，可以通过以下的action对象来完全表示:

const todoAction = {
    type: 'ADD_TODO',
    text: 'Get milk from the store',
};

现在我们可以构建一个reducer来支撑一个todo应用。

const getInitialState = () => ({
    todoList: []
});

const reducer = (prevState = getInitialState(), action) => {
    switch (action.type) {
        case 'ADD_TODO':
            const nextState = {
                todoList: [
                    ...prevState.todoList,
                    action.text,
                ],
            };
            
            return nextState;
        default:
            return prevState;
    };
};

// console.log(store.getState()) = { todoList: [] };
//
// store.dispatch({
//  type: 'ADD_TODO',
//  text: 'Get milk from the store',
//});
//
// console.log(store.getState()) => { todoList: ['Get milk from the store'] }

注意每次reducer被调用的时候我们都会创建一个新的对象。我们使用前一次的状态，但是创建了一个
完整全新的状态。这是另一个非常重要的原则能够让redux可预测。通过将状态分割成离散的，开发者
可以精确的指导应用中会发生什么。这里只要了解根据状态的变化来重新渲染UI的特定部分即可。

你通常会看到在Redux中使用switch语句。这是匹配字符串比较方便的一个方法，在我们的例子中，
action的type为例，对应更新状态的代码块。这个使用if...else语句来写没有差别，如下:

if (action.type === 'ADD_TODO') {
    const nextState = {
        todoList: [...prevState.todoList, action.text],
    }
    
    return nextState;
} else {
    return prevState;
}

Redux对于reducer中的内容实际上是无感知的。这是一个开发者定义的函数，用来创建一个新的状态。
实际上，用户控制了几乎所有——reducer，被使用的action，通过订阅被执行的监听器函数。Redux就
像一个夹层将这些内容进行联系起来，并提供一个通用的接口来和状态进行交互。

如果你之前了解过combineReducers函数，这个只是一个用来允许你在state对象中创建隔离的
键值。主要为了让代码更整洁。详细的内容可以查看官方的资料。

构建一个简单应用

上面已经讲了redux的全部核心内容，接下来可以用前面的实现来构建一个简单的计数器应用。

我们会创建一个HTML文档，并用给一个<div>来包含从我们的redux仓库中的count值。并且放置
一个script标签，并获取id="count"的DOM节点。

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"><title></title></head>
    <body>
        <div>
            Random Count: <span id="count"></span>
        </div>
    </body>
    <script>
        const counterNode = document.getElementById('count');
    </script>
</html>

在<script>的计数器下方，我们要把createStore函数贴进来。在这个函数下面，我们会创建reducer。
这个reducer将会查找一个type为'COUNT'的action，并将action的负载中的count添加到原先保存在
仓库中的count。

const getInitialState = () => {
    return {
        count: 0,
    };
};

const reducer = (state = getInitialState(), action) => {
    switch (action.type) {
        case 'COUNT':
            const nextState = {
                count: state.count + action.payload.count,
            };
            
            return nextState;
        default:
            return state;
    }
};

现在我们拥有一个reducer，我们可以创建仓库。使用这个新创建的仓库，我们可以订阅仓库中的变化。
每一次状态变化，我们可以从状态中读取count并写到DOM中。

const store = crateStore(reducer);

store.subscribe(() => {
    const state = store.getState();
    const count = state.count;
    counterNode.innerHTML = count;
});

现在我们的应用正在监听状态的变化，让我们创建一个简单的事件监听器，来增加count。事件监听器
将会dispatch一个action，用于发送一个1-10的随机数作为count到reducer中去相加。

document.addEventListener('click', () => {
    store.dispatch({
        type: 'COUNT',
        payload: {
            count: Math.ceil(Math.random() * 10),
        },
    });
});

最终，我们会dispatch一个空的action来初始化状态。由于没有action的类型，将会执行default代码
块，并从getInittialState()中返回的值来生成一个状态对象。

1	store.dispatch({}); // 设置初始状态

将所有的代码放在一起，就有了以下的应用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-u">
        <title></title>
    </head>
    <body>
        <div>Random Count: <span id="count"></span></div>
        <script>
            const counterNode = document.getElementById('count');
            
            const createStore = (reducer, initialState) => {
                const store = {};
                store.state = initialState;
                store.listeners = [];
                
                store.getState = () => store.state;
                
                store.subscribe = listener => {
                    store.listeners.push(listener);
                };
                
                store.dispatch = action => {
                    console.log('> Action', action);
                    store.state = reducer(store.state, action);
                    store.listeners.forEach(listener => listener());
                };
                
                return store;
            };
            
            const getInitialState = () => {
                return {
                    count: 0,
                };
            };
            
            const reducer = (state = getInitialState(), action) => {
                switch (action.type) {
                    case 'COUNT':
                        const nextState = {
                            count: state.count + action.payload.count,
                        };
                        
                        return nextState;
                    default:
                        return state;
                }
            };
            
            const store = createStore(reducer);
            
            store.subscribe(() => {
                const state = store.getState();
                const count = state.count;
                counterNode.innerHTML = count;
            });
            
            // 一个简单的事件用来dispatch变化
            document.addEventListener('click', () => {
                console.log('---- Previous state', store.getState());
                store.dispatch({
                    type: 'COUNT',
                    payload: {
                        count: Math.ceil(Math.random() * 10),
                    },
                });
                console.log('++++ New State', store.getState());
            });
            
            store.dispatch({}); // 设置初始化状态
        </script>
    </body>
</html>

最终代码可以从我的代码仓库下载，建议个人自己手动敲一遍，实践一遍加深理解。

代码运行后，通过每次点击页面，你可以看到页面上的count会增加一个随机数，并且在控制台会
打印状态的变化。

总结

通过上述的一个过程，你可以理解Redux的实现，并且将Redux使用在一个应用中。当然，上述的这个
实现还不能用在生产上，因为缺少边界考虑和优化。

如果看了一遍没有理解，也没有关系，重新从发布订阅开始看，结合实践，终会理解。

其他的材料可以参考redux作者Dan Abramov的视频教程。关于什么时候和
为什么要使用redux进行状态管理，可以看Dan的这篇文章，比较redux和React内部的状态管理。

参考

Learn Redux by Building Redux from Scratch

2019-07-22发表前端开发6 分钟读完 (大约885个字)

DOM实战基础

DOM的概念

Document object model
Tree of nodes/elements created by the browser
JavaScript can be used to read/write/manipulate to the DOM
Object Oriented Representation
文档对象模型
由浏览器创建的节点或者元素的一颗树结构
JavaScript可以对DOM进行读写操作
基于对象的表示

DOM常用的API和属性

DOM的基础属性

document.title: 标题
document.head: head节点
document.body: body节点
document.all: 所有节点的集合
document.forms: 所有表单节点集合
document.links: 所有链接节点集合
document.images: 所有图片节点集合
document.getElementById(): 通过id获取元素
document.getElementsByClassName(): 通过类名获取元素集合
document.getElementsByTagName(): 通过标签名获取元素集合
document.querySelector(): 类似于jQuery的$选择器函数，可以支持id、类名、标签名等，仅支持选择第一个匹配的元素
document.querySelectorAll(): 支持选择一个集合

DOM的遍历

Element.parentNode: 父节点
Element.parentElement: 父元素，这个属性与parentNode大多数情况是相同的，除了父元素为Document或者DocumentFragment的情况
Element.childNodes: 子节点集合
Element.firstChild: 第一个子节点
Element.firstElementChild: 第一个元素子节点，这个与firstChild节点的区别在于会过滤空格、换行符等造成的节点
Element.lastChild: 最后一个子节点
Element.lastElementChild: 最后一个元素子节点，同样是过滤空格、换行符等造成的节点
Element.nextSibling: 下一个兄弟节点
Element.nextElementSibling: 下一个元素兄弟节点，同样是过滤空格、换行符等造成的节点
Element.previousSibling: 上一个兄弟节点
Element.previousElementSibling: 上一个元素兄弟节点，同样是过滤空格、换行符等造成的节点

DOM元素的创建

document.createElement(): 创建元素
Element.className: 设置类属性
Element.id: 设置id属性
Element.setAttribute(): 设置属性
document.createTextNode(): 创建文本节点
Element.appendChild(): 追加子节点
Element.insertBefore(newNode, referenceNode): 在引用节点前添加新的节点

DOM事件

Element.addEventListener(): 添加事件添加
Event.target: 事件目标
Event.target.id, Event.target.className, Event.target.classList: 事件目标的id, class, class列表
Event.type: 事件类型
Event.clientX: 点击位置距离视口的横坐标
Event.clientY: 点击位置距离视口的纵坐标
Event.offsetX: 点击位置距离元素的横坐标
Event.offsetY: 点击位置距离元素的纵坐标
Event.altKey: 触发事件时是否按下Alt键
Event.ctrlKey: 触发事件时是否按下Ctrl键
Event.shiftKey: 触发事件时是否按下Shift键

DOM事件类型

click: 点击事件
dbclick: 双击事件
mousedown: 鼠标按下
mouseup: 鼠标松开
mouseenter: 鼠标进入目标区域，不会冒泡并且，在后代元素上移动到当前元素不会触发(MDN参考:Similar to mouseover, it differs in that it doesn’t bubble and that it isn’t sent when the pointer is moved from one of its descendants’ physical space to its own physical space.)
mouseleave: 鼠标离开目标区域并包括所有子元素，不会冒泡(MDN参考: Similar to mouseout, it differs in that it doesn’t bubble and that it isn’t sent until the pointer has moved from its physical space and the one of all its descendants.)
mouseover: 鼠标经过目标区域，会冒泡
mouseout: 鼠标离开目标区域或其中的子元素
mousemove: 鼠标移动
keydown: 键盘按键按下
keyup: 键盘按键抬起
keypress: 键盘按键按下后触发
focus: 获得焦点触发
blur: 丢失焦点触发
cut: 剪切时触发
paste: 粘贴时触发
input: 输入时触发
change: 内容改变时触发

2019-07-16发表前端开发17 分钟读完 (大约2605个字)

项目开发中团队规范的那些事

项目开发中团队规范的那些事，记录一下项目中可以通过工具来约定和处理的规范

欢迎访问个人博客-项目开发中团队规范的那些事

editorconfig的使用
jsdoc的使用
.gitignore的使用
eslint的使用
prettier的使用

editorconfig的使用

你是否有遇到过多人协作的项目中，大家的缩进风格不一样，有人用两个空格，有人用4个空格，也有人用tab缩进，而感到烦恼的。editorconfig这个开源项目就是为此而生的。

官方的介绍如下：

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

使用思路：

通过一个配置文件，让不同的编辑器或者IDE自动识别缩进、字符编码格式等风格并保持统一。目前市面上绝大部分的编辑器和IDE都已经支持了，你使用的编辑器是否原生支持还是要安装插件，可以去官网上看一眼。

.edittorconfig文件配置如下:

# 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件，否则会往上一层目录继续查找
root = true

# 对所有文件生效
[*]
# 编码格式，支持latin1、utf-8、utf-8-bom、utf-16be和utf-16le，通常使用utf-8
charset = utf-8
# 缩进类型, 支持space 空格, tab 制表符
indent_style = space
# 缩进长度，支持整数 - 缩进的长度, tab - 使用tab_width指定的值
indent_size = 2
# 换行符，支持 lf - (常用,*nux系统), crlf - windows, cr - <=MacOS9
end_of_line = lf
# 保存文件时是否在文件最后插入一个空行, 支持 true - 是, false - 否
insert_final_newline = true
# 是否去除行尾的空格, 支持 true - 是, false - 否
trim_trailing_whitespace = true

# 对后缀名为 md 的文件生效
[*.md]
trim_trailing_whitespace = false

jsdoc的使用

平时写js代码的时候，你是否只是随意写个// xxxx就完事了，对于不需要输出文档的代码也许还好，如果有输出文档的需求，那就头大了。不过团队中拥有一套一致的注释规范，并且在必要的时候还可以输出作为文档，不管是对于后续的新人以及维护都是有益的。

这里要使用的jsdoc文档工具就是这样的一个存在，既有一套注释的规范，又可以支持输出为静态页面的文档。

使用思路:

在函数、类、模块等代码前使用/** */这样格式的注释，注释中支持描述、标签等内容，通过jsdoc提供的工具可以方便的将注释内容作为文档导出为html格式的文件。

jsdoc注释规范

常用的注释格式如下:

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {

}

/** Class representing a point. */
class Point {
    /**
     * Create a point.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     */
    constructor(x, y) {
        // ...
    }

    /**
     * Get the x value.
     * @return {number} The x value.
     */
    getX() {
        // ...
    }

    /**
     * Get the y value.
     * @return {number} The y value.
     */
    getY() {
        // ...
    }

    /**
     * Convert a string containing two comma-separated numbers into a point.
     * @param {string} str - The string containing two comma-separated numbers.
     * @return {Point} A Point object.
     */
    static fromString(str) {
        // ...
    }
}

注释中支持块级标签和行内标签，行内标签是指包含在块级标签内的标签内容，常用的块级标签如下:

@author 该类/方法的作者。
@class 表示这是一个类。
@function/@method 表示这是一个函数/方法(这是同义词)。
@private 表示该类/方法是私有的，JSDOC 不会为其生成文档。
@name 该类/方法的名字。
@description 该类/方法的描述，可省略直接在开头写描述内容
@param 该类/方法的参数，可重复定义。
@return 该类/方法的返回类型。
@link 行内标签，创建超链接，生成文档时可以为其链接到其他部分。
@example 创建例子。

jsdoc文档输出

使用npm安装对应的jsdoc工具，可以全局安装或者局部安装

1	npm i jsodc -g

在项目根目录下创建一个配置文件conf.json:

默认的配置如下:

{
    "plugins": [],
    "recurseDepth": 10,
    "source": {
        "includePattern": ".+\\.js(doc|x)?$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "sourceType": "module",
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc","closure"]
    },
    "templates": {
        "cleverLinks": false,
        "monospaceLinks": false
    }
}

常用的配置如下:

{
  "source": {
    "include": [ "src/" ],
    "exclude": [ "src/libs" ]
  },
  "opts": {
    "template": "node_modules/docdash",
    "encoding": "utf8",
    "destination": "./docs/",
    "recurse": true,
    "verbose": true
  }
}

source 表示传递给 JSDOC 的文件
source.include 表示 JSDOC 需要扫描哪些文件
source.exclude 表示 JSDOC 需要排除哪些文件
opts 表示传递给 JSDOC 的选项
opts.template 生成文档的模板，默认是 templates/default
opts.encoding 读取文件的编码，默认是 utf8
opts.destination 生成文档的路径，默认是 ./out/
opts.recurse 运行时是否递归子目录
opts.verbose 运行时是否输出详细信息，默认是 false

然后在命令行中执行 jsdoc -c /path/to/conf.json 即可在根目录下生成一个包含html的文档目录。

.gitignore的使用

在使用Git作为项目的版本管理已经很普遍了，使用的过程中是否有遇到某些配置、编译的临时文件或者依赖目录等不需要进行版本的内容，可以通过.gitignore进行忽略，将对应的目录或文件写入配置文件后，git就不会将对应的内容纳入版本管理。

需要注意的是，已经被纳入版本管理的内容，不受这个配置的影响。

使用思路:

在项目根目录下创建一个.gitignore文件，并将要忽略纳入版本管理的内容写入即可，每一行内容支持模式匹配。

create-react-app中使用的配置文件:

.idea/
.vscode/
node_modules/
build
.DS_Store
*.tgz
my-app*
template/src/__tests__/__snapshots__/
lerna-debug.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.changelog
.npm/

vue-cli中使用的配置文件:

node_modules
.DS_Store
design
*.log
packages/test
dist
temp
.vuerc
.version
.versions
.changelog

eslint的使用

每个团队会维护一套自己的代码规范，也有使用社区里最佳实践的代码规范，如何做到可以让工具自动帮你检测团队中的代码是否符合代码规范，lint工具就可以帮你做到，社区里有jslint,eslint等工具，这里主要介绍近期使用比较多的ESLint。

ESLint是一个静态代码检测工具，是对JavaScript和JSX可插拔的检测工具，由Nicholas C. Zakas开发。

使用思路:

创建一个配置文件，通过编辑器插件或者eslint工具对代码进行静态检测并提示错误。

安装eslint

可以全局安装或者项目中安装使用

1	npm i eslint -g

然后生成配置文件

1	eslint --init

会在相应目录下生成一个eslint默认配置文件

最后，运行lint

1	eslint /path/to/file.js

通常可以package.json的脚本中进行配置

"scripts": {
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
  }

日常可以通过npm run lint来进行使用。

另外，也可以通过git的hook在代码提交前自动运行lint，这里不做说明，具体配置可以搜索相应文章。

配置

常用配置文件如下:

配置文件支持js, json, yaml格式，这里以.eslintrc.js为例

// .eslintrc.js 
module.exports = {
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"],
    "curly": "warn"
  }
};

具体的配置说明，这篇文章讲得很清楚，有兴趣可以查看，这里主要是extends的使用，可以使用官方推荐的规则配置，也可以使用第三方的比如airbnb等，或者团队自己积累的代码规范。

prettier的使用

Prettier是一款对代码格式进行美化的工具，让你在代码评审时减少对代码格式排版上的时间浪费。

官方的示例了解一下:

原始代码:

1	foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

经过Prettier格式化后:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

使用思路:

通过编辑器插件或者git hook来实现对代码的自动格式化，从而让代码排版变得整齐。

安装及使用

将prettier添加到项目中

1	npm install prettier --save-dev --save-exact

直接使用

1	npx prettier --write src/index.js

增加git hook

1	npm install pretty-quick husky --save-dev

在package.json文件中增加以下配置:

1	{ "husky": { "hooks": { "pre-commit": "pretty-quick --staged" } } }

配置

在项目根目录下创建一个.prettierrc配置文件即可

{
  "trailingComma": "es5",
  "singleQuote": true,
  "semi": true
}

如果要配合编辑器进行使用，可以查找对应编辑的插件并进行配置。

需要说明的是prettier和editorconfig其实有重复的，两者可以选一个使用。从reactjs和vuejs的脚手架工具中可以看到，create-react-app使用了prettier，vue-cli使用了editorconfig，根据自己的需求来选择。

参考

2019-07-14发表前端开发9 分钟读完 (大约1357个字)

CSS三栏布局方案

平时开发或者面试的时候，经常会遇到这样的场景，实现一个三栏布局，具体要求如下：

高度为100px，左右栏宽度固定为300px，中间栏宽度自适应。

有多种布局方案可以实现，这里一一探索。

浮动布局方案

实现思路：

通过让左右两栏固定宽度和浮动，并设置中间栏的左右外边距实现三栏自适应

这里还有一种实现思路，中间栏创建一个BFC同样可以实现自适应，原理是浮动不会影响BFC内的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-浮动布局方案</title>
  <style>
    .left, .right, .main {
      height: 100px;
    }
    .left {
      width: 300px;
      float: left;
      background: red;
    }
    .right {
      width: 300px;
      float: right;
      background: blue;
    }
    .main {
      margin-left: 300px;
      margin-right: 300px;
      background: yellow;
    }
  </style>
</head>
<body>
  <article>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <main class="main">main</main>
  </article>
</body>
</html>

缺点：

内容展现顺序与DOM结构不一致，主体内容后加载，一定程度影响用户体验
当宽度缩小到不足以显示三栏时，右侧栏会被挤到下方

兼容性：

PC端支持IE6+, Firefox 2+, Chrome 1+
移动端支持iOS Safari 1.0，Android browser 1.0

绝对定位布局方案

实现思路:

容器设置为相对定位，左右两栏分别用绝对定位，中间栏增加左右外边距实现自适应

还有一种思路，左右两栏分别绝对定位在两侧，中间栏同样使用绝对定位，并设置左右的距离为300px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-绝对定位方案</title>
  <style>
    .container {
      position: relative;
    }
    .main, .left, .right {
      height: 100px;
    }
    .main {
      margin-left: 300px;
      margin-right: 300px;
      background: yellow;
    }
    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      background: red;
    }
    .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <main class="main">main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点：

父元素必须要定位（使用非static的定位方式）
宽度缩小到无法显示主体内容时，主体内容会被覆盖无法显示

优点：

内容可以优先加载

兼容性：

PC端支持IE6+, Firefox 2+, Chrome 1+
移动端未知

Flex布局方案

实现思路：

设置容器为flex，然后左右栏设置固定宽度不可伸缩，中间栏设置为自动伸缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-弹性盒布局方案</title>
  <style>
    .container {
      display: flex;
    }
    .left, .main, .right {
      height: 100px;
    }
    .left {
      flex: 0 0 300px;
      background: red;
    }
    .main {
      flex: 1 1 auto;
      background: yellow;
    }
    .right {
      flex: 0 0 300px;
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点：

无法兼容低版本的浏览器

优点：

代码简洁，DOM结构清晰
主流的实现方式

兼容性：

PC端支持IE10及以上、Edge 12,chrome 21,firefox 28,safari 6.1（IE10为部分支持，其他浏览器版本为完全支持）
移动端支持iOS Safari 7, android browser 4.4
兼容性详情

网格布局方案

实现思路：

设置容器为grid，然后设置行高度为100px，设置三栏的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-网格布局方案</title>
  <style>
    .container {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px 1fr 300px;
    }
    .left {
      background: red;
    }
    .main {
      background: yellow;
    }
    .right {
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点：

兼容性相对弹性盒要差，不过目前绝大部分浏览器较新的版本已经支持

优点:

代码简洁，DOM结构清晰

兼容性:

PC端支持IE10及以上、Edge 16,chrome 57,firefox 52,safari 10.1（IE10为部分支持，其他浏览器为完全支持的起始版本）
移动端支持iOS Safari 10.3, android browser 67
兼容性详情

表格布局方案

实现思路:

设置容器为table且宽度为100%，并设置子元素为table-cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-表格布局方案</title>
  <style>
    .container {
      display: table;
      width: 100%;
    }
    .left, .main, .right {
      display: table-cell;
      height: 100px;
    }
    .left {
      width: 300px;
      background: red;
    }
    .main {
      background: yellow;
    }
    .right {
      width: 300px;
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <aside class="left">left</aside>
    <main class="main">main</main>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点:

非语义化

优点:

兼容浏览器版低

兼容性:

PC支持IE8+, Firefox 3+, Chrome 4+, Safari 3.1+
移动端支持 iOS Safari 3.2, android browser 2.1
兼容性详情

圣杯布局

实现思路:

通过将左右两栏挂在容器的两侧，从而实现三栏布局，形状类似圣杯

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-圣杯布局方案</title>
  <style>
    .container {
      margin-left: 300px;
      margin-right: 300px;
      overflow: hidden;
    }
    .main, .left, .right {
      height: 100px;
    }
    .main {
      float: left;
      width: 100%;
      background: yellow;
    }
    .left {
      float: left;
      margin-left: -100%;
      width: 300px;
      position: relative;
      left: -300px;
      background: red;
    }
    .right {
      float: left;
      margin-left: -300px;
      width: 300px;
      position: relative;
      left: 300px;
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <main class="main">main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点:

当中间栏宽度比左栏宽度小时，布局会发生混乱

优点:

支持内容优先加载

兼容性:

参考浮动布局方案

双飞翼布局方案

实现思路:

基于圣杯布局，引入一个容器来放置中间栏，并且设置中间栏的外边距，不需要使用相对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局-双飞翼布局方案</title>
  <style>
    .main .in, .left, .right {
      height: 100px;
    }
    .main {
      float: left;
      width: 100%;
    }
    .main .in {
      margin-left: 300px;
      margin-right: 300px;
      background: yellow;
    }
    .left {
      float: left;
      width: 300px;
      margin-left: -100%;
      background: red;
    }
    .right {
      float: right;
      width: 300px;
      margin-left: -300px;
      background: blue;
    }
  </style>
</head>
<body>
  <article class="container">
    <main class="main">
      <div class="in">main</div>
    </main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
  </article>
</body>
</html>

缺点:

DOM结构较复杂

优点:

支持内容优先加载
相对圣杯布局，宽度缩小，布局不会发生混乱

兼容性:

参考浮动布局方案

参考

2019-07-13发表前端开发8 分钟读完 (大约1267个字)

(深入JavaScript系列)new背后的原理及实现

面试中遇到关于JavaScript中new关键字背后的实现原理，了解大概的原理，但是表达出来不是很清楚，表示掌握得不够完全，这里查了一些资料，做一下整理。

原理

例如我们做了new的调用操作，

1	new ConstructorFunction(arg1, arg2);

new操作

背后实际上发生了这些步骤:

创建一个新的空对象，对象类型为简单的object
设置这个空对象的实例原型(内部的、不可访问的[[prototype]]属性，部分浏览器可通过__proto__进行访问，ES5开始可通过Object.getPrototypeOf(obj)取得)为构造函数的prototype属性（每个函数对象都拥有一个prototype属性）
让this变量指向这个新创建的对象
以这个新创建的对象为上下文执行构造函数
如果构造函数有返回非空的对象，则返回该对象，否则返回第一步中创建的对象。

原型的几个概念

这里涉及到几个概念：

构造函数，配合使用new关键字的函数可称为构造函数
实例原型对象，在Ecma标准中，通过[[prototype]]表示，在部分浏览器中使用__proto__(非标准的，不建议使用)来表示，ES5开始可使用Object.getPrototypeOf()读取，ES6开始可使用Object.setPrototypeOf()方法进行设置(仅支持完全替换对象或者设为null)
原型对象，构造函数的prototype属性

比较难理解的是[[prototype]]这个属性，每个对象都拥有一个内部的[[prototype]]属性。这个对象是创建对象的时候设置的，创建包括new、通过Object.create()或者用文本字面量，并且只能通过Object.getPrototypeOf()和Object.setPrototypeOf()方法进行操作。

原型链和继承

说明

一旦通过new操作实例化一个对象后，如果这个实例上查找某个属性并不存在，脚本会通过[[prototype]]对象向上一级继续查找，也就是通过原型链的方式进行往上查找。这种方式和在传统的类继承方式是类似的，在JavaScript中通过原型链的形式来继承父类的属性和方法。

函数中，除了拥有隐藏的[[prototype]]属性，还有一个prototype属性，这个属性可以访问、修改和添加希望给实例继承的属性和方法。

原型链实例

ObjMaker = function() { this.a = 'first'; }
// ObjMaker是一个普通函数，并且可以作为一个构造函数使用

ObjMaker.prototype.b = 'second';
// 像其他函数一样，ObjMaker拥有一个可访问的属性prototype可以被修改，这里增加了一个属性b。
// objMaker还有一个内部的属性[[prototype]]，可以通过上述的两个方法进行访问和修改，
// 修改的话仅直接替换为其他对象或者设置为null

obj1 = new ObjMaker();
// 这里会发生前面所说的几件事情
// 首先创建一个空的对象obj1
// 然后将obj1的内部实例对象[[prototype]]设置为ObjMaker的prototype值，
// 并且设置this上下文为obj1，执行构造函数。因此obj1.a可以拿到first值

console.log(obj1.a);
// 输出first

console.log(obj1.b);
// 输出second，解释: obj1并没有属性b，因此会去obj1的内部实例对象属性[[prototype]]上查找，也就是ObjMaker的prototype对象，找到b之后返回对应的值

继承实例

SubObjMaker = function() {};
SubObjMaker.prototype = new ObjMaker(); // 这种继承模式已经废弃
// 因为使用了new，SubObjMaker.prototype的内部实例对象属性[[prototype]]
// 会被设置为ObjMaker.prototype属性。
// 现在通常会使用ES5中的Object.create()方法来实现。
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';
obj2 = new SubObjectMaker();
// obj2的实例原型对象[[prototype]]被设置为SubObjectMaker.prototype属性，
// SubObjectMaker.prototype的[[prototype]]属性为ObjMaker.prototype
// 形成了一条如下的原型链
// ojb2 -> SubObjMaker.prototype -> ObjMaker.prototype

console.log(obj2.c);
// 输出third，通过原型链查找，在SubObjMaker.prototype上找到

console.log(obj2.b);
// 输出second, 通过原型链查找，在ObjMaker.prototype上找到

console.log(obj2.a);
// 输出first, 通过原型链查找，在SubObjMaker.prototype上找到，
// 因为SubObjMaker.prototype是由ObjMaker构造生成的，因此脚本会自动赋值

实现

function newOperator(ConStr, args) {
    var thisValue = Object.create(ConStr.prototype);
    // 构建一个空对象并实现继承
    
    var result = ConStr.apply(thisValue, args);
    if (typeof result === 'object' && result != null) {
        // 构造函数可能会返回对象，这里要增加判断，并且要排除null，因为null的类型检测为object
        return ret;
    }
    return thisValue;
}

欢迎访问我的博客 https://blog.bookcell.org

参考

2019-07-09发表前端开发14 分钟读完 (大约2074个字)

理解虚拟DOM

文章来源: https://bitsofco.de/understanding-the-virtual-dom/
文章概要: 讲解虚拟DOM的概念及在React中的应用

正文：

我最近写了关于DOM和shadow DOM具体是什么，以及他们的差异。回顾一下，文档对象模型是一个HTML文档基于对象的表示，和操作对象的一个接口。影子DOM(shadow DOM)可以想做是”精简版”的DOM。它也是HTML元素基于对象的表示，但不是完整独立的文档。相反的，影子DOM允许我们分离我们的DOM成为更小的、具备封装性的单元并在HTML文档中使用。

另一个相似的术语你可能遇见过的是“虚拟DOM”(virtual DOM)。尽管这个概念已经出现了许多年，让它变得流行起来的还是在React框架中的使用。在这篇文章中，我会涉及虚拟DOM具体是什么，和原始的DOM有什么差别，以及如何使用。

为什么我们需要虚拟DOM？

为了理解为什么会出现虚拟DOM，先回顾一下原始DOM。就如前面提到的，DOM中有两部分内容，基于对象的HTML文档标识和操作对象的API。

例如，让我们看一个无序列表和列表项的简单HTML文档

<!doctype html>
<html lang="en">
 <head></head>
 <body>
    <ul class="list">
        <li class="list__item">List item</li>
    </ul>
  </body>
</html>

文档会像下面的DOM树进行表示

html
  |
  |-- head lang="en"
  |-- body
        |-- ul class="list"
            |--li class="list__item"
               |--"List item"

设想一下我们想要修改第一个列表项的内容为“List item one”，并且添加第二个列表项。为了做到这一点，我们需要使用DOM API查找到想要更新的元素，创建新的元素，添加属性和内容，最终更新DOM元素。

const listItemOne = document.getElementsByClassName("list__item")[0];
listItemOne.textContent = "List item one";

const list = document.getElementsByClassName("list")[0];
const listItemTwo = document.createElement("li");
listItemTwo.classList.add("list__item");
listItemTwo.textContent = "List item two";
list.appendChild(listItemTwo);

DOM无法解决的问题

当1998年DOM的第一版规范发布时，我们构建和管理网页与现在有很大的不同。那时并没有像现在这样依赖于DOM API来创建和更新页面内容。

如document.getElementsByClassName()这样的简单方法小范围使用是好的，但是如果我们每几秒去更新页面中的多个元素时，这会让查询和更新DOM变得耗性能。

更进一步，由于API的组织方式，通常执行一些更耗性能的操作，例如更新文档的一大块内容比查找然后更新具体的元素要来得简单。回到我们的例子，某种程度上替换整个无序列表成新的比修改具体的元素要容易。

const list = document.getElementsByClassName("list")[0];
list.innerHTML = `
<li class="list__item">List item one</li>
<li class="list__item">List item two</li>
`;

在这个例子中，两个方法之间的性能差异可能并不明显。但是，随着页面大小的增加，仅选择和修改必须的内容变得尤其重要。

虚拟DOM的解决方式

虚拟DOM的提出就是为了高效解决这些频繁更新DOM的难题。不像DOM或者影子DOM，虚拟DOM并不是官方的规范，而是和DOM交互的新方法。

一个虚拟DOM可以设想为原始DOM的一份拷贝。这份拷贝可以不使用DOM的API而进行频繁的操作和更新。一旦所有的更新都被应用到虚拟DOM后，我们可以找到要应用到原始DOM上的具体变化差异并通过高效和有针对性的进行更新。

虚拟DOM看起来像什么？

虚拟DOM的名字让这个概念给人有点神秘的感觉。实际上，虚拟DOM就是一个常规的JavaScript对象。

让我们回顾一下之前创建的DOM树：

html
  |
  |-- head lang="en"
  |-- body
        |-- ul class="list"
            |--li class="list__item"
               |--"List item"

这颗树可以通过JavaScript对象来表示：

const vdom = {
    tagName: "html",
    children: [
        { tagName: "head" },
        {
            tagName: "body",
            children: [
                {
                    tagName: "ul",
                    attributes: { "class": "list" },
                    children: [
                        {
                            tagName: "li",
                            attributes: { "class": "list__item" },
                            textContent: "List item"
                        }
                    ]
                }
            ]
        }
    ]
}

我们可以设想这个对象作为我们的虚拟DOM。就像原始DOM，这也是基于对象的HTML文档表示。但是因为这是一个纯粹的JavaScript对象，我们可以自由和频繁的操作而不用接触实际的DOM，直到需要的时候。

通常使用多个小块的虚拟DOM，而不是使用一个虚拟DOM来表示整个对象。例如，我们在使用一个list组件，对应我们的无序列表元素。

const list = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item"
        }
    ]
}

虚拟DOM的工作原理

现在我们看到了虚拟DOM的结构，接下来看一下它是如何在DOM中解决性能和使用问题的。

就如我提到的，我们可以使用虚拟DOM找到需要应用到DOM中的具体变更内容，然后单独更新这些变更。让我们回到无序列表的例子并做一些之前使用DOM API操作的变更。

首先我们要创建一份虚拟DOM的拷贝，包含我们想要的修改。因为我们不需要使用DOM API，我们可以只创建一个新的对象。

const copy = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item one"
        },
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item two"
        }
    ]
};

这份拷贝是用于创建一个和原始虚拟DOM的变更内容(“diff”)，在这里是列表和更新的列表。变更内容如下:

const diffs = [
    {
        newNode: { /* 新版的列表1 */ },
        oldNode: { /* 原始版本的列表1 */ },
        index: /* 在父元素的子节点列表中元素索引 */
    },
    {
        newNode: { /* 列表2 */ },
        index: { /* */ }
    }
]

变更内容提供了如何更新实际DOM的指南。一旦所有的变更内容都收集到了，我们就可以批量更新DOM，而且是仅更新必需的内容。

例如，我们可以遍历每一个的变更内容，然后添加一个新元素或者基于变更内容更新旧的内容。

const domElement = document.getElementsByClassName("list")[0];

diffs.forEach((diff) => {
    const newElement = document.createElement(diff.newNode.tagName);
    /* 添加属性 */
    
    if (diff.oldNode) {
        // 如果有旧的版本，用新的版本替换
        domElement.replaceChild(newElement, diff.index);
    } else {
        // 如果没有旧的版本，创建一个新的节点
        domElement.appendChild(newElement);
    }
})

注意这里只是简单讲述虚拟DOM是如何工作的，有很多案例并没有涉及到。

虚拟DOM和框架

通常虚拟DOM会和框架一同使用，而不是像上面这样直接操作。

像React和Vue这样的框架使用虚拟DOM来执行高效的DOM更新。例如，我们的list组件通过React可以这样写：

import React from 'react';
import ReactDOM from 'react-dom';

const list = React.createElement("ul", { className: "list" },
    React.createElement("li", { className: "list__item" }, "List item")
);

如果我们更新我们的列表，我们可以只是重写整个列表模板，然后再次调用ReactDOM.render()方法，传递一个新的列表。

const newList = React.createElement("ul", { className: "list" },
    React.createElement("li", { className: "list__item" }, "List item one"),
    React.createElement("li", { className: "list__item" }, "List item two")
);

setTimeout(() => ReactDOM.render(newList, document.body), 5000));

因为React使用了虚拟DOM，即使我们重新渲染了整个模板，只有实际的变化会被更新。如果通过开发者工具进行查看，可以查看具体的元素和具体元素的部分有变化。

DOM和虚拟DOM

总结一下，虚拟DOM是一个可以让我们和DOM元素进行简单高效的交互工具。它是DOM的JavaScript对象表示，我们可以根据我们的需要频繁的修改。对于这个对象的修改会被整理后，有针对性的对实际DOM进行更新。

2019-06-16发表前端开发13 分钟读完 (大约1897个字)

Web Component入门

原文出自: https://levelup.gitconnected.com/web-components-in-a-nutshell-1e114aa971b9
原标题: Web Components in a Nutshell
原副标题: 原生浏览器Web Component基础和如何创建
翻译文章同步发表在团队的语雀上

说明: 以下使用Web组件来表示Web Component

正文:

在web开发中，代码复用已成为一个聚焦重点。作为一名开发者，我们可能会遇到这样的场景，在多个地方使用一个代码片段来表示自定义的UI。如果我们不是很小心的写出，这可能会让整个代码结构变得不可管理。Web组件提供了一个原生的API来构建可复用的UI块。

什么是Web组件?

Web组件是一系列用来帮助我们创建可复用、具备封装的自定义HTML UI元素的浏览器底层的API。Web组件被认为更加好，是因为他们可以用任意的库或者框架创建，而且你可以立马使用原生JavaScript开始创建你自己的Web组件。

使用Web组件的一大优势在于他们已经在除了微软Edge外其他浏览器中可用，但是我们并不需要担心，因为已经有Polyfills可以解决这个问题。

Web组件由3个主要的技术组成，他们是主要支柱并作为API来构建Web组件。

自定义元素(Custom Elements)
模板(Templates)
影子DOM(Shadow DOM)

让我们来进一步了解这些技术。

1. 自定义元素(Custom Elements)

这些是JavaScript API的集合，可以帮助你创建自己的HTML元素，并且控制你的DOM和行为。我们可以构建他们的层级和指示他们对行为变化做出的响应。例如，你可以创建一个元素像这样<my-element></my-element>。

2. 模板(Templates)

模板是用户定义的模板在页面加载时并不渲染。之后可以通过创建一个组件实例来多次复用。

3. 影子DOM(Shadow DOM)

影子DOM是JavaScript API组合用以连接封装的DOM。这将会从主文档对象模型中独立渲染，并且他们的行为特性将会保持私有，因此代码片段就不会和代码结构中的其他部分冲突。使用影子DOM后CSS和JavaScript就会像<iframe>一样分离。

生命周期回调

生命周期回调是定义在自定义元素类定义中的函数。他们有自己唯一的定义目的。他们用于操作我们自定义元素的行为。

connectedCallback: 这个特殊的函数会在我们的自定义元素初始连接到DOM时进行调用。
adoptedCallback: 这个函数会在我们的自定义函数移动到一个新的文档时调用。
attributeChangedCallback: 如果在我们的自定义元素中有属性变化，例如属性的变更、增加或者删掉，这个特殊的函数会被调用。
disconnectedCallback: 这个特殊的函数当我们的自定义元素从DOM中断开时调用。

现在让我们来看看如何使用原生JavaScript来创建一个Web组件。通过做完这个教程，你可以了解Web组件。

实战

我们要构建什么？

我们要构建一个显示一张当前热门图片的Web组件。我们会使用Giphy API来获取gif，你的代码结构在实现完成后会是如下:

1
2
3

--index.html
--card.js
--services.js

构建教程

首先，我们要创建一个类来包含我们想创建的Web组件的行为。创建一个card.js的文件，并创建一个如下的类。

class CardComponent extends HTMLElement {
    constructor (){
        super();
        
        //Your implementaion goes here
    
    }
}

在类的构造函数中，你需要通过Element.attachShadow()方法将影子DOM的影子根(shadow root)添加到文档的当前HTML元素中。接着使用<template>标签在index.html文件中创建HTML模板。这个模板如下:

<template id="card-view">
   <h1>Web Component</h1>
   <p id="card-title">Example</p>
   <img id="gif-view"/>
</template>

在添加模板到我们的index.html文件中后，我们可以使用DOM方法来克隆上面的模板并添加到我们的影子DOM。这需要在构造函数中完成。

class CardComponent extends HTMLElement {
    constructor (){
        super();
        const shadow = this.attachShadow({mode: 'open'});
       
        // Clone the template so that it can be attched to the shadowroot                     
        const template = document.getElementById('card-view');
        const templateInstance = template.content.cloneNode(true);
        shadow.appendChild(templateInstance);
    }
}

就像我之前提到的，我们应该再写一个函数来从Giphy API中获取gif。从API中我们将获取到当前热门的图片，以及这个图片上传者提供的标题。在我们开始写这个函数前，先创建一个单独的文件services.js用以放置URL和API key。创建文件并放置以下代码和你申请的API key。

1
2
3

const API_KEY = '*YOUR_API_KEY*';
const url = `http://api.giphy.com/v1/gifs/trending?api_key=` + API_KEY + `&limit=1`;
export {API_KEY, url}; // export the url so that i can be used extrnally.

创建services.js文件后，添加以下的代码到你的card.js文件顶部，这样你就可以使用URL来获取gif图片了。

1	import { url } from './services.js';

你可以从这个链接获取你自己的API key: https://developers.giphy.com/

跳回到card.js文件，并添加以下函数:

render(shadowElem, data){
    const shadowRoot = shadowElem.shadowRoot;
    shadowRoot.getElementById('card-title').innerHTML = data.name;
    shadowRoot.getElementById('gif-view').src = data.url;
}

async fetchFromGiphy (){
  const res = await fetch(url);
  const json = await res.json();
  const gifUrl = json['data']['0'].images['fixed_height_small'].url;
  const gifName = json['data']['0'].title;
  const gifObject = {
     name: gifName,
     url: gifUrl
  }
  return gifObject;
}

让我来解释一下这些函数。

fetchFromGiphy(): 这个函数使用async/await获取热门的gif和这个gif的标题，并作为对象进行返回。

render(): 这个函数用于注入值到影子DOM的元素中。

接着，让这些函数在生命周期回调中被调用。实际上，我们需要当我们的自定义元素连接到DOM时调用这两个函数。我们有connectedCallback()函数来实现。

async connectedCallback() {
    this.gifObj = await this.fetchFromGiphy();
    this.render(this, this.gifObj);
}

最后，使用customElements.define()函数来定义我们的自定义元素。当定义一个自定义元素时，有一些基本原则需要记在心里。define()函数的第一个参数应该是代码自定义元素名称的字符串。他们不能是一个单独的单词，而是由-字符在中间。第二个参数我们的定义元素行为的类对象。

1	customElements.define(‘card-component’, CardComponent);

现在你已经定义了你的组件，添加card.js文件到你的index.html文件中。你可以在HTML文档的任意地方使用<card-component>元素。最后的index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Component</title>
</head>
<body>
  
<template id="card-view">
    <h1>Web Component</h1>
    <p id="card-title">Example</p>
    <img id="gif-view"/>
</template>
  
<card-component></card-component>
<script src="./card.js" type="module"></script>
</body>
</html>

为了运行，你需要一个服务器。从命令行中全局安装static-server:

1	npm install -g static-server

从你的Web组件项目目录下运行static-server命令:

1	static-server

好了，恭喜！你现在已经拥有你自己的组件。

结论

这篇文章总结了Web组件的基础。这是Web组件的理论和实现。Web组件在帮助代码复用上很有用。你可以从这个项目中检出所有代码。

2019-05-05发表前端开发15 分钟读完 (大约2242个字)

ES6模块-团队分享

大纲

前端模块化的历史
ES6模块的使用
ES6模块背后的思考
组件和模块
参考文章

前端模块化的历史

全局Function模式
命名空间模式
IIFE模式
IIFE模式(引入依赖)
CommonJS
AMD
CMD
ES6 模块

ES6模块的使用

什么是模块?

模块是通过不同于脚本的形式进行加载的JavaScript文件。区别在于:

模块代码自动运行在严格模式，并无法退出
模块中定义的变量只在模块的作用域中存在，不会自动添加到全局的作用域
模块中的this是undefined
模块中不支持HTML风格的注释
模块必须要导出任何可以在模块外可用的一切
模块可以从其他模块导入内容

基本导出

使用export关键字可以从模块中导出变量、函数和类:

// export data
export var color = "red";
export let name = "Nicholas";
export const magicNumber = 7;

// export function
export function sum(num1, num2) {
    return num1 + num1;
}

// export class
export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

// this function is private to the module
function subtract(num1, num2) {
    return num1 - num2;
}

// define a function...
function multiply(num1, num2) {
    return num1 * num2;
}

// ...and then export it later
export { multiply };

导出说明:

每个导出的函数和类都有一个名字，除了使用default关键字外无法使用上面的语法导出匿名函数和类
查看multiply()函数，你可以不导出声明，支持导出引用
查看substract()函数，外部不可访问，没有显式导出的变量、函数和类对于模块是私有的

基本导入

基本格式:

1	import { identifier1, identifier2 } from "./example.js";

说明: 从一个模块中导入一个绑定，就类似定义一个const的内容，也就是无法定义重名变量、导入前使用和修改值。

导入一个单一绑定

// import just one
import { sum } from "./example.js";

console.log(sum(1, 2));     // 3

sum = 1;        // error

尽管example.js中定义了多个导出，你可以只导入其中一个；为了在浏览器和Node.js中保持兼容性，尽量在文件名前使用相对路径。

导入多个绑定

// import multiple
import { sum, multiply, magicNumber } from "./example.js";
console.log(sum(1, magicNumber));   // 8
console.log(multiply(1, 2));        // 2

全部导入

特殊的应用场景支持导入整个模块作为一个对象，类似导入一个库文件，所有的模块导出均作为对象属性。

// import everything
import * as example from "./example.js";
console.log(example.sum(1,
        example.magicNumber));          // 8
console.log(example.multiply(1, 2));    // 2

不管多少次使用import对一个模块进行导入操作，模块只会执行一次；在导入模块的代码执行后，实例化的模块在保存在内存中并在其他import语句使用时复用。

1
2
3

import { sum } from "./example.js";
import { multiply } from "./example.js";
import { magicNumber } from "./example.js";

代码中example.js只会执行一次.

模块语法不支持在语句或者函数中使用，也就是说不支持动态的导入和导出。ECMAScript dynamic-import Stage3

导入绑定的修改

对导入的内容是无法修改的，但是在模块内部可以。

模块导出:

export var name = "Nicholas";
export function setName(newName) {
    name = newName;
}

模块导入:

import { name, setName } from "./example.js";

console.log(name);       // "Nicholas"
setName("Greg");
console.log(name);       // "Greg"

name = "Nicholas";       // error

setName函数回到模块内执行并修改变量name的内容，随后这个修改会反映到导入的name这个绑定。

重命名导出和导入

有时候，你可能不想使用变量、函数、类在模块中的原始名字，你可以在导入和导出的时候使用as关键字来指定新的名字

导出时重命名

function sum(num1, num2) {
    return num1 + num2;
}

export { sum as add };

导入

1	import { add } from "./example.js";

导入时重命名

1
2
3

import { add as sum } from "./example.js";
console.log(typeof add);            // "undefined"
console.log(sum(1, 2));             // 3

模块中的默认值

模块中的默认值是指使用default指定的一个单独变量、函数或者类，每个模块中只能设定一个默认导出，指定多个默认导出会报语法错误。

导出默认值

直接导出

1
2
3

export default function(num1, num2) {
    return num1 + num2;
}

函数可以不写名字，因为模块本身代表这个函数。

导出引用

function sum(num1, num2) {
    return num1 + num2;
}

export default sum;

重命名导出

function sum(num1, num2) {
    return num1 + num2;
}

export { sum as default };

导入默认值

javascript
// import the default
import sum from “./example.js”;

console.log(sum(1, 2)); // 3


1. 默认导入不需要大括号
2. 名称可以代表任意模块中的默认函数
3. 默认导入的语法是最精简的，ES6模块规范制定者希望默认值作为主流的使用场景

**具名和默认混合**
```javascript
export let color = "red";

export default function(num1, num2) {
    return num1 + num2;
}

import sum, { color } from "./example.js";

console.log(sum(1, 2));     // 3
console.log(color);         // "red"

默认值要在非默认值前面导入。

重命名默认值

// equivalent to previous example
import { default as sum, color } from "example";

console.log(sum(1, 2));     // 3
console.log(color);         // "red"

重新导出一个绑定

几种重新导出的方式

1 2	import { sum } from "./example.js"; export { sum }

1	export { sum } from "./example.js";

1	export { sum as add } from "./example.js";

全部导出

1	export * from "./example.js";

这里只能导出所有的具名导出，不包括默认导出。如果要处理默认导出，你需要显式的导入后再导出。

没有绑定的导入

有些模块并没有导出任何内容，仅仅是在全局作用域中做了些修改；虽然模块无法直接修改全局作用域的变量、函数和类，但是对于內建对象的修改可以反映到其他模块中。

// module code without exports or imports
Array.prototype.pushAll = function(items) {

    // items must be an array
    if (!Array.isArray(items)) {
        throw new TypeError("Argument must be an array.");
    }

    // use built-in push() and spread operator
    return this.push(...items);
};

这个模块对Array原型增加一个pushAll方法.

import "./example.js";

let colors = ["red", "green", "blue"];
let items = [];

items.pushAll(colors);

这段代码导入和执行模块代码，添加pushAll方法到array原型中。

没有绑定的导入通常用于创建polyfill或者shim。

加载ES6 模块

使用打包工具和Babel转译为ES5
使用script标签，并设置type为module(IE11不兼容，使用前查看兼容性)

默认使用defer属性，按照代码出现的顺序进行加载，执行需要在文档解析完成后，执行顺序也是按照代码出现的顺序。

<!-- this will execute first -->
<script type="module" src="module1.js"></script>

<!-- this will execute second -->
<script type="module">
import { sum } from "./example.js";

let result = sum(1, 2);
</script>

<!-- this will execute third -->
<script type="module" src="module2.js"></script>

如果模块代码中又引入其他的模块，执行的顺序会变得复杂一些:

加载顺序:

Download and parse module1.js.
Recursively download and parse import resources in module1.js.
Parse the inline module.
Recursively download and parse import resources in the inline module.
Download and parse module2.js.
Recursively download and parse import resources in module2.js

执行顺序:

Recursively execute import resources for module1.js.
Execute module1.js.
Recursively execute import resources for the inline module.
Execute the inline module.
Recursively execute import resources for module2.js.
Execute module2.js.

web worker

1 2	// load module.js as a module let worker = new Worker("module.js", { type: "module" });

ES6模块背后的思考

对比CommonJS和AMD

CommonJS

在Node.js中的主要实现方式，特性如下:

紧凑的语法
同步加载
主要使用: 服务端

Asynchronous Module Definition(AMD)

主要的实现是RequireJS，特性如下:

稍微复杂的语法
异步加载
主要使用: 浏览器

ES6模块

目标:

偏爱默认导出
静态模块结构
支持同步和异步加载
支持模块间的循环依赖

优势:

比CommonJS更紧凑的语法
结构可以被静态分析(静态检测、优化等)
对循环引用比CommonJS更好
支持异步加载

八卦: ES6 Module的主要设计者Dave Herman和Sam Tobin Hochstadt。

组件和模块

模块为基础，组件基于模块
组件侧重UI封装，针对，包括html,css,js和image；模块侧重数据、功能封装

组件化参考张云龙-前端工程

参考文章

2019-04-20发表前端开发9 分钟读完 (大约1278个字)

ES6中的模块化

这里主要是针对ES6 Module技术出现的讨论，对比历史的一些模块化解决方案。

背景、初衷、目标

背景

简单的讲，随着前端应用的日益庞大和复杂，对于代码的拆分复用要求更高，也就出现了对代码模块化的需求。

在ES6 Module出现前，社区中出现的两个方案CommonJS和AMD：

CommonJS

在Node.js中的主要实现方式，特性如下:

紧凑的语法
同步加载
主要使用: 服务端

Asynchronous Module Definition(AMD)

主要的实现是RequireJS，特性如下:

稍微复杂的语法
异步加载
主要使用: 浏览器

这里提一句，ES6 Module的主要设计者Dave Herman 和 Sam Tobin Hochstadt。

初衷

这里讲的ES6 Module的设计初衷，在ES6 Module出现前社区已经在模块化上有一些令人印象深刻的变通方案，以CommonJS和AMD为代表，这两者各有优缺点并且不兼容，因此ES6 Module的设计初衷是为了吸取这两者的优点实现ECMAScript的标准。

目标

ES6 Module的目标是出一个让CommonJS和AMD社区都能接受的方案：

偏爱默认导出
静态模块结构
支持同步和异步加载
支持模块间的循环依赖

优势和劣势(trade-off)

ES6 Module实际达成的方案特性如下:

比CommonJS更紧凑的语法
结构可以被静态分析(静态检测、优化等)
对循环引用比CommonJS更好
支持异步加载

适用的场景(业务场景、技术场景)

适用于浏览器端和服务端(Nodejs)，目前(2019年)主流的浏览器大部分都不支持ES6 Module的特性，因此使用的话还得使用Babel来转译。

组成部分和关键点

ES6 Module分两部分:

声明式语法(import和export)
编程式加载API: 支持配置如何加载模块以及条件加载

使用场景

在浏览器侧的使用

使用`<script>`进行加载

通过type属性值为module来标识模块进行加载，支持外部文件和内联的方式，默认使用defer的行为，也可以指定async

<!-- load a module JavaScript file -->
<script type="module" src="module.js"></script>

<!-- include a module inline -->
<script type="module">

import { sum } from "./example.js";

let result = sum(1, 2);

</script>

通过`Worker`进行加载

1 2	// load module.js as a module let worker = new Worker("module.js", { type: "module" });

通过打包工具进行打包

使用webpack或者browserify等打包工具进行打包后使用。

声明式语法

声明式语法分为两种类型：具名导出(每个模块有多个)和默认导出(每个模块一个)。

具名导出(named exports)

通过关键字export前缀可以导出多个内容，并有名称来进行区分。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

默认导出(default exports)

一个模块只有一个默认导出，并且默认导出尤其容易进行导入。

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

对于class的使用

//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

默认导出其实可以理解为特殊的具名导出

导入:

1 2	import { default as foo } from 'lib'; import foo from 'lib';

导出:

//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

答疑

为什么我们需要具名导出(named exports)?

The answer is that you can’t enforce a static structure via objects and lose all of the associated advantages (described in the next section).

如果通过对象进行导出会丢失静态结构，从而失去原先的优势。

ES6 Module输出的是值的引用，并且是在编译时输出接口。

编程式语法

针对ES6 Module的编程式实现，目前规范处于stage 3。

使用编程式语法，可以做到:

对模块和脚本进行编程操作
配置模块的加载

<!DOCTYPE html>
<nav>
  <a href="books.html" data-entry-module="books">Books</a>
  <a href="movies.html" data-entry-module="movies">Movies</a>
  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>

<main>Content will load here!</main>

<script>
  const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }
</script>

已有的实现和它之间的对比

有关模块化的进程，前端模块化详解一句讲解得比较详细了，可以参考。