先举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var str = '1'
var num0 = 0
var num1 = 1
var blT = true
var blF = false
var nul = null
var und = undefined
console.log(str == num1) // true
console.log(str == blT) // true
console.log(blT == num1) // true
console.log(blF == num0) // true
console.log(nul == und) // true

console.log(str === num1) // false
console.log(str === blT) // false
console.log(blT === num1) // false
console.log(blF === num0) // false
console.log(nul === und) // false

相等操作符(==)会为两个不同类型的操作数进行类型转换，然后进行严格比较。
严格相等操作符(===),一般也叫做全等操作符。会先判断类型，再比较值是否相等。

类型转换

类型转换的途径:
类型(x) | 类型(y) | 结果
:—: | :—: | :—:
undefined | null | true
字符串 | 数字 | toNumber(x) == y
布尔值 | 数字 | toNumber(x) == y
对象 | 字符串/数字 | toPrimary(x) == y

对于两个类型不同的操作数比较。

• 字符串、布尔值都会先转换成数字类型，再做比较。toNumber(x)
• 对于复杂数据类型，会先将其转换为原始值，之后，再根据上一个规则比较。
  x = toPrimary(obj) ==> toNumber(x)
  而，如何转成原始类型值呢，一般都会自动通过自带的valueOf()方法或者toString()方法实现。如果转换之后非原始值，比较操作会报类型错误。

1
2
3
4
5

具体过程：
先执行`valueOf`方法，如果该方法返回一个原始值，则将这个原始值转换为数字，并返回这个数字，转换过程结束。如果返回非原始值，继续下一步。
否则，执行`toString`方法，如果该方法返回一个原始值，则将这个原始值转换为数字，并返回这个数字，转换过程结束。如果返回非原始值 ，继续下一步。
以上都没有成功转换为原始值，则抛出一个类型转换错误的异常。
tips： 每个方法只执行一次。不会将方法返回的非原始类型值继续转换。

举个例子说明下，参考于知乎:

原始数据类型(string,number,boolean,null, undefined,symbol)。
复杂数据类型(Object, Function, Array, Date, …)
基础数据类型的比较，是值的比较，Object对象的比较，则是引用的比较

相等操作符(==)，经过类型转换之后，才比较他们的值或者对象值。
对于全等操作符(===)，等号两边的值和类型，必须完全相等。

为什么建议使用 ===

1. review代码时候，增加理解时间

在使用了 ==的表达式中，我们需要先理解作者的意图。

• 想当然的以为都可以。
• 确实需要通过类型转换来判断。
• 不应该类型转换，但是写错了。

2. 会判断错误

1
2
3
4
5
6
7

let num = 2
let obj = {
  valueOf: function() {
    return 2
  }
}
console.log(obj == 2)

输出true，
我们本意是这两者!=，而这里得到的结果是==，这不是我们想要的结果。

3. 会产生异常

1
2
3
4
5
6
7
8
9
10
11

let num = 2
let obj = {
  valueOf: function() {
    return {}
 },
 toString: function() {
  return {}
 }
}
console.log(obj === 2)
console.log(obj == 2)

第一行输出：false
第二行输出错误提示：Uncaught TypeError: Cannot convert object to primitive value

通过前面类型转换，可以得知，一般情况下，对象会先转换为原始值。
而其过程是通过自带的valueOf()/toString()先转换为primitive value，再和其他值做比较。
而在这里，我们手动将obj对象的valueOf()/toString()覆盖了，导致无法实现转换为原始值。

一般情况下，建议使用=== ，除非你了解，确实需要类型转换，才使用 ==

条件表达式语句（if、三目运算等）

1
2
3
4
5

if (condition) {
    statement1 
} else {
    statement2
}

以上是if语句的基础用法。通过判断condition的布尔值，来决定执行statement1代码块1，还是执行statement2代码块2。
先看下面的例子：

1
2
3
4
5
6
7
8
9

var s = 'str'
var blT = true
var blF = false
if (s) {
    console.log('正确')
} else {
    console.log('错误')
}
console.log(s == blT)

以上语句，得到的结果是

1
2

正确
false

为什么if语句，会执行第一个代码块。而s == blT 却是false呢？
其实，这个就涉及到类型转换的问题了。
输出“正确”：

• if语句的条件表达式，会自动调用Boolean()转换函数，将这个表达式的结果转换为一个布尔值。
• Boolean(‘str’) = true

输出false：

• 根据在上面类型转换那部分所讲，会先调用Number()转换函数转换为数值，之后再比较。
• Number(‘str’) = NaN
• Number(true) = 1

图表举例列出常见对象相等情况

普通相等
完全相等

【完】

JavaScript是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据

数据类型

最新的ECMAScript标准定义了7种数据类型；
其中六种基础数据类型(primitive type)：Undefined、Null、Boolean、Number、String、Symbol(es6 新增）。
一种引用类型：Object。

使用typeof运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还可以判断它表示哪种原始类型。
使用instanceof运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

以下，我们分别看看，基础数据类型有哪些特性，引用类型如何存储判断的。

原始值

除 Object 以外的所有类型的值本身无法被改变，我们称这些类型的值为 原始值。
大多数时候，原始值直接代表语言实现的最底层。
原始值是存储在栈(stack)中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

ECMA-262把术语类型(type)定义为值的一个集合，每种基础数据类型定义了它包含的值的范围及其字面量表示形式。

Undefined 类型

Undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值为undefined。

声明的oTemp变量，没有初始值。该变量将被赋予值undefined，即undefined类型的字面量。
oTemp1没有定义，导致报 引用错误。

Null类型

Null类型只有一个值： null。值null是一个JavaScript字面量，表示空值(null or an “empty” value)，即没有对象被呈现。

在这里要说明的是：在JavaScript中，null是基础数据类型，但是typeof判断为object，这是由于历史原因造成的。
在JavaScript最初的实现中，JavaScript中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于null代表的是空指针(大多数平台下值为0x00），因此，null使用0作为类型标签，typeof null就返回了”object”。

Boolean 布尔类型

布尔表示一个逻辑实体，可以有两个值： true 和 false。

注意点：
由于js中区分大小写，因此True 和 False 都不是Boolean值。

任意的JavaScript的值都可以转换为布尔值。undefined,null, 0,-0,NaN,""这6个值,再加上false本身共7个值都会转换为false

Number 数字类型

在JavaScript中只有一种数字类型：基于IEEE 754 标准的双精度64位二进制格式的值（ -(253 -1) 到 253 -1）。这种类型可以表示32位的整数，也可以表示64位的浮点数，还能有一些带符号的值：+Infinity,-Infinity和NaN(非数值，Not-a-Number)。
直接输入的任何数字都可以看做Number类型的字面量。例如：

1

var iNum = 86;  // 此代码声明了存放整数值的变量，它的值由字面量86定义。

进制数

通常，我们所说的整数都是以十进制来表示。但是，在计算机学科，也有其他进制，比如二进制、八进制、十六进制。
在JavaScript中，能准确识别十进制，十六进制整数。八进制整数要看情况识别。
八进制字面量的首数字必须是0，其后的数字可以是任何八进制数字(0-7)。

1

var iNum = 070; // 070 等于十进制的 56

虽然JavaScript的某些实现可以允许采用八进制形式表示整数。但是，ECMAScript 6的严格模式下，八进制字面量是明令禁止的。因此，最好不要使用以0位前缀的整型字面量。
十六进制字面量的首数字必须是0，后面接字母x，然后是任意的十六进制数字（0 到 9 和 A 到 F）。这些字母可以是大写的，也可以是小写的。

1
2

var iNum = 0x1f; // 0x1f 等于十进制的 31
var iMum = 0xAB; // 0xAB 等于十进制的 171

注意：尽管所有整数都可以表示为八进制或十六进制的字面量，但所有数学运算返回的都是十进制结果。

浮点数

要定义浮点值，必须包括小数点和小数点后的一位数字（例如，用1.0而不是1）。这被看作浮点数字面量。

1

var fNum = 5.0;

对于浮点字面量，在用它进行计算前，真正存储的是字符串

JavaScript中的数字具有足够的精度，并可以极其近似于0.1。但是，数字不能精确表述也会带来一些问题。

由于四舍五入误差，上述代码中的”x” 实际上并不等于 “y”。这个问题，在任何使用二进制浮点数的编程语言中都会出现。不过，上述代码中的x和y的值非常接近彼此和最终的正确值。这种结果可以胜任大多数计算任务。不相等的问题只有在比较的时候才会出现。

特殊的Number值

Number对象是经过封装的能让你处理数字值的对象。它由Number()构造器创建。Number对象的属性都是Number类型。比如，前两个是Number.MAX_VALUE 和 Number.MIN_VALUE。它们定义了Number值集合的外边界。Number.MIN_SAFE_INTEGER和Number.MAX_SAFE_INTEGER，分别表示最小的安全整数，最大的安全整数。
Number.NaN表示特殊的”非数字”值。以下是一些例子：

NaN

NaN 是一个奇怪的特殊值。一般来说，这种情况发生在类型转换失败时。例如，要把单词 blue 转换成数值就会失败，因为没有与之等价的数值。与无穷大一样，NaN也不能用于算术计算。NaN的另一个奇特之处在于，它与自身不相等，这意味着下面的代码将返回false;

1

alert(NaN == NaN); // false

出于这个原因，不推荐使用 NaN 值本身。建议使用函数Number.isNaN()或者 isNaN()：
isNaN()是全局函数，会强制将参数转换为数字，用来确定一个值是否为NaN，
es6中定义的Number.isNaN()函数，不会强制将参数转换为数字，只有在参数是真正的数字类型，且值为NaN的时候才会返回true。

1
2
3
4
5
6

alert(Number.isNaN('blue')); // false
alert(isNaN('blue')); // true
alert(Number.isNaN(666)); // false
alert(isNaN(666)); // false
alert(Number.isNaN(0 / 0)); // true
alert(isNaN(0 / 0); // true

String 字符串类型

JavaScript的字符串类型用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串种的每个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。
字符串类型有个特色叫immutable，这意味着字符串一旦被创建，本身是不能被修改的。当使用String.prototype.methods做任何操作都不会影响到原字符串，但是，可以基于对原始字符串的操作来创建新的字符串。

1
2
3
4

var str = "test"
str.len = 4   //  这里修改的只是临时对象，之后立马销毁
var t = str.len
console.log(t); // 由于str没有len这个属性，所有会输出 undefined

Symbol 符号类型

符号(Symbols)是ECMAScript 6新定义的。Symbol()函数返回symbol类型的值，都是唯一的，不相等的，并且具有静态属性和静态方法。symbol值可以用来作为对象属性的标识符，这是Symbol数据类型的唯一目的。
在某些语言中也有类似原子类型(Atoms)，你也可以认为它们是C里面的枚举类型。

Objects

与原始类型对应的是引用类型。引用类型通常叫做类(class)，也就是说，遇到引用值，所处理的就是对象。

引用值是存储在堆(heap)中的对象，也就是说，存储在变量处的值是一个指针(point)，指向存储对象的内存处。
在内存中可以被 标识符引用的一块区域。

ECMAScript中的所有对象都由这个对象继承而来，Object对象中的所有属性和方法都会出现在其他对象中。

数组、对象、函数等都被称为复杂对象。

参考：

1. JavaScript数据类型和数据结构
2. ECMAScript原始类型
3. ECMAScript引用类型

valueOf()方法是Object的原型方法，每个对象都具有该方法，但是各对象返回的值有一定的区别。我们一起来看看。

Object.prototype.valueOf()

JavaScript调用valueOf()方法将对象转换为原始值。你很少需要自己调用valueOf()方法；

默认情况下，valueOf()方法由Object后面的每个对象继承。每个内置的核心对象都会覆盖此方法以放回适当的值。
如果对象没有原始值，则valueOf()将返回对象本身。

你可以在自己的代码中使用valueOf()将内置对象转换为原始值。创建自定义对象时，可以覆盖Object.prototype.valueOf()来调用自定义方法，而不是默认Object方法。

覆盖自定义对象的valueOf()方法

你可以创建一个取代valueOf()方法的函数，你的方法必须不能传入参数。
假设你有个对象叫MyNumberType而你想为它创建一个valueOf()方法。下面的代码为valueOf()方法赋予了一个自定义函数:

1

MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };

有了这样的一个方法，下一次每当MyNumberType要被转换为原始类型值时，JavaScript在此之前会自动调用自定义的valueOf()方法。
valueOf()方法一般都会被JavaScript自动调用，但你也可以像下面代码那样自己调用：

1

myNumberType.valueOf()

String.prototype.valueOf()

语法：strObj.valueOf()
返回值：表示给定String对象的原始值
说明：valueOf()方法返回一个String对象的原始值，该值等同于String.prototype.toString()。
该方法通常在JavaScript内部被调用，而不是在代码里显示调用。

1
2

let x = new String('Hello world')
console.log(x.valueOf())   // Hello world

Date.prototype.valueOf()

语法：dataObj.valueOf()
返回值：表示给定Date对象的原始值
说明：valueOf()方法返回以数值格式表示的一个Date对象的原始值。该值从1970年1月1日0时0分0秒（UTC，即协调世界时）到该日期对象所代表时间的毫秒数。
该方法的功能和Date.prototype.getTime()方法一样。
该方法通常在JavaScript内部调用，而不是在代码中显示调用。

1
2
3

var x = new Date(2018, 1, 12)
var myVar = x.valueOf()
console.log(myVar) // 1518364800000

Number.prototype.valueOf()

语法： numObj.valueOf()
返回值：表示给定Number对象的原始值。
说明：该方法通常在JavaScript内部调用，而不是在代码中显示调用。覆盖Object.prototype.valueOf()方法
案例：

Boolean.prototype.valueOf()

语法：bool.valueOf()
返回值： 返回给定Boolean对象的原始值
说明： Boolean的valueOf()方法返回一个Boolean字面量的原始值作为布尔数据类型。该方法通常在JavaScript内部调用，而不是在代码中显示调用。
案例：

Symbol.prototype.valueOf()

语法： Symbol().valueOf()
返回值：返回给定Symbol对象的原始值
说明：Symbol的valueOf()方法返回Symbol对象的原始值作为Symbol数据类型。JavaScript调用valueOf()方法将对象转换为原始值。你很少需要自己调用valueOf()方法。当遇到期望有原始值的对象时，JavaScript会自动调用它。
案例：

[完]

1：mac连接linux服务器
2：将mac上的文件上传到linux服务器指定位置
3：解压文件
mac上使用命令，推荐使用 iterm2 。当然，也可以使用mac自带的终端工具。

操作过程：

一： mac连接linux服务器

输入命令连接Linux服务器：

1

ssh username@ip

其中: username为登录Linux服务器所需的用户名，ip为服务器的地址。默认端口号为22，如果要指定端口号，使用 -p port

1
2
3

// 以下两种方式都可以
ssh username@ip -p port 
ssh -p port username@ip

回车，它会要求输入密码，说明以上步骤没有错。输入密码，如果顺利，连上了Linux服务器。
以下，我第一次输入错误密码的提示。第二次密码正确。

此时，就算是连上了linux服务器。

二： 上传文件到linux服务器

新开一个窗口 使用scp命令
scp是secure copy的缩写，scp是linux系统下基于ssh登录进行安全的远程文件拷贝命令。
介绍一个命令：

1

scp [-r] [-P port] local_file_address username@ip:remote_file_address

命令解释：
-r: 递归复制整个目录
-P port: 注意是大写的P，port是指定的端口号。
local_file_address: 本地文件地址。[地址是根据当前命令所在目录来编写的]
remote_file_address: 远程服务器地址。
输入完以上命令，回车，之后会让你输入服务器密码。成功之后，就开始复制了。以下是我的一个操作。

三：解压文件

连接好Linux服务器后，找到要解压的文件目录地址。
unzip命令用于解压缩由zip命令压缩的.zip压缩包

1
2

unzip test.zip  // 将压缩文件test.zip在当前目录下解压缩。
unzip -n test.zip -d /tmp // 将压缩文件text.zip在指定目录/tmp下解压缩，如果已有相同的文件存在，要求unzip命令不覆盖原先的文件。

参考：
1：主要参考：http://blog.csdn.net/fuyujiaof/article/details/56487525
2：scp 命令： http://www.runoob.com/linux/linux-comm-scp.html
3：unzip命令： http://man.linuxde.net/unzip

box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。

语法

box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] ]

解释

none：默认值为none，表示没有阴影
inset：可选。将边框外阴影改为边框内阴影（即使是透明边框），背景之上内容之下。如果不写，默认为边框外阴影。inset只可写在最前或者最后。
offset-x：必需。阴影水平方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素右边👉；负值，表示阴影在元素左边👈
offset-y：必需。阴影垂直方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素下边☟；负值，表示阴影在元素上边☝
blur-radius：可选。阴影的模糊距离。不允许为负值。如果值为0，则阴影的边缘清晰，否则，值越大，阴影的边缘越模糊。
spread-radius：可选。默认为0，此时阴影与元素同样大；正直，阴影向各个方向延伸扩大；负值，阴影沿相反方向缩小。
color：可选。如果没有指定，使用浏览器默认颜色–通常是color属性的值。

举个例子

