requireJs学习使用(一)

一直听说seaJs 和 requireJs 如何如何好的，现在正好手里项目第一版已经做完，学习下模块化js。

HTML代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>require - demo</title>
 6 <script type="text/javascript" src="js/require.js" data-main = "js/main"></script>
 7 </head>
 8 <body>
 9 
10 </body>
11 </html>

引入require.js后,设置 data-main 的值为初始执行的模块(模块既js文件);

main.js

/*入口脚本*/
require.config({
    paths: {    // -- 配置别名
        "jquery":"jquery.min",
        "init": "init"
    }
});

// 开始逻辑.
require(['jquery','init'], function($,exports) {
    console.dir(exports.callback());// 加载完成回调
});

首先配置require的属性

require 接收2个参数(模块数组,回调);

我们首先加载jquery和初始文件

回调函数内的参数对应模块return的内容;

init.js

define(function() {
    return {
          "callback":function(){
              var w = $(window);
              return {
                  "wWidth":w.width(),
                  "wHeight": w.height()
              }
              
              
          }
    }
});

这样等待init.js文件被加载后就可以输出window的宽和高了

posted on 2015-10-30 13:51 淡淡的真阅读(81) 评论(0) 收藏举报