存在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 模块化加载的更多相关文章

  1. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  2. 实现一个JavaScript模块化加载器

    对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...

  3. 利用require.js实现javascript模块化加载

    这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...

  4. 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

    Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...

  5. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  6. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  7. RequireJS 模块化加载框架使用

    RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...

  8. SeaJS 模块化加载框架使用

    SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...

  9. Javascript 异步加载详解

    Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...

随机推荐

  1. 对select into表复制的一点思考

    操作系统:Windows 2007 数据库版本:SQL Server 2008 R2 今天写存储过程遇到一个问题,用"Select 1 id,'Boss_he' into A"这样 ...

  2. jBPM 6 开发 eclipse 插件安装

    jBPM 6 开发 eclipse 插件安装 概述 与之前的jBPM 5相比,jBPM 6 新引入的kjars及mavenized的特性,使流程开发设计与之前有了很大的不同,本文主要说明jBPM 6 ...

  3. angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2

    工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...

  4. 校省选赛第一场A题Cinema题解

    今天是学校省选的第一场比赛,0战绩收工,死死啃着A题来做,偏偏一直WA在TES1. 赛后,才发现,原来要freopen("input.txt","r",stdi ...

  5. 多重背包的入门题目HDU1171,2191,2844.

    首先,什么叫多重背包呢? 大概意思就是:一个背包有V总容量,有N种物品,其价值分别为Val1,Val2--,Val3,体积对应的是Vol1,Vol2,--,Vol3,件数对应Num1,Num2--,N ...

  6. 笔记一：Python的PyDev插件在eclipse上面安装（新的插件地址 location）

    注:部分内容参考网上的,若有侵权,请作者联系我,马上进行删改 安装PyDev: 首先需要去Eclipse官网下载:http://www.eclipse.org/,Eclipse需要JDK支持,如果Ec ...

  7. Safari浏览器的调试

    最近做浏览器兼容的时候发现Safari的脚本调试工具比较难找,因此与大家分享一下 1.找到脚本调试的选项 2.勾选此选项 3.在页面空白处右击打开调试窗口 4.看到下方的调试窗口了 细心的读者会发现, ...

  8. opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile

    OpenCart(http://www.opencart.com/,http://www.opencartchina.com/)是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者 ...

  9. Mac下修改Mysql密码

    1. 停止Mysql 2. cd /usr/local/mysql/bin/ 3. 使用跳过权限方式启动mysql sudo ./mysqld_safe --skip-grant-tables &am ...

  10. iOS: 学习笔记, Swift运算符定义

    Swift操作符可以自行定义, 只需要加上简单的标志符即可. @infix 中置运算. 如+,-,*,/运算 @prefix 前置运算. 如- @postfix 后置运算. a++, a-- @ass ...