注意：以下例子不是截图

正常情况

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue'>css阴影</p>

css阴影 box-shadow:15px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px blue'>css阴影</p>

css阴影 box-shadow:15px 5px 10px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px 5px blue'>css阴影</p>

css阴影 box-shadow:15px 5px 10px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px 5px blue'>css阴影</p>

css阴影 box-shadow:15px 5px 0px 5px blue

负值 (blur-radius不允许为负值，其他三个可以)

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px -5px blue'>css阴影</p>

css阴影 box-shadow:15px -5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px blue'>css阴影</p>

css阴影 box-shadow:-15px -5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px 5px blue'>css阴影</p>

css阴影 box-shadow:-15px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px -5px blue'>css阴影</p>

css阴影 box-shadow:15px 5px 10px -5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px -5px blue'>css阴影</p>

css阴影 box-shadow:15px 5px 0px -5px blue

inset 内阴影

<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px blue'>css阴影</p>

css阴影 box-shadow:inset 15px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px blue'>css阴影</p>

css阴影 box-shadow:inset 15px 5px 10px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px 5px blue'>css阴影</p>

css阴影 box-shadow:inset 15px 5px 10px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 0px 5px blue'>css阴影</p>

css阴影 box-shadow:inset 15px 5px 0px 5px blue

多个阴影

多个阴影，写在前面的权重大，阴影重合部分权重大的值在上面。

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue, -15px -5px red'>css阴影</p>

css阴影 box-shadow:15px 5px blue, -15px -5px red

<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green '>css阴影</p>

css阴影 box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green

<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px red inset,inset 15px 5px blue'>css阴影</p>

css阴影 box-shadow:-15px -5px red inset,inset 15px 5px blue

<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset '>css阴影</p>

css阴影 box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset

在线生成阴影值

1：F12

2: Box Shadow CSS Generator

总结

以上，基本用法已经会了。更复杂的情景，理解了应该很好写出来。在翻阅资料的时候，还看到了另一个属性 filter:drop-shadow，也表示阴影，但是有区别。
CSS3 filter:drop-shadow滤镜与box-shadow区别应用

拖放（drap && drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。

拖放的流程对应的事件

我们先看下拖放的流程：

1

选中  --->  拖动  ---> 释放

然后，我们一步步看下这个过程中，会发生的事情。

选中

在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

draggable属性：设置元素是否可拖动。
语法：<element draggable="true | false | auto" >

• true: 可以拖动
• false: 禁止拖动
• auto: 跟随浏览器定义是否可以拖动

拖动

每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始–>拖动过程中–> 拖动结束。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

释放

到达目的地之后，释放元素事件

选中拖动释放例子

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<!DOCTYPE HTML>
<html>

<head>
    <title>拖放示例-文本</title>
</head>
<style>
.src {
    display: flex;
}

.dropabled {
    flex: 1;
}

.txt {
    color: green;
}

