现在我介绍的就是如何自己添加需要的配置,如本篇将介绍的是如何方便地将第三方类库整合到此框架中使用,最终目的是只需在config里添加一个新的类库名称就可以自动加载,然后在框架的控制器、视图和模块里任意调用
先看看我们最终要实现的效果,如我要添加一个 underscore.js 和 redux.js 2个类库到框架中,那么只需在配置里添加以下代码:
- /**
- * Vendor folder path
- * @type String
- */
- vendorPath : "mvc/vendor/",
- /**
- * Load vendor
- * @type array
- */
- loadVendor : [{
- name : "underscore"
- },{
- name : "redux"
- }],
以上我将第三方类库都放到 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;
- }
以上方法就是加载配置目录中所需要的类库文件,代码很简单,我就不多说了 ,***一步就是将此方法放到 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();
- }
OK,至此就完成了,然后你就可以直接在项目中使用类库的代码了