源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-11-01 14:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:require.js深入了解 require.js特性介绍
现在,Require.js是我最喜欢的Javascript编程方式。它可以使代码化整为零,并易于管理。而Require.js Optimizer能帮助我们将一个较大的应用分散成多个较小的应用,并通过依赖串联起来,最后在编译打包时合并起来。这些原因促使我们使用require.js。 那么,让我们来看看require.js有什么牛逼的特性吧! [b]与CommonJS兼容[/b] AMD (异步模块定义规范) 出现自CommonJS工作组。CommonJS旨在创造Javascript的生态系统。 CommonJS的一个重要部分是transport/c, 即AMD的前身,而require.js则是该规范的一个实现。 CommonJS模块和AMD模块的语法差异,主要由于AMD需要支持浏览器的异步特性。而CommonJS模块则需要同步进行,例如:
[u]复制代码[/u] 代码如下:
var someModule = require( "someModule" ); var anotherModule = require( "anotherModule" );      exports.asplode = function() {     someModule.doTehAwesome();     anotherModule.doMoarAwesome(); };
AMD模块是异步加载模块的,故而模块定义需要一个数组作为第一个参数,而模块加载完毕后回调的函数作为第二个参数传入。
[u]复制代码[/u] 代码如下:
define( [ "someModule"],  function( someModule ) {       return {         asplode: function() {             someModule.doTehAwesome();               // 这将会异步执行             require( [ "anotherModule" ], function( anotherModule ) {                 anotherModule.doMoarAwesome();             });         }     }; });
然而,在require.js中AMD亦能兼容CommonJS语法。通过AMD的define函数包装CommonJS模块,你也可以再AMD中拥有一个CommonJS模块,例如:
[u]复制代码[/u] 代码如下:
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规范,但它是很好的了解这个格式存在! [b]CDN回退[/b] 另一个隐藏的require.js瑰宝是,其支持当CDN加载不正确时,回退加载本地相应的库。我们可以通过require.config达到这个目的:
[u]复制代码[/u] 代码如下:
requirejs.config({     paths: {         jquery: [             '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',             'lib/jquery'         ]     } });
没有依赖?对象字面量?没问题! 当你写一个没有任何依赖的模块,并且只是返回一个对象包含一些功能函数,那么我们可以使用一种简单的语法:
[u]复制代码[/u] 代码如下:
define({     forceChoke: function() {       },     forceLighting: function() {       },     forceRun: function() {       }    });
很简单,也很有用,如果该模块仅仅是功能的集合,或者只是一个数据包。 [b] 循环依赖[/b] 在一些情况中,我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。
[u]复制代码[/u] 代码如下:
// js/app/moduleA.js define( [ "require", "app/app"],     function( require, app ) {         return {             foo: function( title ) {                 var app = require( "app/app" );                 return app.something();             }         }     } );
得到模块的地址 如果你需要得到模块的地址,你可以这么做……
[u]复制代码[/u] 代码如下:
var path = require.toUrl("./style.css");
[b]BaseUrl[/b] 通常,在进行的单元测试时,你的源代码可能放在类似src的文件夹里,同时,可能你的测试放在类似tests的文件夹里。这可能比较难让测试配置正确。 比如我们在tests文件夹有一个index.html文件,并需要本地加载tests/spec/*.js。并假设,所有源代码在为src/js/*.js,并有一个main.js在该文件夹。 index.html中,不在加载require.js时设置data-main。
[u]复制代码[/u] 代码如下:
<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我们可以很容易将测试代码和应用代码分开存放。 [b]JSONP[/b] 我们可以这样处理JSONP终端:
[u]复制代码[/u] 代码如下:
require( [     "http://someapi.com/foo?callback=define" ], function (data) {     console.log(data); });
对于非AMD库,使用shim来解决 在很多请款下,我们需要使用非AMD库。例如Backbone和Underscore并未适应AMD规范。而jQuery实际上只是将自己定义成一个名为jQuery全局变量,所以对于jQuery什么都不用做。 幸运的是,我们可以使用shim配置来解决这一问题。
[u]复制代码[/u] 代码如下:
require.config({     paths: {         "backbone": "vendor/backbone",         "underscore": "vendor/underscore"     },     shim: {         "backbone": {             deps: [ "underscore" ],             exports: "Backbone"         },         "underscore": {             exports: "_"         }     } });
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部