.img {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

.target {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid gray;
    color: red;
}
</style>

<body>
    <div class="src">
        <div class="dragabled">
            <div class="txt" id="txt">
                所有的文字都可拖拽。
                <p draggable="true">此段文字设置了属性draggable="true"</p>  
            </div>
            <div class="url" id="url">
                <a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
            </div>
            <img class="img" id="tupian1" src="img1.png" alt="图片1" />
            <img class="img" id="tupian2" src="img2.png" alt="图片2" />
        </div>
        <div id='target' class="dropabled target">Drop Here</div>
    </div>
    <script>
        var dragSrc = document.getElementById('txt')
        var target = document.getElementById('target')

        dragSrc.ondragstart = handle_start
        dragSrc.ondrag = handle_drag
        dragSrc.ondragend = handle_end

        function handle_start(e) {
          console.log('dragstart-在元素开始被拖动时候触发')
        }

      function handle_drag() {
            console.log('drag-在元素被拖动时候反复触发')
        }

      function handle_end() {
            console.log('dragend-在拖动操作完成时触发')
        }


        target.ondragenter = handle_enter
        target.ondragover = handle_over
        target.ondragleave = handle_leave

        target.ondrop = handle_drop

        function handle_enter(e) {
            console.log('handle_enter-当元素进入目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_over(e) {
            console.log('handle_over-当元素在目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_leave(e) {
            console.log('handle_leave-当元素离开目的地时触发')
            // 阻止浏览器默认行为
            // e.preventDefault()
        }

        function handle_drop(e) {
            console.log('handle_drop-当元素在目的地放下时触发')
            var t = Date.now()
            target.innerHTML = ''
            target.append(t + '-拖放触发的事件。')
            e.preventDefault()
        }
    </script>
</body>

</html>

drag-drop事件触发

在整个拖放过程中，我们以上说的是表面现象，事件过程内部还会发生什么事情呢？请看下面👇的DataTransfer对象。

DataTransfer对象

与拖放操作所触发的事件同时派发的对象是DragEvent，它派生于MouseEvent，具有Event与MouseEvent对象的所有功能，并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。
// DataTransfer dataTransfer = DragEvent.dataTransfer
DataTransfer对象定义的属性和方法有很多种，我们看下列入标准的几个。

1
2
3
4
5
6
7

//IE10及之前版本，不支持扩展的MIME类型名
//Firefox 5版本之前，不能正确的将url和text映射为text/uri-list 和text/plain
var dataTransfer = event.dataTransfer;
//读取文本，
var text = dataTransfer.getData("Text");
//读取URL,
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");

drag-drop-dataTransfer各属性方法示例

浏览器支持程度

说了这么多，如果浏览器不支持，也是白扯。

Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
要求最少的js，实现拖拽页面元素的简单方法

drag之浏览器支持程度–caniuse

note

• dataTransfer.items 只有Chrome支持
• dropzone属性，目前没有浏览器支持
• Firefox支持.setDragImage任何类型的DOM元素。Chrome必须有HTMLImageElement或者任何DOM元素，该DOM元素附加到DOM 和浏览器的.setDragImage视口(viewport)内。
  1.部分支持是指不支持dataTransfer.files 或者 .types对象
  2.部分支持是指不支持.setDragImage
  3.部分支持是指dataTransfer.setData / getData 的有限支持格式

以下，我在实际中遇到的情况，各浏览器对标准的实现还是有差异的。

• getData()在chrome 62.0浏览器中，只能在drop事件中生效。
• 如果使用setDragImage方法，指定的图像不存在，则拖动过程：
  1. safari 11.0.1 浏览器，只会触发dragstart和dragend事件。
  2. chrome、opera 和 Firefox会正常触发其他事件。
• 每一次拖放操作，Firefox都会执行一次新开一个页面的动作，并且自动搜索dataTransfer.getData()得到的内容。
  解决方法，在drop事件中，添加： e.stopPropagation();// 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
• opera 49版本中，链接默认不可以拖动，必须把draggable属性设置为true，才可以拖动。
• 关于 dropEffect 和 effectAllowed 。
  1. effectAllowed 允许拖放操作的效果，最多不会超过那么几种。dropEffect 设置拖放操作的具体效果，只能是四种可能之一。
  2. 如果effectAllowed设置为none，则不允许拖放元素。但是各个浏览器能触发的事件不一样。（注意：safari可以拖放元素，而且会触发所有事件）
  3. 如果dropEffect设置为none，则不允许被拖放到目的地元素中。
  4. 如果设置了effectAllowed的值，那么如果要设置dropEffect的值，其值必须和effectAllowed的值一致，否则拖动效果无效，而且不允许将被拖放元素放到目的地元素中。(注：safari11.0.1有效果，而且也能拖动到目的地元素中，但是这不符合标准)。

示例

drag-drop-dataTransfer各属性方法示例
drag-drop事件触发

总结

原生HTML5拖拽API，drag && drop 在实际工作中，还是有很多情况下会遇到的。
以上，我只介绍了部分常用API。API不复杂，多看会儿，实践就知道了。各个浏览器，可能会在表现上，稍有不同，但我相信大家还是会向着标准发展的。

web应用程序，切换主题，给其换肤，是一个比较常见的需求。

• 如何能快速的切换主题色？(只有固定的一种皮肤)
• 如果又想把主题色切换为以前的呢？（有多种可切换的皮肤）
• 该以何种方式编写标签的css属性？

快速切换主题这个需求，它考验了项目的CSS代码，是否具有可维护性、可扩展性。
css要如何编写，才能达到这两点呢，我还在研究学习当中，可以参考在大型项目中组织CSS。
本来，此文想写这个的，发现道行不够(┬＿┬)，我还是写如何实现的，比较好。

想要换主色调，其实就是换一种风格样式，最终都是换css。
我看目前比较流行的几种切换主题的方式：

• 所有样式的css模版都在项目中，根据条件，给body添加class，通过不同的class来显示不同的样式。
• 通过引用不同的link文件，达到效果。
• ElementUI的这种方式，详情见ISSUE
  （1） 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词
  （2） 根据用户选择的主题色生成一系列对应的颜色值
  （3） 把关键词再换回刚刚生成的相应的颜色值
  （4） 直接在页面上加 style 标签，把生成的样式填进去

我目前用的是第一种方式，把操作过程记录下来，方便以后查看。

如何增加主题文件-具体操作过程

说明：此项目UI是在elementUI基础上建立的，所以，我们可以通过element提供的方法，来自定义主题。

生成自定义主题文件

使用工具下载自定义主题文件，并命名为wq-variables.css。以后我们如果想要增加主题文件，只需要修改变量文件中各个变量所对应的值。

编译主题

我们利用工具来编译主题。
在终端，将刚刚修改好的变量文件，通过命令node_modules/.bin/et -c wq-variables.css来编译主题。

给自定义主题增加命名空间

默认情况下，编译的主题目录会放在./theme下。由于，我们是通过改变css的命名空间来切换主题的，那么，我们就需要为刚生成的主题增加命名空间。主题文件内容很多，如果手动一个个添加命名空间，工作量巨大，这个时候，可以使用另一个给css增加命名空间的工具。下载这个项目，然后只需要修改gulpfile.js文件中3处内容，就可以得到想要的内容，这里注意，本项目css自定义的命名空间统一为custom-******,其中******建议使用主题色的16进制编码,也可以使用其他字符串，但是要和radio标签统一。

引用自定义主题

自定义主题文件，已经有了，只剩下如何引入使用了。

• 在App.vue中import新增的主题样式（这个也可以写在topbar.vue文件中，到底哪种好些，我也不清楚）
• 在./src/components/nav/topbar/topbar.vue中，添加对应的radio标签
  经过以上两步，就可以正常使用了。

如何处理与自定义主题不同部分的样式

可以新建一个css文件，然后在其中编写样式，之后在入口文件引入就ok了。

具体效果，可查看于此网站：
http://weiqinl.com/vue-element-admin/

此做法参考于：
基于Element的动态换肤

Node版本管理器–nvm，可以运行在多种操作系统上。nvm for windows 是使用go语言编写的软件。 我电脑使用的是Windows操作系统，所以我要记录下在此操作系统上nvm的安装和使用。

下载

nvm-windows 最新下载地址：
https://github.com/coreybutler/nvm-windows/releases

如图所示：

我目前看到有两个版本【Pre-release 1.1.6】和 【Latest release 1.1.5]，我们下载目前稳定版本1.1.5就可以了。1.1.6版本是最新版本，可能还不是很稳定。
而这里又有四个可下载的文件。

• nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置
• nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。
• Source code(zip)：zip压缩的源码
• Sourc code(tar.gz)：tar.gz的源码，一般用于*nix系统

我对这个目前只是简单使用，为了方便，所以下载了nvm-set.zip文件。

安装和升级

安装之前的操作

请注意： 在安装nvm for windows之前，你需要卸载任何现有版本的node.js。并且需要删除现有的nodejs安装目录（例如：”C:\Program Files\nodejs’）。因为，nvm生成的symlink（符号链接/超链接)不会覆盖现有的（甚至是空的）安装目录。
你还需要删除现有的npm安装位置（例如“C:\Users\weiqinl\AppData\Roaming\npm”），以便正确使用nvm安装位置。

安装

以上操作完成之后，双击执行下载的setup文件，

Next之后，选择同意协议，之后选择nvm的本地安装目录，这里注意，nvm的安装路径名称中最好不要有空格。

例如最好不要这样有空格的~\Program Files\nvm，我这里选择的是D:\softtool\nvm。
点击Next，跳转到设置 Node.js的Symlink，即需要设置nodejs的快捷方式存放的目录。

之后，点击Next–>Install–>Finish完成本次安装。

检测

检查是否安装成功，我们可以在新的命令窗口中输入

1

nvm

• 如果出现nvm版本号和一系列帮助指令，则说明nvm安装成功。
• 否则，可能会提示nvm: command not found

升级

如果要升级的话，请重新下载最新的安装程序。并直接运行安装程序。它将安全的覆盖需要更新的文件，而无需关心nodejs的安装。
此次安装需要确保和上次使用相同的安装目录。
如果你最初安装到默认位置，则只需一直点击”下一步”，直到完成。

使用

nvm for windows是一个命令行工具，在控制台输入nvm,就可以看到它的命令用法。基本命令有：

• nvm arch [32|64] ： 显示node是运行在32位还是64位模式。指定32或64来覆盖默认体系结构。
• nvm install <version> [arch]： 该可以是node.js版本或最新稳定版本latest。（可选[arch]）指定安装32位或64位版本（默认为系统arch）。设置[arch]为all以安装32和64位版本。在命令后面添加--insecure ，可以绕过远端下载服务器的SSL验证。
• nvm list [available]： 列出已经安装的node.js版本。可选的available，显示可下载版本的部分列表。这个命令可以简写为nvm ls [available]。
• nvm on： 启用node.js版本管理。
• nvm off： 禁用node.js版本管理(不卸载任何东西)
• nvm proxy [url]： 设置用于下载的代理。留[url]空白，以查看当前的代理。设置[url]为none删除代理。
• nvm node_mirror [url]：设置node镜像，默认为https://nodejs.org/dist/.。我建议设置为淘宝的镜像https://npm.taobao.org/mirrors/node/
• nvm npm_mirror [url]：设置npm镜像，默认为https://github.com/npm/npm/archive/。我建议设置为淘宝的镜像https://npm.taobao.org/mirrors/npm/
• nvm uninstall <version>： 卸载指定版本的nodejs。
• nvm use [version] [arch]： 切换到使用指定的nodejs版本。可以指定32/64位[arch]。nvm use <arch>将继续使用所选版本，但根据提供的值切换到32/64位模式的<arch>
• nvm root [path]： 设置 nvm 存储node.js不同版本的目录 ,如果未设置，将使用当前目录。
• nvm version： 显示当前运行的nvm版本，可以简写为nvm v

一个nodejs的安装使用流程：

1
2
3

nvm ls   // 查看目前已经安装的版本
nvm install 6.10.0  // 安装指定的版本的nodejs
nvm use 6.10.0  // 使用指定版本的nodejs

这是我安装第一个版本时候的命令:

认真看以下的图，相同的nvm ls命令，得到的结果为什么不一样？因为，这是使用了nvm切换到了指定的版本。如果在nvm ls命令输出了 当前样式，说明切换成功了。如果没有出现(Currently using 64-bit executable)，则表示没有切换成功。这就需要查看原因，认真按照上面步骤来。

使用命令时注意点

• 请用管理员身份运行命令管理器，否则可能出错。
• 先设置node和npm的淘宝镜像，这样成功率和下载速度会更高点。

用途

1：主要用途，切换nodejs版本。如果想使用最新的流行版本测试您正在开发的模块，而不用卸载稳定版本的node，则可以使用nvm来切换nodejs版本。

注意点

• nvm安装目录，最好不要存在空格。否则，nvm可以安装成功，但使用nvm use x.y.z（nodejs的切换）会有问题。
• 有些全局的npm模块，可能在各版本的node.js之间不共享。
  你正在使用的node.js版本中可能不支持某些npm模块。因此在工作的时候请注意工作环境。

博客园地址：

1
2
3
4
5

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

语法

1

box-sizing: content-box | border-box | inherit;

值

content-box
默认值，标准盒子模型。width 和 height 只包括内容(content)的宽和高。在宽度和高度之外绘制元素的内边距和边框。

尺寸计算公式:

border-box
width和height属性包括内容(content)、内边距(padding)、边框(border)，但是不包括外边距(margin)。在宽度和高度之内绘制元素的内容、内边距和边框。

尺寸计算公式：

inherit
规定应该从父元素继承 box-sizing 属性的值

例子

在线例子

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>box-sizing的使用</title>
  <style type="text/css">
  .box {
    width: 460px;
    height: 400px;
    border: 1px solid red;
    margin: 10px;
    background-color: gray;
  }

  .content {
    box-sizing: content-box;
    border: 10px solid blue;
    width: 300px;
    padding: 20px;
    margin: 30px;
    background-color: green;
  }

  .border {
    box-sizing: border-box;
    border: 10px solid blue;
    width: 300px;
    padding: 20px;
    margin: 30px;
    background-color: yellow;
  }

  .inherit {
    box-sizing: inherit;
    border: 10px solid red;
    width: 300px;
    padding: 20px;
    margin: 30px;
    background-color: red;
  }
  </style>
</head>

<body>
  <div class="box">
    <div class="content">
      我是content-box值(默认)
      <br/>box-sizing: content-box;
      <br/>border: 10px solid blue;
      <br/>width: 300px;
      <br/>padding: 20px;
      <br/> margin: 30px;
      <div class="inherit">我是inherit值</div>
    </div>
  </div>
  <div class="box">
    <div class="border">
      我是border-box值
      <br/>box-sizing: border-box;
      <br/>border: 10px solid blue;
      <br/>width: 300px;
      <br/>padding: 20px;
      <br/>margin: 30px;
      <div class="inherit">我是inherit值</div>
    </div>
  </div>
</body>

</html>

chrome截图：

我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候，会自动生成一系列文件，其中就包含webpack配置文件。我们现在来看下，这些配置到底是什么意思，对我们开发过程中有什么影响。

项目搭建好了， 使用Bash运行npm run dev， 然后Bash界面会打印出一些东西，之后默认浏览器就打开了一个页面。为什么会有这些动作呢？我们从package.json开始看。

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

// package.json
{
...
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
...
}

运行npm run dev其实是执行了 build/dev-server.js文件。
那我们现在先分析这个文件，直接上源码。

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

// dev-server.js
// 调用check-versions.js 模块，检查版本node和npm的版本
require('./check-versions')()

// 获取配置
var config = require('../config')
// 如果Node的环境变量中没有设置当前的环境(NODE_ENV), 则使用config中配置的环境作为当前环境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// opn模块，使用默认应用程序，打开网址、文件、 可执行程序等内容的一个插件。
// 例如,使用默认浏览器打开urls。跨平台可用。
// 这里用它来调用默认浏览器打开dev-server监听的端口，例如: localhost:8080
var opn = require('opn')
// path模块提供用于处理文件和目录路径的实用程序。
var path = require('path')
// 引入express 模块
var express = require('express')
// 引入 webpack模块
var webpack = require('webpack')

// 一个express中间件，用于将http请求代理到其他服务器
// 例：localhost:8080/api/xxx  -->  localhost:3000/api/xxx
// 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')

// 根据 Node 环境来引入相应的 webpack 配置
// 这里用 "testing" 来判断Node环境, 是因为在两个webpack.***.conf中还会有判断
var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

// dev-server 监听的端口，默认为config.dev.port设置的端口，即8080
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port

// 用于判断是否要自动打开浏览器的布尔变量，
// 当配置文件中没有设置自动打开浏览器的时候其值为 false
// `!!`是一个逻辑操作，表示强制转换类型。这里强制转换为`bool`类型
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser

// 定义HTTP代理，到自定义API接口
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable

// 创建一个express实例
var app = express()

// 根据webpack配置文件创建Compiler对象
var compiler = webpack(webpackConfig)

// 引入webpack开发中间件, 此插件只在开发环境中有用。
// 使用compiler对象来对相应的文件进行编译和绑定
// 编译绑定后将得到的产物存放在内存中而没有写进磁盘
// 将这个中间件交给express使用之后即可访问这些编译后的产品文件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  //绑定中间件到publicpath中，使用方法和在webpack中相同
  publicPath: webpackConfig.output.publicPath, 
  quiet: true // 允许在console控制台显示 警告 和 错误 信息
})

