JS常用设计模式

单例模式

单例模式 (Singleton) 的实现在于保证一个特定类只有一个实例，第二次使用同一个类创建新对象的时候，应该得到与第一次创建对象完全相同的对象。

        function Foo() {
            if (!Foo._instance) {
                Foo._instance = {
                    name: '单例模式'
                }
            }



            return Foo._instance
        }
        var foo1 = new Foo()
        var foo2 = new Foo()
        console.log(foo1 === foo2) true

    每次new的时候判断Foo._instance是否存在，存在就返回，不论new多少次返回的就一个对象

        function Foo() {

            // 判断_instance是否是一个对象，是的话就返回。
            if (typeof Foo._instance === 'object') {
                return Foo._instance
            }
            //给这个单例对象添加属性和方法

            this.name = '单例模式'

            //隐式返回this
            Foo._instance = this

        }
        var foo1 = new Foo()
        var foo2 = new Foo()
        console.log(foo1 === foo2)

简单工厂模式

提供了创建一系列相关对象的入口，不需要关心具体类。

        function Bar() {
            this.name = 'hello Bar'
        }

        function Foo() {
            this.name = 'hello Foo'
        }
        function Factory(arg) {
            var result;

            switch (arg) {
                case 'bar':
                    result = new Bar()
                    break;
                case 'foo':
                    result = new Foo()
                    break;
                default:
                    throw Error('缺少参数或者参数错误')
            }

            return result
        }
        var foo = Factory('bar')
        console.log(foo)

工厂模式

工厂模式和简单工厂模式概念是一样的，区别在于工商模式使用类来创建对象，简单工厂则是使用封装函数

        function Bar() {
            this.name = 'hello Bar'
        }

        function Foo() {
            this.name = 'hello Foo'
        }
        function Factory() {

        }

        Factory.prototype.createObj = function (arg) {
            var result;

            switch (arg) {
                case 'bar':
                    result = new Bar()
                    break;
                case 'foo':
                    result = new Foo()
                    break;
                default:
                    throw Error('缺少参数或者参数错误')
            }

            return result
        }
        var factory = new Factory()
        var obj = factory.createObj('foo')
        console.log(obj)

抽象工厂模式

一个工厂类对应多个产品类，对应产生多个实例

      class BaseSned {
            constructor(url, method) {
                this.url = url;
                this.method = method.toUpperCase();
                this.xhr = new XMLHttpRequest();
            }

            done(callback) {
                var that = this;
                this.xhr.open(this.method, this.url, true)
                this.xhr.onload = function () {

                    callback && callback(that.xhr.responseText)
                }
                this.xhr.send(null);
            }
        }
        class Jsonp {
            constructor(url) {
                this.url = url;
                
            }
            done(callback) {

                var script = document.createElement('script');
                var url = this.url.match(/callback=([^&]+)/)[1];
                script.src = url;
                document.body.appendChild(script)
                window[callback] = callback
            }
        }


        function ajax(url, method) {
            var method = method.toUpperCase()
            console.log(method)
            var result;
            switch (method) {
                case 'GET':

                    result = new Base(url, method)
                    break;
                case 'POST':
                    result = new Base(url, method)
                    break;
                case 'JSONP':
                    result = new Jsonp(url)
                    break;
                default:
                    console.log('出错')
                    break;

            }

            return result;
        }

        var xhr = ajax('./data.json', 'get')
        xhr.done(function (data) {
            console.log(data)
        })
        console.log(xhr)

策略模式

把一个个操作封装成策略，根据不同的类型映射不同的策略

        //定义一个简单的策略，里面有一些验证方法
        var vaildateors = {

            maxLen: function (value, len) {

                return value.length > len
            },
            notNull: function (value, bool) {
                return (value != '') == bool;
            }
        }

        function CheckData(el, ops) {


            this.el = el.nodeType ? el : document.querySelector(el);
            this.ops = ops;

        }
        CheckData.prototype.isVaildate = function () {
            // 遍历传递的ops，根据配置的ops调用vaildateors中对应的方法
            for (var attr in this.ops) {
                if (!vaildateors[attr](this.el.value, this.ops[attr])) {
                    return false;
                }
            }
            return true
        }

        var userVaildate = new CheckData('.inp', {
            maxLen: 10
        })
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            console.log(userVaildate.isVaildate())
        }