一直在搞移动开发,很久没写过有关javaScript的文章了,最近公司开发了分布式web框架,用到了requirejs,之前用过,借此复习一下,特别是依赖问题。
requirejs具有以下是异步加载,当然已经加载的不会再次加载,这是非常好的一种优化。当然,我们这里来看看shim的作用。
导出非AMD模块化函数(模块化)
app.js
function sayHello(name) { alert('Hi '+name); }
requirejs.config({ baseUrl: '/public/js', paths: { hello: 'hello' }, shim: { hello: { exports: 'sayHello' } //因为是一个函数,使用export即可 } }); requirejs(['hello'], function(hello) { //function参数接收导出的函数名,实际是sayHello函数 hello(); });
导出一个函数,意味着什么?意味着我们得到了一个javaScript类,所以已经满足了绝大多数需求。
但是有一个问题,在app.js中写了很多function,整合成一个function有点费劲,想直接导出如何做?
办法如下:
app.js
function sayHi(name) { alert('Hi '+name); } function sayHello(name) { alert('Hiello '+name); }
requirejs.config({ baseUrl: '/public/js', paths: { hello: 'hello' }, shim: { hello: { init: function() { //这里使用init将2个 return { sayHi: sayHi, sayHello: sayHello } } } } }); requirejs(['hello'], function(hello) { hello.sayHi('zhangsan'); hello.sayHello('lisi'); });
当然,我们也可以导出jQuery
requirejs.config({ baseUrl: '/public/js', paths: { myjquery: 'lib/jquery/jquery'//在jQuery中支持了AMD,所以,这里的名称不能是jquery: }, shim: { myjquery: { exports: 'jQuery' } } }); requirejs(['myjquery'], function(jq) { alert(jq); });
解决jQuery操作符$冲突问题
requirejs.config({ baseUrl: '/public/js', paths: { myjquery: 'lib/jquery/jquery' //使用 }, shim: { myjquery: { init: function() { return jQuery.noConflict(true); } } } } }); requirejs(['myjquery'], function(jq) { alert($); });
2.有序导入
requirejs.config({ shim: { 'jquery.ui.core': ['jquery'], //表示在jquery导入之后导入 'jquery.ui.widget': ['jquery'], 'jquery.ui.mouse': ['jquery'], 'jquery.ui.slider':['jquery'] }, paths : { jquery : 'jquery-2.1.1/jquery', domReady : 'require-2.1.11/domReady', 'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core', 'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget', 'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse', 'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' } }); requirejs(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'], function($) { $("#slider" ).slider({ value:0, min: 0, max: 4, step: 1, slide: function( event, ui ) {} }); });
想到这里,有问题以后再补充。