Js设计模式学习

Posted by Asser's Blog on June 17, 2018

javascript 设计模式学习

单例模式

创造一个唯一的实例，并提供全局访问
注意点：
  1. 不要使用全局变量，采用闭包封装私有变量或使用命名空间
  1. 考虑使用惰性单例，即在单例需要使用时才进行创建
    var getSingle = function(fn) {
        var result;
        return function() {
            return result || (result = fn.apply(this, arguments));
        }
    };

通过fn可以传入各种需要创建的单例的方法，此方式实现了创建单例和管理单例方法的解耦，体现了单一职责原则。

策略模式

定义一系列算法，把它们全部一个一个封装起来，并且使它们可以相互替换
注意点：

基于策略模式的程序至少由两部分组成:

第一部分是一组策略类，策略类封装了具体的算法，并且负责具体的计算过程。

第二部分是环境类context，context接收客户的请求，随后将请求委托给某个策略类

    var Validator = function() {
        this.caches = [];
    }
    Validator.prototype.add = function() {
        var self = this;
        for (var i, rule; rule = rules[i++];) {
            (function(rule) {
                var strategyAry = rule.strategy.split(':');
                var errorMsg = rule.errorMsg;
                
                self.cache.push(function() {
                    var strategy = strategyAry.shift();
                    strategyAry.unshift(dom.value);
                    strategyAry.push(errorMsg);
                    return strategies[strategy].apply(dom, strategyAry);
                })
            })(rule);
        } 
    }
    Validator.prototype.start = function() {
        for (var i = 0, validatorFunc; validatorFunc = this.caches[i++];) {
            var errorMsg = validatorFunc();
            if (errorMsg) {
                return errorMsg;
            } 
        } 
    }; // validator构造函数
    
    var strategies = {
        isNotEmpty: function(value, errorMsg) {
            if (value === '') {
              return errorMsg;
            } 
        },
        minLength: function(value, length, errorMsg) {
            if (value.length < length) {
                return errorMsg;
            } 
        },
        isMobile: function(value, errorMsg) {
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ return errorMsg;
            }
        }
    };

   var validataFunc = function() {
       var validator = new Validator();
       validator.add(form.username, [{
           strategy: 'isNotEmpty',
           errorMsg: '用户名不能为空'
       },{
           strategy: 'minLength',
           errorMsg: '用户名长度不能少于10位'
       }]);
       validator.add(form.telephone, [{
           strategy: 'isMobile',
           errorMsg: '手机号格式错误'
       }]);
       var errorMsg = validator.start();
       return errorMsg;
   }
   
   submitBtn.onclick = function() {
       var errorMsg = validataFunc();
       if (errorMsg) {
           alert(errorMsg);
           return false;
       } 
   };
FEATURED TAGS