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下过滤数组重复值的代码
Sep 10 Javascript
一些mootools的学习资源
Feb 07 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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
PHP 工厂模式使用方法
2010/05/18 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
导师工作推荐信范文
2014/05/17 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
转正申请报告格式
2015/05/15 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL