web前端开发:require.js应用及模块化开发

作者:日期:2016-08-29 10:28:49 点击:262 模块require

1. JS的不足

js没有模块系统,不支持封闭作用域或依赖管理

没有标准库,没有文件系统API

没有包管理系统,不能自动加载和安装依赖

2.commonjs规范

一个 node.js由大量模块组成,每个JS文件都是一个模块

实现了require方法,npm基于commonjs实现了自动加载和安装依赖

3.模块化优点

增加内聚性,有助分工协作

方便重构

提高代码质量

3.模块使用

  • 定义模块

  • 导出模块 module.exports和exports

  • 使用模块 require(‘filename’);

  • 实现原理

(function(exports,require,module,__filename,__dirname){
return module.exports;
}
)
();

module.exports和exports的区别

4.require的应用

  • 加载模块后会缓存,多次加载后得到同一对象
require('./test.js')

查看模块缓存

console.log(require.cache);

查询模块绝对路径

require.resolve('./test.js');

查看单个的模块缓存

require.cache[require.resolve('./test.js')]

删除模块缓存

delete require.cache[require.resolve('./test.js')];

5.包和npm

多个模块可以封装成一个包

npm是node.js默认的模块管理器,用来安装和管理node模块 网址为 http://npmjs.org
可以用包的方式通过npm安装、卸载、发布包

6.组织和管理模块

放置多个模块的文件夹称为包,可以通过包来对一组具有相互依赖的有关系模块进行管理。
初始化一个项目

npm init -y
```
{
"name":"包的名称",
"description""包的简要说明。",
"version":"版本号",
"keywords""关键字",
"licenses":"许可证",
"repositories""仓库地址 ",
"dependencies":"包的依赖,一个关联数组,由包名称和版本组成。"
}
```

7.安装第三方包

全局安装 直接下载到Node的安装目录中,各个项目都可以调用,适合工具模块,比如webpack

npm install -global [package name]

本地安装 将一个模块下载到当前目录的node_modules子目录,然后只有在当前目录和它的子目录之中,才能调用这个模块

npm install [package name] --save-dev/--save

查看全局路径

npm root -g

8.卸载第三方包

卸载全局

npm uninstall -g [package name]

卸载本地

npm uninstall [package name] --save-dev

9.发布全局项目

创建并进入目录

mkdir jiang && cd jiang

初始化项目

npm init jiang

注册用户

npm adduser

发布项目

npm publish

10.源管理工具

安装此工具

npm install -g nrm 

显示所有的源

nrm ls

切换到中国源

nrm use cnpm

注意项目的名称不能是别人已经注册的名称,尽量用自己的名字做前缀 如果注册失败的话可能是因为改了镜像地址了,需要改回来 npm config set registry “http://registry.npmjs.org/” 查看所有的配置项 npm config ls

11.模块分类

内置模块
### util
javascript
require('./person');
inherits继承
inspect解析属性
isArray isRegExp isDate isError判断类型

文件模块
### 自定义模块
javascript
require('./person');

第三方模块
### mime模块
javascript
require('mime');

12.模块查找规则

当没有以’/’或者’./’来指向一个文件时,这个模块要么是核心模块,要么就是从node_modules文件夹加载的

第三方模块

  1. 从module.paths取出第一个目录开始。

  2. 直接从目录中查找,存在结束,不存在下一条。

  3. 尝试添加.js、.json查找

  4. 尝试将require的参数作为一个包来查找,读取package.json,取得main配置项指定的文件查找,不存在进行3

  5. 继续失败查看下一个目录

上一篇: 什么是buffer及buffer常用方法

下一篇: Web前端开发:hexo搭建博客