JS模块化

一、模块化规范

1、CommonJS

①、规范

​ ● 说明

​ ○ http://wiki.commonjs.org/wiki/Modules/1.1

​ ○ 每个文件都可当做一个模块

​ ○ 在服务器端：模块的加载时运行时同步加载的

​ ○ 在浏览器端：模块需要提前编译打包处理

​ ● 基本语法

​ ○ 暴露模块

​ module.exports = value

​ exports.xxx = value

​ 问题：暴露的模块到底是什么？

​ 暴露的本质都是 exports 这个对象

​ ○ 引入模块

​ require(xxx)

​ 第三方模块：xxx为模块名

​ 自定义模块：xxx为模块文件路径

②、实现

​ ● 服务器端实现

​ Node.js

​ 官网：http://nodejs.cn/

​ ● 浏览器端实现

​ Browserify

​ 官网：http://browserify.org/

​ 也称为CommonJS的浏览器端的打包工具

​ ● 区别 Node 和 Browserify

③、基于服务器端应用实现

​ Node.js模块化教程

​ 基于node服务端的应用，代码跑在node服务器上面

​ ● 下载安装node.js

​ ● 创建项目结构

	|-modules
		|-module1.js
		|-module2.js
		|-module3.js
	|-app.js
	|-package.json
		{
   
            "name": "commonJS-node",
            "version": "1.0.0"
        }

​ package.json的生成方法：

​ 1、用cmd命令或者webstorm的Terminal窗口进入项目的根目录(这里是CommonJS_Node)

​ 2、输入npm init

​ 3、输入package.json文件中的name，不能使用中文，全部是小写字母，这里输入commonjs-node

​ 4、版本号使用默认即可

​ 5、其他的全部按回车即可

​ 6、在项目其他目录中点击鼠标左键，package.json就会出来

​ 7、package.json中只留下name和version两个选项即可

​ ● 下载第三方模块

​ npm install uniq

​ ----此模块会生成一个去重的函数

​ ● 模块化编码

​ module1.js：

    module.exports = {
   
        msg: 'module1',
        foo(){
   
            console.log('module1 foo()', this.msg)
        }
    }

​ module2.js

	module.exports = function () {
   
    	console.log('module2')
	}

​ module3.js

    exports.foo = function () {
   
        console.log('foo() module3')
    }

    exports.bar = function () {
   
        console.log('bar() module3')
    }

    exports.arr = [2,4,5,2,3,5,1]

​ app.js

    let uniq = require('uniq')

    let module1 = require('./modules/module1')
    let module2 = require('./modules/module2')
    let module3 = require('./modules/module3')

    module1.foo()
    module2()
    module3.foo()
    module3.bar()

    let result = uniq(module3.arr)
    console.log