设计模式:

通过封装、继承、多态、组合等技术的反复使用,提炼出一些可重复使用的面向对象设计技巧。

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设计模式基础的更多相关文章

  1. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  2. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  3. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  4. Node.js系列基础学习----安装,实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  5. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  6. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  7. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  8. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  9. js 设计模式-接口

    js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...

随机推荐

  1. 【转载】TabLayout 源码解析

    原文地址:https://github.com/Aspsine/AndroidSdkSourceAnalysis/blob/master/article/TabLayout%E6%BA%90%E7%A ...

  2. 可持久化线段树(cf1080F)

    大佬博客 https://www.cnblogs.com/zinthos/p/3899565.html 题目:https://codeforces.com/problemset/problem/108 ...

  3. Bzoj1486/洛谷P3199 最小圈(0/1分数规划+spfa)/(动态规划+结论)

    题面 Bzoj 洛谷 题解(0/1分数规划+spfa) 考虑\(0/1\)分数规划,设当前枚举到的答案为\(ans\) 则我们要使(其中\(\forall b_i=1\)) \[ \frac{\sum ...

  4. web worker 实践

    1.web worker 在浏览器中JavaScript主线程与UI渲染线程是互斥的.即UI渲染线程会阻塞JavaScript线程的运行. web worker允许创建工作线程,并可以与JavaScr ...

  5. 求高精度幂(poj1001)

    Description Problems involving the computation of exact values of very large magnitude and precision ...

  6. 数据库SQL归纳(三)

    数据查询功能 单表查询 选择若干列 1. 指定列 SELECT 列名称 FROM 表名称 2. 全部列 SELECT * FROM 表名称 3. 经过计算的列 SELECT Sname, 2019-S ...

  7. BZOJ 1040:[ZJOI2008]骑士(环套外向树+树形DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1040 [题目大意] 给出环套外向树森林,求最大权独立集. [题解] 我们对于每个连通块 ...

  8. python基础之数据类型,交互,格式化输出,基本运算符

    数据类型 1.什么是数据类型? 变量值才是我们存的数据,所以数据类型指的是变量值的种类 2.为何数据要分类? 变量值是用来保存现实世界中的状态的,那么针对不同的状态,就应该用不同类型的数据去表示 3. ...

  9. 计算gcd Exercise07_14

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算gcd * */ public class Exercise07_14 ...

  10. Atom | 编辑器Atom的使用小结

    文章目录 windows环境下 Atom工具使用apm Packages 推荐阅读 常用快捷键 windows环境下 Atom工具使用apm 在 Atom 的安装路径下找到 apm ,复制路径: 将该 ...