一、单向数据流

所有的 prop 都使得其父子 prop之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

1

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

1、保持单向数据流的重要性

在父组件中，一个变量往往关联着多个变量或动作

• 如果在子组件中修改了传进来的prop对象，并且没有在父组件中watch该prop对象，不会主动触发其他变量的修改或动作的发生，导致数据局部展示错误。
• 如果主动watch该prop对象，由于无法准确预知修改的来源和方式，从而大大增加了父组件的维护难度。

2、组件的分类

• 抽象通用组件
  • 基本数据和默认值都是通过prop传入，没有在组件内依赖ajax异步数据
  • 保证不修改prop，交互结果通过v-on等通知方式返回
• 业务通用组件
  • 在组件内依赖业务ajax异步数据
  • 在需要进行增删改查操作的表格中，很难做到完全不修改prop，CURD操作往往依赖于业务逻辑。如果不直接修改，则需要添加N多的v-on事件

一、尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 函数f的最后一步是调用函数g，这就叫尾调用
function f(x) {
    return g(x);
}

// 尾调用不一定出现在函数尾部，只要是最后一步操作即可
function f(x) {
    if (x > 0) {
        return m(x)
    }
    return n(x);
}

// 以下三种情况，都不属于尾调用
// 情况一
function f(x) {
    let y = g(x);
    return y;
}

// 情况二
function f(x) {
    return g(x) + 1;
}

// 情况三
function f(x) {
    g(x);
}

一、短路运算

当逻辑与&&的第一个操作数的值是false时，直接返回第一个操作数的值，不再对第二个操作数进行计算

当逻辑或||的第一个操作数的值是true时，直接返回第一个操作数的值，不再对第二个操作数进行计算

二、运算符优先级

优先级表格

一、freeze

Object.freeze()方法可以冻结（浅冻结 ）一个对象，冻结指的是不能向这个对象添加新的属性（增），不能修改其已有属性的值（改），不能删除已有属性（删），以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回传递的对象，而不是创建一个被冻结的副本 。

1
2
3
4
5
6
7
8

// 浅冻结

let obj1 = Object.freeze({internal: {}});
obj1.internal.a = 'aValue';
obj1.freeze = 'freeze'; // 在严格模式，会抛出TypeErrors错误

obj1.internal.a; // 'aValue'
obj1.freeze; // undefined

注：通过Object.isFrozen(obj)可以判断对象是否被冻结

在面向对象的程序设计中，开放封闭原则(OCP)是最重要的一条原则。很多时候，一个程序具有良好的设计，往往说明它是符合开放封闭原则的。 当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，但是不允许改动程序的源代码。

一、故事背景

假设我们是一个大型 Web 项目的维护人员，在接手这个项目时，发现它已经拥有10万行以上的JavaScript代码和数百个 JS 文件。 不久后接到了一个新的需求，即在 window.onload 函数中打印出页面中的所有节点数量。这 当然难不倒我们了。于是我们打开文本编辑器，搜索window.onload函数在文件中的位置，在函数内部添加以下代码

1
2
3
4

window.onload = function(){ 
    // 原有代码略
    console.log( document.getElementsByTagName( '*' ).length ); 
};

二、应用AOP

1
2
3
4
5
6
7
8
9
10
11

Function.prototype.after = function( afterfn ){ 
    var __self = this;
    return function(){
        var ret = __self.apply( this, arguments ); 
        afterfn.apply( this, arguments );
        return ret;
    } 
};
window.onload = ( window.onload || function(){} ).after(function(){ 
    console.log( document.getElementsByTagName( '*' ).length );
});

通过AOP装饰函数的方式，我们完全不用理会从前 window.onload 函数的内部实现，就算拿到的是一份混淆压缩过的代码也没有关系。只要它从前是个稳定运行的函数，那么以后也不会因为我们的新增需求而产生错误。新增的代码和原有的代码可以互不影响。

