Javascript十六种常用设计模式

function Instance(name) {
    this.name = name;
}

Instance.prototype.fire = function () {
    console.log(this.name);
}

var singleton = (function () {
    var instance = null;
    return function (name) {
        if (!instance)
            instance = new Instance(name);
        return instance;
    }
})();
singleton('dqhan').fire();
singleton('dqhan1').fire();

function Instance(name) {
    this.name = name;
}

Instance.prototype.fire = function () {
    console.log(this.name);
}

Instance.prototype.set = function (name) {
    this.name = name;
}

var singleton = (function () {
    var instance = null;
    return function (name) {
        if (!instance)
            instance = new Instance(name);
        else
            instance.set(name);
        return instance;
    }
})();
singleton('dqhan').fire();
singleton('dqhan1').fire();

var singleton = function (fn) {
    var instance = null;
    return function () {
        if (!instance) instance = fn.apply(this, arguments)
        return instance;
    }
}
//对外暴露部分

var setSingleton = singleton(function () {
    var instance = new Instance('dqhan');
    return instance;
})

function Instance(name) {
    this.name = name;
}

Instance.prototype.fire = function () {
    console.log(this.name);
}

Instance.prototype.set = function (name) {
    this.name = name;
}

function Factory(name) {
    this.name = name;
}

Factory.prototype.changeName = function (name) {
    this.name = name;
} 

var demo = new Factory('dqhan');
var demo1 = new Factory('dqhan1');

function Factory(type) {
    function Cat() {
        this.name = 'cat';
    }

    Cat.prototype.say = function () {
        console.log('miaomiao~');
    }

    function Dog() {
        this.name = 'dog';
    }

    Dog.prototype.say = function () {
        console.log('wangwang~');
    }

    var alr = {
        cat: function () {
            return new Cat();
        },
        dog: function () {
            return new Dog();
        }
    };

    this.__proto__ = alr[type]();
}

var cat = new Factory('cat');
cat.say();
var dog = new Factory('dog');
dog.say();

function Factory(type) {
    return new this[type]();
}

Factory.prototype = {
    Cat: function () {
        this.name = 'cat';
        this.__proto__.say = function () {
            console.log('miaomiao~');
        }
    },
    Dog: function () {
        this.name = 'dog';
        this.__proto__.say = function () {
            console.log('wangwang~');
        }
    }
}

var cat = new Factory('Cat');
cat.say();
var dog = new Factory('Dog');
dog.say();

function Factory(type) {
    if (this instanceof Factory)
        return new this[type]();
    else
        return new Factory(type);
}

Factory.prototype = {
    Cat: function () {
        this.name = 'cat';
        this.__proto__.say = function () {
            console.log('miaomiao~');
        }
    },
    Dog: function () {
        this.name = 'dog';
        this.__proto__.say = function () {
            console.log('wangwang~');
        }
    }
}

var cat = Factory('Cat');
cat.say();
var dog = new Factory('Dog');
dog.say();

function Factory(type) {
    return new Factory.fn.init(type);
}

var fn = {
    init: function (type) {
        //当前this指向fn对象
        var target = this[type]();
        return target;
    }
}

Factory.fn = fn;

Factory.prototype.init = function (type) {
    var target = this[type]();
    return target;
}
Factory.prototype = {
    Cat: function () {
        this.name = 'cat';
        this.__proto__.say = function () {
            console.log('miaomiao~');
        }
    },
    Dog: function () {
        this.name = 'dog';
        this.__proto__.say = function () {
            console.log('wangwang~');
        }
    }
}
/**
 *  改变上面init中this指向问题使this指向Factory
*/
Factory.fn.init.prototype = Factory.prototype;

var cat = Factory('Cat');
cat.say();
var dog = new Factory('Dog');
dog.say();

function AbstractFactory(fType) {
    if (this instanceof AbstractFactory) {
        ChildrenFn.prototype = new this[fType]();
    } else
        return new AbstractFactory(fType, ChildrenFn);
}

AbstractFactory.prototype.Cat = function () {
    this.name = 'cat';
}

AbstractFactory.prototype.Cat.prototype = {
    say: function () {
        console.log('miaomiao~');
    }
}

AbstractFactory.prototype.Dog = function () {
    this.name = 'dog';
}

AbstractFactory.prototype.Dog.prototype = {
    say: function () {
        console.log('wangwang~')
    }
}
//抽象工厂方法提供得接口不允许调用，需要字类重写，所以我们要加个限制

function AbstractFactory(fType, ChildrenFn) {
    if (this instanceof AbstractFactory) {
        ChildrenFn.prototype = new this[fType]();
    } else
        return new AbstractFactory(fType, ChildrenFn);
}

AbstractFactory.prototype.Cat = function () {
    this.name = 'cat';
}

AbstractFactory.prototype.Cat.prototype = {
    say: function () {
        throw new Error('不允许效用，仅允许重写。')
        console.log('miaomiao~');
    }
}

AbstractFactory.prototype.Dog = function () {
    this.name = 'dog';
}

AbstractFactory.prototype.Dog.prototype = {
    say: function () {
        throw new Error('不允许效用，仅允许重写。')
        console.log('wangwang~')
    }
}

function 美短Cat(name) {
    this.type = '美短';
    this.name = name;
}

AbstractFactory('Cat', 美短Cat)

var CatA = new 美短Cat('A');

// CatA.say();

AbstractFactory('Cat', 暹罗Cat)

function 暹罗Cat(name) {
    this.type = '暹罗';
    this.name = name
    this.__proto__.say = function () {
        console.log('重写cat say');
    }
}

var CatB = new 暹罗Cat('B');

CatB.say();

function fn(type) {
    if (type === 1)
        (function () {
            console.log('1');
        })();
    if (type === 2)
        (function () {
            console.log('2');
        })()
    if (type === 3)
        (function () {
            console.log('3')
        })()
}

fn(1);
fn(2);
fn(3);

var map = {
    1: fn1,
    2: fn2,
    3: fn3
}
function fn1() {
    console.log(1);
}
function fn2() {
    console.log(2);
}
function fn3() {
    console.log(3);
}
function fn(type) {
    map[type]();
}

function extendCommend(type, fn) {
    map[type] = fn;
}

function targetAction(props) {
    console.dir(props);
}
//现在我们要求不是所有的情况都可以条用这个方法，添加保护代理

function proxyTargetAction(props) {
    if (typeof props === 'string') console.log('拒绝使用目标函数')
    targetAction(props);
}
proxyTargetAction({ name: 'dqhan' });
proxyTargetAction('str');

function debounce(fn, delay) {
    var self = this,
        timer;
    return function () {
        clearInterval(timer);
        timer = setTimeout(function () {
            fn.apply(self, arguments);
        }, delay)
    }
}

function add() {
    var arg = [].slice.call(arguments);

    return arg.reduce(function (a, b) {
        return a + b;
    });
}

// 代理
var proxyAdd = (function () {
    var cache = {};

    return function () {
        var arg = [].slice.call(arguments).join(',');
        // 如果有，则直接从缓存返回
        if (cache[arg]) {
            return cache[arg];
        } else {
            var result = add.apply(this, arguments);
            cache[arg] = result;
            return result;
        }
    };
})();
proxyAdd(1, 2, 3, 4, 5);
proxyAdd(1, 2, 3, 4, 5);//直接从缓存中输出

var observer = (function () {
    var events = {};
    return function () {
        return {
            register: function (eventName, callback) {
                events[eventName] = callback;
            },
            fire: function (eventName) {
                if (toString.call(events[eventName]) !== '[object Function]')
                    throw new Error('error');
                else
                    return events[eventName]();
            },
            remove: function (eventName) {
                if (toString.call(events[eventName]) !== '[object Function]')
                    throw new Error('error');
                else
                    delete events[eventName];
            }
        }
    }
})();

var ob = observer();
ob.register('say', function () {
    console.log('demo');
});

ob.fire('say');

// ob.remove('say');

function Demo() {

}
Demo.prototype.fire = function () {
    console.log('fire');
}

var demo = new Demo();

//装饰器
function Decorator(demo) {
    this.demo = demo;
}

Decorator.prototype.fire = function () {
    this.demo.fire();
}


var cat = new Decorator(demo);

cat.fire();

(function (global,
    $,
    $$,
    factory,
    plugin) {
    if (typeof global[plugin] !== "object") global[plugin] = {};
    $.extend(true, global[plugin], factory.call(global, $, $$))
})(window, $, $$, function (
    $,
    $$
) {
    var uuid = -1;
    var _TabControl = function (ops) {
        this._ops = {
            items: ops.items || [],
            hashItems: {},
            selectedIndex: ops.selectedIndex || 0
        };
        this._element = $(ops.element);
        this._tabContainerId = "ui-tabcontrol-container-";
        this._oldValue = { selectedIndex: 0 };
        this._convertHashItems();
        this._init()
            ._initId()
            ._create()
            ._initMember()
            ._setTabContainer()
            ._setTabContent()
            ._bindEvent();
    };

    _TabControl.prototype = {//...省略了
    }
    return {
        TabControl: _TabControl
    }
}, "ui")

import ReactWidget from './react-widget';

class TabControl extends ReactWidget {
    constructor(props) {
        super(props);
    }


    componentWillReceiveProps(newProps) {
        this.element.setOptions({
            items: newProps.items,
            selectedIndex: newProps.selectedIndex
        });
    }

    componentDidMount() {
        this.element = new ui.TabControl({
            element: ReactDOM.findDOMNode(this),
            items: this.props.items,
            selectedIndex: this.props.selectedIndex
        });
        $(ReactDOM.findDOMNode(this)).on('tabHandleChanged', this.props.selectChanged.bind(this));
    }

    render() {
        return <div>
            <div className='ui-tabcontrol-content'>
                {this.props.children}
            </div>
        </div>
    }
}

window.$$.TabControl = TabControl;