立即执行函数和模块化

参考文档:《深入理解js立即执行函数》

概述

很多时候我们需要创建一个私有的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问全局对象,将全局对象以参数形式传进去即可,如jQuery代码结构:

1
2
3
(function(window, undefined){ 
//jquery code
})(window);

匿名函数和表达式

在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//函数声明
function test(){

}

//函数表达式
var test = function(){

}

//匿名函数
function(){

}

上面只有函数表达式是立即执行的。

立即执行函数

如果我们要使函数立即执行,就需要将该函数转换为函数表达式,转换的方式有下面几种:

1
2
3
(function(test){
console.log(test);
})(123);
1
2
3
(function(test){
console.log(test);
}(123));
1
2
3
!function(test){
console.log(test);
}(123);
1
2
3
+function(test){
console.log(test);
}(123);
1
2
3
-function(test){
console.log(test);
}(123);
1
2
3
var fn = functin(test){
console.log(test);
}(123);

模块化

Vue的框架立即执行函数如下,通过上面分析我们已经知道会立即执行 2,3,4 行,我们分析一下为什么下面执行到了 helloword.

1
2
3
4
5
6
7
(function(global, factory){
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function(){
document.writeln("hello world");
}))

在 ES6 之前没有模块化的概念,现在 JavaScript 支持了 module, 分为导出 export 和导入 import 两个模块。

每一个文件就是一个模块,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用 export 来对其进行暴露(输出)。

export 是用来定义模块的,可以导出对象、函数、类、字符串等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const a = 1;
let b = 2;
function show(){
console.log(10);
}
export { //暴露模块
a,
b as c,
show
}
show(); // 10
console.log(a); // 1
console.log(b); // 2
console.log(c); // c is not defined 因为在这个js里他还是b,只不过导出到另外一个文件里才叫c
1
2
3
4
5
6
7
<script type="module">
import {a,c,show} from './1.js';
show(); // 10
console.log(a); // 1
console.log(c); // 2
console.log(b); // b is not defined 已经将导入的b更名为c,所以这里叫c
</script>

上面的例子中可以将export导出的内容通过as进行更名,import导入的也可以通过as改名。

1
2
3
4
5
6
<script type="module">
import * as goto from './1.js'; // * 代表1.js中导出的全部的内容,但是不能直接输出*,必须改名
console.log(goto); // 整个json对象
console.log(goto.a); // 1
goto.show(); // 10
</script>

导出的方式还有另外一种:export default {}export {} 的区别是前者导出的东西需要在导入的时候加 {},而后者则不需要。

1
2
3
4
5
const a = 1;
const b = 2;
const c = 3;
export {a,b}
export default c;
1
2
3
4
<script type="module">
import c,{a,b} from './1.js'; // 同时导入export和export default的时候,必须把默认的放在前面
console.log(a,b,c); // 1 2 3
</script>

还有一种动态引入方式,例如:

1
2
3
4
5
<script type="module">
import('./1.js').then(res =>{
console.log(res.a); // 1
});
</script>

CommonJs规范

上面的 exports 命令实际上是 CommonJS 模块规范中的 module.exports 的缩写,在每个模块(文件)头部都有如下命令:

1
var exports = module.exports;

module.exports 属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取 module.exports 变量。

Node 应用由模块组成,采用 CommonJS 模块规范。Node内部提供一个Module构建函数。所有模块都是Module的实例。

1
2
3
4
5
function Module(id, parent) {
this.id = id;
this.exports = {};
this.parent = parent;
// ...

每个模块内部,都有一个module对象,代表当前模块。它有以下属性。

  • module.id 模块的识别符,通常是带有绝对路径的模块文件名。
  • module.filename 模块的文件名,带有绝对路径。
  • module.loaded 返回一个布尔值,表示模块是否已经完成加载。
  • module.parent 返回一个对象,表示调用该模块的模块。
  • module.children 返回一个数组,表示该模块要用到的其他模块。
  • module.exports 表示模块对外输出的值。

AMD规范

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范。

AMD规范使用define方法定义模块,下面就是一个例子:

1
2
3
4
5
6
7
8
9
define(['package/lib'], function(lib){
function foo(){
lib.log('hello world!');
}

return {
foo: foo
};
});

AMD规范允许输出的模块兼容CommonJS规范,这时define方法需要写成下面这样:

1
2
3
4
5
6
7
8
9
10
11
12
define(function (require, exports, module){
var someModule = require("someModule");
var anotherModule = require("anotherModule");

someModule.doTehAwesome();
anotherModule.doMoarAwesome();

exports.asplode = function (){
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});

所以Vue框架的入口代码实际上是判断了当前的模块化规范,最后根据对应模块规范将 factory 方法暴漏出去。

1
2
3
4
5
6
7
(function(global, factory){
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function(){
document.writeln("hello world");
}))

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×