脚本宝典收集整理的这篇文章主要介绍了FE.BASE-前端设计模式、编码与重构笔记，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
高质量Javascript
- Javascript特性：面向对象，无类，原型
- 可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档)
- 减少全局对象，传参访问全局对象
- 单 var 模式，忘记 var 时的副作用(显式声明的全局变量无法用 delete 删除)
- (不)扩充内置原型
-
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) {
});
});
-
链式调用模式
-
代码复用模式
-
类式继承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访问操作次数
-
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 分块
- 动态<script>元素
- 延迟加载
- 按需加载
- 预加载 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对象
- 引入断言
-
简化函数调用
-
处理概括关系
- 字段上移
- 函数上移
- 构造函数本体上移
- 函数下移
- 字段下移
- 提炼子类
- 提炼超类
- 提炼接口
- 折叠继承体系
- 塑造模板函数
- 以委托取代继承
- 以继承取代委托
-
大型重构
- 梳理并分解继承体系
- 将过程化设计转化为对象设计
- 将领域和表述/显示分离
- 提炼继承体系
编码经验
参考资料
《Javascript设计模式》
《编写可维护的Javascript》
《重构——改善既有代码的设计》
《代码大全2》
Design-Patterns-in-Javascript
以上是脚本宝典为你收集整理的FE.BASE-前端设计模式、编码与重构笔记全部内容，希望文章能够帮你解决FE.BASE-前端设计模式、编码与重构笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。