Javascript编程的三大原则｜青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天，欢迎各位大佬批评指正。

各司其责

在前端开发过程中，一般会遵循各司其责的重要原则。也就是让HTML、CSS和Javascript职能分离，各自负责具体的功能。避免不必要的用JS直接操作样式；并且纯展示的交互效果追求零JS方案。

HTML：负责页面的基本骨架与结构、页面的内容信息。
CSS：负责页面的样式、动画等设计。比如颜色、背景、主题等。
JS：负责页面的交互逻辑。比如事件、后端交互等。

比如：更换主题的例子

• 一般常规的解决方式是将不同主题的样式封装为一个类，然后通过监听鼠标点击事件，判断主题类型并利用JS更改标签的class来实现不同主题的切换。代码示例
• 零JS方案：可以完全由CSS来实现同样的效果。利用HTML单选框的自带的点击事件，通过选择器绑定。可以实现更好的动态效果和更少的性能开销。代码示例

组件封装

组件封装是前端所有主流框架都追求的优化方向。相比于模块化而言，组件封装是指将页面的一部分进行封装，便于开发过程的复用。也就是把HTML、CSS和Javascript同时封装形成一个组件。传送门-实现轮播图

过程抽象

过程抽象是一般用于处理局部细节的一些方法，也是函数式编程思想的基础应用。一般在复杂逻辑开发过程中，提倡用高阶函数（HOF）：输入和输出都是函数，无副作用，不改变外部环境，常作为函数修饰器使用。 比如once函数——让一个函数只执行一次：

function once(fn) {
    // outer scope
    return function (...arg) {
        //inner scope
        if(fn) {
            const res = fn.bind(this,...arg);
            fn = null;
            return res;
        }
    }
}

在这里相当于使用到了一个闭包，传入的函数fn在outer scope中形成闭包，返回的函数内部inner scope改变的是外部闭包的变量，保证只执行一次。

其他的常见的高阶函数还有：防抖、节流等...