如何写好JavaScript

写好JS的一些原则

各司其责：让HTML、CSS和JavaScript职能分离
组件封装：好的UI组件具备正确性、扩展性、复用性
过程抽象：应用函数式编程思想

各司其责

CSS负责控制样式，JS负责控制逻辑，Html负责控制结构。虽然JS也可以通过代码控制CSS和HTML但是不应当这样开发，这样会让其职责混乱。会给以后的维护和开发带来更多的麻烦。

在开发时应当避免不必要的由JS直接操作样式。可以用class来表示状态，纯展示类交互寻求零JS方案。

组件封装

结构设计
展现结果
行为设计

组件是指web页面上抽象出来一个个包含模板HTML、功能和样式的单元。好的组件具备封装性、正确性、扩展性、复用性。例如设计一个滚动海报的组件，如果想要对组件的样式进行改变，除了改变样式外还需要改变js代码。这样的组件就不是十分灵活。

这种情况就需要进行插件化解耦，将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。插件应当减少HTML的数量实现Html的模板化，js通过id的方式与Html进行绑定。

但是插件的模板化并不是最终的目标，我们需要将组件的通用模型抽象出来。通过继承的方式来实现构建。

过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

高阶函数

Once：为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为抽象。

function once(fn){
    return function(...args){
        if(fn){
            const ret=fn.apply(this,args)
            fn=null
            return ret;
        }
    }
}

HOF

以函数为参数
以函数为返回值
常用于作为函数装饰器

命令式例子

onclick = function(evt){
    if(evt.target.className==='on'){
        evt.target.clasName='off'
    }else{
        evt.target.className='on'
    }
}

声明式例子

toggle(...actions){
    return function(...args){
        let action=actions.shift()
        action.push(action)
        return action.apply(this,args)
    }
}

onclick = function(evt){
    evt => evt.target.className="off",
    evt=>evt.target.className="on"
}

JS编码原则 | 青训营笔记

如何写好JavaScript