require.js的初次使用心得

最新推荐文章于 2024-11-05 21:58:48 发布

最新推荐文章于 2024-11-05 21:58:48 发布 · 215 阅读

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文分享了初次使用JS模块化开发的经验，通过require.js实现了代码的结构化管理，并记录了一些使用心得，例如配置基路径和模块加载等。

初次使用js的模块化开发，将之前在一个页面中的很多function归类整理后，确实看起来更加的结构清晰。其中遇到一些小小的问题，记录一下。
1.引入require.js

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

2.可以在html页面中引入公用js库，也可以在main.js中引入

require.config({
  baseUrl: "js/lib",
  paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
});

3.require(['module1','module2'],function(module1,module2){})里前面模块名称即使只有一个也必须写成数组的形式。将需要外部调用的模块尽量写在前面，别指定外部调用名。
4.define定义模块，如果外部调用该模块里的变量，如：

define(function(){
    var utilFn = {
        'airplaneNameToCode3' : function(name){
            var code3 = "";
            for(var i=0;i<aptJSON.RECORDS.length;i++){
                if(name == aptJSON.RECORDS[i]["AptCname"]){
                    code3 =  aptJSON.RECORDS[i]["AptIATA"];
                }
            }
            return code3;
        },
        'getFormatDate' : function(date,flag){
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            if(month.toString().length === 1){
                month = "0"+month;
            }
            if(flag === 1){
                return year+"/"+month+"/"+day;
            }else if(flag === 2){
                return year+month+day;
            }
        }
    };

    return {
        "utilFn" : utilFn
    };
});

必须要将内部的变量，以 reurn {xxx : xxx}的形式返回。不然外部无法调用到。
返回方法的时候，要返回方法名，（myFn : myFn）。调用时，使用xx.myFn();

贴上阮一峰的require.js的教程[url]http://www.ruanyifeng.com/blog/2012/11/require_js.html[/url]