JS设计模式（一）

刚入职时，看过一段时间的设计模式，似懂非懂。不知不觉过去七个月了，对JS的理解更深刻了，数据结构与算法的基础也基本上算是过了一遍了，接下来要把设计模式搞定，然后不再深层次研究JS了，而是学习前端自动化、linux、数据库、服务器等的相关知识。

虽然各种模式非常有用，但我们编写业务代码的时候，往往不需要去预先猜测是否需要使用模式，当发现不方便维护和扩展的时候，再编写也不迟。

设计模式的学习主要参考《JavaScript设计模式与开发实践》一书，很多笔记也会从该书抄录。开始JS设计模式的学习。

1.原型模式

　　原型模式既是一种设计模式，也是一种编程泛型。原型模式是JS最基础的继承实现，在这儿就不多讲了，写一下JS原型继承的基本原则：

　　所有的数据都是对象；

　　要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它；

　　对象会记住它的原型；

　　如果对象无法响应某个请求，它会把这个请求委托给它自己的原型。

2.单例模式

　　在写单例模式前，先补一个this的知识点。

　　document.getElementById这个方法名实在太长，我们大概尝试过用一个短的函数代替它：

    var getId = id => document.getElementById(id);

    getId('div1');

　　我们也许思考过为什么不能用下面更简单的方式：

    var getId = document.getElementById;

    getId('div1');

　　在Chrome、IE10中执行会发现报错。因为许多引擎的document.getElementById方法内部实现用到了this。这个this本来期望指向document,但用getId来引用document.getElementById后，变成了普通函数调用，this指向了window。

　　正式开始单例模式。

　　单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

　　相比于传统的面相对象语言，JS的单例模式很容易实现:

        var getSingle = function  (fn) {

            var result;

            return function  () {

                return result || (result = fn.apply(this, arguments));

                // return result || (result = fn());

            }

        };

　　说下这个单例的使用方法。假如我们要在页面里创造一个唯一的登录窗口，给窗口刚创建的时候是隐藏的，通过点击按钮后会显示出来，下面是代码：

        var createLoginLayer = function (){

            var div = document.createElement('div');

            div.innerHTML = '我是登录窗口';

            div.style.display = 'none';

            document.body.appendChild(div);

            return div;

        };

        var createSingleLoginLayer = getSingle(createLoginLayer);

        document.getElementById('loginBtn').onclick = function (){

            var loginLayer = createSingleLoginLayer();

            loginLayer.style.display = 'block';

        };

　　这就是这个单例的使用。在本例中，getSingle 返回的return result || (result = fn.apply(this, arguments));可以改成return result || (result = fn()); ，因为apply作用在了window上，而且没有传参，若需要传参的话，还是用apply吧。

3.策略模式

　　策略模式的定义：定义一系列的算法，把它们一个一个封装起来，并且使它们可以相互替换。以年底绩效考核发奖金为例，绩效为S的员工4倍工资，A的2.7倍工资，B的2倍工资。现在写一段代码，来计算员工的年终奖。

        var strategies = {

            S: function  (salary) {

                return salary * 4;

            },

            A: function  (salary) {

                return salary * 2.7;

            },

            B: function  (salary) {

                return salary * 2;

            }

        };

        var calculateBonus = function  (level, salary) {

            return strategies[level](salary);

        };

        console.log(calculateBonus('S', 20000));

　　策略模式的程序至少由两部分组成。第一部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类，环境类接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明环境类中要维持对某个策略对象的引用。

4.代理模式

　　代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的变体种类非常多，这是写个比较简单的来理解。一个求积程序，可以把它脑补为一个复杂的计算。

        var proxyMult = (function  () {

            var cache = {}；

            return function  () {

                var args = Array..prototype.join.call(arguments, ',');

                if (args in cache) {

                    return cache[args];

                }

                return cache[args] = mult.apply(this,arguments);

            }

        })();

        proxyMult(1, 2, 3, 4);

        proxyMult(1, 2, 3, 4);

巴特西

JS设计模式（一）

最新文章

热门文章