AMD、CMD、Common.js（重点）

前端模块化

1. 模块化： 是具有特定功能的一个对象（ 广义理解 ）
2. 模块定义的流程：
   • 定义模块（对象）
   • 导出模块
   • 引用模块
3. 模块化的好处:
   • 可以存储多个独立的功能块
   • 复用性高
4. 种类
   • AMD（ require.js）
   • CMD ( sea.js )
   • Common.js

AMD、CMD、Common.js（转自https://blog.csdn.net/u012207345/article/details/80301830）

1. AMD/CMD/Common.js是JS模块化开发的标准，目前对应的实现是Require.js/Sea.js/Node.js
2. Common.js主要针对服务端，AMD与CMD主要针对浏览器端，所以最容易混淆的是AMD与CMD
3. AMD/CMD区别：虽然都是并行加载js文件，但还是有所区别，
   • AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；
   • CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
4. AMD与CMD优缺点
   • AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。
   • AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。
   • CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。
   • CMD缺点：执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。
5. 如何使用三者？
   • Common.js的话，因为nodeJs就是它的实现，所以使用node就行，也不用引入其他包。
   • AMD则是通过“script”标签引入Require.js，具体语法可以去看官方文档或者百度一下。
   • CMD则是引入Sea.js。

1. 1 AMD定义一个模块

    /*
     目录:admDir
              a.js
              index.js
    */
    // AMD定义 a.js
    define ({
        a: 1,
        b: 2,
        add: function(){}
    })
    // AMD引用 index.js
     require([./a.js],function( moduleA ){
        //moduleA指的就是定义来的对象
     })

1.2 CMD定义模块

    /*
     目录结构
       b.js
       index.js
    */
    // 模块定义 b.js
    define( function( require, exports, module ) {
         // 模块代码
    });
    //模块引用 index.js
    require( './b.js',function( moduleB ){
        //moduleB就是b模块中导出的内容
     })

1.3 Common.js

1. Node.js使用了Common.js的规范
2. 易错的理解：
   • common.js是属于node的（X）
   • node属于common.js（X）
3. Node.js中Common.js规范的使用有三种类型:
   • 内置模块（ 内置模块指的是挂载在Node.js全局对象身上的api ）
   • 自定义模块
   • 第三方模块

   /*
    目录结构：
      name.js
      index.js
   */
   //模块的定义 name.js
    const nameObj = {
       name: ' Yan '
    }
   //模块的导出 name.js
    module.exports = nameObj
   //模块的引用
    const nameObj = require('./name.js')

1.3.1 内置模块

1. 挂载在Node.js全局对象身上的api( 方法 )
   关键词： 全局对象 global
2. node.js官网docs中左侧列表中的都是Node.js的内置模块
3. 内置模块可以直接使用 ( require中直接书写模块名称 )
   格式： const/let/var 变量名 = require( 模块名称 )

	const path = require( 'path' )
	const url = require( 'url' )

常用的内置模块（node 常用内置api）

1. URL 网址解析

    //解析URL相关网址信息
    url.parse(urlString[, parseQueryString[, slashesDenoteHost]])
    url.format(urlObject)
    url.resolve(from, to)

2. QueryString 参数处理

    querystring.escape(str)
    querystring.unescape(str)
    querystring.parse(str[, sep[, eq[, options]]])
    querystring.stringify(obj[, sep[, eq[, options]]])

3. HTTP 模块概要
   • 简易的爬虫
   • 代理跨域处理

    http.createServer([options][, requestListener])
    http.get(options[, callback])

4. 事件 events 模块
5. 文件fs模块
6. Stream 流模块
7. request 方法

1.3.2 自定义模块

1. 模块的定义

	//举例
	const student = {
		id: 1,
		name: ' Yan '
	}
	const fn = function(){}

2. 模块的导出

    // 第一种导出
    module.exports = student // 安全性不高 默认导出一个
    //第二种导出
    module.exports = { //批量导出，按需引用
	    student,fn
    }

3. 模块的引用

    // 这种引用对应第一种导出
    const student = require('./xxx.js');
    // 这种引用对应第二种导出
    const { student , fn } = require( './xxx.js ' );

4. 注意：在自定义模块引用时，require一定要写好路径

1.3.3 第三方模块

1. 别人已经封装好的模块
2. 这个模块具备一些特定的功能
3. 这些模块存放在 www.npmjs.com 这个网站中，这些模块的文档也记录在内
4. 格式： var/let/const 变量名 = require( ‘模块名称’ )
5. 总结：
   • 第一步，使用npm/cnpm 安装
   • 第二步，在文件中引入
   • 第三步，在 www.npmjs.com 这个网站中找到这个模块的文档，根据文档来使用

	const request = require( 'request' );
	
	// request(url,function( error , response,body ) {}) 
	//error作为第一个参数，我们一般称之为错误优先的回调函数
	
	request('https://m.lagou.com/listmore.json',function( error , response,body ) {
	    if( error ) throw error;
	    console.log( response ); // 指的是我们请求数据的地址的整个信息
	    console.log( body ); // 指的是我们请求得到的数据
	})

6. 思考：是否能将自己封装的自定义模块变成第三方模块？
   • 分析：第三方模块具备的特性：
     • 有一定的功能
     • 存储在: http://www.npmjs.com 中
   • 解决： 自定义模块的上传

1.3.3.1 自定义模块的上传

1. 创建package.json文件

	$ npm init -y

2. 在 http://www.npmjs.com 这个网站注册一个账号
   注意：第一次登陆会发送一个邮件给你的邮箱（ 这个发送是手动的 ），然后登陆邮箱激活即可
3. 检查你的电脑的源是不是npm源，如果是就不会理会，如果不是，那么切换到npm源

	$ nrm ls

4. 命令行登录npmjs仓库

	$ npm adduser

5. 创建模块并导出模块
6. 查看你的包名称是否已经被使用
7. 发布包

	$ npm publish

8. 安装包

	$ npm install <package_name>

9. 更新模块

	$ npm update

10. 卸载模块

	$ npm uninstall <package_name>

11. 犯错点：
    • 邮箱没有激活 （ 最多的 ）
    • npm源没有切换
    • 整个电脑的npm就不能使用
    • 如果以上方法没有解决：可使用别人的账号去试一下
12. -D === --save-dev

//举例
cnpm i jquery -D === cnpm i jquery --save-dev // 开发环境下使用
cnpm i jquery -S === cnpm i jquery --save // 生产环境下使用