javascript之设计

javascript设计模式

一.初始化时分支

我们在写一些函数库的时候经常需要做一些兼容性方面的操作，会写一些相应的工具函数，例如下面的代码：

 

var utils = {
    addListener: function(el, type, fn) {
        if (typeof window.addEventListener === 'function') {
            el.addEventListener(type, fn, false);
        } else if (typeof document.attachEvent === 'function') {
            el.attachEvent('on' + type, fn);
        } else {
            el['on' + type] = fn;
        }
    },
    removeListener: function(el, type, fn) {
        //...
    }
}

上面的这段代码再运行时每次都会需要去判断是哪种浏览器的特征，因此显得效率会比较低下，我们需要一种方式去改善这种情况。

解决方案就是添加初始化的方式，什么时候初始化？当然是浏览器第一次加载的时候就根据浏览器特征加载相应的代码，当然为了暴露我们需要的接口，使用对象字面量的方式还是必不可少的。

首先罗列出我们的接口：

var utils = {
    addListener: null,
    removeListener: null
}

因为代码是按顺序执行的，因此在下面我们需要对它进行接口实现，在实现中进行浏览器特性检查：

if (typeof window.addEventListener === 'function') {
    utils.addListener = function(el, type, fn) {
        el.addEventListener(type, fn, false);
    };
    utils.removeListener = function(el, type, fn) {
        //...
    };
} else if (typeof document.attachEvent === 'function') {
    utils.addListener = function(el, type, fn) {
        el.attachEvent('on' + type, fn);
    };
    utils.removeListener = function(el, type, fn) {
        //...
    };
} else {
    utils.addListener = function(el, type, fn) {
        el['on' + type] = fn;
    };
    utils.removeListener = function(el, type, fn) {
        //...
    }
}

这种方式很好的改善了效率低下的问题，而且也相当简单，只需要将重复性的代码从函数实现中分离出来，在外部实现即可。

二.函数属性

有些时候我们不得不应对一些计算量比较大或者耗时比较长的操作，比方说模糊查询，搜索功能等。减少重复性的工作是我们写代码的时候一直注重的一条准则，那么有什么办法能在这些耗时操作中能够尽量提高效率呢？其中一个方法便是缓存， 在javascript中，函数就是对象，是对象那就必然是有属性的，我们可以给任意一个函数添加任意的属性，比如：

var fn = function() {
    //todo
};
//添加属性
fn.child = {};
fn.add = function(){};

由此，我们可以给比较耗时的函数添加一个自身属性，以便缓存计算结果，缓存可以以任意类型的数据形式存在：

 

//无参形式
var fn = function() {
    var self = arguments.callee, result;
    if (!self.cache) {
        result = {};
        //耗时操作
        self.cache = result;
    }
    return self.cache;
}
fn.cache = null;

//有参形式
var fn = function() {
    var key = JSON.stringify(Array.prototype.slice.call(arguments)), result;
    if (!arguments.callee.cache[key]) {
        result = {};
        //耗时操作
        fn.cache[key] = result;
    }
    return fn.cache[key];
};
fn.cache = {};

三.部分应用(curry化)

在这里我们考虑一种情况，有一个函数，需要传递多个参数去实现，而这个函数会在很多时候用到，很多时候我们会传递一些其中一些相同的参数，比如：

var fn = function(a, b, c, d) {
    //todo...
};
//调用
fn(1, 2, 3, 4);
fn(1, 2, 5, 6);
fn(1, 2, 7, 8);
fn(3, 4, 5, 6);

可以看到上面这个函数，我们进行了四次调用，而其有三次调用的前两个参数都是一样的，因此我们可以重新封装一个新的函数，以便减少重复性的参数输入。为了能够自动生成我们需要的函数，我们需要创建工具函数：

function curry(fn) {
    var slice = Array.prototype.slice, oldArgs = slice.call(arguments, 1);
    return function() {
        var newArgs = slice.call(arguments),
            args = oldArgs.concat(newArgs);
            return fn.apply(null, args);
    };
}

该函数接受第一个参数为需要进行curry化的函数，后面为接受curry化的函数的部分或全部参数，使用如下：

