高质量javascript

javascript特性：面向对象，无类，原型 可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档) 减少全局对象，传参访问全局对象 单 var 模式，忘记 var 时的副作用(显式声明的全局变量无法用 delete 删除) (不)扩充内置原型

switch 模式

每个 ca 和 switch 对齐(这里不考虑花括号相关的缩进规则) 每个 ca 中的代码整齐缩进 每个 ca 都以 break 作为结束 避免连续执行多个 ca 语句块(当省略 break 时会发生),如果你坚持认为连续 执行多 ca 语句块是最好的方法,请务必补充文档说明,对于其他人来说,这种情况看起来是错误的。 以 default 结束整个 switch, 以确保短笑话即便是在找不到匹配项时也会有正常的结果 避免隐式类型转换（推荐使用===和!===） typeof null===’object’；instanceof 检测引用值 避免使用 eval()（用 new function()来代替，它是局部函数作用域，var 定义的变量不会自动变成全局变量） 使用 parint()进行数字转换，总是指定第二个参数(parint(year, 10)) 编码风格（缩进，花括号，左花括号位置，空格） 命名规范（构造函数大驼峰 函数和方法小驼峰 变量名小写下划线分隔 常量全大写） 注释jsdoc生成文档，eslint检查，相互评审

直接量和构造函数

1.对象直接量，json,正则表达式直接量
1.强制new,避免使用其他的内置构造函数:string()、number()、boolean()以及不同种类的
error()构造器,that=this

函数

函数特性：是一等对象，可以有属性和方法，声明提前，提供局部变量作用域 回调模式：作用域，监听（addeventlistener），超时(ttimeout) iife,memoization 柯里化

对象创建模式

命名空间方式

优点:

- 避免了自身代码的命名冲突,- 避免了同一个页面上自身代码和第三方代码的冲突

缺点

- 代码量稍有增加;在每个函数和变量前加上这个命名空间对象的前缀,会增加代码量,增大文件大小- 该全局实例可以被随时修改- 命名的深度嵌套会减慢属性值的查询

模块模式（命名空间模式+iife+私有和特权成员模式+依赖声明模式）

myapp.utilities.module = (function (app, global) {return (function(){})()}(myapp, this))

沙箱模式

sandbox.modules = {};sandbox.modules.dom = function (box) {};sandbox('dom', 'event', function (box) {    sandbox('ajax', function(box) {    });});

链式调用模式

优点：节省代码量，易读性

缺点：调用这样写的代码会更困难

myobj.method1("hello").method2().method3("world").method4();

代码复用模式

类式继承1：默认模式
缺点：既继承了(父对象)“自己的属性”,也继承了原型中的属性。大部分情况下你可能并不需要“自己的属性”,因为它们更可能是为实例对象添加的,并不用于复用。

function inherit(c, p) {    c.prototype = new p();}

类式继承2:借用构造函数
缺点：无法继承原型

function child(a, c, b, d) {    parent.apply(this, arguments);}

类式继承3:借用并设置原型(1,2的缺点修复，接近java)
缺点：父构造函数被调用了两次,所以不是很高效

function child(a, c, b, d) {    parent.apply(this, arguments);}child.prototype = new parent();

类式继承4:共享原型
缺点：修改原型影响所有的继承

function inherit(c, p) {   c.prototype = p.prototype;}

类式继承5:临时构造函数

  function inherit(c, p) {      var f = function () {};      f.prototype = p.prototype;      c.prototype = new f();  }

原型继承(现代继承模式)

var child = object.create(parent);

借用方法

 //call() example notmyobj.dostuff.call(myobj, param1, p2, p3); // apply() example notmyobj.dostuff.apply(myobj, [param1, p2, p3]);

设计模式

单例

var obj = {myprop: 'my value'};

工厂模式

var corolla = carmaker.factory('compact');var solstice = carmaker.factory('convertible');var cherokee = carmaker.factory('suv');corolla.drive(); // "vroom, i have 4 doors"solstice.drive(); // "vroom, i have 2 doors"cherokee.drive(); // "vroom, i have 17 doors"

迭代器

var element;while (element = agg.next()) {// do something with the element ...console.log(element);}

装饰器

var sale = new sale(100); // the price is 100 dollarssale = sale.decorate('fedtax'); // add federal taxsale = sale.decorate('cdn'); // format using cdnsale.getprice(); // "cdn$ 105.00"

策略模式

var data = {    first_name: "super",    last_name: "man",    age: "unknown",    urname: "o_o"};validator.config = {    first_name: 'isnonempty',    age: 'isnumber',    urname: 'isalphanum'};validator.validate(data);if (validator.harrors()) {    console.log(validator.messages.join("\n"));}

外观模式

var myevent = {// ...stop: function (e) {    // others    if (typeof e.preventdefault === "function")        e.preventdefault();    if (ty怎么调鼠标灵敏度peof e.stoppropagation === "functio安慰人的暖心句子n")        e.stoppropagation();    // ie    if (typeof e.returnvalue === "boolean")         e.returnvalue = fal;    if (typeof e.cancelbubble === "boolean")         e.cancelbubble = true;}// ...};

代理模式

scroll_per_cond=throttle(scroll,1000)

中介者

counter=function(){    var i=0;    return function(){        return ++i;    }}counter()

观察者模式

paper.subscribe(joe.drinkcoffee);paper.subscribe(joe.sundayprenap, 'monthly');paper.daily();paper.monthly();

dom 和中的模式

减少dom访问操作次数

避免在环境中访问 dom 将 dom 引用赋给本地变量,然后操作本地变量 当可能的时候使用 lectors api 遍历 html collections 时缓存 length

事件处理:隔离应用逻辑,不要分发event对象

var myapplication={    handleclick(event){        this.showpopup(event.clientx,event.clienty)    },    showpopup:function(x,y){    }}b.addeventlistener('click', function(event){    myapplication.handleclick(event)}, fal);

事件委托

y.delegate('click', myhandler, "#click-wrap", "button");

加载策略

script 元素放到页面的尾部 http 分块 动态<script>元素 延迟加载 按需加载 预加载 javascript ui松耦合 浏览器嗅探：特性判断

design patterns in javascript es6 github

adapter builder bridge chaining command composite composite iterator compound (u some design patterns together to solve a problem) decorator facade factory it国庆文案对祖国的祝福erator lazy module module revealed multi-inheritance es6 mvc namespace nullify obrver prototype proxy singleton state strategy tem不懂装懂plate try-finally

参考资料

《javascript设计模式》
《编写可维护的javascript》
https://github.com/tcorral/de…