这是我参与「第五届青训营 」伴学笔记创作活动的第 3天
如何写好JS（上）
1、写好JS的一些原则
各司其职：让HTML、CSS和JavaScript职能分离。
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零JS 方案
组件封装：好的UI组件具备正确性、扩展性、复用性。
-
组件设计的原则: 封装性、正确性、扩展性、复用性。
-
实现组件的步骤: 结构设计、展现效果、行为设计
-
三次重构
插件化
模板化
抽象化 (组件框架)
补充：组件是指Web贝面上按出来一个个包含版(HTML) 、功能(US) 和样式(CSS) 的单元，好的件具备到装、正璃性、扩额性、复用经。
过程抽象：应用函数式编程思想。
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
Once：为了能够让”只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
function once(fn) {
return function(...args) (
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
}
HOF
- 以函故作为参数
- 以通数作为返回值
- 常用于作为通数装饰番
function HOFO(fn) {
return function( ...args) {
return fn.apply(this, args);
}
}
编程范式
命令式与声明式
let list = [1, 2,3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++){
mapl.push(list[i] * 2);
}
let list = [1, 2, 3, 4];
const double = x = x *2;
list.map(double);
例子
- Toggle-命令式
- Toggle-声明式
- Toggle- 三态
总结
- 过程抽象/HOF/装饰器
- 命令式/声明式
如何写好JS（下）
当年的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;
}
return str;
}
重构一下
- 代码更简洁
- 效率提升
function leftpad(str, len, ch){
str = ""+ str;
const padLen = len - str.length;
if(padLen <= 0) {
return str;
}
return (“"+ch).repeat(padLen)+str;
}
总结
JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
