JavaScript模块化编程(总结)

什么是模块化编程？

随着javascript得到重视，在开发中实现越来越多的复杂的功能，导致一个页面出现多个js文件，这就造成了全局污染和依赖管理混乱的问题，所以就出现了模块化。模块化开发是一种管理方式解决了全局污染、依赖管理混乱和代码维护性差的一系列问题。

常见的模块化规范有哪些？

Commonjs、es6、AMD、CMD
在这里小编只重点介绍一下commonjs规范和se6规范

Commonjs规范：

特点：既可以在浏览器端运行，又可以在服务器端运行

使用方式：

暴露方式：module.exports 或 expots.xxx

注意：

module.exports === expost = {}
在commonjs模块规范中 module.exports 和 exports.xx 不能混合使用，如果混合使用以 module.exports 为主。

引入方式：require(‘url’)

注意：

如果引入的是自定义模块，必须写路径。
如果引入第三方模块，则直接写模块名。

在服务器端运行：

模块一代码：
let obj = {name: '张三',fun: function() {console.log("姓名：" + this.name);}
};
module.exports = obj;
---------------------------
模块二代码：
let arr = [1, 5, 8];
exports.arr = arr;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
module1.fun();
console.log(module2.arr);
---------------------------
在终端直接运行结果：
张三
姓名：张三
[ 1, 5, 8 ]

目录结构图片：

在浏览器端运行：

注意：在浏览器中运行和服务器端运行方式不同！
因为在浏览器端中浏览器无法识别require，浏览器不认识require
解决方法如下：
第一步：全局安装 npm install browserify -g
第二步：使用browserify编译js前面生成的js browserify js/dist/app.js -o js/dist/build.js
官网：http://browserify.org/

模块一代码：
let obj = {name: '张三',fun: function() {console.log("姓名：" + this.name);}
};
module.exports = obj;
---------------------------
模块二代码：
let arr = [1, 5, 8];
exports.arr = arr;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
module1.fun();
console.log(module2.arr);
---------------------------
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/dist/build.js"></script>
</head><body></body></html>

目录结构：

浏览器端运行结果：

es6规范：

特点：只能在浏览器端运行，服务器端不能运行

使用方式：

暴露方式：分三种
1.分别暴露：export xxx
此种引入方式会将module暴露的内容，收集成一个对象：
import * as obj from “路径”
2.统一暴露
export {xxx}
此种引入方式会将module暴露的内容，收集成一个对象：
import * as obj from “路径”
3.默认暴露 export defalut xxx

注意：

默认暴露只能暴露一次

引入方式：分二种
1.import {xxx} from ‘路径’
1.分别暴露，统一暴露：
-import {xxx} from ‘路径’
-import * as obj from “路径”
-此种引入方式会将module暴露的内容，收集成一个对象：
2.默认暴露：（本身就暴露了一个对象）
import xxx from '路径’

注意：

几乎所有的第三方模块都用默认暴露的方式
当混合使用的时候默认暴露直接写变量名而统一暴露和分别暴露则需要统一写在{}里，这两个用逗号隔开。

浏览器端运行：
安装babel-cli , babel-preset-es2015 , browserify:
第一步：全局安装 npm install babel-cli browserify -g //转换成es5语法和编译es6模块化
第二步：局部安装 npm install babel-preset-es2015
第三步：创建.babelrc文件(给babel指定任务)
{
“presets” : [“es2015”]
}
第四步：编码 babel js/src -d js/dist
第五步：使用browserify编译js前面生成的js browserify js/dist/app.js -o js/dist/build.js

模块一代码：（分别暴露）
export let obj = {name: '张三',fun: function() {console.log("姓名：" + this.name);}
};
export let obj2 = {name: '李四',fun: function() {console.log("姓名：" + this.name);}
};
module.exports = obj;
---------------------------
模块二代码：（统一暴露）
let arr = [1, 5, 8];
let arr2 = [4.8, 3];
export { arr, arr2 };
---------------------------
模块三：（默认暴露）
let obj = {name: "王五",age: "20",fun: function() {console.log("姓名：" + this.name + "年龄:" + this.age);}
}
export default obj;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
console.log(module2.arr2);
module3.fun();
---------------------------
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/dist/build.js"></script>
</head><body></body></html>

目录结构：

运行结果：

JavaScript模块化编程(总结)相关推荐

(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
JavaScript模块化编程知识分享！
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
学习阮一峰Javascript模块化编程，requireJS使用
使用背景NOW: 网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式. 项目需要一个团队分工协作.进度管理.单元 ...
JavaScript 模块化编程（二）：AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
JavaScript 模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等--开发者不得不使 ...
Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...