这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
写好JS的一些规则
- 各司其责（让HTML，CSS，JS职能分离）
- 组件封装（好的UI组件具有正确性，扩展性，复用性）
- 过程抽象（应用函数式编程思想）
各司其责
eg. 深夜食堂
注意：
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
基本方法：
- 结构设计
- 展现效果
- 行为设计（包括
API【功能】Event【控制流】）
下面我们有一个封装组件的实例供大家赏析：
该组件实现了几张广告图片的轮播，在编程的过程中使用了解耦的方式，先将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系，这一步叫插件化。接着将HTML模板化，更易于扩展。最后搭建组件框架，将组件通用模型抽象出来。其逻辑图如下所示：
通过上面这个例子，我们总结如下：
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
应用函数式编程思想
- 用来处理局部细节控制的一些方法
- 函数时编程思想的基础应用
高阶函数
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
Once
为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象。
function {
return function(...args) {
if(fn) {
const ret = fn.apply(this.args);
fn = null;
return ret;
}
}
}
Throttlr(节流函数)
编程范式
命令式编程语言：面向过程、面向对象
声明式编程语言：逻辑式、函数式
JS代码两种不同风格
/*要求给数组每个数值*2*/
/*命令式*/
for(int i = 0; i < list.length; ++ i)
{
mapl.push(list[i]) *2;
}
/*声明式*/
const double = x => x*2;
list.map(double);
Leftpad 事故背景引入
Leftpad事件
- NPM模块粒度
- 代码风格
- 代码质量、效率
代码比较
原代码
function leftpad(str, len, ch) {
str = String(str);
var i = -1;
if(!ch && ch != 0) ch = '';
len = len - str.length;
while(++i < len)
{
str = ch + str;
}
}
优化
function leftpad(str, len, ch) {
str = "" + str;
const padLen = len - str.length;
if(padLen <= 0){
return str;
}
return ("" + ch).repeat(padLen) + str;
}
JavaScript 代码质量优化之路
js性能相关的常见问题:
事件处理质量差: 正确使用事件处理程序可以通过减少调用堆栈的深度来提高JavaScript的性能。
无组织的代码 JavaScript是松散的，这有利有弊。 代码中缺乏组织可能导致资源分配不足。 这在很大程度上阻碍了JavaScript的性能。
低效的迭代 迭代过程需要很长时间。例如，带宽受限的移动用户将需要等待更长的时间来渲染对象。
js性能优化建议
修剪HTML 通过丢弃像
和这样的标签是可能的。
批处理DOM更改 批处理DOM转换，以防止重复出现屏幕渲染。
学习异步编程的方法 JavaScript应用程序需要对大量api进行多次内部调用来获取数据。 每个函数都需要中间件，因为JavaScript是单线程的。 同步组件有时会锁定整个应用程序 。使用JavaScript异步特性，可能会无意中利用外部库来恢复异步干扰调用。 这会降低JavaScript的性能。 相反，应该在代码中使用异步api，尤其是在关键的性能部分。
