require.js深入了解 require.js特性介绍


Posted in Javascript onSeptember 04, 2014

现在,Require.js是我最喜欢的Javascript编程方式。它可以使代码化整为零,并易于管理。而Require.js Optimizer能帮助我们将一个较大的应用分散成多个较小的应用,并通过依赖串联起来,最后在编译打包时合并起来。这些原因促使我们使用require.js。

那么,让我们来看看require.js有什么牛逼的特性吧!

与CommonJS兼容

AMD (异步模块定义规范) 出现自CommonJS工作组。CommonJS旨在创造Javascript的生态系统。 CommonJS的一个重要部分是transport/c, 即AMD的前身,而require.js则是该规范的一个实现。

CommonJS模块和AMD模块的语法差异,主要由于AMD需要支持浏览器的异步特性。而CommonJS模块则需要同步进行,例如:

var someModule = require( "someModule" );

var anotherModule = require( "anotherModule" );    

 

exports.asplode = function() {

    someModule.doTehAwesome();

    anotherModule.doMoarAwesome();

};

AMD模块是异步加载模块的,故而模块定义需要一个数组作为第一个参数,而模块加载完毕后回调的函数作为第二个参数传入。
define( [ "someModule"],  function( someModule ) {   

    return {

        asplode: function() {

            someModule.doTehAwesome();

 

            // 这将会异步执行

            require( [ "anotherModule" ], function( anotherModule ) {

                anotherModule.doMoarAwesome();

            });

        }

    };

});

然而,在require.js中AMD亦能兼容CommonJS语法。通过AMD的define函数包装CommonJS模块,你也可以再AMD中拥有一个CommonJS模块,例如:
define(function( require, exports, module )

    var someModule = require( "someModule" );

    var anotherModule = require( "anotherModule" );    

 

    someModule.doTehAwesome();

    anotherModule.doMoarAwesome();

 

    exports.asplode = function() {

        someModule.doTehAwesome();

        anotherModule.doMoarAwesome();

    };

});

实际上,require.js通过函数.toString解释回调函数的模块内容,找到其正确的依赖,将其变成一个通常的AMD模块。需要注意,如果你使用这种方式编写模块,可能会发生与其他AMD加载器不兼容的情况,因为这违背了AMD规范,但它能很好的理解这种格式的写法。

这里发生了什么,require.js实际上做了function.toString的回调函数解析模块的内容,找到正确的依赖,就像它,如果它是一个正常的AMD模块。重要的是要注意,如果您选择这样写模块,他们将最有可能不兼容与其他AMD模块装载机,因为这违背了AMD规范,但它是很好的了解这个格式存在!

CDN回退

另一个隐藏的require.js瑰宝是,其支持当CDN加载不正确时,回退加载本地相应的库。我们可以通过require.config达到这个目的:

requirejs.config({

    paths: {

        jquery: [

            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',

            'lib/jquery'

        ]

    }

});

没有依赖?对象字面量?没问题!

当你写一个没有任何依赖的模块,并且只是返回一个对象包含一些功能函数,那么我们可以使用一种简单的语法:

define({

    forceChoke: function() {

 

    },

    forceLighting: function() {

 

    },

    forceRun: function() {

 

    }    

});

很简单,也很有用,如果该模块仅仅是功能的集合,或者只是一个数据包。

 循环依赖

在一些情况中,我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。

// js/app/moduleA.js

define( [ "require", "app/app"],

    function( require, app ) {

        return {

            foo: function( title ) {

                var app = require( "app/app" );

                return app.something();

            }

        }

    }

);

得到模块的地址

如果你需要得到模块的地址,你可以这么做……

var path = require.toUrl("./style.css");

BaseUrl

通常,在进行的单元测试时,你的源代码可能放在类似src的文件夹里,同时,可能你的测试放在类似tests的文件夹里。这可能比较难让测试配置正确。

比如我们在tests文件夹有一个index.html文件,并需要本地加载tests/spec/*.js。并假设,所有源代码在为src/js/*.js,并有一个main.js在该文件夹。

index.html中,不在加载require.js时设置data-main。

<script src="src/js/vendor/require.js"></script>

<script>

require( [ "../src/js/main.js" ], function() {

    require.config({

        baseUrl: "../src/js/"

    });

 

    require([ 

        "./spec/test.spec.js",

        "./spec/moar.spec.js"

    ], function() {

        // start your test framework

    });

});

</script>

你可以发现main.js被加载。然而由于没有设置data-main,所欲我们需要制定一个baseUrl。而当使用data-main时,baseUrl会根据其设定的文件来自动设置。

在这里,你可以看到main.js被载入。然而,由于它没有加载数据主要脚本标记,那么您必须指定一个base即可。当数据主要是用于baseURL时从主文件中的位置推断。通过自定义baseUrl我们可以很容易将测试代码和应用代码分开存放。

JSONP

我们可以这样处理JSONP终端:

require( [ 

    "http://someapi.com/foo?callback=define"

], function (data) {

    console.log(data);

});

对于非AMD库,使用shim来解决

在很多请款下,我们需要使用非AMD库。例如Backbone和Underscore并未适应AMD规范。而jQuery实际上只是将自己定义成一个名为jQuery全局变量,所以对于jQuery什么都不用做。

幸运的是,我们可以使用shim配置来解决这一问题。

require.config({

    paths: {

        "backbone": "vendor/backbone",

        "underscore": "vendor/underscore"

    },

    shim: {

        "backbone": {

            deps: [ "underscore" ],

            exports: "Backbone"

        },

        "underscore": {

            exports: "_"

        }

    }

});
Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
用console.table()调试javascript
Sep 04 #Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 #Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 #Javascript
jQuery之Deferred对象详解
Sep 04 #Javascript
Javascript Objects详解
Sep 04 #Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 #Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 #Javascript
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
玩转方法:call和apply
2014/05/08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python标准库itertools的使用方法
2020/01/17 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
博士生入学考试推荐信
2013/11/17 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
通信生自我鉴定
2014/01/18 职场文书
小学生家长寄语
2014/04/02 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL