JavaScript---js的模块化
js的模块模式被定义为给类提供私有和公共封装的一种方法，也就是我们常说的“模块化”。
怎么实现“模块化”？
通过闭包的原理来实现“模块化” ，具体实现：1.必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）；2.封闭函数必须返回至少一个内部函数（返回多个函数时，以对象字面量的形式返回）
先看一个实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function Module (){
//内部变量
var something = 'cool';
var another = [1,2,3];
//内部函数
function doSomething(){
console.log(something);
} function doAnother(){
console.log(another);
}
//返回对象字面量形式，里面包含内部函数的引用， 这样就保持了内部变量是隐藏且私有的状态。
return {
doSomething: doSomething,
doAnother: doAnother
};
}
//调用外部函数Module创建一个模块实例foo
var foo = Module();
foo.doSomething();//cool
foo.doAnother();//[1,2,3]
</script>
</body>
</html>
简单分析一下代码：
首先，Module只是一个函数，必须通过他才能创建一个模块实例，如果不执行他，内部作用域和闭包都无法被创建。 其次，Module函数返回一个字面量对象，这个返回的对象含有对内部函数而不是内部变量的引用。这样就保持了内部变量是隐藏且私有的状态。可以将这个对象类型的返回值看作模块的公共API 这个API最终会被赋值给外部的变量foo，通过他就可以访问API中的属性方法，比如：foo.doSomething()。
上面的实例中，Module函数可以调用任意多次，每次调用都会创建一个新的模块实例。当只需要一个实例时，可以对这个模块进行简单的改进来实现单例模式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var foo = (function Module (){
var something = 'cool';
var another = [1,2,3]; function doSomething(){
console.log(something);
} function doAnother(){
console.log(another);
} return {
doSomething: doSomething,
doAnother: doAnother
};
})(); foo.doSomething();//cool
foo.doAnother();//[1,2,3]
</script>
</body>
</html>
通过将模块函数转换为IIFE（立即执行函数），立即调用这个函数并将返回值直接赋值给电力的模块实例foo
模块也是普通的函数，因此可以接收参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// var foo = (function Module (){
// var something = 'cool';
// var another = [1,2,3]; // function doSomething(){
// console.log(something);
// } // function doAnother(){
// console.log(another);
// } // return {
// doSomething: doSomething,
// doAnother: doAnother
// };
// })(); // foo.doSomething();//cool
// foo.doAnother();//[1,2,3] var foo = (function Module(id){
function change(){
publicAPI.id = id2;
} function id1(){
console.log(id);
} function id2(){
console.log(id.toUpperCase());
} var publicAPI = {
change: change,
id: id1
}; return publicAPI;
})('hello'); foo.id();//hello
foo.change();
foo.id();//HELLO
</script>
</body>
</html>
可以看出：通过在模块实例的内部保留公共API对象的内部引用（API指的是引用return回来的字面量对象 ｛...｝），可以从内部模块实例进行修改，包括添加、删除方法和属性，以及修改它们的值。
现代的模块机制
大多数模块依赖加载器/管理器，本质上都是将模块定义为封装进一个API。 现在，宏观了解一下模块机制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var myModule = (function Module(){
var modules = [];
//定义一个define函数用于定义一个模块
function define(name, deps， impl){
for (var i = 0;i < deps.length;i++){
deps[i] = modules[deps[i]];
}
modules[name] = impl.apply(impl, deps);
} function get(name){
return modules[name];
} return {
define: define,
get: get
};
})();
</script>
</body>
</html>
这段代码的核心就是：modules[name] = impl.apply(impl, deps)。 为了模块的定义（define函数）引入包装函数（可以传入任何依赖），并且将返回值，也就是模块的API，存储在一个根据名字来管理的模块列表中。（不是很理解啊？？）
下面展示了如何使用它来定义模块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var myModule = (function Module(){
var modules = []; function define(name, deps, impl){
for (var i = 0;i < deps.length;i++){
deps[i] = modules[deps[i]];
}
modules[name] = impl.apply(impl, deps);
} function get(name){
return modules[name];
} return {
define: define,
get: get
};
})(); myModule.define('bar', [], function(){
function hello(who){
return "Hello," + who;
}; return{
hello:hello
};
}); myModule.define('foo', ['bar'], function(bar){
var hungry = 'hippo'; function awesome(){
console.log(bar.hello(hungry).toUpperCase());
}; return {
awesome: awesome
};
}); var bar = myModule.get('bar');
var foo = myModule.get('foo'); console.log(bar.hello('hippo'));//hello, hippo
foo.awesome();//HELLO, HIPPO
</script>
</body>
</html>
‘foo’和‘bar’模块都是通过一个返回公共API的函数来定义的。‘foo’甚至接受‘bar’的实例作为依赖参数，并使用它。
这就是模块的威力！！
总结一下：模块并不是什么神秘的东西，他只是一个外部函数返回内部函数的引用（字面量对象的形式返回），从而可以访问内部函数和变量的一种方式。
---摘自《你不知道的JavaScript》（上） 2017-3-22 23：24
JavaScript---js的模块化的更多相关文章
- JAVAScript：前端模块化开发
目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...
- JavaScript 中的模块化
JavaScript 中的模块化 最早的基于立即执行函数,闭包的模块化 const MountClickModule = function(){ let num = 0; const handle ...
- 简单聊一聊Javascript中的模块化
在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Ja ...
- javascript(js)小数精度丢失的解决方案
原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...
- 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数
来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...
- paip.java 以及JavaScript (js) 的关系以及区别
paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- 关于URL编码/javascript/js url 编码/url的三个js编码函数
关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- JavaScript(js)/上
JavaScript(js) ECMA-----定义的基础语法 DOM------document object model BOM------Browser object model Jav ...
- 【HANA系列】SAP HANA XS使用JavaScript(JS)调用存储过程(Procedures)
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
随机推荐
- HDU - 4786 Fibonacci Tree (MST)
题意:给一张由白边和黑边构成的无向图,求是否存在一个生成树,使白边的数量为一个斐波那契数. 分析:白边权值为1,黑边权值为0.求出该图的最小生成树和最大生成树,若这两个值之间存在斐波那契数,则可以,若 ...
- ACM-ICPC 2018 南京赛区网络预赛 - J. Sum (找规律+打表)
题意:\(f(i):i\)能拆分成两个数的乘积,且要求这两个数中各自都没有出现超过1次的质因子.每次给出n,求\(\sum_{i=1}^{n}f(i)\) 分析:\(1 \le n \le 2e7\) ...
- oracle中job定时器任务
对于DBA来说,经常要数据库定时的自动执行一些脚本,或做数据库备份,或做数据的提炼,或做数据库的性能优化,包括重建索引等等的工作.但是,Oracle定时器Job时间的处理上,千变万化,今天我把比较常用 ...
- 20145314郑凯杰《信息安全系统设计基础》第7周学习总结 part B
20145314郑凯杰<信息安全系统设计基础>第7周学习总结 part B 上篇博客反思与深入 首先根据本周第一篇博客,娄老师给我的评论,我开始进行局部性的深入研究: 分为两个步骤,一是知 ...
- 20145331 实验一 "Java开发环境的熟悉"
20145331 实验一 "Java开发环境的熟悉" 实验内容 使用JDK和IDE编译.运行简单的Java程序.题目: 实现四则运算,并进行测试. 编写代码 1.首先第一步就是要输 ...
- 内核启动时在挂载ubi文件系统时提示UBIFS error (ubi0:0 pid 1): ubifs_read_superblock: min. I/O unit mismatch
一.背景 1.1 笔者机器的内核错误信息如下: UBIFS error (ubi0:0 pid 1): ubifs_read_superblock: min. I/O unit mismatch: 2 ...
- CentOS7系统安装及环境初始化
操作系统安装: 将网卡名称设置为eth*,不使用CentOS 7默认的网卡命名规则.所以需要在安装的时候,增加内核参数.1. 光标选择“Install CentOS 7” 2. 点击Tab,打开 ...
- Excel导出失败的提示
未处理System.InvalidCastException HResult=-2147467262 Message=无法将类型为“Microsoft.Office.Interop.Excel.App ...
- mysql中group by存在局限性探讨(待续)
现在有一个需求:在2018年游戏充值记录表(字段主要有: user_name , money , game_id , 表有6000w行)查找出哪些人在某段日期内累计充值金额在100~500元范围内的, ...
- Oracle——ORA-01031: 权限不足
报错:ORA-01031: 权限不足 解决方法:给用户admin授予DBA角色 grant dba to admin;