JS设计模式基础

Posted rainbow661314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS设计模式基础相关的知识,希望对你有一定的参考价值。

1.多态(’做什么‘和’谁去做‘分开)

同一操作应用于不同的对象上面,可以产生不同的解释和不同的执行结果(例如不同的动物发出叫声)。将不变的隔离出来。

//对象
var makeSound = function( animal ){
      animal.sound();
}
//不同的操作
var Duck = function(){};

Duck.prototype.sound = function(){
    console.log(‘嘎嘎嘎‘);
}
//不同的行为
var Chicken = function(){};

Chicken.prototype.sound = function(){
    console.log(‘咯咯咯‘);
}

makeSound( new Duck() );
makeSound( new Chicken() );

使用继承得到多态的效果。(一只麻雀在飞,一只喜鹊在飞)可以说 一只鸟在飞。  java使用抽象类继承。

多态与设计模式(命令模式,组合模式,策略模式)

2.封装 (更重要的封装变化,将不变的部分和容易变化的部分分隔出来)

1)封装数据。2)封装实现。(迭代器,each)3)封装类型。4)封装变化。

//封装实现
function $each(jn, fn) {
    var len = jn.length;
    if ("number" === typeof len) {
        for (var i = 0; i < len; i++) {
            try {
                fn(jn[i], i,jn);
            } catch(e) {
                if ($break(e)) {
                    break;
                } else {
                    throw e;
                };
            }
        }
    } else {
        for (var k in jn) {
            try {
                fn(jn[k], k,jn);
            } catch(e) {
                if ($break(e)) {
                    break;
                } else {
                    throw e;
                };
            }
        }
    }
}

 

3.克隆。

Object.create = Object.create || function( obj ){
    var F = function(){};
    F.prototype = obj;
    return new F();
}

4.开放-封闭原则。

放在过多的 if-else里的逻辑抽离出来放函数里。

5.单一原则。

 

以上是关于JS设计模式基础的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)