模块化开发之CommonJS规范

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43307658/article/details/86724737

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

1 前言

随着网站开发的复杂度越来越高,不管是前台还是后台的js文件都越来越多,就出现了几个问题:

  1. 变量命名冲突
  2. 文件依赖复杂度增高
  3. 页面载入过多依赖傻傻分不清,不利于维护

NodeJS 模块化开发解决以上问题妥妥的,NodeJs模块化开发遵循CommonJS规范

2 CommonJS

模块化最初产生于服务端,并引申到客户端,CommonJSNode推广并主要用于服务器

2.1 定义模块

  1. CommonJS规范中,一个单独的JS文件就是一个模块
  2. 每个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

2.2 模块导出和载入

模块导出exportsmodule.exports

模块载入require

  1. Node 中,每个模块内部都有一个自己的 module 对象

  2. module 对象中,有一个成员叫:exports 也是一个对象

  3. 通过exports对象导出当前方法或者变量,也可以通过module.exports导出

  4. Node 为了简化程序员的操作,专门提供了一个变量:exports 等于 module.exports,相当于在模块中还有这么一句代码var exports = module.exports

  5. 所以,语法

    1. 导出多个成员exports.xxx = xxx 或者 module.exports = { }
    2. 到处单个成员module.exports
  6. 下面是模拟一个模块的导出

// math.js 该模块专门处理计算方面的操作 ,从该模块导出

// 1. 如果一个模块需要直接导出某个成员,而非挂载的方式
module.exports = 'hello'

module.exports = function (x, y) {
  return x + y
}

// 2. 将上述两次导出合成一次的写法
module.exports = {
    add: function (x, y) {
        return x + y
    }, 
    str: 'hello'
}
  1. 下面是模拟一个模块的载入以及require加载顺序
    1. 首先我们先去创建几个模块用来做模拟a.jsb.jsmain.js
    2. 写上一些简单的代码
// a.js
console.log('a.js 被加载了')
var fn = require('./b')

console.log(fn)
// b.js
console.log('b.js 被加载了')

module.exports = function () {
  console.log('hello bbb')
}
require('./a')

var fn = require('./b')

console.log(fn)

分析与结论

  1. 我们看上面三个模块中的代码,他们在后续的程序处理过程中可能会产生依赖,但是在没有加载之前,他们是相互独立的,互不影响
  2. require优先从缓存中加载
  3. 看上面的代码,在main.js中提前加载了a.js,同时在a.jsmain.js中加载b.js,由于a.js已经加载过b.js了,所以在main.js加载b.js的时候只是能拿到借口对象,但是不会重复执行里面的代码,这样做的好处是避免了重复加载,提高模块效率
  4. .js文件后缀可以省略

3 文章推荐

展开阅读全文

没有更多推荐了,返回首页