// 引入热重载功能的中间件。
// Webpack热重载仅使用webpack-dev-middleware开发中间件。
// 这个中间件，允许您在没有webpack-dev-server的情况下，将热重载功能到现有服务器中。
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  // 用于打印行的功能
  log: () => {}
})

// 当html-webpack-plugin 提交之后通过热重载中间件发布重载动作使得页面重载
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// 将 proxyTable 中的代理请求配置挂在express服务器上
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// connect-history-api-fallback 模块，通过指定的索引页来代理请求的中间件，对于使用HTML5历史API的单个页面应用程序非常有用。
// 处理 HTML5历史api回退的问题
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())

// 为webpack打包输出服务
// serve webpack bundle output
app.use(devMiddleware)

// 热重载和状态保留功能
// 显示编译错误信息
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// posix属性提供了对路径方法的POSIX特定实现的访问。
// 服务纯静态资源。 利用Express托管静态文件，使其可以作为资源访问
// 想要访问static文件夹下的资源，必须添加 staticPath 返回的地址作为上一级地址。
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

// 应用启动时候的访问地址信息，例如 http://localhost:8080
var uri = 'http://localhost:' + port

// 异步回调
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
// 如果webpack开发中间件有效执行，那么执行后面的回调函数。
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // 如果是 testing 环境， 不需要打开浏览器
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

// 启动express服务器并监听相应的端口（8080）
var server = app.listen(port)

// 模块导出。
// 1：执行异步函数
// 2：提供close方法，关闭服务器
module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

以上，就是我对这个文件的解析。

后续再对其他文件解析…欢迎关注😄

参考链接：
http://blog.csdn.net/hongchh/article/details/55113751

更多内容请查看:
个人主页
博客园
github
简书
您的支持是对博主最大的鼓励，感谢您的认真阅读，欢迎留言讨论。

webpack 是一个当下最流行的前端资源的模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的bundle - 通常只有一个，由浏览器加载。

它是高度可配置的，我们先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)

入口(entry)

webpack 创建应用程序所有依赖的关系图。图的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点认为是根上下文或 APP第一个启动文件。

简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

简单语法

用法：entry: string | Arrary<string>

1
2
3
4

//webpack.config.js
module.exports = {
  entry:  './src/index.js'
};

entry属性的单个入口语法，在扩展配置的时候有失灵活性。它是下面的简写：

1
2
3
4
5
6

//webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js'
  }
};

向entry传入一个数组时候，将创建”多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将他们的依赖导向(graph)到一个”chunk”时候，传入数组的方式就很有用。

1
2
3
4
5
6
7

//webpack.config.js
module.exports = {
  entry:  [
    './src/index.js',
    'babel-polyfill',
  ]
};

对象语法

用法: entry: {[entryChunkName: string]: string|Array<string>}

1
2
3
4
5
6
7

//webpack.config.js
module.export = {
  entry: {
    app: './src/app.js',
    vendors:  './src/vendors.js'
  }
};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

这个配置告诉我们 webpack 从 app.js 和 vendors.js 开始创建依赖图。这些依赖图是彼此完全分离、互相独立的。这种方式比较常见于，只有一个入口起点（不包括 vendor，vendor一般都是动态加载的第三方模块。动态加载的模块不是入口起点。）的单页应用程序(single page application)中。不过，为了支持提供更佳 vendor 分离能力的 DllPlugin。 官方现在不太建议将第三方模块放到entry.vendors中。

对象语法，更常见的应该是多入口应用程序-多页应用(MPA)。

1
2
3
4
5
6
7
8

//webpack.config.js
module.export = {
  entry: {
    home: "./home.js",
    about: "./about.js",
    contact: "./contact.js"
  }
};

此配置，告诉 webpack，我们 需要 3 个独立分离的依赖关系图.
在多页应用中，每当页面跳转时，服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。

根据经验：每个 HTML 文档只使用一个入口起点。

输出(output)

将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。output选项可以控制webpack如何向硬盘写入编译文件。注意，即使可以存在多个entry起点，但只指定一个output配置。

简单用法

在 webpack 中配置output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

1. filename 用于输出文件的文件名。
2. 目标输出目录 path 的绝对路径。

1
2
3
4
5
6
7
8

//webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: './home/proj/public/assets',
    filename: 'bundle.js'
  }
};

此配置将一个单独的 bundle.js 文件输出到 ./home/proj/public/assets 目录中。

多个入口起点

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符来确保每个文件具有唯一的名称。

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

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js', //使用占位符
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

webpack的目标是，让webpack聚焦于项目中的所有资源(asset), 而浏览器不需要关注考虑这些。 webpack把每个文件(.css, .html, .scss, .jpg, etc.)都作为模块处理。然而webpack自身只理解JavaScript。
webpack loader 在文件被添加到依赖图中时，将文件源代码转换为模块。

loader可以使你在import或”加载”模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

在更高层面，在webpack的配置中loader有两个目标：

1. 识别出应该被对应的loader进行转换的那些文件。(test属性)
2. 转换这些文件，从而使其能够被添加到依赖图中(并且最终添加到bundle中)。(use属性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.txt$/,
        use: 'raw-loader' 
      }
    ]
  }
};

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和use。这相当于告诉 webpack 编译器，当碰到「在 require()/import 语句中被解析为 .txt 的路径」时，在对它打包之前，先使用 raw-loader 转换一下。

在webpack配置中定义loader时，要定义在module.rules中，而不是rules。如果不这么做，webpack会给出严重警告

示例

