js前端模块化（一） commonjs

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

    目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

   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)//3
iccCount();
console.log(count)//3

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