FE.BASE-前端设计模式、编码与重构笔记

2024-01-01 15:10:22

高质量Javascript

Javascript特性：面向对象，无类，原型
可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档)
减少全局对象，传参访问全局对象
单 var 模式，忘记 var 时的副作用(显式声明的全局变量无法用 delete 删除)
(不)扩充内置原型
switch 模式
- 每个 case 和 switch 对齐(这里不考虑花括号相关的缩进规则)
- 每个 case 中的代码整齐缩进
- 每个 case 都以 break 作为结束
- 避免连续执行多个 case 语句块(当省略 break 时会发生),如果你坚持认为连续
- 执行多 case 语句块是最好的方法,请务必补充文档说明,对于其他人来说,这种情况看起来是错误的。
- 以 default 结束整个 switch,
- 以确保即便是在找不到匹配项时也会有正常的结果
避免隐式类型转换（推荐使用===和!===）
typeof null==='object'；instanceof 检测引用值
避免使用 eval()（用 new Function()来代替，它是局部函数作用域，var 定义的变量不会自动变成全局变量）
使用 parseInt()进行数字转换，总是指定第二个参数(parseInt(year, 10))
编码风格（缩进，花括号，左花括号位置，空格）
命名规范（构造函数大驼峰函数和方法小驼峰变量名小写下划线分隔常量全大写）
注释jsdoc生成文档，eslint检查，相互评审

直接量和构造函数

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

函数
函数特性：是一等对象，可以有属性和方法，声明提前，提供局部变量作用域
回调模式：作用域，监听（addEventListener），超时(setTimeout)
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 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('cdn'); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

策略模式

var data = {
    first_name: "Super",
    last_name: "Man",
    age: "unknown",
    username: "o_O"
};
validator.config = {
    first_name: 'isNonEmpty',
    age: 'isNumber',
    username: 'isAlphaNum'
};
validator.validate(data);
if (validator.hasErrors()) {
    console.log(validator.messages.join("\n"));
}

外观模式

var myevent = {
// ...
stop: function (e) {
    // others
    if (typeof e.preventDefault === "function")
        e.preventDefault();
    if (typeof e.stopPropagation === "function")
        e.stopPropagation();
    // IE
    if (typeof e.returnValue === "boolean") 
        e.returnValue = false;
    if (typeof e.cancelBubble === "boolean") 
        e.cancelBubble = true;
}
// ...
};

代理模式

scroll_per_second=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 引用赋给本地变量,然后操作本地变量
- 当可能的时候使用 selectors 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) }, false);
事件委托
Y.delegate('click', myHandler, "#click-wrap", "button");
加载策略
- script 元素放到页面的尾部
- HTTP 分块
- 动态元素
- 延迟加载
- 按需加载
- 预加载 JavaScript
UI松耦合
浏览器嗅探：特性判断

Design Patterns in Javascript ES6 github

Adapter
Builder
Bridge
Chaining
Command
Composite
Composite Iterator
Compound (Use some design patterns together to solve a problem)
Decorator
Facade
Factory
Iterator
Lazy
Module
Module Revealed
Multi-Inheritance ES6
MVC
Namespace
Nullify
Observer
Prototype
Proxy
Singleton
State
Strategy
Template
Try-Finally

重构

重构目的：改进软件设计，使软件更容易理解，帮助找到bug，提高产出。

重构法则：事不过三，三则重构。添加功能/修补错误/复审代码时重构，重构不如重写简单、项目的最后期限，应该避免重构。

糟糕代码:

重复代码
过长函数
过大的类
过长参数列
发散式变化
霰弹式修改
依恋情结
数据泥团
基本类型偏执
switch惊悚现身
平行继承体系
冗赘类
夸夸其谈的未来星
令人迷惑的暂时字段
过度耦合的消息链
中间人
狎昵关系
异曲同工的类
不完美的库类
纯数据类
被拒绝的遗赠
过多的注释
没有测试

重构建议：

重新组织函数
- 提炼函数
- 内联函数
- 内联临时变量
- 以查询取代临时变量
- 引入解释性变量
- 分解临时变量
- 移除对参数的赋值
- 以函数对象取代函数
- 替换算法
在对象之间搬移特性
- 搬移函数
- 搬移字段
- 提炼类
- 将类内联化
- 隐藏“委托关系”
- 移除中间人
- 引入外加函数
- 引入本地扩展
重新组织数据
自封装字段
以对象取代数据值
将值对象改为引用对象
将引用对象改为值对象
以对象取代数据
复制“被监视数据”
将单向关联改为双向关联
将双向关联改为单向关联
以字面常量取代魔法数
封装字段
封装集合
以数据类取代记录
以类取代类型码
以子类取代类型码
以状态对象取代类型码
以字段取代子类
简化条件表达式
分解条件表达式
合并条件表达式
合并重复的条件片段
移除控制标记
以卫语句取代嵌套条件表达式
以多态取代条件表达式
引入Null对象
引入断言
简化函数调用
函数改名
添加参数
移除参数
将查询函数和修改函数分离
令函数携带参数
以明确函数取代参数
保持对象完整
以函数取代参数
引入参数对象
移除设值函数
隐藏函数
以工厂函数取代构造函数
封装向下转型
以异常取代错误码
以测试取代异常
处理概括关系
字段上移
函数上移
构造函数本体上移
函数下移
字段下移
提炼子类
提炼超类
提炼接口
折叠继承体系
塑造模板函数
以委托取代继承
以继承取代委托
大型重构
梳理并分解继承体系
将过程化设计转化为对象设计
将领域和表述/显示分离
提炼继承体系

编码经验

代码大全2摘录（软件构建核对表）

参考资料

《Javascript设计模式》
《编写可维护的Javascript》
《重构——改善既有代码的设计》
《代码大全2》
Design-Patterns-in-Javascript

码农公寓