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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
vue文件树组件使用详解
Mar 29 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
vue2.x数组劫持原理的实现
Apr 19 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 explode函数实例代码
2012/02/27 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python调用摄像头显示图像的实例
2018/08/03 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
计算机专业优秀大学生自我总结
2014/01/21 职场文书
我的求职择业计划书
2014/04/04 职场文书
详细介绍python类及类的用法
2021/05/31 Python