例如，你可以使用loader告诉webpack加载css文件，或者将TypeScript转为JavaScript。为此，首先安装相对应的loader:

1
2

npm install -D css-loader
npm install -D ts-loader

然后指示webpack对每个.css使用css-loader, 以及对所有.ts文件使用ts-loader:

1
2
3
4
5
6
7
8

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

根据配置选项，下面的规范定义了同等的loader用法:

1
2
3
4
5
6
7

{test: /\.css$/, use: 'css-loader'}
// 等同于
{test: /\.css$/, use: [{
  loader: 'css-loader'
}]}
// 等同于
{test: /\.css$/, loader: 'css-loader'}

module.rules.loader 是 module.rules.use: [ { loader } ] 的简写。

在应用程序中，有三种使用loader的方式：

• 配置（推荐）：在webpack.config.js文件中指定loader。
• 内联： 在每个imort语句中显示指定loader。
• CLI: 在shell命令中指定它们。

配置

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示loader的一种简明方式，并且有助于使代码变得简洁。同时让你对各个loader 有个全局概览：

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

module: {
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            { loader: 'scss-loader' },
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }
        ]
    }]
}

内联

可以在import 语句或任何等效于 “import” 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

1

import Styles from 'style-loader!css-loader?modules!./styles.css'

通过前置所有规则及使用!, 可以对应覆盖到配置中的任意loader。
选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

尽可能使用 module.rules，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

CLI

你也可以通过CLI使用loader:

1

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

这会对.jade文件使用 jade-loader，对 .css文件使用 style-loader和 css-loader。

Loader特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。
  loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。

解析Loader

loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是npm install, node_modules）解析。
loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 来管理，也可以将自定义 loader 作为应用程序中的文件。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）。

插件-plugins

插件是 wepback 的支柱功能。webpack 自身也是构建于-你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader无法实现的其他事。
由于loader仅在每个文件的基础上执行转换，而插件(plugins) 常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 来创建它的一个实例。

剖析

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。通过Function.prototype.apply方法，你可以把任意函数作为插件传递(this 将指向compiler)。我们可以在配置中使用这样的方式来内联自定义插件。

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

//ConsoleLogOnBuildWebpackPlugin.js
function ConsoleLogOnBuildWebpackPlugin() {

};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始！！！");

    callback();
  });
};

用法

由于插件可以携带参数/选项，你必须在webpack配置中，向plugins属性中传入new实例。
根据webpack的用法，可以有多种方式使用插件。但是，通过配置的方式使用是比较推荐的做法。

配置 (推荐)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]0
};

module.exports = config;

Node API(不推荐)

即便使用 Node API，用户也应该在配置中传入 plugins 属性。compiler.apply并不是推荐的使用方式。

1
2
3
4
5
6
7
8
9
10

// some-node-script.js
  const webpack = require('webpack'); //访问 webpack 运行时(runtime)
  const configuration = require('./webpack.config.js');

  let compiler = webpack(configuration);
  compiler.apply(new webpack.ProgressPlugin());

  compiler.run(function(err, stats) {
    // ...
  });

总结

以上就是webpack中比较重要的四个概念，在平时开发过程中会经常遇到。里面还可以有很多的详细配置，需要我们在项目开发的过程中慢慢了解。

《ECMAScript入门》是一本开源的JavaScript语言教程，全面介绍ECMAScript6新引入的语法特性。
let和const命令，是第一章开始介绍，也是比较基础的知识。我在学习之后，把它总结记录下来，以便自己以后复习查看。
以下代码，于Chrome57 DevTools运行
node为6.3版本

先总结

先总结区别，再分别阐述

let 与 const 相同点和区别

1：let命令用来声明变量，用法类似于var，但是所声明的变量。
const声明一个只读的常量，一旦声明，常量的值就不能改变。
const保证的是内存地址不得改动。常量（内存地址保存的是值），复合类型的数据（内存地址保存的是指针）
2：两者都不存在变量提升。
3：两者都有暂时性死区(TDZ)。
4：两者都不允许重复声明。
5：两者为JavaScript新增了块级作用域。两者作用域，只在声明所在的块级作用域有效。

基本用法

let命令介绍

let命令，用来声明变量。它的用法类似于var, 但是所声明的变量，只在let命令所在的代码块内有效。
浏览器中的结果

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

let实用举例

for循环的计数器

1
2

for (let i =0; i < 10; i++) {}
console.log(i) // ReferenceError: i is not defined

浏览器中的结果

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var, 最后输出的是10。

1
2
3
4
5
6
7

var  a  =   [];
for  (var  i  =  0;  i  <  10;  i++)  {
  a[i]  =   function ()  {
    console.log(i);
  };
}
a[6](); // 10

浏览器中的结果

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是10。

如果使用let, 声明的变量仅在块级作用域内有效，最后输出的是6。

1
2
3
4
5
6
7

var  a  =   [];
for  (var  i  =  0;  i  <  10;  i++)  {
  a[i]  =   function ()  {
    console.log(i);
  };
}
a[6](); // 6

浏览器结果

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

1
2
3
4
5
6
7

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

浏览器结果

上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

不存在变量提升

var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

1
2
3
4
5
6
7

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
 
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

浏览器结果

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

暂时性死区（TDZ）

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

1
2
3
4
5
6

var tmp = 123;
 
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

浏览器中的结果

上面代码中，存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

1
2
3
4
5
6
7
8
9
10
11

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
 
  let tmp; // TDZ结束
  console.log(tmp); // undefined
 
  tmp = 123;
  console.log(tmp); // 123
}

浏览器结果

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

1
2

typeof x; // ReferenceError
let x;

浏览器结果

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

1

typeof undeclared_variable // "undefined"

浏览器结果

上面代码中，undeclared_variable是一个不存在的变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

有些“死区”比较隐蔽，不太容易发现。

1
2
3
4
5

function bar(x = y, y = 2) {
  return [x, y];
}
 
bar(); // 报错

浏览器结果

上面代码中，调用bar函数之所以报错（某些实现可能不报错），是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于”死区“。如果y的默认值是x，就不会报错，因为此时x已经声明了。

1
2
3
4

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

浏览器结果

另外，下面的代码也会报错，与var的行为不同。

1
2
3
4
5
6

// 不报错
var x = x;
 
// 报错
let x = x;
// ReferenceError: x is not defined

浏览器结果

上面代码报错，也是因为暂时性死区。使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。上面这行就属于这个情况，在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。

ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。
浏览器结果

因此，不能在函数内部重新声明参数。

1
2
3
4
5
6
7
8
9

function func(arg) {
  let arg; //在chrome浏览器下，不报错。使用node执行，会报错。
}

function func(arg) {
  {
    let arg;//在chrome浏览器下，不报错。使用node执行，也不报错。
  }
}

浏览器环境和node执行情况

块级作用域

块级作用域，没有返回值。

为什么需要块级作用域?

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

1
2
3
4
5
6
7
8
9
10

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

浏览器结果

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

1
2
3
4
5
6
7

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

浏览器结果

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域

let实际上为 JavaScript 新增了块级作用域。

1
2
3
4
5
6
7

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

浏览器结果

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是10。

浏览器结果

ES6 允许块级作用域的任意嵌套。

1

{{{{{let insane = 'Hello World'}}}}};

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

1
2
3
4

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

浏览器结果

内层作用域可以定义外层作用域的同名变量。

1
2
3
4

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

1
2
3
4
5
6
7
8
9
10
11

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

块级作用域与函数声明

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

const命令

基本用法

const也是用来声明变量，但是声明的是一个只读的常量。一旦声明，常量的值就不能改变。

1
2
3
4
5

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

浏览器结果

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

1
2

const foo;
// SyntaxError: Missing initializer in const declaration

浏览器结果

上面代码表示，对于const来说，只声明不赋值，就会报错。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

1
2
3
4
5

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

浏览器结果

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

1
2
3
4

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

浏览器结果

上面代码在常量MAX声明之前就调用，结果报错。

const声明的常量，也与let一样不可重复声明。

1
2
3
4
5
6

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

浏览器结果

对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。 const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以，将一个对象声明为常量必须非常小心。

1
2
3
4
5
6
7
8

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError:  Assignment to constant variable.

浏览器结果

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

跨模块常量

上面说过，const声明的常量只在当前代码块有效。如果想设置跨模块的常量，可以采用下面的写法。

1
2
3
4

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

1
2
3
4

//test1.js 模块
import * as constans from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3

1
2
3
4

// test2.js 模块
import {A, B} from './constants';
console.log(A); //1
console.log(B); //3

这里其实用到了Module（模块）的导入导出功能。以后会讲到。

全局对象的属性

全局对象是最顶层的对象，在浏览器环境指的是window对象，在Node指的是global对象。ES5之中，顶层对象的属性与全局变量是等价的。

