diff --git a/03-JavaScript基础/02-JavaScript语法基础：变量.md b/03-JavaScript基础/02-JavaScript语法基础：变量.md index 737afcb..506f56f 100644 --- a/03-JavaScript基础/02-JavaScript语法基础：变量.md +++ b/03-JavaScript基础/02-JavaScript语法基础：变量.md @@ -354,6 +354,27 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等， 于是我们明白了，在变量中加入字符串进行连接，可以被同化为字符串。【重要】 + +### 隐式转换 + +我们知道，`"2"+1`得到的结果其实是字符串，但是`"2"-1`得到的结果却是数值1，这是因为计算机自动帮我们进行了“**隐式转换**”。 + +也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如： + +```javascript + var a = "4" + 3 - 6; + console.log(a); +``` + +输出结果： + +```javascript + 37 +``` + +虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。 + + ## 布尔值：Boolean 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()函数。 diff --git a/03-JavaScript基础/02-JavaScript语法基础：运算符和表达式.md b/03-JavaScript基础/03-JavaScript语法基础：运算符和表达式.md similarity index 100% rename from 03-JavaScript基础/02-JavaScript语法基础：运算符和表达式.md rename to 03-JavaScript基础/03-JavaScript语法基础：运算符和表达式.md diff --git a/09-Node.js/01-Node.js入门.md b/09-Node.js和模块化/01-Node.js入门.md similarity index 100% rename from 09-Node.js/01-Node.js入门.md rename to 09-Node.js和模块化/01-Node.js入门.md diff --git a/09-Node.js/02-JavaScript模块化01：CommonJS.md b/09-Node.js和模块化/02-JavaScript模块化01：CommonJS.md similarity index 100% rename from 09-Node.js/02-JavaScript模块化01：CommonJS.md rename to 09-Node.js和模块化/02-JavaScript模块化01：CommonJS.md diff --git a/09-Node.js/02-JavaScript模块化02：AMD.md b/09-Node.js和模块化/02-JavaScript模块化02：AMD.md similarity index 100% rename from 09-Node.js/02-JavaScript模块化02：AMD.md rename to 09-Node.js和模块化/02-JavaScript模块化02：AMD.md diff --git a/09-Node.js/02-JavaScript模块化03：CMD.md b/09-Node.js和模块化/02-JavaScript模块化03：CMD.md similarity index 100% rename from 09-Node.js/02-JavaScript模块化03：CMD.md rename to 09-Node.js和模块化/02-JavaScript模块化03：CMD.md diff --git a/09-Node.js/02-JavaScript模块化04：ES6.md b/09-Node.js和模块化/02-JavaScript模块化04：ES6.md similarity index 95% rename from 09-Node.js/02-JavaScript模块化04：ES6.md rename to 09-Node.js和模块化/02-JavaScript模块化04：ES6.md index 32e296c..8b8609c 100644 --- a/09-Node.js/02-JavaScript模块化04：ES6.md +++ b/09-Node.js和模块化/02-JavaScript模块化04：ES6.md @@ -1,291 +1,291 @@ - - -## ES6模块化的基本语法 - -### ES6模块化的说明 - - -**依赖模块需要编译打包处理。**原因如下： - -- （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。 - -- （2）生成了ES5之后，里面仍然有`require`语法，而浏览器并不认识`require`这个关键字。此时，可以用 `Browserify`编译打包 js，进行再次转换。 - -推荐学习链接： - -- - - -### 基本语法： - - -**导出模块**： - -``` - export -``` - - -**引入模块**： - -``` - import xxx from '路径' -``` - - -## ES6模块化的使用举例（自定义模块） - -### 1、初始化项目 - -（1）在工程文件中新建如下目录： - - - ``` -js - | src - | module1.js - | module2.js - | module3.js - | main.js - - -index.html - ``` - -（2）在工程的根目录下，新建文件`package.json`，内容如下： - -```json -{ - "name": "es6-babel-browserify", - "version": "1.0.0" -} -``` - -### 2、环境配置：安装babel 和 browserify等 - -（1）安装babel 和 browserify： - -```bash - npm install babel-cli -g - - npm install babel-preset-es2015 --save-dev - - 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) - -（2）新建.babelrc： - -在根目录下新建文件`.babelrc`，输入如下内容： - -``` -{ - "presets":[ - "es2015" - ], - "plugins":[] -} -``` - -### 3、编写代码 - - -（1）module1.js： - -```javascript -//暴露模块：采用分别暴露的方式 - -export function foo1() { - console.log('我是 module1 中的 foo1'); -} - -export function foo2() { - console.log('我是 module2 中的 foo2'); -} - -export let arr = [1, 2, 3, 4, 5]; -``` - - - -（2）module2.js： - -```javascript -//暴露模块：采用统一暴露的方式 - -function fn1() { - console.log('我是 module2 中的 fn1'); -} - -function fn2() { - console.log('我是 module2 中的 fn2'); -} - -//统一暴露 -export { fn1, fn2 }; -``` - - -（3）module3.js： - - - -```javascript -//暴露模块：采用默认暴露的方式。 -//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据 - -//语法格式：export default value; -export default () => { - console.log('我是 module3 中 default 方式暴露的函数'); -}; -``` - - -这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了`default`这个关键字。代码里暴露了一个箭头函数，稍后，我们注意在main.js里是怎么引入module3.js的。 - -注意，我们只能写一次 default，也就是说，只能进行一次默认暴露。 - -（4）module4.js：（default方式暴露多个属性） - -```javascript -//暴露模块：采用默认暴露的方式。 -//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据 - -//语法格式：export default value; -export default { - name: '我是 module4 中 default 方式暴露的属性 name', - foo() { - console.log('我是 module4 中 default 方式暴露的函数 foo'); - } -} -``` - -这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（对象里存放了一个属性、一个方法）。稍后，我们注意在main.js里是怎么引入module4.js的。 - -如果我想暴露多个属性、多个对象怎呢？很简单，把你想要暴露的所有内容，都放在default里，包成一个对象。你看module4.js就是如此， 同时暴露了多个属性&方法。 - -（5）main.js： - -这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。 - - -```javascript - -//主模块。引入其他的模块 - -import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。 -import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。 -import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的 -import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的 - -//调用module1、module2中的内容 -foo1(); -foo2(); -fn1(); -fn2(); - -//调用module3中的内容 -myModule3(); - -//调用module4中的内容 -console.log(myModule4.name); //module4中的属性 -myModule4.foo(); //module4中的方法 -``` - -我们可以看出：（具体请看注释，非常重要） - -- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `import myModule from ...`这种形式（否则会报错 undefined）。 - -- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。 - -（6）index.html： - -在这里引入main.js即可。 - -```html - - - - - - - - Document - - - - - - - - -``` - - -### 4、编译转换 - -如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js，是会报错的： - - -接下来，我们就进行转换。 - -（1）利用 babel 将 ES6 转换为 ES5： - -``` -babel src -d build //build目录会自动生成 -``` - -上方命令的意思是，将`src`目录下的所有ES6文件转化为ES5文件，并放在`build`目录下（`build`目录会被自动创建）。 - -转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字： - -20180414_1410.png - - -于是，我们还要进行一次转换。 - -（2）利用`Browserify`编译打包 `build`目录下的 ES5 文件： - -```bash -browserify build/main.js -o dist/main.js //dist目录需要手动创建 -``` - -dist/main.js就是我们需要引入到 index.html 里的文件。 - -以后，我们每次修改完ES6的代码，就要执行上面的两个命令，重新生成新的js文件。 - - -运行效果： - -20180414_1615.png - -工程文件： - -- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940) - - -## ES6模块化的使用举例（第三方模块） - -下载 jQuery 包： - -``` -npm install jquery@1 //下载jQuery 1.X 的版本里最新的 -``` - -在main.js 中引入上面的 jQuery： - -``` -import $ from 'jQuery'; -``` - - -然后我们就可以通过`$`这个符号去写jQuery的代码了。 - - - - - - - + + +## ES6模块化的基本语法 + +### ES6模块化的说明 + + +**依赖模块需要编译打包处理。**原因如下： + +- （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。 + +- （2）生成了ES5之后，里面仍然有`require`语法，而浏览器并不认识`require`这个关键字。此时，可以用 `Browserify`编译打包 js，进行再次转换。 + +推荐学习链接： + +- + + +### 基本语法： + + +**导出模块**： + +``` + export +``` + + +**引入模块**： + +``` + import xxx from '路径' +``` + + +## ES6模块化的使用举例（自定义模块） + +### 1、初始化项目 + +（1）在工程文件中新建如下目录： + + + ``` +js + | src + | module1.js + | module2.js + | module3.js + | main.js + + +index.html + ``` + +（2）在工程的根目录下，新建文件`package.json`，内容如下： + +```json +{ + "name": "es6-babel-browserify", + "version": "1.0.0" +} +``` + +### 2、环境配置：安装babel 和 browserify等 + +（1）安装babel 和 browserify： + +```bash + npm install babel-cli -g + + npm install babel-preset-es2015 --save-dev + + 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) + +（2）新建.babelrc： + +在根目录下新建文件`.babelrc`，输入如下内容： + +``` +{ + "presets":[ + "es2015" + ], + "plugins":[] +} +``` + +### 3、编写代码 + + +（1）module1.js： + +```javascript +//暴露模块：采用分别暴露的方式 + +export function foo1() { + console.log('我是 module1 中的 foo1'); +} + +export function foo2() { + console.log('我是 module2 中的 foo2'); +} + +export let arr = [1, 2, 3, 4, 5]; +``` + + + +（2）module2.js： + +```javascript +//暴露模块：采用统一暴露的方式 + +function fn1() { + console.log('我是 module2 中的 fn1'); +} + +function fn2() { + console.log('我是 module2 中的 fn2'); +} + +//统一暴露 +export { fn1, fn2 }; +``` + + +（3）module3.js： + + + +```javascript +//暴露模块：采用默认暴露的方式。 +//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据 + +//语法格式：export default value; +export default () => { + console.log('我是 module3 中 default 方式暴露的函数'); +}; +``` + + +这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了`default`这个关键字。代码里暴露了一个箭头函数，稍后，我们注意在main.js里是怎么引入module3.js的。 + +注意，我们只能写一次 default，也就是说，只能进行一次默认暴露。 + +（4）module4.js：（default方式暴露多个属性） + +```javascript +//暴露模块：采用默认暴露的方式。 +//默认暴露的方式可以暴露任意数据类型，暴露的是什么数据，接收到的就是什么数据 + +//语法格式：export default value; +export default { + name: '我是 module4 中 default 方式暴露的属性 name', + foo() { + console.log('我是 module4 中 default 方式暴露的函数 foo'); + } +} +``` + +这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（对象里存放了一个属性、一个方法）。稍后，我们注意在main.js里是怎么引入module4.js的。 + +如果我想暴露多个属性、多个对象怎呢？很简单，把你想要暴露的所有内容，都放在default里，包成一个对象。你看module4.js就是如此， 同时暴露了多个属性&方法。 + +（5）main.js： + +这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。 + + +```javascript + +//主模块。引入其他的模块 + +import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。 +import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。 +import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的 +import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，myModule4 这个名字是我随便起的 + +//调用module1、module2中的内容 +foo1(); +foo2(); +fn1(); +fn2(); + +//调用module3中的内容 +myModule3(); + +//调用module4中的内容 +console.log(myModule4.name); //module4中的属性 +myModule4.foo(); //module4中的方法 +``` + +我们可以看出：（具体请看注释，非常重要） + +- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `import myModule from ...`这种形式（否则会报错 undefined）。 + +- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。 + +（6）index.html： + +在这里引入main.js即可。 + +```html + + + + + + + + Document + + + + + + + + +``` + + +### 4、编译转换 + +如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js，是会报错的： + + +接下来，我们就进行转换。 + +（1）利用 babel 将 ES6 转换为 ES5： + +``` +babel src -d build //build目录会自动生成 +``` + +上方命令的意思是，将`src`目录下的所有ES6文件转化为ES5文件，并放在`build`目录下（`build`目录会被自动创建）。 + +转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字： + +20180414_1410.png + + +于是，我们还要进行一次转换。 + +（2）利用`Browserify`编译打包 `build`目录下的 ES5 文件： + +```bash +browserify build/main.js -o dist/main.js //dist目录需要手动创建 +``` + +dist/main.js就是我们需要引入到 index.html 里的文件。 + +以后，我们每次修改完ES6的代码，就要执行上面的两个命令，重新生成新的js文件。 + + +运行效果： + +20180414_1615.png + +工程文件： + +- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940) + + +## ES6模块化的使用举例（第三方模块） + +下载 jQuery 包： + +``` +npm install jquery@1 //下载jQuery 1.X 的版本里最新的 +``` + +在main.js 中引入上面的 jQuery： + +``` +import $ from 'jQuery'; +``` + + +然后我们就可以通过`$`这个符号去写jQuery的代码了。 + + + + + + + diff --git a/09-Node.js/CommonJS.md b/09-Node.js和模块化/CommonJS.md similarity index 100% rename from 09-Node.js/CommonJS.md rename to 09-Node.js和模块化/CommonJS.md diff --git a/09-Node.js/ES6.md b/09-Node.js和模块化/ES6.md similarity index 100% rename from 09-Node.js/ES6.md rename to 09-Node.js和模块化/ES6.md diff --git a/09-Node.js/Node.js代码举例.md b/09-Node.js和模块化/Node.js代码举例.md similarity index 100% rename from 09-Node.js/Node.js代码举例.md rename to 09-Node.js和模块化/Node.js代码举例.md diff --git a/09-Node.js/WebSocket.md b/09-Node.js和模块化/WebSocket.md similarity index 100% rename from 09-Node.js/WebSocket.md rename to 09-Node.js和模块化/WebSocket.md diff --git a/09-Node.js/事件驱动和非阻塞机制.md b/09-Node.js和模块化/事件驱动和非阻塞机制.md similarity index 100% rename from 09-Node.js/事件驱动和非阻塞机制.md rename to 09-Node.js和模块化/事件驱动和非阻塞机制.md