模块化

时间 2019-11-13

标签模块化繁體版

原文原文链接

不使用模块化

一、util.js 封装了一个getFormatDate函数

二、a-util.js 封装了一个aGetFormateDate函数，这个函数使用了utils.js中的getFormatDate

三、a.js 使用了a-util.js中的aGetFormateDate

util.js

function getFormatDate(date, type){
　　if(type === 1) {
　　　　return '2017-06-15'
　　}
　　if(type === 2) {
　　　　return '2017年6月15日'
　　}
}

a-util.jscss

function aGetFormatDate(date) {
　　return getFormatDate(date, 2);
}

a.jshtml

var dt = new Date();
console.log(aGetFormatDate(dt))

index.html前端

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<script src="util.js"></script>
　　　　<script src="a-util.js"></script>
　　　　<script src="a.js"></script>
　　</body>
</html>

＊：node

一、util.js，a-util.js，a.js三个js顺序不能放错，一放错就用不了

二、这些代码中的函数必须是全局变量，才能暴露给使用方，全局变量污染。很容易被冲掉，难找bug

三、a.js执导引用a-util.js。可是他不知道a-util.js还须要依赖于util.js

使用模块化-AMD

util.js的方法吐出传给我就好，不用暴露给全局

util.js

define(function() {
　　var util = {
　　　　getFormatDate: function(date, type){
　　　　　　if (type === 1) {
　　　　　　　　return '2017-06-20'
　　　　　　}
　　　　　　if (type === 2) {
　　　　　　　　return '2017年6月20日'
　　　　　　}
　　　　}
　　}
　　return util;
});

a-util.jswebpack

// 依赖于util.js，返回util
define(['./util.js'], function(util) {
　　var aUtil = {
　　　　aGetFormatDate: function(date) {
　　　　　　return util.getFormatDate(date,2);
　　　　}
　　}
　　return aUtil;
});

a.jses6

define(['./a-util.js'], function(aUtil) {
　　var a = {
　　　　printDate: function(date) {
　　　　　　console.log(aUtil.aGetFormatDate(date))
　　　　}
　　}
　　return a;
});

main.jsweb

require(['./a.js'], function(a){
　　var date = new Date();
　　a.printDate(date);
})

index.htmlnpm

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<p>AMD test</p>
　　　　<script data-main='./main.js' src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script>
　　</body>
</html>

＊：前端工程化

一、https://requirejs.org/

二、全局define函数

三、全局require函数。只有define后，才能被require

四、依赖的js会自动，异步加载

五、直接引入a.js就行。其余的根据依赖关系自动引用

六、那两个函数，不必作成全局变量，不会带来污染和覆盖

模块化－CommonJS

nodejs模块化规范，如今被大量前端使用

一、前端开发依赖的插件和库，均可以从npm中获取

二、构建工具的高度自动化，使得使用npm的成本很是低

三、commonjs不会异步加载js,不像amd那样，而是同步一次性加载出来，他不须要异步，由于他不须要从服务器拉取文件，他直接就是在服务器上运行

util.js

module.exports = {
　　getFormatDate: function(date, type){
　　　　if (type === 1) {
　　　　　　return '2017-06-15'
　　　　}
　　　　if (type === 2) {
　　　　　　return '2017年6月15日'
　　　　}
　　}
}

a-util.js浏览器

var util = require('./util.js');
module.exports = {
　　aGetFormatDate: function(date){
　　　　return util.getFormatDate(date, 2);
　　}
}

AMD和CommonJS的使用场景

一、须要异步家在JS，使用AMD

二、使用了npm以后建议使用CommonJS

模块化－ES Module

一、语法：import export (注意有无default)

二、环境：babel编译es6语法，模块化可用webpack和rollup

总结：

一开始没有模块化，须要什么写什么，须要什么引用什么。固然是很很差，经过发展，有一套前端工程化的体系

一、AMD成为标准，require.js(也有cmd)

后来有一个require.js这么个东西，前端能够经过一些语法定义，经过define,require这些函数的语法定义，完成模块化的编写。因此require,AMD慢慢成为一个标准，什么是标准，就是他的出现一统江湖，用的人多了，就成为一个标准。好比就用define这个函数，就用require这个函数。define里面有什么参数，返回什么，定义好了以后就成为一个标准。

后来也有cmd。cmd的标准在社区里面用的基本没有了

二、前端打包工具，是的,nodejs模块化能够被使用

三、ES6出现，想统一如今全部模块化标准

四、nodejs积极支持，浏览器还没有统一