js前端模块化(一) commonjs

随着浏览器的发展,很多页面逻辑迁移到了客户端(表单验证等),JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码。在java中有一个重要的概念--package逻辑上相关的代码组织到同一个包内,包内是一个相对独立的王国,不用担心命名冲突什么的,外部如果使用就直接import对应的package就可以了。JavaScript在设计时定位原因,没有提供类似的功能,开发者需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化。

目前,通行的JavaScript模块规范主要有两种:CommonJSAMD

CommonJS模块的特点如下。

  • 所有代码都运行在模块作用域,不会污染全局作用域。
  • 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
  • 模块加载的顺序,按照其在代码中出现的顺序。
  • module.exports属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取module.exports变量

下面主要介绍commonjs:require('路径')

//e:/2018/study/example.js 绝对路径
  //./example 相对于当前文件的路径
  //没有/或者./则表示是一个默认的核心模块

//删除单个模块缓存 要先根据文件名找到绝对路径

  console.log(require.resolve('./cache')) //e:/2018/study/cache.js
//delete require.cache['e:/2018/study/cache.js'] //这样是无效的 没有删除缓存
delete require.cache[require.resolve('./cache')]// 必须要先将文件解析到绝对路径

// // //删除所有模块缓存

// Object.keys(require.cache).forEach(function(key) {
// console.log(key)
// delete require.cache[key]
// })

//模块循环调用 a加载b b加载a b加载的是部分a

a.js

module.exports.x = 'a1';
console.log('a.js',require('./b').x); //b2
console.log(23333333333,require.main) //index
module.exports.x = 'a2'

b.js

module.exports.x = 'b1';
console.log('b.js',require('./a').x); //a1
module.exports.x = 'b2'

index.js

console.log("index.js",require('./a').x) //a2
console.log("index.js",require('./b').x)//b2
console.log("index.js",require('./a').x) //a2
console.log("index.js",require('./b').x)//b2

第二次加载a.js和b.js时,会直接从缓存读取exports属性,所以a.js和b.js内部的console.log语句都不会执行了

//CommonJS模块的加载机制是,输入的是被输出的值的拷贝。
//也就是说,一旦输出一个值,模块内部的变化就影响不到这个值

var calcu = require('./calcu')
var count = calcu.count;
var iccCount = calcu.iccCount;
console.log(count)//
iccCount();
console.log(count)//

calcu.js

var count = 3;
function iccCount() {
count++;
}
module.exports = {
count:count,
iccCount:iccCount
}

参考文档:http://javascript.ruanyifeng.com/nodejs/module.html#toc2

http://www.cnblogs.com/dolphinX/p/4381855.html

上一篇:Powershell script to install Windows Updates (msu) from folder


下一篇:NFC学习 (1)