一、装饰者模式

装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

1
2

装饰者模式将一个对象嵌入到另一个对象之中，实际上相当于这个对象被另一个对像包装起来，形成一条包装链。
请求随着这条包装链依次传递到所有的对象，每个对象都有处理这条请求的机会。

二、装饰函数

在JavaScript中可以很方便的给某个对象扩展属性和方法，但却很难在不改动某个函数源代码的情况下，给该函数添加一些额外的功能。也就是在代码运行期间，我们很难切入某个函数的执行环境。

1、使用装饰者模式例子

1
2
3
4
5
6
7
8
9
10
11
12

/对window.onload的处理

window.onload=function () {
    console.log('test');
};

var  _onload= window.onload || function () {};

window.onload=function () {
    _onload();
    console.log('自己的处理函数');
};

2、使用AOP（面向切面编程）装饰函数

在需要执行的函数之前执行某个新添加的功能函数

1
2
3
4
5
6
7
8

// 封装的before函数
Function.prototype.before = function(beforefn) {
    var __self = this;
    return function() {
        beforefn.apply(this, arguments);
        return __self.apply(this, arguments);
    };
};

原文

一、什么是 IoC

IoC 的全称叫做 Inversion of Control，可翻译为为「控制反转」或「依赖倒置」，它主要包含了三个准则：

1. 高层次的模块不应该依赖于低层次的模块，它们都应该依赖于抽象
2. 抽象不应该依赖于具体实现，具体实现应该依赖于抽象
3. 面向接口编程 而不要面向实现编程

include

1
2
3

Syntax:	include file | mask;
Default: —
Context: any

Includes another file, or files matching the specified mask, into configuration. Included files should consist of syntactically correct directives and blocks.

1
2

include mime.types;
include vhosts/*.conf; #通配符写法

注：适用范围是任何地方，include命令相当于是复制文件内容到引用的地方

标识符与保留字

保留字是JavaScript语言中定义具有特殊含义的标识符，保留字不能作为标识符使用。JavaScript语言中定义了一些具有专门的意义和用途的保留字，这些保留字称为关键字。

标识符：变量，属性，数组，函数名称

SCRIPT1010

缺少标识符 ，一般在IE浏览器下，使用了保留字就会报这个错误，如： default, delete 等

SCRIPT1028

1
2
3
4
5
6
7

// 对象最后一项是不允许有逗号的，跟json的规则相似
let point = { x: 1.2, y: -3.4 }; // 合法声明
let point = { x: 1.2, y: -3.4, }; // 缺少标识符、字符串或数字

// 使用了保留字
let point = { x: 1.2, 'delete': -3.4 }; // 合法声明
let point = { x: 1.2,  delete: -3.4 }; // 缺少标识符、字符串或数字

对象文字值的属性必须是标识符、字符串或数字。 对象文字值（也称为“对象初始值设定项”）由逗号分隔的“属性:值”对的列表构成，其中各对都括在括号中。

注：使用打包工具会存在'delete'变为delete的情况，最好不要使用保留字作为标识符。

版本

1
2
3
4

// 相同工程：线上环境 
// 存在以上问题
// IE11 浏览器的 navigator.userAgent
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"

注：IE11不存在以上问题

1
2
3
4

// 相同工程：开发环境、vue、webpack-dev-server 
// 不存在以上问题
// IE11 浏览器的 navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; rv:11.0) like Gecko"

注：因为项目中未使用X-UA-Compatible指定IE内核版本

1
2

<!--使用后，线上环境恢复正常，与开发环境一致-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

一、HTTP协议

HTTP协议不对url的长度设置任何先验限制

• 服务器必须能够处理它们所服务的任何资源的URI，并且如果它们提供可以生成这种URI的基于GET的表单，则应该能够处理无限长度的URI。
• 如果URI长于服务器可以处理的长度，服务器应该返回414（Request-URI Too Long）状态 。