1
2
3
4
5

window.a = 1;
a //1

a = 2;
window.a //2

浏览器结果

上面代码中，全局对象的属性赋值与全局变量的赋值，是同一件事。（对于Node.js来说，这一条只对REPL环境适用，模块环境中，全局变量必须显示声明成global对象的属性。）这种规定被市委JavaScript语言的一大问题。因为很容易不知不觉就创建了全局变量。
ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是全局对象的属性；另一方面规定，let命令、const命令和class命令声明的全局变量，不属于全局对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

1
2
3
4
5
6
7

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a
window.a // 1

let b = 1;
window.b // undefined

浏览器结果

上面代码中，全局变量a由var命令声明，所以它是全局对象的属性；全局变量b由let命令声明，所以它不是全局对象的属性，返回undefined。

参考

let 和 const 命令

我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割:

• 组件，也称为异步组件
• 路由
• Vuex 模块

但是他们都有一些共同之处：自webpack2.0版本之后,他们都使用动态导入[译者注：也可以参考这个]。

Vue组件中的懒加载

这在Egghead上的“使用Vue异步组件按需加载组件”视频中有很好的解释。
这就像在注册组件时使用import函数一样简单：

1

Vue.component('AsyncCmp', () => import('./AsyncCmp')

并在本地注册使用:

1
2
3
4
5
6

new Vue({
// ...
components: {
'AsyncCmp': () => import('./AsyncCmp')
}
})

通过包装import函数进入到箭头函数，Vue将会在它被请求的时候执行加载这个模块。

如果组件导入使用命名导出[译者注：模块的导入导出，可以参考阮老师的文章]，则可以在返回的Promise上使用对象解构。
例如，对于来自KeenUI的UiAlert组件：

1
2
3
4
5

...
components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...

Vue路由中的懒加载

Vue路由器内置支持懒加载。这就像用import函数导入组件一样简单。看个例子，我们想在 /login 路由中使用懒加载一个Login组件：

1
2
3
4
5
6
7
8
9

// Instead of: import Login from './login'
// 替换: import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

懒加载Vuex模块

Vuex有一种registerModule方法可以让我们动态地创建Vuex模块。如果我们考虑到该import功能将ES模块作为有效载荷返回promise[原文： If we take into account that import function returns a promise with the ES Module as the payload]，我们可以使用它来懒加载模块：

1
2
3
4
5
6
7
8
9

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
// 设想 我们需要加载一个"login"模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

结论

Vue和Webpack使用懒加载非常简单。使用您刚刚阅读的内容，您可以从不同方面开始分割应用程序，并在需要时加载应用程序，从而减轻应用程序的初始加载。

ps: 这篇文章，基本上是翻译过来的。感谢作者Alex Jover
原文链接：
Lazy Loading in Vue using Webpack’s Code Splitting

定义和用法

cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

可能的值

图片测试于： chrome 版本 56.0.2924.87 // Firefor 版本 51.0.1 (32 位) // IE 8.0

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

例子：

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

<!DOCTYPE html>
<html>
<head>
    <title>cursor属性</title>
</head>
<body>
    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <span style="cursor:auto">Auto......</span><br />
    <span style="cursor:crosshair">Crosshair......</span><br />
    <span style="cursor:default">Default......</span><br />
    <span style="cursor:pointer">Pointer......</span><br />
    <span style="cursor:move">Move......</span><br />
    <span style="cursor:e-resize">e-resize......</span><br />
    <span style="cursor:ne-resize">ne-resize......</span><br />
    <span style="cursor:nw-resize">nw-resize......</span><br />
    <span style="cursor:n-resize">n-resize......</span><br />
    <span style="cursor:se-resize">se-resize......</span><br />
    <span style="cursor:sw-resize">sw-resize......</span><br />
    <span style="cursor:s-resize">s-resize......</span><br />
    <span style="cursor:w-resize">w-resize......</span><br />
    <span style="cursor:text">text......</span><br />
    <span style="cursor:wait">wait......</span><br />
    <span style="cursor:help">help......</span>
</body>
</html>

参考地址：

我的博客地址weiqinl.com
简书

前端需要使用表格来展示数据，找了一些插件，最后确定使用dataTables组件来做。

后端的分页接口已经写好了，不能修改。接口需要传入页码(pageNumber)和页面显示数据条数(pageSize)，显示相应的数据。

二、分析

先来分析下分页实现。

一是后端分页： 这种情况，请求的数据，后端返回的数据格式都按着官网来编码，很容易实现，在官网上有示例，不多说明。
二是前端分页： 前端分页也是支持的，不过需要一次把所有数据都获取到才可以。

看到这里，问题来了。由于后端在目前的情况下是更改不了，只能在前端实现。但是，现在 又不满足前端分页的条件 ：

一次性获取所有数据（现在后端数据接口只能返回相应页码的数据）。

介于目前的情况，获取的数据只有一页，没有所有的页码。
试试能不能 伪装一下后端分页的情况，就是开启后端分页，在请求之前，将传入的数据进行重组，在获取到数据后，将返回的数据按照后端分页的数据格式组装一遍。

经过测试，是可以的。

三、实现

通过DataTables配置参数ajax项 实现的
目前最新DataTables的版本是1.10.15版本 ，以下是使用此版本。

关于ajax详细介绍请看官方说明：中文 | 英文

DataTables参数ajax接收三种类型的参数：

• *string： 设置获取数据的url

• *object：和 jQuery.ajax 定义类似

• *function：自定义获取数据的功能

直接上代码吧，都有注释。

前端页面代码：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>jquery DataTables插件自定义分页ajax实现</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
</head>
 
<body>
  <div class="row-fluid">
    <h3>JQuery DataTables插件自定义分页Ajax实现</h3>
    <table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <!-- DataTables -->
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
  <script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript">
  $(function() {
    //提示信息
    var lang = {
      "lengthMenu": "每页 _MENU_  项",
      "processing": "处理中...",
      "zeroRecords": "没有匹配结果",
      "info": "当前显示第 _START_ 到 _END_ 项, 共 _TOTAL_ 项",
      "infoEmpty": "暂无数据",
      "infoFiltered": "(由 _MAX_ 项结果过滤)", //当使用搜索功能后，表格主要信息出追加的字符
      "loadingRecords": "加载中...",
      "processing": "处理中...",
      "search": "搜索:",
      "infoPostFix": "", //追加到所有其他主要信息字符串之后
      "url": "",
      "emptyTable": "表中数据为空",
      "infoThousands": ",",
      "paginate": {
        "first": "首页",
        "last": "末页",
        "next": "下页",
        "previous": "上页"
      }
    };
 
 
    //初始化表格
    var table = $("#example").DataTable({
      language: lang, //提示信息
      stateSave: true, //状态保存，再次加载页面时还原表格状态
      autoWidth: false, //禁用自动调整列宽
      stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
      processing: true, //隐藏加载提示,自行处理
      serverSide: true, //启用服务器端分页
      searching: false, //禁用原生搜索
      orderMulti: false, //启用多列排序
      order: [], //取消默认排序查询,否则复选框一列会出现小箭头
      deferRender: true, //延迟渲染可以提高Datatables的加载速度
      lengthMenu: [
        [10, 25, 50, 100, 300, -1],
        [10, 25, 50, 100, 300, "所有"]
      ], //每页多少项，第一个数组是表示的值，第二个数组用来显示
      renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
      pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
      scrollY: 300, //表格的固定高
      scrollCollapse: true, //开启滚动条
      pageLength: 10, //首次加载的数据条数
      columnDefs: [{
       targets: 'nosort', //列的样式名
       orderable: false //包含上样式名‘nosort'的禁止排序
      }],
      //对应列表表头字段
      columns: [{
        "data": "Id"
      }, {
        "data": "Name"
      }, {
        "data": "Sex"
      }],
      ajax: function(data, callback, settings) {
        //封装请求参数
        var param = {};
        param.limit = data.length; //页面显示记录条数，在页面显示每页显示多少项的时候
        param.start = data.start; //开始的记录序号
        param.page = (data.start / data.length) + 1; //当前页码
        //console.log(param);
        //ajax请求数据
        $.ajax({
          url: "/hello/list",
          type: "POST",
          cache: false, //禁用缓存
          data: param, //传入组装的参数
          dataType: "json",
          contentType: 'application/json;charset=utf-8',
          beforeSend: function(request) {
            request.setRequestHeader("token", localStorage.token);
          },
          success: function(result) {
            //console.log(result);
            //setTimeout仅为测试延迟效果
            setTimeout(function() {
              //封装返回数据
              var returnData = {};
              returnData.draw = data.draw; //这里直接自行返回了draw计数器,应该由后台返回
              returnData.recordsTotal = result.total; //返回数据全部记录
              returnData.recordsFiltered = result.total; //后台不实现过滤功能，每次查询均视作全部结果
              returnData.data = result.data; //返回的数据列表
              //console.log(returnData);
              //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
              //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
              callback(returnData);
            }, 200);
          }
        });
      },
 
    });
 
  });
  </script>
</body>
 
</html>

JSON数据格式:

效果图:

参考链接

jQuery DataTables插件自定义Ajax分页实例解析
Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

vue-cli 一个简单的构建Vue.js项目的命令行界面

整体过程：

$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 

后面分步说明。

2. 安装

前提条件，Node.js >=4.x版本，建议使用6.x版本。npm版本 > 3.x
全局安装vue-cli

$ npm install -g vue-cli 

…

3. 使用

$ vue init <template-name> <project-name> 

vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看，当前可以使用的模版。

$ vue list 

我们在这里，使用webpack模版。 功能齐全的webpack& vue-loader 提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin

之后，在E：\project文件夹下面，会有刚初始化的构建的项目vue-element-admin

4. 运行结果

项目基础结构已经搭建好了，现在来启动它。
进入项目文件:

$ cd vue-element-admin 

安装依赖：

中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。
先安装cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后，使用:

$ cnpm install 

你直接安装也可以的：

$ npm install 

运行：

$ npm run dev

启动之后，自动打开默认浏览器

之后，就可以进行本地开发，实时预览开发效果。

5. 打包部署

项目开发完成之后，可以使用npm run build进行打包工作

$ npm run build

打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。

6. 项目结构

vue-element-admin:             项目名称 |   .babelrc                   babel的配置文件 |   .editorconfig              编辑器的配置文件 |   .gitignore                 git的忽略文件 |   .postcssrc.js              编译css的工具 |   index.html                 网站主页 |   package.json               项目依赖哪些包的文件 |   README.md                  说明文档 |  +---build                      构建的配置文件夹 |       build.js               项目构建配置入口|       check-versions.js|       dev-client.js|       dev-server.js|       utils.js|       vue-loader.conf.js|       webpack.base.conf.js|       webpack.dev.conf.js|       webpack.prod.conf.js|       webpack.test.conf.js|      +---config                      整体的配置文件夹|       dev.env.js|       index.js                配置文件入口|       prod.env.js|       test.env.js|      +---src                         源文件夹|   |   App.vue                 布局组件|   |   main.js                 入口文件|   |  |   +---assets                  静态文件夹|   |       logo.png|   |      |   +---components              组件文件夹|   |       Hello.vue           单个组件|   |      |   \---router                  路由文件夹|           index.js            路由主页|          +---static                      静态文件夹|       .gitkeep                空文件（Git本身不允许全空目录提交至版本库，一个办法是在目录下创建一个文件，取名为.gitkeep是习惯用法）|      \---test                        测试文件夹

7. 总结

万事开头难，前期项目搭建可能会遇到一些问题，冷静分析慢慢都能解决的。

8. 项目源码

Vuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理系统
git项目源码

项目首发于博客园：Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown (或其他渲染引擎 )解析文章，
在几秒内，即可利用靓丽的主题生成静态网页。

安装

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

• Node.js

• Git
  如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

  $ npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

安装Git

• Windows：下载并安装 git.

• Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。

• Linux (Ubuntu, Debian)：sudo apt-get install git-core

• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

  安装Node.js

  安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载 安装程序 来安装。

安装Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>$ cd <folder>$ npm install

部署

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。

$ hexo deploy

在开始之前，您必须先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type
参数，例如：

deploy:  type: git

您可同时使用多个 deployer，Hexo 会依照顺序执行每个 deployer。

deploy:- type: git  repo:- type: heroku  repo:

缩进
YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

Git

如果在使用命令 hexo deploy的时候，报错：

ERROR Deployer not found: git

安装 hexo-deployer-git。

$ npm install hexo-deployer-git --save

修改配置。

deploy:  type: git  repo: <repository url>  branch: [branch]  message: [message]

我自己的配置为：

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: git@github.com:weiqinl/weiqinl.github.io  branch: master  message: '提交的消息'

那么，就可以在weiqinl/weiqinl.github.io库中，找到部署的文件，提交信息为：提交的消息。

这样，访问地址：https://weiqinl.github.io,hexo博客系统搭建完成。

参考连接

hexo
异常处理

init

$ hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

new

$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

generate.

$ hexo generate

生成静态文件。

选项 描述
-d, –deploy 文件生成后立即部署网站
-w, –watch 监视文件变动
该命令可以简写为

$ hexo g

publish

$ hexo publish [layout] <filename>

发表草稿。

server

$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, –port 重设端口
-s, –static 只使用静态文件
-l, –log 启动日记记录，使用覆盖记录格式

deploy

$ hexo deploy

部署网站。

参数 描述
-g, –generate 部署之前预先生成静态文件
该命令可以简写为：

$ hexo d

render

$ hexo render <file1> [file2] ...

渲染文件。

参数 描述
-o, –output 设置输出路径

migrate

$ hexo migrate <type>

从其他博客系统 迁移内容。

clean

$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

list

$ hexo list <type>

列出网站资料。

version

$ hexo version
显示 Hexo 版本。

选项

安全模式

$ hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

调试模式

$ hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

简洁模式

$ hexo --silent

隐藏终端信息。

自定义配置文件的路径

$ hexo --config custom.yml

自定义配置文件的路径，执行后将不再使用 _config.yml。

显示草稿

$ hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

自定义 CWD

$ hexo --cwd /path/to/cwd

自定义当前工作目录（Current working directory）的路径。

引用文章：

hexo-指令

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

本人一直想搭建个人博客，于是在网上找了资料，自己动手搭建发现并不难。
现在，把搭建过程记录下来。

hexo版本不同，有些配置也会不同。我把我机器配置发出来。

hexo-v.png

配置环境

本地机器，需要配置一些基础环境，才能更好的搭建hexo博客。

安装Node

下载安装：http://nodejs.cn/download/

安装Git

https://git-scm.com/

申请GitHub

需要使用Github，当然得注册一个帐号咯。https://github.com/

正式安装HEXO

全局安装hexo, 打开Git 命令，执行如下命令

$ npm install -g hexo 

这样，安装成功，就可以在全局直接使用hexo命令了。
比如，可以使用命令hexo -v查询当前运行的hexo版本.
图在一开始，已经发出来了。

搭建Hexo博客，所需要的配置基本完成。以下是涉及到HEXO的配置了。

HEXO的配置

初始化

在本地新建一个文件夹，名字和GitHub上的地址名字一样的。比如： weiqinl.github.io。
然后，在该文件夹下执行初始化方法：

$ hexo init

本地启动

运行下面的命令：

$ hexo server

表明Hexo Server已经在本地启动了，在浏览器中输入http://localhost:4000/,这个时候可以看到由Hexo搭建的博客，里面有一篇，系统自带的博文Hello World,介绍如何使用Hexo。
你可以按Ctril + C 停止Server。

可以简化命令，启动服务：

hexo s -g

创建一个新文章

使用命令hexo new 'My New Post'创建一个命名为My-New-Post.md的文件，里面默认标题为My New Post的文章。该文章创建在目录 /source/_posts/下。此时，就可以打开该文件，使用Markdown风格的编辑器来编辑。

$ hexo new 'My New Post'INFO  Created: E:\project\weiqinl.github.io\source\_posts\My-New-Post‘.md

生成静态页面

执行以下命令，将markdown文件生成静态网页。

$ hexo generate 

该命令执行完成后，会在根目录下生成文件夹public,里面是该站点的相关css和js。

git部署

修改_config.yml文件，如下：

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repository: git@github.com:weiqinl/weiqinl.github.io  branch: master

执行命令：

$ hexo deploy

这里，如果遇到问题：

$ hexo deployERROR Deployer not found: git

那么执行命令：

$ npm install hexo-deployer-git --save

执行成功之后，再次运行命令hexo deploy

此时，博客就算是发布成功了。可以通过地址weiqinl.github.io查看。

每次部署的步骤，可以按照以下三步来进行。

hexo cleanhexo generatehexo deploy

##一些常用命令
hexo new ‘My New Post’ # 创建一个新文章，名字为’My New Post’
hexo clean #清除Hexo的缓存和生成的静态页面
hexo generate #生成静态页面 hexo g
hexo deploy #部署 hexo d
hexo server #启动本地hexo服务,进行文章预览调试 hexo s
hexo -v # hexo版本信息 hexo -v
hexo init #初始化文件夹

##参考案例：

Hexo搭建Github静态博客： http://www.cnblogs.com/zhcncn/p/4097881.html