前端模块化
- 模块化: 是具有特定功能的一个对象( 广义理解 )
- 模块定义的流程:
- 模块化的好处:
- 种类
- AMD( require.js)
- CMD ( sea.js )
- Common.js
- AMD/CMD/Common.js是JS模块化开发的标准,目前对应的实现是Require.js/Sea.js/Node.js
- Common.js主要针对服务端,AMD与CMD主要针对浏览器端,所以最容易混淆的是AMD与CMD
- AMD/CMD区别:虽然都是并行加载js文件,但还是有所区别,
- AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);
- CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。
- AMD与CMD优缺点
- AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。
- AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。
- CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。
- CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。
- 如何使用三者?
- Common.js的话,因为nodeJs就是它的实现,所以使用node就行,也不用引入其他包。
- AMD则是通过“script”标签引入Require.js,具体语法可以去看官方文档或者百度一下。
- CMD则是引入Sea.js。
1. 1 AMD定义一个模块
define ({
a: 1,
b: 2,
add: function(){}
})
require([./a.js],function( moduleA ){
})
1.2 CMD定义模块
define( function( require, exports, module ) {
});
require( './b.js',function( moduleB ){
})
1.3 Common.js
- Node.js使用了Common.js的规范
- 易错的理解:
- common.js是属于node的(X)
- node属于common.js(X)
- Node.js中Common.js规范的使用有三种类型:
- 内置模块( 内置模块指的是挂载在Node.js全局对象身上的api )
- 自定义模块
- 第三方模块
const nameObj = {
name: ' Yan '
}
module.exports = nameObj
const nameObj = require('./name.js')
1.3.1 内置模块
- 挂载在Node.js全局对象身上的api( 方法 )
关键词: 全局对象 global - node.js官网docs中左侧列表中的都是Node.js的内置模块
- 内置模块可以直接使用 ( require中直接书写模块名称 )
格式: const/let/var 变量名 = require( 模块名称 )
const path = require( 'path' )
const url = require( 'url' )
常用的内置模块(node 常用内置api)
- URL 网址解析
url.parse(urlString[, parseQueryString[, slashesDenoteHost]])
url.format(urlObject)
url.resolve(from, to)
- QueryString 参数处理
querystring.escape(str)
querystring.unescape(str)
querystring.parse(str[, sep[, eq[, options]]])
querystring.stringify(obj[, sep[, eq[, options]]])
- HTTP 模块概要
http.createServer([options][, requestListener])
http.get(options[, callback])
- 事件 events 模块
- 文件fs模块
- Stream 流模块
- request 方法
1.3.2 自定义模块
- 模块的定义
const student = {
id: 1,
name: ' Yan '
}
const fn = function(){}
- 模块的导出
module.exports = student
module.exports = {
student,fn
}
- 模块的引用
const student = require('./xxx.js');
const { student , fn } = require( './xxx.js ' );
- 注意:在自定义模块引用时,require一定要写好路径
1.3.3 第三方模块
- 别人已经封装好的模块
- 这个模块具备一些特定的功能
- 这些模块存放在 www.npmjs.com 这个网站中,这些模块的文档也记录在内
- 格式: var/let/const 变量名 = require( ‘模块名称’ )
- 总结:
- 第一步,使用npm/cnpm 安装
- 第二步,在文件中引入
- 第三步,在 www.npmjs.com 这个网站中找到这个模块的文档,根据文档来使用
const request = require( 'request' );
request('https://m.lagou.com/listmore.json',function( error , response,body ) {
if( error ) throw error;
console.log( response );
console.log( body );
})
- 思考:是否能将自己封装的自定义模块变成第三方模块?
- 分析:第三方模块具备的特性:
- 解决: 自定义模块的上传
1.3.3.1 自定义模块的上传
- 创建package.json文件
$ npm init -y
- 在 http://www.npmjs.com 这个网站注册一个账号
注意:第一次登陆会发送一个邮件给你的邮箱( 这个发送是手动的 ),然后登陆邮箱激活即可 - 检查你的电脑的源是不是npm源,如果是就不会理会,如果不是,那么切换到npm源
$ nrm ls
- 命令行登录npmjs仓库
$ npm adduser
- 创建模块并导出模块
- 查看你的包名称是否已经被使用
- 发布包
$ npm publish
- 安装包
$ npm install <package_name>
- 更新模块
$ npm update
- 卸载模块
$ npm uninstall <package_name>
- 犯错点:
- 邮箱没有激活 ( 最多的 )
- npm源没有切换
- 整个电脑的npm就不能使用
- 如果以上方法没有解决:可使用别人的账号去试一下
-D === --save-dev
//举例
cnpm i jquery -D === cnpm i jquery --save-dev // 开发环境下使用
cnpm i jquery -S === cnpm i jquery --save // 生产环境下使用