在YII中使用RequireJS

RequireJS 是一个非常小巧的 JavaScript 模块载入框架，是 AMD 规范最好的实现者之一。而YII则是目前最热门的PHP MVC框架了，下面主要分享如何在YII中使用RequireJS

使用registerScriptFile 引入RequireJS
在action代码里通过registerScriptFile加载所有的JS代码，代码如下：

//deploy js directory of require modules and return a reference to location$js = Yii::app()->assetManager->publish(  Yii::getPathOfAlias('application.components.js.requireModules'));//加载其它代码Yii::app()->clientScript->registerScript( 'requiredScript', 'require.config({baseUrl: "' . $js . '",waitSeconds: 15});require( ["module1","module2"], function() {    //start doing things once modules have loaded });', CClientScript::POS_END );

以上的代码还可以进一步优化，那就是将配置代码放到一下公共的JS文件里，然后载入该公共文件，这种方法不好的地方是似乎没有办法使用RequireJS 的data-main属性。

在模板文件里载入RequireJS
YII中的Views模板文件其实就是一个HTML文件，所以我们就可以像在普通HTML文件里一样使用RequireJS。

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

如果要在RequireJS里引入非AMD的模块，如underscore, jQuery 插件等，则需要用到RequireJS的shim配置，而通过Shim进行配置的模块在所有的调用之前进行配置，所以我们通过将RequireJS的配置代码放在main.js中。但是通常每个页面都有自己的代码要执行，所以我们在data-main边上加个非标准的属性data-start，它的值就是当前页面里需要执行的模块。

<script data-main="scripts/main"data-start="scripts/page1,scripts/common" src="scripts/require.js"></script>

然后我们在main.js里遍历该属性，取得模块列表，分别用require方法载入进来。例如我们项目里的每个模块都有个init方法，所以我们就遍历调用所有模块的init方法。

这里再强调一下：data-start是我们自定义的属性，用来表示该页面需要初始化的模块，你可以使用任何名称。它的值是一个字符串，多个模块使用逗号隔开，然后在代码中把它解析成一个数组。

  // load module for each page  var startModules = $("script[data-main][data-start]").attr("data-start").split(',');  _.each(startModules, function (module) {    require([module], function(moduleObj) {      if (moduleObj && moduleObj.init) {        moduleObj.init();      }    });      });

下面是完整的main.js里代码示例：

  requirejs.config({    "baseUrl": "js/lib",    "paths": {      "app": "../app"    },    "shim": {        "html' target='_blank'>jquery.alpha": ["jquery"],        "jquery.beta": ["jquery"]    }});// load module for each pagevar startModules = $("script[data-main][data-start]").attr("data-start").split(',');_.each(startModules, function (module) {  require([module], function(moduleObj) {    if (moduleObj && moduleObj.init) {      moduleObj.init();    }  });  });

其实以上的用法不限于YII，几乎可以在任何项目中使用。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。