这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要帮助大家轻松掌握 JavaScript 策略模式,什么是 js 策略模式,感兴趣的小伙伴们可以参考一下
定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法。
一般用于在实现一个功能时,有很多个方案可选择的情况。
例子 1:根据员工薪水 salary、绩效等级 S、A、B、C,来计算年终奖
- //封装了所有算法的策略对象
- var strategies = {
- 'S': function(salary) {
- return salary * 4;
- },
- 'A': function(salary) {
- return salary * 3;
- },
- 'B': function(salary) {
- return salary * 2;
- },
- 'C': function(salary) {
- return salary * 1;
- }
- } //定义自动选择算法的方法
- var calculateBonus = function(level, salary) {
- return strategies[level](salary);
- }
- //使用
- calculateBonus('S', 9000); //36000
- calculateBonus('B', 5000); //10000
例子 2:表单验证
- //定义验证算法的策略对象
- var strategies = function() {
- isEmpty: function(value, errorMsg) {
- if (value = '') {
- return errorMsg;
- }
- }
- outRangle: function(value, min, max, errorMsg) {
- if (value.length > max || value.length < min) {
- return errorMsg;
- }
- }
- isSame: function(oldValue, newValue, errorMsg) {
- if (newValue !== oldValue) {
- return errorMsg;
- }
- }
- isMobile: function(value, errorMsg) {
- if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
- return errorMsg;
- }
- }......
- }
也可不定义以下的 Validator 类,直接在触发失去焦点事件时调用 strategies 对象的属性方法来验证当前 input 项
- //定义Validator
- var Validator = function() {
- this.cache = [];
- }
- Validator.prototype.add = function(elem, rules) {
- var self = this;
- for (var i = 0,
- 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(elem.value);
- strategyAry.push(errorMsg);
- return strategies[strategy].apply(elem, strategyAry);
- })
- })(rule)
- }
- }
- Validator.prototype.start = function() {
- for (var i = 0,
- func; func = this.cache[i++]) {
- var errorMsg = func();
- if (errorMsg) {
- return errorMsg;
- }
- }
- }
使用:
- var validator = new Validator();
- validator.add(elem.userName, [{
- strategy: 'isEmpty',
- errorMsg: '用户名不能为空'
- },
- {
- strategy: 'outRangle:6:12',
- errorMsg: '用户名长度为6-12位'
- }]);......
- var errorMsg = validator.start();......
附:参数配置对象 假如有一个函数 foo(a,b,c,d,e,f...),它的参数很多,这样的函数不好使用,参数不好记!比较好的方法是使用一个对象来包含这些参数,然后再把该对象传递给函数,函数再对这个对象的属性做处理
- var prop = {
- a: 55,
- b: 'ss',
- c: function() {...
- }
- d: {
- x: 1,
- y: 2
- }...
- }
- foo(prop);
这样一来,使用函数时就不必去记参数顺序了,只需记住参数对象的几个属性名字就行,不易出错 参考文献: 《JavaScript 模式》 《JavaScript 设计模式与开发实践》
来源: http://www.phperz.com/article/17/0531/332323.html