require.js初识

浏览数：54 / 时间：2015年06月09日

来自http://www.tuicool.com/articles/v6b6R3 的学习笔记

　　下载require.js和jquery.js的文件，放入文件夹。在文件夹中再见main.js和index.html的文件

　　方式一

　　index.html内容如下

<!doctype html>
<html>
    <head>
        <title>requirejs入门（一）</title>
        <meta charset="utf-8">
        <script data-main="main.js" src="require.js"></script>
     </head>
     <body>
        
     </body>
</html>

　　其中data-main是主入口js的文件，src是加载的js文件

　　main.js的内容如下

require.config({
    paths:{
        jquery: ‘jquery‘
    }
});

require([‘jquery‘],function($){
    alert($().jquery);
})

　　这里的main设置了require的路径paths，还有require了一个jquery.js文件，在这上面做了alert的动作

　　浏览器查看index.html的文件，会alert出一个jquery的版本号，再看网络那里，加载出来了index.html,main.js,require.js,jquery.js四个文件

　　方式二

　　其实也不一定要设data-main的路径，可以直接在index.html里面配置路径和require文件

　　index.html

<!doctype html>
<html>
    <head>
        <title>requirejs入门（一）</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="require.js"></script>
     </head>
     <body>
        <script type="text/javascript">
            require.config(function(){
                paths:{
                    main:‘main‘
                }
            });

            require([‘main‘],function( fn ){
                fn.init();
            });
        </script>
     </body>
</html>

　　这里我们把paths设置为main，然后就可以require main这个js模块了。

　　从这也可以看出，一个require。js只有一个paths路径，一次require，剩下的要加载的模块可以在main那个js模块里面加载

　　main.js

    define( function( require ){
        var exports = {};
        var jquery = require(‘jquery‘);
        function init(){
             alert(jquery().jquery);
        }

        exports.init = init;
        return exports;
    });

　　模块文件中要以define(function(){});才能被引用

　　这里var了一个exports的对象，然后让整个function返回expotrs，在index.html里的fn.init其实就是这里的exports.init了。

　　其实，fn就是define里面这个匿名函数！

　　如果我们还有别的模块要增加，可以都从main里面require，想require jquery那样做就好了。

require.js初识,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

require.js初识