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设计模式基础的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
随机推荐
- Mac OS X 更新JAMF域控配置
在终端执行以下命令即可更新jamf域控配置属性 sudo jamf mcx # 应用被管理的配置信息 sudo jamf policy -trigger # 检查触发器策略 sudo jamf rec ...
- SSH整合错误三连
访问Action错误 ognl.MethodFailedException: Method "add" failed for object com.test3.action.Use ...
- scrapy抓取拉勾网职位信息(三)——爬虫rules内容编写
在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...
- CNN的发展
模型的建立过程: 1959年,Hubel & Wiesel发现动物视觉皮层中的细胞负责检测感受野(receptive fields)中的光线.论文:Receptive fields and f ...
- android 项目 功能 源码 eclipse的
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha eclipse的
- 深度学习的GDB调试命令和经验记录
调试的指令很简单: cd $CAFFE_ROOT, 1. gdb ./build/tools/caffe 2. 设置运行参数 set args train --solver=xxxxsolver.pr ...
- PHP数组和数据结构(下)未完。。。。
1.数组的遍历 (1)each(): 接受一个数组作为参数,返回数组中当前元素的键/值对,并向后移动数组指针到下一个元素的位置 键/值对被返回为带有四个元素的关联和索引混合的数组,键名分别为0,1,k ...
- [转]详解spring 每个jar的作用
spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar, aspects.jar, spring-portlet.jar, and spring-hibernate2. ...
- jquery一键控制checkbox全选,反选,全不选。
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法. Hml的checkbox没有加name,只用了 div 嵌套. 如有更好的方法,望指点!! //全选 ...
- 为什么控制台console.log一个值,总是会多一个undefined
我们发现在浏览器控制台打印东西的时候,末尾总是会莫名其妙多出一个undefined? 这是为什么呢? 大胆猜测一下,应该执行的函数没有返回值,而浏览器默认要打印出执行函数的返回值,才会打印undefi ...