JavaScript 模块化简析
来源:互联网 发布:网络舆情分析师考试 编辑:程序博客网 时间:2024/06/07 10:25
前言
JavaScript 基础
1
2
3
4
5
6
7
8
<html>
<head>
<script type=
"text/javascript"
src=
"index.js"
></script>
</head>
<body>
<p id=
"hello"
> Hello Wrold </p>
<input type=
"button"
onclick=
"onPress()"
value=
"Click me"
/>
</body></html>
1
2
3
// index.jsfunction onPress() { var p = document.getElementById('hello');
p.innerHTML =
'Hello bestswifter'
;
}
1
2
// math.jsfunction add(a, b) { return a + b;
}
1
2
3
// index.jsimport "math.js"function onPress() { var p = document.getElementById('hello');
p.innerHTML = add(1, 2);
}
1
2
3
4
5
6
7
8
9
<html>
<head>
<script type=
"text/javascript"
src=
"index.js"
></script>
<script type=
"text/javascript"
src=
"math.js"
></script>
</head>
<body>
<p id=
"hello"
> Hello Wrold </p>
<input type=
"button"
onclick=
"onPress()"
value=
"Click me"
/>
</body></html>
1
2
3
// index.jsfunction onPress() { var p = document.getElementById('hello');
p.innerHTML = add(1, 2);
}
初步模块化
index.js 无法 import,依赖于 HTML 的引用
index.js 中无法对 add 方法的来源做区分,缺少命名空间的概念
1
2
3
4
5
6
7
//index.js function onPress() { var p = document.getElementById('hello');
p.innerHTML = math.add(1, 2);
}
//math.jsvar math = {
base: 0,
add:
function
(a, b) {
return
a + b + base;
},
};
1
2
3
4
5
// math.jsvar math = (function() { var base = 0; return {
add:
function
(a, b) {
return
a + b + base;
},
};
})();
1
// global.jsvar module = { exports: {}, // 用来存储所有暴露的内容};
1
2
3
4
5
var
math = (
function
() {
var
base = 0;
return
{
add:
function
(a, b) {
return
a + b + base;
},
};
})();module.exports.math = math;
1
2
3
var
math = module.exports.math;
function
onPress() {
var
p = document.getElementById(
'hello'
);
// math
p.innerHTML = math.add(1, 2);
}
现有模块化方案
CommonJS
AMD
1
2
3
4
require([
'myModule1'
,
'myModule2'
],
function
(m1, m2){
// 主回调逻辑
m1.printName();
m2.printName();
});
CMD
1
2
3
4
5
6
define(
function
(require, exports, module) {
var
foo = require(
'foo'
);
// 同步
foo.add(1, 2);
... require.async(
'math'
,
function
(math) {
// 异步
math.add(1, 2);
});
});
ES 6 模块化
参考
Can I access variables from another file?
浅谈 JavaScript 模块化编程
前端模块化
详解JavaScript模块化开发
requireJS实现原理研究
Javascript模块化编程(一):模块的写法
Javascript模块化编程(二):AMD规范
浏览器加载 CommonJS 模块的原理与实现
Node中没搞明白require和import,你会被坑的很惨
0 0
- JavaScript 模块化简析
- javascript 模块化
- JavaScript模块化
- JavaScript 模块化
- JavaScript模块化
- JavaScript模块化
- javascript 模块化
- JavaScript模块化
- javascript模块化
- javascript 模块化
- Javascript模块化
- JavaScript 模块化
- Javascript语言的模块化
- JavaScript模块化之路
- JavaScript模块化开发探讨
- 模块化的javaScript开发
- javascript模块化编程III
- Javascript 模块化编程
- 如何把drop方式删除的表恢复
- Face Alignment(Face Landmark)
- 无vpn如何下载chrome插件
- 《Hadoop技术内幕》读书笔记——Task运行过程分析
- 从一个远程数据库的表copy到本地表
- JavaScript 模块化简析
- 数据累计值生成随机增长的随机值并利用游标方式生成多条循环存入数据库
- 对Linux 系统中yum源的理解
- spring配置数据源的三种方式
- 项目中Map端数据处理不均匀性分析
- 《Hadoop权威指南》——1、初识Hadoop&&2、关于MapReduce
- 为什么需要框架(java)
- 算法学习-动态规划
- 弹性布局的一个小实例