02 단례, 정책

단일 모드

시뮬레이션 단례 실현

var createDiv = (function(){
  var instance;
  var createDiv = function(html){
    if(instance)
      return instance;
    this.html = html;
    this.init();
    return instance = this;
  };
  createDiv.prototype.init = function() {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  return createDiv;
})();

var createDiv = function(html) {
  this.html = html;
  this.init();
};

createDiv.prototype.init = function() {
  var div = document.createElement('div');
  div.innerHTML = this.html;
  document.body.appendChild(div);
};

var proxyCreateDiv = (function(){
  var instance;
  return function(html) {
    if(instance)
      return instance;
    return new CreateDiv(html);
  }
})(); 

JS의 단례 모드

var MyApp = {};
  
MyApp.namespace = function(name) {
  var parts = name.split('.'),
      current = MyApp;
  for(prop in parts) {
    if(!current[parts[prop]])
      current[parts[prop]] = {};
    current = current[parts[prop]];
  }
}

var user = (function() {
  var _name = 'jinks',
      _age = 23;
  return {  // 
    getUserInfo: function() {
      return _name + ' ' + _age;
    }
  }
})();

불활성

/**
 *  | | div
 */
var getSingle = function (fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments))  
  }
};

var createDiv = function(name, id) {
  var div = document.createElement('div');
  div.innerHTML = name;
  div.id = id;
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
};

var divChange = function(fn,name,id) {
  var div = fn(name,id);
  var display = div.style.display;
  div.style.display = display === 'none' ? 'block' : 'none';
};

divElem = {
  div1: getSingle(createDiv),
  div2: getSingle(createDiv)
};

document.getElementById('div1Btn').onclick = function () {
  divChange(divElem.div1,'div1','div1');
};
document.getElementById('div2Btn').onclick = function () {
  divChange(divElem.div2,'div2','div2');
};

var bindEvent = getSingle(function() {
  document.getElementById('click').onclick = function() {
    alert('click');
  }
  return true;
});

bindEvent();  // 
bindEvent();
bindEvent();

정책 모드

시뮬레이션 전략 실현

/**
 *  
 */ 
// 
var performancsA = function () {}
performancsA.prototype.calculate = function(salary) {
  return salary * 3;
};
var performancsB = function () {}
performancsB.prototype.calculate = function(salary) {
  return salary * 4;
};
// 
var Bonus = function() {
  this.salary = null;
  this.strategy = null;
};
Bonus.prototype.setSalary = function(salary) {
  this.salary = salary;
};
Bonus.prototype.setStrategy = function(strategy) {
  this.strategy = strategy;
};
Bonus.prototype.getBouns = function() {
  return this.strategy.calculate(this.salary);
};


var bouns = new Bonus;
bouns.setSalary(10000);
bouns.setStrategy(new performancsA);
bouns.getBouns();//30000;
bouns.setStrategy(new performancsB);
bouns.getBouns();//40000;

JS의 정책 모드

var strategies = {
 'A': function (salary) {
   return salary * 3; 
 },
 'B': function (salary) {
   return salary * 4;
 }
};

var calculateBonus = function(level, salary) {
  return strategies[level](salary);
};

calculateBonus('A', 10000);
calculateBonus('B', 10000);

애니메이션 부드럽게 하기

// 
  var tween = {
    linear: function(t, b, c, d) { // ， ， ， 
      return c * t / d + b;
    },
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t + b;
    },
    strongEaseIn: function(t, b ,c ,d) {
      return c * (t /= d) * t * t * t * t + b;
    },
    strongEaseOut: function(t, b, c, d) {
      return c * ((t = t / d - 1) * t * t * t * t * t + 1) + b;
    },
    sineaseIn: function(t, b, c, d) {
      return c * (t /= d) * t * t + b;
    },
    sineaseOut: function(t, b ,c ,d) {
      return c * ((t = t /d - 1) * t * t + 1) + b;
    },

  };

  var Animate = function (elem) {
    this.elem = elem;
    this.startTime = 0;
    this.startPos = 0;
    this.endPos = 0;
    this.properrtName = null;
    this.easing = null;
    this.duration = null;
  };

  Animate.prototype.start = function (properrtName, endPos, duration, easing) {
    var self = this;
    self.startTime = +new Date;
    self.startPos = self.elem.getBoundingClientRect()[properrtName];
    self.properrtName = properrtName;
    self.endPos = endPos;
    self.duration = duration;
    self.easing = tween[easing];

    var timeId = setInterval(function() {
      if(self.step() === false)
        clearInterval(timeId);
    }, 20);
  };
  Animate.prototype.step = function() {
    var t = +new Date;
    if(t >= this.startTime + this.duration) {
      this.update(this.endPos);
      return false;
    }
    var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
    this.update(pos);
  };

  Animate.prototype.update = function(pos) {
    this.elem.style[this.properrtName] = pos + 'px';
  }

  var div = document.getElementById('div');
  var animate = new Animate(div);

  animate.start('left', 500, 1000, 'sineaseIn');

양식 검증 구현

// 
var strategies = {
  isNonEmpty: function(value, errMsg) {
    if(value === '')
      return errMsg;
  },
  minLength: function(value, length, errMsg) {
    if(value.length < length)
      return errMsg;
  }
};
//valiator 
var Valiator = function() {
  this.cache = [];
};
Valiator.prototype.add = function(elem, rules) {
  var self = this;
  for(var i = 0, rule; rule = rules[i++];) {
    (function(rules) {
      var strategyAry = rule.strategy.split(':');
      var errMsg = rule.errMsg;
      self.cache.push(function() {
        var strategy = strategyAry.shift();
        strategyAry.unshift(elem.value);
        strategyAry.push(errMsg);
        return strategies[strategy].apply(elem, strategyAry);
      });
    })(rule);
  }
};
Valiator.prototype.start = function() {
  for(var i = 0, valiatorFn; valiatorFn = this.cache[i++];) {
    var errMsg = valiatorFn();
    if(errMsg)
      return errMsg;
  }
};
// 
var registerForm = document.getElementById('registerForm');
var valiatorFn = function() {
  var valiator = new Valiator;
  valiator.add(registerForm.username, [{
    strategy: 'isNonEmpty',
    errMsg: ' '
  }, {
    strategy: 'minLength:10',
    errMsg: ' 10 '
  }]);
  valiator.add(registerForm.password, [{
    strategy: 'minLength:6',
    errMsg: ' 6 '
  }]);
  var errMsg = valiator.start();
  return errMsg;
};

registerForm.onsubmit = function() {
  var errMsg = valiatorFn();
  if(errMsg) {
    alert(errMsg);
    return false;
  }
  return true;
};

이점