requirejs学习之-- 初始化（一）

为了规范在项目中使用的javascript代码，我们使用了requirejs框架。

初始阶段，我们在按钮的点击事件中调用创建的模块，代码如下：

function button_click() {
    _this = this;
    var args = _this["Command_Params"] || (_this.config || {})["Command_Params"];
    var cmd = _this["Command"];
    if (cmd) {
         cmd.onclick?cmd.onclick(args):"";
    } else {
        var url = _this["Command_Url"] || (_this.config || {})["Command_Url"];
        if (!url) return;
        require([url], function(Class) {
            var cmd = new Class(_this, args);
            cmd.onclick(args);
            _this["Command"] = _this["Command_Singled"] || (_this.config || {})["Command_Singled"] == false ? null : cmd;
        });
    }
}

在这里我们在按钮的属性中添加了Command_Url来标识模块地址，监听了按钮的点击事件，在点击的时候引用按钮中配置的模块并执行onclick方法。不得不说这是一种很简便的使用模块的方式，但是不是严格的AMD模式。

后来在使用的过程中突然想在页面初始化的时候引用一个模块，直接使用require方法就出现了问题：

    require(["./plug-in/jtgcmobile/dd/user.js"],function(Class){
        var user =new Class();
        user.showSomeThing();
        user.login();
    })

require.js:166 Uncaught Error: Mismatched anonymous define() module: function (){return o}

纠结了好长时间，发现这个方法在控制台可以直接运行，排除模块定义错误、加载代码错误。那就剩下一个问题，requirejs的加载模式问题导致在页面加载的过程中无法执行require方法。

又去看了一下官方的文档，文档上虽然没有明说不可以这样使用，但是提供了一个方法在页面初始化的时候加载模块。代码如下：

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

也就是说在加载requirejs的时候就要指定初始加载模块。

按照这种方式加载后一切正常了。

所以  data-main 属性还是比较重要的。