【读书笔记】读《JavaScript模式》 - JavaScript函数常用模式

　　API模式：回调模式、配置对象、返回函数；

　　初始化模式：即时函数、即时对象初始化、初始化分支；

　　性能模式：备忘模式、自定义模式

 //*********************** API模式 ***********************
 /**
  * ---------------------- 回调模式 ----------------------
  *
  * 1>要写出通用和可复用的代码，回调模式可以帮助实现这种通用化。
  * 2>不需要预测和实现能想到的每一项功能，因为这样会迅速使我们的代码膨胀，
  *     而绝大多数用户永远不会需要其中大量的功能。相反，可以专注于核心功能并提供“挂钩”形式的回调函数，
  *     这会使我们很容易构建、扩展，以及自定义我们的方法。
  */
 //方式一
 var findNodes = function () {
     var i = 10000,
         nodes = [],
         found;
     while (i) {
         i -= 1;
         //这里是复杂的业务逻辑
         nodes.push(found);
     }
     return nodes;
 }

 var hide = function (nodes) {
     for (var i = 0, len = nodes.length; i < len; i += 1) {
         nodes[i].style.display = 'none';
     }
 }

 hide(findNodes());

 //方式二
 var findNodes = function (callback) {
     var i = 10000,
         nodes = [],
         found;
     while (i) {
         i -= 1;
         //这里是复杂的业务逻辑
         if (typeof callback === 'function') {
             callback(found);
         }
         nodes.push(found);
     }
     return nodes;
 }

 var hide = function (node) {
     node.style.display = 'none';
 }

 findNodes(hide);

 //简洁点，将回调函数直接写在findNodes函数中
 findNodes(function (node) {
     node.style.display = 'block';
 })

 /**
  * ---------------------- 配置对象模式 ----------------------
  *
  * 封装传递参数为一个对象，灵活了函数的调用方式，何乐而不为
  */
 function addPerson(name, gender, age, address) {
     //...
 }

 //将参数封装
 var conf = {
     name: 'king',
     gender: 'male',
     age: 25,
     address: 'xxxxxx'
 }
 addPerson(conf);

 //简写之
 addPerson({
     name: 'king',
     gender: 'male',
     age: 25,
     address: 'xxxxxx'
 })

 /**
  * ---------------------- 返回函数模式 ----------------------
  *
  * 函数里面返回函数，它创建了一个闭包，可以使用这个闭包存储一些私有数据，
  * 而这些数据仅可被该返回函数访问，但外部代码却无法访问。
  */
 var setup = function () {
     var count = 0;
     return function () {
         return count++;
     }
 }
 var next = setup();
 next();    //
 next();    //
 next();    //

//*********************** 初始化模式 ***********************
/**
 * ---------------------- 即时函数模式 ----------------------
 */
//文件module1.js中定义的模块module1
(function () {
    //模块1的所有代码
})();

//文件module2.js中定义的模块module2
(function () {
    //模块2的所有代码
})();

/**
 * ---------------------- 即时对象初始化模式 ----------------------
 *
 * 这种模式的优点与即时函数模式的优点是相同的：可以在执行一次性的初始化任务时保护全局命名空间。、
 * 与仅仅将一堆代码包装到匿名函数的方法相比。这种模式看起来设计更多的语法特征，
 * 但是如果初始化任何更加复杂(它们也往往的确比较复杂)，它会使整个初始化过程显得更有结构化。
 * 其语法结构如下：
 * ({...}).init();
 * ({...}.init());
 */
({
    name: 'king',
    password: '123',
    say: function () {
        return 'I am ' + this.name + ', and my password is ' + this.password;
    },
    init: function () {
        console.log(this.say());
    }
    /**
     * 这种模式主要适用于一次性的任务，而且在init()完毕后也没有保存对该对象的访问。
     * 如果想在init()完毕后保存对该对象的一个引用，可以通过在init()尾部添加"return this;"语句实现该功能。
     */
}).init();    //I am king, and my password is 123

/**
 * ---------------------- 初始化时分支模式 ----------------------
 */
//每次调用utils.addListener()或utils.removeListener()时，都会重复地进行相同检查
var utils = {
    addListener: function (elem, type, fn) {
        if (typeof window.addEventListener === 'function') {
            elem.addEventListener(type, fn, false);
        } else if (typeof window.attachEvent === 'function') {    //IE
            elem.attachEvent('on' + type, fn);
        } else {
            elem['on' + type] = fn;
        }
    },
    removeListener: function () {
        if (typeof window.removeEventListener === 'function') {
            elem.removeEventListener(type, fn, false);
        } else if (typeof window.detachEvent === 'function') {    //IE
            elem.detachEvent('on' + type, fn);
        } else {
            elem['on' + type] = null;
        }
    }
}

//采用分支
var utils = {
    addListener: null,
    removeListener: null
}
//分开嗅探浏览器特征，然后使用加载时分支仅执行一次嗅探
if (typeof window.addEventListener === 'function') {
    utils.addListener = function (elem, type, fn) {
        elem.addEventListener(type, fn, false);
    };
    utils.removeListener = function (elem, type, fn) {
        elem.removeListener(type, fn, false);
    };
} else if (typeof window.detachEvent === 'function') {    //IE
    utils.addListener = function (elem, type, fn) {
        elem.attachEvent('on' + type, fn);
    };
    utils.removeListener = function (elem, type, fn) {
        elem.detachEvent('on' + type, fn);
    };
} else {
    utils.addListener = function (elem, type, fn) {
        elem['on' + type] = fn;
    };
    utils.removeListener = function (elem, type, fn) {
        elem['on' + type] = null;
    };
}

//*********************** 性能模式 ***********************
/**
 * ---------------------- 备忘模式 ----------------------
 *
 * 使用函数属性以便使得计算过的值无须再次计算
 */
var myfunc = function (param) {
    if (!myfunc.cache[param]) {
        var result = {};
        //...开销很大的操作...
        myfunc.cache[param] = result;
    }
    return myfunc.cache[param];
}
//缓存存储
myfunc.cache = {};

/**
 * ---------------------- 自定义函数模式 ----------------------
 *
 * 当函数有一些初始化准备工作要做，并且仅需要执行一次，那么这个模式就非常有用。
 * 因为并没有任何理由去执行本可以避免的重复工作，即该函数的一些部门可能并不再需要。
 * 在这种情况下，自定义函数可以更新自身的实现。使用此模式可以显著地帮助提升应用程序的性能，
 * 这是由于重新定义的函数仅执行了更少的工作。
 */
var scareMe = function () {
    alert('Boo!');
    scareMe = function () {
        alert('Double boo!');
    };
}

scareMe();    //Boo!
scareMe();    //Double boo!
scareMe();    //Double boo!