深入浅出requireJS-1

  我们都知道,虽然我们可以通过原型和继承来使javascript面向对象。但是,当js代码和逻辑过多时,代码的维护和扩展会变的很不方便。这时,nodejs做的非常好,但是在浏览器端模块化的js编程一直都是个难题。而requireJS就是来帮助我们解决这个问题的。requireJS遵循amd规范,所以让我们先了解下关于AMD规范的事情。

一、AMD规范

  AMD规范是浏览器端的模块规范,它的全称为异步模块定义。从名称上看便知它是适合script tag的。也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点,但又不照搬它的格式。开始AMD作为CommonJS的transport format 存在,因无法与CommonJS开发者达成一致而独立出来。它有自己的wiki 和讨论组 。

AMD设计出一个简洁的写模块API:

define(id?, dependencies?, factory);

其中:

  • id: 模块标识,可以省略。
  • dependencies: 所依赖的模块,可以省略。
  • factory: 模块的实现,或者一个JavaScript对象。
id遵循CommonJS Module Identifiers 。dependencies元素的顺序和factory参数一一对应。
以下是使用AMD模式开发的简单三层结构(基础库/UI层/应用层):
base.js
define(function() {return {mix: function(source, target) {}};
});

  

ui.js

define(['base'], function(base) {return {show: function() {// todo with module base}}
});

 

page.js

define(['base'], function(base) {
    return {
        show: function() {
            // todo with module base
        }
    }
});

 

data.js

define({
    users: [],
    members: []
});

 

以上同时演示了define的三种用法
  1. 定义无依赖的模块(base.js)
  2. 定义有依赖的模块(ui.js,page.js)
  3. 定义数据对象模块(data.js)
细心的会发现,还有一种没有出现,即具名模块
4,具名模块
define('index', ['data','base'], function(data, base) {
    // todo
});

 

具名模块多数时候是不推荐的,一般由打包工具合并多个模块到一个js文件中时使用。
前面提到dependencies元素的顺序和factory一一对应,其实不太严谨。AMD开始为摆脱CommonJS的束缚,开创性的提出了自己的模块风格。但后来又做了妥协,兼容了 CommonJS Modules/Wrappings 。即又可以这样写
5,包装模块
define(function(require, exports, module) {
    var base = require('base');
    exports.show = function() {
        // todo with module base
    }
});

 

不考虑多了一层函数外,格式和Node.js是一样的:使用require获取依赖模块,使用exports导出API。
除了define外,AMD还保留一个关键字require。require 作为规范保留的全局标识符,可以实现为 module loader,也可以不实现。
目前,实现AMD的库有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules 等。
也有很多库支持AMD规范,即将自己作为一个模块存在,如MooTools 、jQuery 、qwery 、bonzo  甚至还有 firebug 。
二、CMD规范
与AMD规范类似的还有CMD规范,
在CMD中,一个模块就是一个文件,格式为:
define( factory );
全局函数define,用来定义模块。
参数 factory  可以是一个函数,也可以为对象或者字符串。
当 factory 为对象、字符串时,表示模块的接口就是该对象、字符串。
定义JSON数据模块:
  1. define({ "foo": "bar" });
通过字符串定义模板模块:

  1. define('this is {{data}}.');
factory 为函数的时候,表示模块的构造方法,执行构造方法便可以得到模块向外提供的接口。

  1. define( function(require, exports, module) { 
  2.     // 模块代码
  3. });


define( id?, deps?, factory );
define也可以接受两个以上的参数,字符串id为模块标识,数组deps为模块依赖:

  1. define( 'module', ['module1', 'module2'], function( require, exports, module ){
  2.     // 模块代码
  3. } );
其与 AMD 规范用法不同。
require 是 factory 的第一个参数。
require( id );
接受模块标识作为唯一的参数,用来获取其他模块提供的接口:

  1. define(function( require, exports ){
  2.     var a = require('./a');
  3.     a.doSomething();
  4. });
require.async( id, callback? );
require是同步往下执行的,需要的异步加载模块可以使用 require.async 来进行加载:

  1. define( function(require, exports, module) { 
  2.     require.async('.a', function(a){
  3.         a.doSomething();
  4.     });
  5. });
require.resolve( id )
可以使用模块内部的路径机制来返回模块路径,不会加载模块。
exports 是 factory 的第二个参数,用来向外提供模块接口。

  1. define(function( require, exports ){
  2.     exports.foo = 'bar'; // 向外提供的属性
  3.     exports.do = function(){}; // 向外提供的方法
  4. });
当然也可以使用 return 直接向外提供接口。

  1. define(function( require, exports ){
  2.     return{
  3.         foo : 'bar', // 向外提供的属性
  4.         do : function(){} // 向外提供的方法
  5.     }
  6. });
也可以简化为直接对象字面量的形式:

  1. define({
  2.     foo : 'bar', // 向外提供的属性
  3.     do : function(){} // 向外提供的方法
  4. });


与nodeJS中一样需要注意的是,一下方式是错误的:

  1. define(function( require, exports ){
  2.     exports = {
  3.         foo : 'bar', // 向外提供的属性
  4.         do : function(){} // 向外提供的方法
  5.     }
  6. });


需要这么做

  1. define(function( require, exports, module ){
  2.     module.exports = {
  3.         foo : 'bar', // 向外提供的属性
  4.         do : function(){} // 向外提供的方法
  5.     }
  6. });
传入的对象引用可以添加属性,一旦赋值一个新的对象,那么值钱传递进来的对象引用就会失效了。开始之初,exports 是作为 module.exports 的一个引用存在,一切行为只有在这个引用上 factory 才得以正常运行,赋值新的对象后就会断开引用,exports就只是一个新的对象引用,对于factory来说毫无意义,就会出错。
    module 是factory的第三个参数,为一个对象,上面存储了一些与当前模块相关联的属性与方法。
module.id 为模块的唯一标识。
module.uri 根据模块系统的路径解析规则得到模块的绝对路径。
module.dependencies 表示模块的依赖。
module.exports 当前模块对外提供的接口。

 

转载于:https://www.cnblogs.com/dunken/p/4524093.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

科创板:中国科技产业新引擎

来源:国信研究作者:杨均明,国信证券经济研究所所长万众期待的上海证券交易所科创板即将推出,科创板股票发行审核规则第三条要求,发行人申请股票首次发行上市,应当符合科创板定位,面向世界科技前…

粒子群优化算法(Particle Swarm Optimization)的 Matlab(R2018b)代码实现

这里以 2D Michalewicz function 为对象来演示粒子群算法。 1、Michalewicz function 2、代码详解 2.1 画Michalewicz函数的网格图形 f(x,y)(-sin(x).*(sin(x.^2/3.1415926)).^(2*m)...-sin(y).*(sin(2*y.^2/3.1415926)).^(2*m));range[0 4 0 4]; Ngrid100; dx(range(2)-ran…

javascript excel

js做的 excel , http://handsontable.com/ js keyCode对照表 http://dwz.cn/Lknbz转载于:https://www.cnblogs.com/qq-757617012/p/4524448.html

中金人工智能报告:AI时代,10 年之后我们还能干什么?|71页完整报告

来源:黑科技智汇中金公司(CICC)发布了一份长达 71 页的人工智能的证券研究报告《人工智能时代,10 年之后我们还能干什么?》。对全球特别是中国企业当下的人工智能态势作了全面的介绍:包括 BAT、华为、科大讯…

从‘一边拉琴,一边哭’,看什么是真正的兴趣

记得填报志愿时,自己不知道对啥感兴趣(现在依然不知道)。那时特别简单,自己喜欢折腾家里的旧电器,就自以为对电子专业非常感兴趣。被模电数电(电子方向的专业必修课)折腾一番后,自己…

Python语言学习笔记

获得人生中的成功需要的专注与坚持不懈多过天才与机会。 ——C.W. Wendte Python将很快成为你最喜欢的编程语言! Qt库? PyQt Perl-Qt 简单易学,功能强大,高效率的高层数据结构,简单而有效地实现面向对象编程。 Pyth…

UC伯克利新机器人成果:灵活自由地使用工具

来源:AI 科技评论摘要:前几天我们刚刚介绍了加州大学伯克利分校 Pieter Abbeel 教授领导伯克利机器人学习实验室(UC Berkeleys Robot Learning Lab)开发的会叠衣服的家务向机器人 BLUE,今天伯克利人工智能实验室&#…

bzoj 1934 最小割

收获&#xff1a; 1、流量为0的边可以不加入。 2、最小割方案要与决策方案对应。 1 #include <cstdio>2 #include <cmath>3 #include <cstring>4 #include <vector>5 #define min(a,b) ((a)<(b)?(a):(b))6 #define oo 0x3f3f3f3f7 #define N 6108 …

如何让学习变得像游戏一样好玩

如何让学习变得好玩&#xff1f;面对枯燥乏味的重复练习&#xff0c;大多数人因新奇感的消退而放弃&#xff0c;很少有人能够多坚持一会&#xff0c;更别说坚持十年了。 如何减轻这种枯燥乏味&#xff0c;让学习变得好玩&#xff1f; 许多孩子喜欢打游戏&#xff0c;玩得废寝…

【翻译】Ext JS 5:为不同设备设置不同的主题

原文&#xff1a;Sencha Ext JS 5: Supporting Different Themes for Different Devices 步骤1创建一个应用程序步骤2定义主题步骤3编辑Appjson文件以便支持多平台生成步骤4编辑output定义以便创建多个应用程序的manifests步骤5更新应用程序步骤6替换Appjson中的CSS配置步骤7替…

工业4.0:数字化供应链的三个方向

来源&#xff1a;资本实验室席卷全球的工业4.0革命几乎影响着每一个行业&#xff0c;包括各行业的供应链管理。在过去&#xff0c;供应链管理是令各行业都非常头疼的环节&#xff0c;因为传统供应链涉及大量模糊且无法访问的数据&#xff0c;就像”黑洞“一样吞噬着成本、时间与…

有效学习

怎样算有效学习&#xff1f; 记得有位大咖说过&#xff0c;‘当你把受过的教育都忘记了&#xff0c;剩下的就是教育’&#xff08;度娘说是爱因斯坦说的&#xff0c;此处未经考证&#xff09;。 学习可以看成是一个把知识放入潜意识的过程。所谓进入潜意识&#xff0c;是指当…

如果机器能帮我们学习,那么有多少东西能够被遗忘?

来源&#xff1a;原理在我还是个学生时的遥远年代&#xff0c;大多数计算机都还是体型巨大的机器。当时我有一个朋友&#xff0c;他的博士导师坚持让他对一个冗长又困难的原子理论进行手写计算。他用掉了一页又一页的草稿纸&#xff0c;上面充满了错误。于是最终他屈服于自己的…

如何通俗理解计算机视觉、计算机图形、图像处理之间的区别与联系

这三者之间联系和区别可以通过下图表示&#xff0c; 左边的图片表示实际景物&#xff0c;右边图片表示实际景物对应的图片。 1、计算机图形 计算机图形技术常用于计算机生成图形。该技术常用的领域有&#xff1a; a.动漫 b.游戏 c.计算机辅助设计&#xff08;CAD&#xff09;…

Android(java)学习笔记27:TextView属性大全

TextView属性大全&#xff1a; android:autoLink 设置是否当文本为URL链接/email/电话号码/map时&#xff0c;文本显示为可点击的链接。可选值(none/web/email/phone/map/all) android:autoText 如果设置&#xff0c;将自动执行输入值的拼写纠正。此处无效果&#xff…

日本电信企业5G部署计划 限制了华为中兴设备的使用

来源&#xff1a;OFweek电子工程据外媒报道&#xff0c;日本监管机构日前正式向日本电信企业分配5G频谱&#xff0c;而这也正是日本在来年春季推出高速无线服务(5G)的一个重要里程碑。日本三大运营商NTT Docomo、KDDI和软银&#xff0c;以及新进入者Rakuten Inc&#xff0c;都获…

Python安装工具包踩过的坑

1、背景介绍 重装win10系统&#xff0c;重装Python。在坑出现之前&#xff0c;已经完成了Python的安装&#xff08;D盘&#xff09;&#xff0c;并且在系统中添加了环境变量。由于平时需要用到Python2.7和Python3.6&#xff0c;这里将对应的解释器分别改名为Python2和Python3。…

C#实验——Problem Statement

Revision History Date Issue Description Author 17/May/2015 Windows Phone8.1 APP Have some ideas, then developing Windows Phone app 魏 潇 18/May/2015 Windows8.1 APP Transform the phone app to the Windows Store 8.1 platform 19…

物联网面临的7大网络安全威胁

来源&#xff1a;51CTO译稿摘要&#xff1a;曾经在物联网世界&#xff0c;一切都变得更加庞大。不仅是设备本身——有些小到只容纳几个芯片&#xff0c;他们通常隐藏其中&#xff0c;眼不见心不烦。但物联网中庞大的数据和设备规模令任何网络安全专业人士都感到头疼。据广泛统计…

从技术分工的角度来看996.ICU

最近&#xff0c;Github上996.ICU话题自诞生以来异常火爆&#xff0c; 很多人在网上吐槽程序员工作时间长&#xff0c;Python之父也为此伸张正义。 有人在网上抱怨资本家黑心&#xff0c;无情的压榨剥削员工。 各国都存在加班的现象&#xff0c;但似乎加班现象在中国最为严重。…