JavaScript 模块化加载
存在AMD(Asynchronous Module Definition异步模块定义)规范和CMD(Common Module Definition通用模块定义)规范。
对于依赖的模块,AMD是提前执行,CMD是延迟执行;并非绝对,CMD推从as lazy as possible;
AMD推从依赖前置,CMD推从依赖就近;
AMD的API默认一个当多个用,CMD的API职责单一。
一个简单的开始,使用Sea.js模块化框架,该框架遵循CMD规范,简单的使用如下:
define(function(require, exports, module) {
exports.name="xf_z1988";
exports.getnm=function(){
return exports.name;
};
});
定义一个CMD模块define_test_exports
define(function(require, exports, module) {
module.exports={
name:"xf_z1988 module.exports test"
};
});
定义个CMD模块define_test_module_exports
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script src="http://seajs.github.io/examples/sea-modules/seajs/seajs/2.1.1/sea.js"></script>
<script type="text/javascript">
if(typeof define === "function" && define.cmd){
show();
}
function show(){
seajs.config({
// 定义基本路径.
base:"/",
// 别名.
alias:{
"jquery":"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
"define_test_exports":"http://files.cnblogs.com/xf_z1988/js_cmd_define_test_exports.js",
"define_test_module_exports":"http://files.cnblogs.com/xf_z1988/js_cmd_define_test_module_exports.js"
},
// 提前加载.
preload:["jquery"]
});
// 在页面中加载模块.
seajs.use(["jquery","define_test_exports"],function(_$,x){
$(document).ready(function(){
document.body.innerHTML+=x.name+"_1<br/>";
});
});
// 定义模块
define(function(require,request,module){
// 同步加载一个模块.
var xd=define("define_test_exports");
// 异步加载一个模块,在加载完成时,执行回调
require.async("define_test_module_exports", function(x) {
$(document).ready(function(){
document.body.innerHTML+=x.name+"_2<br/>";
});
});
});
}
</script>
</head>
<body></body>
</html>
一个使用Sea.js来模块化的例子
未完成
JavaScript 模块化加载的更多相关文章
- 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- 实现一个JavaScript模块化加载器
对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...
- 利用require.js实现javascript模块化加载
这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...
- 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6
Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- RequireJS 模块化加载框架使用
RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...
- SeaJS 模块化加载框架使用
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
随机推荐
- Script: Who’s using a database link?(找出谁在使用dblink)
Every once in awhile it is useful to find out which sessions are using a database link in an Oracle ...
- Nhibernate总结(一)查询返回指定字段
项目查询中,常常需要返回指定的字段,下面是三种Nhibernate的方法1.linq to Nhibernatepublic class NameID{ public int Id { get; se ...
- OC - 14.NSOperation与NSOperationQueue
简介 通过NSOperation与NSOperationQueue的组合也能实现多线程 通常将任务封装成NSOperation对象,并将对象添加到NSOperationQueue中实现 NSOpera ...
- LATEX学习笔记1
LATEX源文件的结构分三大部分,依次为:文档类声明.序言(可选).正文. 文档结构 \documentclass{article} \usepackage{amsmath} \usepackage{ ...
- 【清橙A1094】【牛顿迭代法】牛顿迭代法求方程的根
问题描述 给定三次函数f(x)=ax3+bx2+cx+d的4个系数a,b,c,d,以及一个数z,请用牛顿迭代法求出函数f(x)=0在z附近的根,并给出迭代所需要次数. 牛顿迭代法的原理如下(参考下图) ...
- php解决下单、抽奖并发导致的库存负数的问题
我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 if(库存数量 > 0) { //生成订单... sql2:库存-1 } 当没有并发 ...
- php函数声明的简单实例
<?phpecho table(10,5,500);echo table(2,2,400); //函数调用 function table($row,$col,$width){ //通过函数标记t ...
- PyQt5创建第一个窗体(正规套路)
一.Pyqt5 创建第一个窗体 很多人写窗体程序都是直接敲代码,不使用设计器,我个人不是很赞成这种做法.使用设计器的好处是直观.维护方便,尤其开发复杂窗体的效率高. 但是每次修改ui文件后,需要重新生 ...
- Delphi FireMonkey使用UniDAC 连接MySQL
首次用Delphi XE6 开发安卓程序,并没有在网上找到连接远程MySQL服务器的文档,自己摸索一番,发现UniDAC控件新版本也已支持了FireMonkey下的开发.遂记下连接方法和大家分享. 1 ...
- 到底该如何入门Keras、Theano呢?(浅谈)
目前刚刚开始学习Theano,可以说是一头雾水,后来发现Keras是对Theano进行了包装,直接使用Keras可以减少很多细节程序的书写,它是模块儿化的,使用比较方便,但更为细节的内容,还没有理解, ...