跟着月影学JavaScript（上） | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

前端的发展、更新迭代是很快的，虽然入门容易，但是要一直走下去，就需要持续不断的学习。只有勇于挑战自己舒适区外的东西，才能不断进步。

写好js的一些原则

1. 各司其职

html负责结构; css负责样式; js负责行为，尽量让这三者的职能分离

具体一些细节

• 尽量不要写内联样式

• 对于在页面中需要变化的样式，使用不同类名对应不用状态样式，可以用js切换类名实现，也可以用css伪类实现

2. 组件封装

好的UI组件具备封装性,正确性,扩展性,复用性。

实现组件的步骤：结构设计, 展现设计, 行为设计。

组件三次重构：插件化, 模板化, 抽象化。

针对我自己的知识盲区来说，重点学习**扩展性**。

（1）在封装的组件类中写一个 扩展插件API，在这个api中接收需要的插件，并依次注入进组件中

registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));    
}

（2）写插件

function pluginNext(slider){
    const next = slider.container.querySelector('.slide-list__next');
    if(next){
        next.addEventListener('click', evt => {
            slider.stop();
            slider.slideNext();
            slider.start();
            evt.preventDefault();
        });
    }
}

(3) 注册插件

const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

做好了js插件之后，可以根据想要的功能选择对应的插件，但是这样的话就又出现了一些问题，就是不需要的功能对应的HTML结构还在页面中显示，那么为了解决这个问题，就需要将功能对应的HTML结构模板化，放入相应功能的插件中，在需要使用的时候渲染出来

(4) 基本结构在组件类中作为一个API渲染

render(){
    const images = this.options.images;
    const content = images.map(image => `
    <li class="slider-list__item">
        <img src="${image}">
    </li>
`.trim());
    return `<ul>${content.join('')}</ul>`;
}

模板化之后进一步优化就是抽象化

(5) 将组件通用模型抽象出来（组件框架）

3. 过程抽象

• 用来处理局部细节控制的一些方法

• 函数是编程思想的基础应用

使用高阶函数，参数为函数返回值也为函数可以用作装饰器

命令式和声明式编程范式，声明式比命令式有更强的可扩展能力

总结

在写js的代码的时候要注意以上三个原则，相同的语言不同的人写出来是不同的感觉，一开始作为初学者我们总是会从最简单的方式开始写，只有简单的方式写好后才能继续由浅入深，化繁为简，将代码越写越好。