前端常用的库和实用技术之JavaScript 模块化
模块化概念
AMD是requirejs在推广过程中对模块化定义的规范化产出。
异步加载模块，依赖前置，提前执行
Define定义模块define(['require','foo'],function(){return});
Require加载模块（依赖前置）require(['foo','bar'],function(foo,bar){});
CMD是SeaJS在推广过程中对模块化定义的规范化产出。
Define定义exports导出define(function(require,exports,module){});
module上存储了当前模块上的一些对象。
require(./a)直接引入，require.async异步引入
同步加载，依赖就近，延迟执行
类似的还有CommonjsModule/2.0规范
AMD模块化的代码
//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>
<script data-main="js/main.js" src="./js/require.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
//main.js
define(['require','main'],function(require){
require(['index','test'],function(index,test){
console.log(index());
console.log(test());
})
})
//index.js
define(['require','index'],function(require){
var index = function(){
console.log('test index');
}
return index;
})
//test.js
define(['require','index'],function(require){
var init = function(){
console.log('test init');
}
return init;
})
方法调用的方式
//index.js
define(['require','index'],function(require){
var index = {};
var index = {
init:function(){
console.log('test init');
}
}
return index;
})
//main.js
define(['require','main'],function(require){
require(['index','test'],function(index,test){
console.log(index.init());
console.log(test.init());
})
})
//test.js
define(['require','index'],function(require){
var index = {};
var index = {
init:function(){
console.log('test init');
}
}
return index;
})
效果为
seajs的应用
<!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>
<script src="./js/sea.js"></script>
</head>
<body>
<script>
// seajs 的简单配置
seajs.config({
base: "./js/",
alias: {
"jquery": "jquery.js"
}
})
// 加载入口模块
seajs.use("main")
</script>
</body>
</html>
//index.js
define(function(require,exports,module){
// 透过exports对外提供接口
// exports.doSomething = function(){
// console.log('my ok ');
// }
// exports.doSomething2 = function(){
// console.log('my ok2 ');
// }
var a = {};
a.doSomething = function(){
console.log('my ok ');
}
a.doSomething2 = function(){
console.log('my ok2 ');
}
// console.log(module);
module.exports = a;
});
//main.js
define(function(require,exports,module){
require('jquery');
console.log('..aaa');
var index =require.async('index',function(index){
console.log(index);
});
})
本文看自前端常用的库和实用技术之JavaScript 模块化视频
前端常用的库和实用技术之JavaScript 模块化的更多相关文章
- 前端常用的库和实用技术之JavaScript多线程
多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...
- 前端常用的库和实用技术之JavaScript面向切面编程
Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...
- 前端常用的库和实用技术之JavaScript高级函数
1.惰性载入函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 前端常用的库和实用技术之JavaScript高级技巧
javascript高级技巧 变量作用域和闭包 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- javascript功能插件大集合 前端常用插件 js常用插件
转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...
- python进阶05 常用问题库（1）json os os.path模块
python进阶05 常用问题库(1)json os os.path模块 一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...
- Python常用的库简单介绍一下
Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...
- WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
- 《前端之路》之 Javascript 模块化管理的来世今生
目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...
随机推荐
- Java传输对象模式
当我们想要在客户端到服务器的一个传递具有多个属性的数据时,可使用传输对象模式.传输对象也称为值对象.传输对象是一个具有getter/setter方法的简单POJO类,并且是可序列化的,因此可以通过网络 ...
- Serializable 和Parcelable 详解
序列化:为了保存在内存中的各种对象的状态,并可以把保存的对象的状态读出来 安卓中实现序列化的接口有两个,一个是serializable,一个是parcelable. 一.实现序列化: 1.是可以将对象 ...
- hadoop命令行
持续更新中................ 1. 设置目录配额 命令:hadoop dfsadmin -setSpaceQuota 样例:hadoop dfsadmin -setSpaceQuota ...
- C# WinForm 访问webService天气预报
1.直接添加服务引用 右键引用 -->添加服务引用 这样的好处是可以直接当成类用 简单 麻烦的地方就是地址是死的 代码如下: private void button1_Click(object ...
- 安装apache的注意事项
在安装apache的时候我们一般都会用yum一键安装,但是很少去考虑相关的依赖包有什么,所以今天特意做一个记录,方便以后编译安装的时候,进展顺利. yum install httpd Installi ...
- 【胡策篇】题解 (UOJ 192 + CF938G + SPOJ DIVCNT2)
和泉纱雾与烟花大会 题目来源: UOJ 192 最强跳蚤 (只改了数据范围) 官方题解: 在这里哦~(说的很详细了 我都没啥好说的了) 题目大意: 求树上各边权乘积是完全平方数的路径数量. 这种从\( ...
- Java用集合实现斗地主发牌
本文以java双列集合HashMap为核心实现发牌操作: 思路: 1.准备牌:创建一个Map集合,存储牌的索引和组装好的牌 创建一个lis ...
- java两个栈实现一个队列&&两个队列实现一个栈
栈:先进后出 队列:先进先出 两个栈实现一个队列: 思路:先将数据存到第一个栈里,再将第一个栈里的元素全部出栈到第二个栈,第二个栈出栈,即可达到先进先出 源码: class Queue<E&g ...
- python 客户端 httplib 、 requests分别post数据（soap）
httplib import httplib soapbody =''' <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap ...
- python数据读取路径为啥要用双反斜杠?
Window下python读取数据路径可以有三种表示方式: (1)'c:\\a.txt' ——>转义的方式.表示这里\\是一个普通\字符,不容易出错(2)r'c:\a.txt' ——>声明 ...