JavaScript设计原则与编程技巧

本文源于本人关于《JavaScript设计模式与开发实践》(曾探著)的阅读总结。想详细了解具体内容建议阅读该书。

1. 单一责任原则(SRP)

定义:一个对象(方法)只做一件事情。
设计模式中的SRP
  • 代理模式:图片预加载,讲预加载的功能放在代理对象中。
  • 迭代器模式;appendDiv本来只负责渲染div,但是还承担了遍历的效果,这里使用迭代器把遍历功能提取出,渲染作为一个回调函数。
  • 单例模式:将管理单例的功能提出。
  • 装饰者模式:装饰者来执行额外的功能。
优缺点:
  • 优点:降低了单个类或者对象的复杂度,易于维护。
  • 缺点:单个类的复杂度降低,意味着一些对象之间相互联系的复杂度。

2. 最少知识原则(LKP)

定义:一个软件实体应当少地与其他实体发生相互作用(对象,系统,函数,模块,组件等)。

例子:一个将军如果想要挖掘一些散兵坑,不可能先叫少校,再叫上尉,再叫一个军士兵,再布置任务。他应该仅仅叫少校,其他交给别人去做就ok了。

设计模式中的LKP
  • 中介者模式:飞机飞行,引入调度塔。
在封装中体现的LKP:把变量的可见性限制在一个尽可能小的范围内,这个变量对其他不相关模块的影响就越小,被改写发生冲突的概率越小。

3. 开放-封闭原则(OCP)

定义:软件实体(类,模块,函数等),应该是可以扩展的,但不可以被修改。软件编程中最重要的一条原则。
引申:当需要改变一个程序功能时或者给这个程序添加新功能的时候,可以使用增加代码的方式,但是不允许改动源程序。
找出变化的地方:找出程序将要变化的部分,然后把变化封装起来。
  • 放置挂钩:给予子类个性化处理。
  • 使用回调函数:迭代器。
设计模式中的OCP:
  • 发布订阅者模式:当有新的订阅者,发布者的代码不需要进行任何修改。
  • 模版方法模式:子类执行的方法和顺序是不改变的,而具体如何实现是可变的。
  • 策略模式:使用策略和策略类是分开的。
  • 责任链模式:当前执行不了的直接转交给下一个节点,当有改变时增添节点即可。
相对性:
  • 挑选出最容易发生变化的地方,构造抽象封闭变化。
  • 在不可避免发生修改的时候,尽量修改那些相对容易修改的地方。

4. 基础代码重构

  • 合并重复条件判断:
var totalPage = 100;

var paging1 = function(currPage) {
  if(currPage <= 0) {
    currPage = 0;
    jump(currPage);
  } else if(currPage >= totalPage) {
    currPage = totalPage;
    jump(currPage);
  } else {
    jump(currPage);
  }
}

jump函数写了三次,完全可以提炼出来:

var paging2 = function(currPage) {
  if(currPage <= 0) {
    currPage = 0;
  } else if(currPage >= totalPage) {
    currPage = totalPage;
  }
  jump(currPage);
}
  • 把条件分支语句提炼为函数:
var getPrice = function(price) {
  var date = new Date();
  if(date.getMonth() >= 6 && date.getMonth() <= 9) {
    return price * 8;
  }

  return price;
}

function isSummer() {
  return date.getMonth() >= 6 && date.getMonth() <= 9;
}

if中语句含义太弱,直接可以提炼为一个函数,增强语意。

  • 合理利用循环:
    如果要判断几个函数是否能够调用,不要一个一个写if-else,可以直接利用循环:
var funcArr = [func1, func2, func3];

for(var i = 0,func; func = funcArr[i++];){
    if(!func) {
        return;
    }
    func();
    break;
}
  • 提前让函数退出代替嵌套条件分支:
var del = function (obj) {
  var ret;
  if (!obj.isReadOnly) {
    if (obj.isFolder) {
      ret = deleteFolder(obj);
    } else if (obj.isFile) {
      ret = deleteFile(obj);
    }
  }
  return ret;
}

var del = function (obj) {
  if (obj.isReadOnly) {
    return;
  }
  if (obj.isFile) {
    return deleteFile();
  }
  if (obj.isFolder) {
    return deleteFolder();
  }
}
  • 传递对象参数代替太长的参数列表
  • 尽量减少参数数量
  • 不使用多层三目嵌套
  • 合理使用链式调用:不利于调试
  • 如果一个类过大,建议拆分为各个小类
  • 用return退出多层循环
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容