FE.BASE-前端设计模式笔记-解决方案库-SegmentFault思否
程序员文章站
2022-07-03 15:49:39
高质量javascript
javascript特性:面向对象,无类,原型
可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档)
减少全局对象,传参访问全局对象
单...
高质量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 分块 动态<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参考资料
《javascript设计模式》
《编写可维护的javascript》
https://github.com/tcorral/de...
上一篇: 九代酷睿核心注入雷神!前所未有的16.6寸游戏本了解下
下一篇: 红魔6R对比iQOO7哪个值得买?
推荐阅读
-
JavaScript设计模式精华摘抄(持续更新...)-考拉阅读前端团队-SegmentFault思否
-
??JavaScript设计模式实践:18份笔记、例子和源码??-godbmw.com-SegmentFault思否
-
js面试之14种设计模式(6)-前端小而全的知识归纳-SegmentFault思否
-
FE.BASE-前端设计模式笔记-解决方案库-SegmentFault思否
-
JavaScript设计模式精华摘抄(持续更新...)-考拉阅读前端团队-SegmentFault思否
-
??JavaScript设计模式实践:18份笔记、例子和源码??-godbmw.com-SegmentFault思否
-
js面试之14种设计模式(6)-前端小而全的知识归纳-SegmentFault思否
-
FE.BASE-前端设计模式笔记-解决方案库-SegmentFault思否