update
This commit is contained in:
qianguyihao
parent
4694143a3c
commit
cb24d5585c
@ -354,6 +354,27 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
|
|||||||
|
|
||||||
于是我们明白了，在变量中加入字符串进行连接，可以被同化为字符串。【重要】
|
于是我们明白了，在变量中加入字符串进行连接，可以被同化为字符串。【重要】
|
||||||
|
|
||||||
|
|
||||||
|
### 隐式转换
|
||||||
|
|
||||||
|
我们知道，`"2"+1`得到的结果其实是字符串，但是`"2"-1`得到的结果却是数值1，这是因为计算机自动帮我们进行了“**隐式转换**”。
|
||||||
|
|
||||||
|
也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var a = "4" + 3 - 6;
|
||||||
|
console.log(a);
|
||||||
|
```
|
||||||
|
|
||||||
|
输出结果：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
37
|
||||||
|
```
|
||||||
|
|
||||||
|
虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。
|
||||||
|
|
||||||
|
|
||||||
## 布尔值：Boolean
|
## 布尔值：Boolean
|
||||||
|
|
||||||
true 和 fase。
|
true 和 fase。
|
||||||
@ -636,25 +657,6 @@ String(变量)
|
|||||||
|
|
||||||
道理同上。
|
道理同上。
|
||||||
|
|
||||||
### 隐式转换
|
|
||||||
|
|
||||||
我们知道，`"2"+1`得到的结果其实是字符串，但是`"2"-1`得到的结果却是数值1，这是因为计算机自动帮我们进行了“**隐式转换**”。
|
|
||||||
|
|
||||||
也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var a = "4" + 3 - 6;
|
|
||||||
console.log(a);
|
|
||||||
```
|
|
||||||
|
|
||||||
输出结果：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
37
|
|
||||||
```
|
|
||||||
|
|
||||||
虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。
|
|
||||||
|
|
||||||
### 转换为Boolean
|
### 转换为Boolean
|
||||||
|
|
||||||
将其他的数据类型转换为Boolean，可以使用Boolean()函数。
|
将其他的数据类型转换为Boolean，可以使用Boolean()函数。
|
||||||
|
|||||||
@ -1,291 +1,291 @@
|
|||||||
|
|
||||||
|
|
||||||
## ES6模块化的基本语法
|
## ES6模块化的基本语法
|
||||||
|
|
||||||
### ES6模块化的说明
|
### ES6模块化的说明
|
||||||
|
|
||||||
|
|
||||||
**依赖模块需要编译打包处理。**原因如下：
|
**依赖模块需要编译打包处理。**原因如下：
|
||||||
|
|
||||||
- （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。
|
- （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。
|
||||||
|
|
||||||
- （2）生成了ES5之后，里面仍然有`require`语法，而浏览器并不认识`require`这个关键字。此时，可以用 `Browserify`编译打包 js，进行再次转换。
|
- （2）生成了ES5之后，里面仍然有`require`语法，而浏览器并不认识`require`这个关键字。此时，可以用 `Browserify`编译打包 js，进行再次转换。
|
||||||
|
|
||||||
推荐学习链接：
|
推荐学习链接：
|
||||||
|
|
||||||
- <http://es6.ruanyifeng.com/#docs/module>
|
- <http://es6.ruanyifeng.com/#docs/module>
|
||||||
|
|
||||||
|
|
||||||
### 基本语法：
|
### 基本语法：
|
||||||
|
|
||||||
|
|
||||||
**导出模块**：
|
**导出模块**：
|
||||||
|
|
||||||
```
|
```
|
||||||
export
|
export
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
**引入模块**：
|
**引入模块**：
|
||||||
|
|
||||||
```
|
```
|
||||||
import xxx from '路径'
|
import xxx from '路径'
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## ES6模块化的使用举例（自定义模块）
|
## ES6模块化的使用举例（自定义模块）
|
||||||
|
|
||||||
### 1、初始化项目
|
### 1、初始化项目
|
||||||
|
|
||||||
（1）在工程文件中新建如下目录：
|
（1）在工程文件中新建如下目录：
|
||||||
|
|
||||||
|
|
||||||
```
|
```
|
||||||
js
|
js
|
||||||
| src
|
| src
|
||||||
| module1.js
|
| module1.js
|
||||||
| module2.js
|
| module2.js
|
||||||
| module3.js
|
| module3.js
|
||||||
| main.js
|
| main.js
|
||||||
|
|
||||||
|
|
||||||
index.html
|
index.html
|
||||||
```
|
```
|
||||||
|
|
||||||
（2）在工程的根目录下，新建文件`package.json`，内容如下：
|
（2）在工程的根目录下，新建文件`package.json`，内容如下：
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"name": "es6-babel-browserify",
|
"name": "es6-babel-browserify",
|
||||||
"version": "1.0.0"
|
"version": "1.0.0"
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2、环境配置：安装babel 和 browserify等
|
### 2、环境配置：安装babel 和 browserify等
|
||||||
|
|
||||||
（1）安装babel 和 browserify：
|
（1）安装babel 和 browserify：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install babel-cli -g
|
npm install babel-cli -g
|
||||||
|
|
||||||
npm install babel-preset-es2015 --save-dev
|
npm install babel-preset-es2015 --save-dev
|
||||||
|
|
||||||
npm install browserify -g
|
npm install browserify -g
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
安装 babel 的详细解释，可以参考本人的另外一篇文章：[ES6的介绍和环境配置](https://github.com/smyhvae/Web/blob/master/10-ES6/03-ES6%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE.md)
|
安装 babel 的详细解释，可以参考本人的另外一篇文章：[ES6的介绍和环境配置](https://github.com/smyhvae/Web/blob/master/10-ES6/03-ES6%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE.md)
|
||||||
|
|
||||||
（2）新建.babelrc：
|
（2）新建.babelrc：
|
||||||
|
|
||||||
在根目录下新建文件`.babelrc`，输入如下内容：
|
在根目录下新建文件`.babelrc`，输入如下内容：
|
||||||
|
|
||||||
```
|
```
|
||||||
{
|
{
|
||||||
"presets":[
|
"presets":[
|
||||||
"es2015"
|
"es2015"
|
||||||
],
|
],
|
||||||
"plugins":[]
|
"plugins":[]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 3、编写代码
|
### 3、编写代码
|
||||||
|
|
||||||
|
|
||||||
（1）module1.js：
|
（1）module1.js：
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
//暴露模块：采用分别暴露的方式
|
//暴露模块：采用分别暴露的方式
|
||||||
|
|
||||||
export function foo1() {
|
export function foo1() {
|
||||||
console.log('我是 module1 中的 foo1');
|
console.log('我是 module1 中的 foo1');
|
||||||
}
|
}
|
||||||
|
|
||||||
export function foo2() {
|
export function foo2() {
|
||||||
console.log('我是 module2 中的 foo2');
|
console.log('我是 module2 中的 foo2');
|
||||||
}
|
}
|
||||||
|
|
||||||
export let arr = [1, 2, 3, 4, 5];
|
export let arr = [1, 2, 3, 4, 5];
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
（2）module2.js：
|
（2）module2.js：
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
//暴露模块：采用统一暴露的方式
|
//暴露模块：采用统一暴露的方式
|
||||||
|
|
||||||
function fn1() {
|
function fn1() {
|
||||||
console.log('我是 module2 中的 fn1');
|
console.log('我是 module2 中的 fn1');
|
||||||
}
|
}
|
||||||
|
|
||||||
function fn2() {
|
function fn2() {
|
||||||
console.log('我是 module2 中的 fn2');
|
console.log('我是 module2 中的 fn2');
|
||||||
}
|
}
|
||||||
|
|
||||||
//统一暴露
|
//统一暴露
|
||||||
export { fn1, fn2 };
|
export { fn1, fn2 };
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
（3）module3.js：
|
（3）module3.js：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
//暴露模块：采用默认暴露的方式。
|
//暴露模块：采用默认暴露的方式。
|
||||||
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
|
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
|
||||||
|
|
||||||
//语法格式：export default value;
|
//语法格式：export default value;
|
||||||
export default () => {
|
export default () => {
|
||||||
console.log('我是 module3 中 default 方式暴露的函数');
|
console.log('我是 module3 中 default 方式暴露的函数');
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了`default`这个关键字。代码里暴露了一个箭头函数，稍后，我们注意在main.js里是怎么引入module3.js的。
|
这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了`default`这个关键字。代码里暴露了一个箭头函数，稍后，我们注意在main.js里是怎么引入module3.js的。
|
||||||
|
|
||||||
注意，我们只能写一次 default，也就是说，只能进行一次默认暴露。
|
注意，我们只能写一次 default，也就是说，只能进行一次默认暴露。
|
||||||
|
|
||||||
（4）module4.js：（default方式暴露多个属性）
|
（4）module4.js：（default方式暴露多个属性）
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
//暴露模块：采用默认暴露的方式。
|
//暴露模块：采用默认暴露的方式。
|
||||||
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
|
//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据
|
||||||
|
|
||||||
//语法格式：export default value;
|
//语法格式：export default value;
|
||||||
export default {
|
export default {
|
||||||
name: '我是 module4 中 default 方式暴露的属性 name',
|
name: '我是 module4 中 default 方式暴露的属性 name',
|
||||||
foo() {
|
foo() {
|
||||||
console.log('我是 module4 中 default 方式暴露的函数 foo');
|
console.log('我是 module4 中 default 方式暴露的函数 foo');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（对象里存放了一个属性、一个方法）。稍后，我们注意在main.js里是怎么引入module4.js的。
|
这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（对象里存放了一个属性、一个方法）。稍后，我们注意在main.js里是怎么引入module4.js的。
|
||||||
|
|
||||||
如果我想暴露多个属性、多个对象怎呢？很简单，把你想要暴露的所有内容，都放在default里，包成一个对象。你看module4.js就是如此， 同时暴露了多个属性&方法。
|
如果我想暴露多个属性、多个对象怎呢？很简单，把你想要暴露的所有内容，都放在default里，包成一个对象。你看module4.js就是如此， 同时暴露了多个属性&方法。
|
||||||
|
|
||||||
（5）main.js：
|
（5）main.js：
|
||||||
|
|
||||||
这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。
|
这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
//主模块。引入其他的模块
|
//主模块。引入其他的模块
|
||||||
|
|
||||||
import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
|
import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
|
||||||
import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
|
import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
|
||||||
import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的
|
import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的
|
||||||
import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的
|
import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的
|
||||||
|
|
||||||
//调用module1、module2中的内容
|
//调用module1、module2中的内容
|
||||||
foo1();
|
foo1();
|
||||||
foo2();
|
foo2();
|
||||||
fn1();
|
fn1();
|
||||||
fn2();
|
fn2();
|
||||||
|
|
||||||
//调用module3中的内容
|
//调用module3中的内容
|
||||||
myModule3();
|
myModule3();
|
||||||
|
|
||||||
//调用module4中的内容
|
//调用module4中的内容
|
||||||
console.log(myModule4.name); //module4中的属性
|
console.log(myModule4.name); //module4中的属性
|
||||||
myModule4.foo(); //module4中的方法
|
myModule4.foo(); //module4中的方法
|
||||||
```
|
```
|
||||||
|
|
||||||
我们可以看出：（具体请看注释，非常重要）
|
我们可以看出：（具体请看注释，非常重要）
|
||||||
|
|
||||||
- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `import myModule from ...`这种形式（否则会报错 undefined）。
|
- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `import myModule from ...`这种形式（否则会报错 undefined）。
|
||||||
|
|
||||||
- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。
|
- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。
|
||||||
|
|
||||||
（6）index.html：
|
（6）index.html：
|
||||||
|
|
||||||
在这里引入main.js即可。
|
在这里引入main.js即可。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<script src="dist/main.js"></script>
|
<script src="dist/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### 4、编译转换
|
### 4、编译转换
|
||||||
|
|
||||||
如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js，是会报错的：
|
如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js，是会报错的：
|
||||||
|
|
||||||
|
|
||||||
接下来，我们就进行转换。
|
接下来，我们就进行转换。
|
||||||
|
|
||||||
（1）利用 babel 将 ES6 转换为 ES5：
|
（1）利用 babel 将 ES6 转换为 ES5：
|
||||||
|
|
||||||
```
|
```
|
||||||
babel src -d build //build目录会自动生成
|
babel src -d build //build目录会自动生成
|
||||||
```
|
```
|
||||||
|
|
||||||
上方命令的意思是，将`src`目录下的所有ES6文件转化为ES5文件，并放在`build`目录下（`build`目录会被自动创建）。
|
上方命令的意思是，将`src`目录下的所有ES6文件转化为ES5文件，并放在`build`目录下（`build`目录会被自动创建）。
|
||||||
|
|
||||||
转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字：
|
转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字：
|
||||||
|
|
||||||
20180414_1410.png
|
20180414_1410.png
|
||||||
|
|
||||||
|
|
||||||
于是，我们还要进行一次转换。
|
于是，我们还要进行一次转换。
|
||||||
|
|
||||||
（2）利用`Browserify`编译打包 `build`目录下的 ES5 文件：
|
（2）利用`Browserify`编译打包 `build`目录下的 ES5 文件：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
browserify build/main.js -o dist/main.js //dist目录需要手动创建
|
browserify build/main.js -o dist/main.js //dist目录需要手动创建
|
||||||
```
|
```
|
||||||
|
|
||||||
dist/main.js就是我们需要引入到 index.html 里的文件。
|
dist/main.js就是我们需要引入到 index.html 里的文件。
|
||||||
|
|
||||||
以后，我们每次修改完ES6的代码，就要执行上面的两个命令，重新生成新的js文件。
|
以后，我们每次修改完ES6的代码，就要执行上面的两个命令，重新生成新的js文件。
|
||||||
|
|
||||||
|
|
||||||
运行效果：
|
运行效果：
|
||||||
|
|
||||||
20180414_1615.png
|
20180414_1615.png
|
||||||
|
|
||||||
工程文件：
|
工程文件：
|
||||||
|
|
||||||
- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940)
|
- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940)
|
||||||
|
|
||||||
|
|
||||||
## ES6模块化的使用举例（第三方模块）
|
## ES6模块化的使用举例（第三方模块）
|
||||||
|
|
||||||
下载 jQuery 包：
|
下载 jQuery 包：
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install jquery@1 //下载jQuery 1.X 的版本里最新的
|
npm install jquery@1 //下载jQuery 1.X 的版本里最新的
|
||||||
```
|
```
|
||||||
|
|
||||||
在main.js 中引入上面的 jQuery：
|
在main.js 中引入上面的 jQuery：
|
||||||
|
|
||||||
```
|
```
|
||||||
import $ from 'jQuery';
|
import $ from 'jQuery';
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
然后我们就可以通过`$`这个符号去写jQuery的代码了。
|
然后我们就可以通过`$`这个符号去写jQuery的代码了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user