长久以来都渴望应用javascript的模块化编程。今日紧迫更甚，岁月蹉跎，已经不能再等了。

拜读阮一峰的有关文章已经好几遍，文章写得真好，简洁流畅，头头是道，自觉有点明白了。但经验告诉我们，一定要亲手试一试。

一试之下，果然走了一些弯路，加深了理解。

一、下载require.js

http://requirejs.org/docs/download.html

二、编写相应测试代码。计有：

页面：/index.html

主体结构定义JS：/main.js

符合AMD规范的模块化JS：

  1. /js/amd/module-A.js
  2. /js/amd/module-B.js

传统意义上的，不符合AMD规范、非模块化的JS

  1. /js/noamd/file-C.js

代码如下：

  1. //module-A.js
  2. //define方法，应该是在require.js定义的。这也是AMD规范的内容之一
  3. define(function (){
  4.     var add = function (x,y){
  5.         return x + y;
  6.     };
  7.     return {
  8.         add: add
  9.     };
  10. });
  1. //module-B.js
  2. //依赖于moduleA
  3. define(['moduleA'], function(ma){
  4.     function compute(x,y){
  5.         return ma.add(x,y);
  6.     }
  7.     return {
  8.         compute : compute
  9.     };
  10. });
  1. //这是一个传统意义上，非AMD规范的JS；但是，还是要符合一定的规范：需要返回一个对象，以便在main.js里进行exports，然后外部才能进行使用（使用这个对象里面的方法）。
  2. var objectC = (function(){
  3.     function multiply(x,y){
  4.         return x * y;
  5.     }
  6.     return {
  7.         multiply:multiply
  8.     }
  9. })();

至关重要的main.js

  1. //main.js
  2. //重点在于如何映射非规范模块
  3. require.config({
  4.     baseUrl: "js",
  5.     shim: {
  6.         'moduleC': {
  7.             deps: [],
  8.             exports: 'objectC'//这个名字，跟file-C.js里的"var objectC=..." 对应
  9.         }
  10.     },
  11.     paths: {
  12.         "moduleA": "amd/module-A",
  13.         "moduleB": "amd/module-B",
  14.         "moduleC": "noamd/file-C"//非规范化文件这一步也是要的，并非单单在shim里定义了就行
  15.     }
  16. });

瞪灯瞪等！且看如何应用：

index.html

  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <script src="require.js"></script>
  6.     <script src="main.js"></script>
  7. </head>
  8. <body>
  9.     <script type="text/javascript">
  10.         require(['moduleB','moduleC'], function (moduleB,moduleC){
  11.             alert(moduleB.compute(3,4));//7
  12.             alert(moduleC.multiply(3,4));//12
  13. 　　  });
  14.     </script>
  15. </body>
  16. </html>

参考文章：

Javascript模块化编程（三）：require.js的用法

基于gulp requirejs rjs的前端自动化构建系列文章(二)

应用require.js进行javascript模块化编程小试一例的更多相关文章

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

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

  2. Javascript模块化编程（三）：require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  3. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  4. 坑人的 Javascript 模块化编程 require.js

    坑人的 Javascript 模块化编程 require.js

  5. Javascript模块化编程require.js的用法

    JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...

  6. (转)Javascript模块化编程（三）：Require.js的用法

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

  7. Javascript模块化编程－require.js

    转自:https://www.cnblogs.com/digdeep/p/4607131.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成"互联网应用程序&quo ...

  8. 坑人的 Javascript 模块化编程 sea.js

    坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...

  9. Javascript模块化编程（二）：AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

随机推荐

  1. Python3常用模块的安装

    1.mysql驱动:mysql-connector-python 1.安装 $ pip3 install mysql-connector-python --allow-external mysql-c ...

  2. JavaWeb基础（HTML）

    代码改变世界 HTML HTML是指超本标记语言,它不是编程语言,而是一种标记语言.标记语言是一套标记标签,HTML使用标记标签来描述网页,用以定义如何在页面上展示信息. 1.HTML标签 HTML标 ...

  3. BZOJ 1974 [Sdoi2010]auction 代码拍卖会 ——动态规划

    把每一位上不递减的数拆成1+11+11111+11111+..... 然后就可以把巨大的N从复杂度中消掉,因为随着长度的增加1...111%p出现了循环节. 然后就是从n个数中选出几个使他们结果为0( ...

  4. 623. Add One Row to Tree

    Problem statement Given the root of a binary tree, then value v and depth d, you need to add a row o ...

  5. 学习shell脚本之乘法口诀

    脚本如下: #!/bin/bash for i in 'seq 1 9' do for j in 'seq 1 $i' do k=$[$i*$j] echo -ne "$j"&qu ...

  6. angular实时显示checkbox被选中的元素

    /** * Created by zh on 20/05/15. */ // Code goes here var iApp = angular.module("App", []) ...

  7. 10款GitHub上最火爆的国产开源项目

    衡量一个开源产品好不好,看看产品在 GitHub 的 Star 数量就知道了.由此可见,GitHub 已经沦落为开源产品的“大众点评”了.一个开源产品希望快速的被开发者知道.快速的获取反馈,放到 Gi ...

  8. mac 获得进程信息的方法

    NSProcessInfo可以获得当前进程的信息.获得所有活动进程信息可以尝试使用下面的方法. 进程的信息可以通过ps命令得到也可以通过sysctl方法得到. 但是我总是不能获取进程的流量信息,关于这 ...

  9. 记住密码后，密码框Password会自动带出数据

    一般登陆之后浏览器会询问是否记住密码,如果把密码记住在浏览器上,下次登陆的时候浏览器会把用户名和密码自动填充到登录页面.前段时间服务站平台的员工账号模块提测后,测试提出360浏览器记住密码后会自用把登 ...

  10. 【Java TCP/IP Socket】构建和解析自定义协议消息（含代码）

    在传输消息时,用Java内置的方法和工具确实很用,如:对象序列化,RMI远程调用等.但有时候,针对要传输的特定类型的数据,实现自己的方法可能更简单.容易或有效.下面给出一个实现了自定义构建和解析协议消 ...