var newFn = curry(fn, 1);
newFn(2, 3, 4);

var newFn2 = curry(fn, 2, 3);
newFn2(5, 6);

四.命名空间

很多时候我们在做项目的时候，需要做一些对象管理，并且希望所创建出来的对象不会污染全局空间，因此我们引入了命名空间的概念，在javascript中，要实现命名空间，仅仅需要简单的实现一个对象即可，在对象内实现你所需要实现的任何操作。类似于下面的代码：

var Main = Main || {};

上面就是我们所需要的全局命名空间，剩下的工作，我们就是在Main的命名空间之内添加任意模块。当我们希望创建一个名为Main.utils.http这个模块的时候，我们会发现这时候需要做3次的检查来判断Main或者utils或者http这几个模块是否存在。这样做当然很不方面，所以我们又有了这样一个工具函数来帮助我们创建新模块：

var Main = Main || {};
Main.namespace = function(ns) {
    var parts = ns.split('.'), parent = Main, i;

    if (parts[0] === 'Main') {
        parts = parts.slice(1);
    }

    for (i = 0; i < parts.length; i++) {
        if (typeof parent[parts[i]] === 'undefined') {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
}

//usage:
var http = Main.namespace('Main.utils.http');
var http = Main.namespace('utils.http');

 有了命名空间辅助工具函数，我们能够轻易的构建自己的常用工具库：

Ken.namespace('utils.http');
Ken.utils.http = (function() {
    
    var privatePropoty = 'ken';

    function ajax(option) {
        //todo
    }

    function jsonp(option) {
        //todo
    }
    //...
    return {
        ajax: ajax,
        jsonp: jsonp
    }
})();

 当然项目开发中，我们总是希望能够代码尽量模块化，所以我们可能会经常这样子做：

var model = (function() {
    var fn = function() {};
    fn.prototype = {};
    var a = 1;
    function fn2 = function() {};
    return {
        fn: fn,
        fn2: fn2,
        a: a
    };
}());

这样能够比较好的封装了我们的模块，在多数时候这样简单的方式也足够我们用了，更进一步我们希望模块的组织结构能够像requirejs那样依赖加载，那将是非常好的一种实践。

在requirejs中，我们的代码组织就像下面这样：

require(['jquery','ux/jquery.common'],function($,common){
     var a = 1, b = 2;
     //todo...
});

只需要准备好各个模块的代码，在需要用到的时候添加需要依赖的模块就可以了，这样做有一个好处，能够避免我们的依赖项变成对整个应用程序的全局变量依赖，而无法使用多版本相同模块的问题，当然这种情况极少，但能够解决这样的问题无疑是极好的, 我们能够用沙箱模式简单模拟出这种效果：

    Sandbox.modules = {};
    Sandbox.modules.dom = function(box) {
        box.getElement = function() {};
        box.foo = "bar";
    };
    Sandbox.modules.event = function(box) {
        box.attachEvent = function() {};
        box.dettachEvent = function() {};
    };
    function Sandbox() {
        var args = Array.prototype.slice.call(arguments),
            callback = args.pop(),
            modules = (args[0] && typeof args[0] === 'String') ? args : args[0],
            i;
        if (!(this instanceof Sandbox)) {
            return new Sandbox(modules, callback);
        }
        if (!modules || modules === '*') {
            modules = [];
            for (i in Sandbox.modules) {
                if (Sandbox.modules.hasOwnProperty(i)) {
                    modules.push(i);
                }
            }
        }
        for (i = 0; i < modules.length; i+= 1) {
            Sandbox.modules[modules[i]](this);
        }
        callback(this);
    }
    Sandbox.prototype = {
        name: 'ken',
        version: '1.0',
        getName: function() {
            return this.name;
        }
    }

    //usage:
    Sandbox('*', function(box) {
        console.log(box);
    });

这样做确实能帮我们实现类似requirejs那样的模块加载效果，但是相比于requirejs还缺少很多东西，对于模块的定义仍然不够轻便，在加载模块的时候我们可能需要一个一个标签的在页面中引入，但是在这个雏形中，我们能够不断去完善它并作为我们自己的工具来使用。

详细内容请参考-- javascript模式