Hello Js

导航

架构中的技术性解决难题

遇到一个问题,不知道怎么解决了。

由于多个页面的公用模块较多,因此希望将公共部分模块化,模块化的js文件中,可以返回一些必要的信息,比如当前模块中一些表单中存储的

数据啊,对外的一些控制方法啊等等,这些应该是没有问题的,这个思路,和微博的架构几乎如出一辙,目前的业务中,模块化是开发平台来做

的,我的想法是脱离平台,通过js来操作一下,可惜现在看不到微博的源码,只能自己凭印象琢磨一下。

模块化思路之后,具体的就剩下了两个问题:

第一:如何将模块化的js文件添加到当前的页面中来呢,这个问题倒不难解决。首先,将模块化的js文件的路径和文件名联系在一起。简而言之,比如,

放在common文件夹下ui文件夹下的alert方法,那么其方法名就是common.ui.alert。这样,直接通过添加指定路径js文件的方法,就可以将该文件添加

到页面了。这里后来发现一个问题,就是相对路径绝对路径的问题,这里获取的只是相对路径,某些时候,还需要添加一些开发机上的文件路径。第一个

问题,到这里就,貌似解决了。

代码如下:

var Use = function(src){
        /*首先查看当前路径的js是否已经被加载执行过,已经执行过就不再执行*/
        if(catchObj[src]){
            return;
        }
        /*未执行过,添加到catchList和catahObj中*/
        catachList.push(src);
        catchObj[src] = 1; //为什么要是1呢,这里只是随便的一个值确定当前这个文件已经Use过了;

        /*先正常加载,转换为js路径*/
        var jsSrc = src.split('.').join('/');
        jsSrc = jsSrc + '.js';

        var js = document.createElement('script');
        js.setAttribute('type','text/javascript');
        js.setAttribute('src',baseUrl + jsSrc);
        js.setAttribute('charset','utf-8');

        document.getElementsByTagName('HEAD')[0].appendChild(js);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(js);
    }

第二个问题:

将模块化的js文件添加到页面后,为了达到js文件模块化的功能,我的目的是将当前的js文件添加到最外围的一个全局变量的命名空间下。比如Lx,

即,Lx['common']['ui']['alert'] = function(){}这样子的效果。

为了达到这个效果,首先,添加的文件要将这个function return出来。同时,为了将指定路径的function添加到命名空间下,这里也是以路径名命名。

一个具体的例子是:

Lx.invoke('common.industry.industry',function($){
    return function(){
        var m = 10;
        return m;
    }        
})

invoke如下:

var invoke = function(src, maker){    
        var _that = that;
        var path = src.split('.');                        
        for(var i = 0,len = path.length; i < len; i++){    
            /*将invoke的function所返回的数据都添加到lx这个全局变量中去*/
            if( i == len - 1){                
                if(_that[path[i]]){
                    throw path[i] + 'has been used in this folder,please change another path for your file!';
                    return;
                }                
                _that[path[i]] = maker(that);
            }else{

                if (!_that[path[i]]) {
                    _that[path[i]] = {};
                }
                _that = _that[path[i]];
            }                            
        }
            
    }

that指向的是最外围的全局变量,看起来好像没什么问题了哈,先Use('common.ui.alert'),将一个文件添加到页面,再invoke这个function并添加到命名空间下,事实上却是

Use的时候出了问题,最直接的现象就是对应路径的function并没有添加到命名空间下。

我也是很长时间才发现Use的时候出问题的,我最初以为是invoke有问题,但我无意间将invoke的代码 贴到Lx文件里,发现可以正常的执行。可是Use看起来很貌似的正常。

如何解决呢,不晓得了,主要是现在,问题的原因我都没发现。继续探索中。。。

 

posted on 2013-01-24 18:10  苏拉A梦  阅读(252)  评论(1编辑  收藏  举报