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  THIS详解 面向对象
Mar 25 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
用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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
js确定对象类型方法
2012/03/30 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
pygame实现五子棋游戏
2019/10/29 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
金士达面试非笔试
2012/03/14 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
小学教研工作总结2015
2015/05/13 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
GPU服务器的多用户配置方法
2022/07/07 Servers