您的位置：首页 > 产品设计 > UI/UE

requireJS简单的学习门户网站

2015-08-20 12:28 441 查看

总结

requireJS。这翻译成中国"必须js"。说白了就是装js文件与。如何装好了？。这是继AMD标准化的模块化装。除了AMD另一种规范称为CMD规范。跟随CMD兼容模块加载。的淘宝首席架构师”玉伯“写的SeaJS了，并且这货听说还能载入css文件。似乎非常niubility! 可是今天讲的是requireJS,至于二者的优缺点请參考：http://www.zhihu.com/question/20342350,后来发现最火的答案竟然是seaJS的作者写的，看来作者还是非常在乎别人对SeaJS的评价。

ok,回到原题，有人会问为什么要使用基于模块的形式载入js文件呢？我的答案是不一定要用这样的形式，使用这样的形式是因人而异，因项目而异的，假设做大型站点的话，使用模块的形式会比較规范。维护也比較easy，架构也比較清晰。反正多学点东西没坏处。并且如今非常多的js前端框架也開始支持兼容模块化的载入方式了，比方大名鼎鼎的，作为一个PE无人不知的Jquery,还有Node,Dojo,等。

以下来看看jquery-ui的一个button组件的一小段代码，就知道怎么回事了。

<pre name="code" class="html">(function( factory ) {
if ( typeof define === "function" && define.amd ) {

// AMD. Register as an anonymous module.
define([
"jquery",
"./core",
"./widget"
], factory );
} else {

// Browser globals
factory( jQuery );
}
}(function( $ ) {
//your plugin code
//你的插件or模块代码
});



这是一种兼容的方法。假设你使用了AMD载入器（如requireJS）的话。define的类型就是function,然后就会依照AMD的规范来定义此插件（模块），关于怎样按AMD规范来定义插件。请參考：http://requirejs.org/docs/api.html#define。假设你没有使用载入器的话则依照一般的方法定义，这种话就能够依照普通的方法正常使用了。

如今我们应该知道。requireJS仅仅能正确载入依照AMD规范定义的插件，通过仅仅要对普通的插件进行简单的改动就可以。只是如今越来越多的插件開始兼容AMD规范了。

好了，如今来看看怎样使用requireJS来载入插件吧。

一个小样例
那就用jquery-UI做样例吧，首先建立一个例如以下结构的project文件夹：

├── index.html
├── js
│   ├── app.js
│   ├── jquery-ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   └── ...
│   ├── jquery.js
│   └── require.js
我们能够看到，全部js文件都放在了js文件夹中，jquery.js和require.js直接位于js文件夹中。而且全部的jquery UI的文件都位于jquery-ui文件夹中。app.js则包括我们的主要代码。

只是你也能够使用其它的文件夹结构，只是可能须要进行一些配置改动。这样requireJS才知道怎样找到这些依赖的文件，能够參考change
some configuration

如今这些文件都准备好了，怎样使用它们呢？请看index.html中的代码：

<!doctype html>
<html lang="en">
<head>
...
</head>
<body>

<script src="js/require.js" data-main="js/app"></script>

</body>
</html>


我们仅仅须要载入require.js文件就可以，注意这里仅仅能载入这个一个文件。否则会报错的，具体请參考：http://requirejs.org/docs/errors.html#mismatch。这里还须要注意data-main属性，这里是js/app.js。这里的意思是等reuire.js载入完后会自己主动运行app.js中的代码。不信的话，能够在app.js中加一条console.log();測试一下。

/* app.js */
console.log( "loaded" );


以下就可能够app.js使用require()这个函数来载入你想要的js文件了，如：

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
...
});
这样就会异步载入jquery-ui/autocomplete.js和它所依赖的js文件（jquery.js,jquery-ui/core.js,jquery-ui/wedget.js等）。

当这些依赖的文件所有载入完毕后，就会运行后面的回调函数。

以下是使用jquery-UI中的一个样例：

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" )
.element
.appendTo( "body" );
});
你也能够吧jquery载入进来，这样就能够像使用jquery那样使用了：

require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {
$( "<input>" )
.autocomplete({ source: [ "One", "Two", "Three" ]})
.appendTo( "body" );
});


ok,最终把这个样例介绍完了。虽然非常粗糙，可是有个印象即可了。毕竟是入门。假设进一步的研究需要能够reqiureJS官方网站查看很多其他的细节和原则。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航