Javascript设计模式-00-说明
JavaScript 设计模式 – 说明
说明
看完《JavaScript 设计模式与开发实践》后,对一系列文章有了较大幅度的更改。
简介
设计模式,是一套被反复利用、思想成熟、经过分类和无数实践设计经验的总结,使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性,设计模式使代码开发真正工程化。
代码重构
模式和重构之间有着一种与生俱来的关系。从某种角度来看,设计模式的目的就是为许多重 构行为提供目标。
在实际开发中,除了使用设计模式重构之外,还有一些常见的容易忽略的细节,这些细节也是帮助我们达到重构目标的重要手段
1. 提炼函数
如果一个函数过长,并且在这段函数中有一段代码可以被独立出来,那么我们最好把这些代码放进另外一个独立的函数中
好处
- 避免出现超大函数
- 独立出的函数有助于代码复用
- 独立出的函数更容易被覆写
- 独立出的函数如果命名良好可以起到注释的作用
2. 合并重复的条件片段
如果一个函数体内有一些条件分支语句,而这些条件分支语句散布了一些重复代码,那么就有必要合并去重
3. 把条件分支语句提炼成函数
复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致 一个庞大的函数
// 原代码var getPrice = function( price ){ var date = new Date(); if (date.getMonth() >= 6 && date.getMonth() <= 9){ // 意图不够明确return price * 0.8; } return price; };// 改造后var isSummer = function(){ var date = new Date(); return date.getMonth() >= 6 && date.getMonth() <= 9; };var getPrice = function( price ){ if (isSummer()){ // isSummer 语义明确 还可以起到注释的作用return price * 0.8; }return price; };
4. 合理使用循环
在函数体内,如果有些代码实际上负责的是一些重复性的工作,那么合理利用循环不仅可以 完成同样的功能,还可以使代码量更少
// 原代码var createXHR = function(){var xhr; // 重复执行 try-catchtry{xhr = new ActiveXObject('MSXML2.XMLHttp.6.0'); } catch(e) { try{ xhr = new ActiveXObject('MSXML2.XMLHttp.3.0'); } catch(e) { xhr = new ActiveXObject('MSXML2.XMLHttp'); } } return xhr;};// 重构后var createXHR = function(){var versions= ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];for (var i = 0; i < versions.length; i++) {try{ return new ActiveXObject(versions[i]); } catch(e) { } }}
5. 提前让函数退出代替嵌套条件分支
对于阅读代码的人来说,嵌套的 if、else 语句相比平铺的 if、else,在阅读和理解上更加困难,实际上,如果对函数的剩余部分不感兴趣,就应该立刻退出,引导阅读者不去看当前没有用的 else 片段
var del = function( obj ){if (obj.isReadOnly){ return; // 执行到这步后,下边代码不需要查看直接跳出}if (obj.isFolder){return deleteFolder( obj ); }if (obj.isFile){return deleteFile( obj ); }};
6. 传递对象参数代替过长的参数列表
参数多于三个,可以把参数都放在一个对象内,然后把对象作为参数传递
7. 尽量减少函数参数数量
在实际开发中,向函数传递参数不可避免,但我们应该尽量减少函数接收的参数数量,这样可以减少出错的概率,比如,函数实际使用的值是两个参数计算后的值,除此之外,这两个参数没有再被引用,那么我们可以在函数外计算,然后将结果作为参数传入函数中
8. 合理使用三目运算符
简单的条件分支可以使用三目运算符节省代码,但是如果条件分支逻辑复杂,载使用三目运算符,就会增加代码可读性
9. 合理使用链式调用
类似于 jQuery 中的链式调用方法,可以增加代码阅读的逻辑性,但是不利于调试
10. 分解大型类
11. 用 return 退出多重循环
会遇到这种情况,在函数体内有一个两重循环语句,我们需要在内层循环中判断,当达到某个临界条件时 退出外层的循环
// 原代码var func = function(){var flag = false;var idx = null;for ( var i = 0; i < 10; i++ ){for ( var j = 0; j < 10; j++ ){if ( i * j >30 ){ flag = true; break; }}if ( flag === true ){ idx = i;break; }}return idx;}// 重构后var func = function(){for ( var i = 0; i < 10; i++ ){for ( var j = 0; j < 10; j++ ){if ( i * j >30 ){ return i;}}}}
文章列表
- javascript设计模式 – 设计原则
- JavaScript设计模式–高阶函数
- Javascript 设计模式 - 01 - 原型模式
- Javascript 设计模式 - 02 - 单例模式
- Javascript 设计模式 - 03 - 建造者模式
- Javascript 设计模式 - 04 - 工厂模式
- Javascript 设计模式 - 05 - 外观模式
- Javascript 设计模式 - 06 - 代理模式
- Javascript 设计模式 - 07 - 观察者模式(发布订阅模式)
- Javascript 设计模式 - 08 - 策略模式
- Javascript 设计模式 - 09 - 命令模式
- Javascript 设计模式 - 10 - 迭代器模式
- Javascript 设计模式 - 11 - 职责链模式
- Javascript 设计模式 - 12 - 适配器模式
- Javascript 设计模式 - 13 - 模板方法
- Javascript 设计模式 - 14 - 组合模式
- Javascript 设计模式 - 15 - 享元模式
- Javascript 设计模式 - 16 - 中介者模式
- Javascript 设计模式 - 17 - 装饰者模式
- Javascript 设计模式 - 18 - 状态模式
参考
https://www.zhihu.com/people/jamesSyk/pins/posts
《JavaScript设计模式》读后感 觉很复杂
深入理解JavaScript系列
Javascript设计模式-00-说明相关推荐
- 201911-202004《JavaScript设计模式》读书笔记
阅读<JavaScript设计模式>(2009),电子版资源: 链接:https://pan.baidu.com/s/1smWE-Xcwsapn65jnlw8cvg 提取码:hkke &l ...
- 深入 JavaScript 设计模式,从此有了优化代码的理论依据
点击蓝字 关注「前端小苑」 精品技术文章,热门资讯第一时间送达 一.设计模式综述 我想很多和我一样的朋友小时候都看过<天龙八部>,里面的女主角王语嫣是个武学博才,但自己却毫无实战.比如段誉 ...
- 《JavaScript设计模式》——11.2 一切只因跨域
本节书摘来自异步社区<JavaScript设计模式>一书中的第11章,第11.2节,作者:张容铭著,更多章节内容可以访问云栖社区"异步社区"公众号查看 11.2 一切只 ...
- 《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式
在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方面,继承这种功能复 ...
- JavaScript设计模式与开发实践——JavaScript的多态
"多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的 ...
- 16种JavaScript设计模式(中)
简介 上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式 单例模式 策略模式 代理模式 迭代器模式 发布订阅模式 命令模式 组合 ...
- javascript 设计模式(一)
1.为什么要深入学习Javascript? 用户对页面的美观性,易用性要求越来越高 Javascript+HTMl5+CSS3将是未来客户端技术的潮流 学好JS有助于更好学习JS库.JS框架 开发自己 ...
- JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
- JavaScript 设计模式基础(二)
JavaScript 设计模式基础(一) 原型模式 在以类为中心的面向对象编程语言中,类和对象的关系就像铸模和铸件的关系,对象总是从类中创建.而原型编程中,类不是必须的,对象未必从类中创建而来,可以拷 ...
- 《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探 系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读 面向对象的js 静态类型:编译时便已确定变量的类型 ...
最新文章
- 两种重要的图——Snapshot diagram UML diagram
- SQLserver添加主键
- 【读书笔记】代理模式代码(C#)
- 顶级赛事!2021 CCF大数据与计算智能大赛强势来袭~
- win7系统查看硬盘序列号步骤
- OMV搭建系列教程[5] – 安装Aria2
- 计算机网络显示空白,Win10以太网属性网络选项中显示为空白解决方法
- 《嵌入式 – GD32开发实战指南》第3章 GPIO流水灯的前世今生
- freesurfer recon-all并行运算parallel
- 【分享】参加一个0元小白理财训练营开营第1天的学习笔记
- bugku 我永远喜欢穹妹
- vue 项目中的打包配置
- C语言/C++常见习题问答集锦(四十三) 之持之以恒
- SkyWalking调研与初步实践
- C++设计模式之策略模式(行为型模式)
- 浏览器Cookie的设置与获取
- JLink_Windows_V612e安装 02
- 天猫某个商品秒杀js精简
- 基于python的火车票订票系统的设计与实现_Python实现12306火车票抢票系统
- 通过snmp协议自动化获取服务器硬件信息-python
热门文章
- 图像识别技术原理和神经网络的图像识别技术
- ios12越狱自签需要联网_从越狱的iOS切换到Android? 这是你需要知道的
- python获取鼠标指针坐标_JS获取鼠标指针的位置(坐标)
- python如何识别图片中的文字_如何利用Python识别图片中的文字
- 字节教育开辟新业务线,推出“闪电搜题”App可拍题和自习
- AtCoder Beginner Contest 160 A ~ E
- 华为手机上的网上邻居怎么用_华为手机网络邻居功能
- 3t中文 studio_mongodb,Studio 3T | MongoDB中文社区
- Rplidar A1/A2使用及Hector_SLAM建图
- 分布式机器学习主要笔记