现在我介绍的就是如何自己添加需要的配置,如本篇将介绍的是如何方便地将第三方类库整合到此框架中使用,最终目的是只需在config里添加一个新的类库名称就可以自动加载,然后在框架的控制器、视图和模块里任意调用
先看看我们最终要实现的效果,如我要添加一个 underscore.js 和 redux.js 2个类库到框架中,那么只需在配置里添加以下代码:
/**
* Vendor folder path
* @type String
*/
vendorPath : "mvc/vendor/",
/**
* Load vendor
* @type array
*/
loadVendor : [{
name : "underscore"
},{
name : "redux"
}],
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
以上我将第三方类库都放到 mvc/vendor目录下,然后要将2个类库引用到项目中,这时只需填写类库文件名即可,这样配置的话就可以非常方便地引入不同的类库了 。接下来就看看如何实现吧:
要实现以上配置,就需要修改核心文件 core/timvc.js ,其实只需在此文件里添加以下代码:
/**
* Load vendor from file by name
* @param {String} name vendor name based on vendor path in config (usally /mvc/vendor)
* @returns boolean with load status
*/
this.loadVendor = function(name) {
if(name == null) {
//load all vendor with config
for(var i = 0, v = self.config.loadVendor.length; i < v; i++) {
var path = self.config.vendorPath + self.config.loadVendor[i].name + ".js";
self.debug('path:' + path);
var r = self.includeFile(path);
if(!r)
return false;
}
} else {
//load vendor by name
var path = self.config.vendorPath + name + ".js";
var r = self.includeFile(path);
}
return true;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
以上方法就是加载配置目录中所需要的类库文件,代码很简单,我就不多说了 ,***一步就是将此方法放到 components/controller.js 的 setApp 方法里调用就可以了,因为这个 setApp 方法是所有页面加载前调用的,至于为什么要放到 controller而不直接放到 timvc.js 里的 _init,这个是因为每当新的页面或者控制器加载时,其应该都是独立运行的,如果放到 timvc.js 里的话,就只有项目启动时才加载一次,如果跳到另一个页面的话,就会失效了,因此放到所有 controller的父页面,让所有都继承它就能保证让所有页面都能生效。以下是具体代码:
/**
* Set Appliation Class Reference
* @param {TiMVC} set main app TiMVC class refernce used by TiMVC
*/
this.setApp = function(a){
self.App = a;
self.App.loadVendor();
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
OK,至此就完成了,然后你就可以直接在项目中使用类库的代码了