js | 青训营笔记

凤之兮原
112 阅读6分钟

这是我参与【第四届青训营】笔记创作活动的第 3 天，今天学习了 javaScript 的一些知识点

1、如何写好 js 代码

各司其职：让 HTML、CSS和 JavaScript 职能分离

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

过程抽象：应用函数式编程思想

1.1 各司其职

来看如下的一个题目：

写一段 js，控制一个网页，让它支持浅色和深色两个浏览模式。

有如下几个版本的代码：

版本一 简单粗暴

const btn = document.getElementById('modeBtn')
btn.addEventListener('click', e => {
    const body = document.body
    if(e.target.innerHTML === 'light') {
        body.style.backgroundColor = 'black'
        body.style.color = 'white'
        e.target.innerHTML = 'dark'
    } else {
        body.style.backgroundColor = 'white'
        body.style.color = 'black'
        e.target.innerHTML = 'light'
    }
})

讨论以上版本一的代码，如果让你来进行优化，你会怎么做呢？

版本二 把样式逻辑抽离至 class 属性

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
        body.className = 'night';
    } else {
        body.className = '';
    }
});

讨论以上版本二的代码，这一版相比较第一版好在哪里呢？你还有其他的方案嘛？

版本三 纯 CSS 实现

<input id="modeCheckBox" type="checkbox">
<div class="content">
    <header>
        <label id="modeBtn" for="modeCheckBox"></label>
        <h1>深夜食堂</h1>
    </header>
    <main>
        <div class="pic">
            <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
        </div>
        <div class="description">
            <p>
                这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
                眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
            </p>
        </div>
    </main>
</div>

#modeCheckBox {
    display: none;
}

#modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
}

由以上这些代码，我们可以进行思考

image.png

  • HTML / CSS / JS 应该各司其职
  • 避免不必要的由 js 来直接操作样式
  • 可以用 class 来表示状态
  • 纯展示类交互寻求 零JS方案

1.2 组件封装

1.2.1 什么是组件？

组件是指 Web 页面上抽出来一个个包含模板（HTML）、功能（JS）以及样式（CSS）的单元。

好的组件应该具备封装性、正确性、扩展性以及复用性

1.2.2 题目

知道了组件的定义，那我们来看这道经典的题目：

如果让你用原生js来实现一个电商网站的轮播图，你会怎么实现？

解答：

对于轮播图来说，它是一个典型的列表结构，因此我们可以使用无序列表ul来实现

HTML 结构如下：

<div id="my-slider" class="slider-list">
    <ul>
    	<li class="slider-list__item--selected">
    		<img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
   		</li>
        <li class="slider-list__item">
        	<img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
        </li>
        <li class="slider-list__item">
        	<img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
        </li>
        <li class="slider-list__item">
        	<img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
        </li>
    </ul>
</div>

那我们的 CSS 样式应该要怎么写呢？

解答

  • 我们可以通过 CSS 的绝对定位来让图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用 CSS 的 transition

当然除了这个做法外，还有其他的做法。例如

  • 让图片在一行显示（可以使用 display: flex ），

  • 然后把多余的省略（overflow: hidden）

  • 通过 CSS 或者 js 来操作图片的移动。

#my-slider{
    position: relative;
    width: 790px;
}

.slider-list ul{
    list-style-type:none;
    position: relative;
    padding: 0;
    margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
}

.slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;
}

重点来啦，我们的 javaScript 应该要怎么做才能有良好的封装行为呢？

解答：

我们可以尝试把整个轮播图逻辑抽离成一个对象，

class Slider{
    constructor(id){
        this.container = document.getElementById(id);
        this.items = this.container
            .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    getSelectedItem(){
        const selected = this.container
        .querySelector('.slider-list__item--selected');
        return selected
    }
    getSelectedItemIndex(){
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    slideTo(idx){
        const selected = this.getSelectedItem();
        if(selected){ 
            selected.className = 'slider-list__item';
        }
        const item = this.items[idx];
        if(item){
            item.className = 'slider-list__item--selected';
        }
    }
    slideNext(){
        const currentIdx = this.getSelectedItemIndex();
        const nextIdx = (currentIdx + 1) % this.items.length;
        this.slideTo(nextIdx);
    }
    slidePrevious(){
        const currentIdx = this.getSelectedItemIndex();
        const previousIdx = (this.items.length + currentIdx - 1)
        % this.items.length;
        this.slideTo(previousIdx);  
    }
}

const slider = new Slider('my-slider');
slider.slideTo(3);

这样在我们的 Slider 对象上就有了这几个方法

  • getSelectedItem() 获取被选中的元素
  • getSelectedItemIndex() 获取被选中元素的下标
  • slideTo() 跳转到执行元素
  • slideNext() 跳转到下一个元素
  • slidePrevious() 跳转到上一个元素

我们在原来 HTML 结构上加上以下代码用来控制图片的移动

<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
</div>

然后我们使用自定义事件 slide 来解耦

const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)

总结：基本方法

  • 结构设计
  • 展现效果
  • 行为设计
    • API ( 功能 )
    • Event（ 控制流 ）

思考：这些代码是否有改善空间呢？

如果让你来对他进行重构，你会怎么做呢？

重构：插件化

解耦

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系
function pluginController(slider){
    const controller = slider.container.querySelector('.slide-list__control');
    if(controller){
        const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
        controller.addEventListener('mouseover', evt=>{
            const idx = Array.from(buttons).indexOf(evt.target);
            if(idx >= 0){
                slider.slideTo(idx);
                slider.stop();
            }
        });

        controller.addEventListener('mouseout', evt=>{
            slider.start();
        });

        slider.addEventListener('slide', evt => {
            const idx = evt.detail.index
            const selected = controller.querySelector('.slide-list__control-buttons--selected');
            if(selected) selected.className = 'slide-list__control-buttons';
            buttons[idx].className = 'slide-list__control-buttons--selected';
        });
    }  
}

重构：模块化

解耦

  • 将 HTML 模块化，更易于扩展

image.png

class Slider{
    constructor(id, opts = {images:[], cycle: 3000}){
        this.container = document.getElementById(id);
        this.options = opts;
        this.container.innerHTML = this.render();
        this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
        this.cycle = opts.cycle || 3000;
        this.slideTo(0);
    }
    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>`;
    }
    ...
}

组件框架

抽象

  • 将组件通用模型抽象出来

image.png

class Component{
    constructor(id, opts = {name, data:[]}){
        this.container = document.getElementById(id);
        this.options = opts;
        this.container.innerHTML = this.render(opts.data);
    }
    registerPlugins(...plugins){
        plugins.forEach(plugin => {
            const pluginContainer = document.createElement('div');
            pluginContainer.className = `.${name}__plugin`;
            pluginContainer.innerHTML = plugin.render(this.options.data);
            this.container.appendChild(pluginContainer);

            plugin.action(this);
        });
    }
    render(data) {
        /* abstract */
        return ''
    }
}

组件封装总结

  • 组件设计的原则： 封装性、正确性、扩展性、复用性
  • 实现组件的步骤：结构设计、展现效果、行为设计
  • 三次重构
    • 插件化
    • 模块化
    • 抽象化（组件框架）

再次思考：这个组件是否还有改进空间呢？

1.3 过程抽象

1.3.1 什么是过程抽象

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

image.png

来看一个例子

1.3.2 题目

操作次数限制

  • 一些异步交互
  • 一次性的 HTTP 请求
const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', (evt) => {
        const target = evt.target;
        target.parentNode.className = 'completed';
        setTimeout(() => {
            list.removeChild(target.parentNode);
        }, 2000);
    });
});

如果多次点击，会多次触发 remove 事件，因此会有以下报错

img

所以对于这个情况，我们可以使用 高阶函数 去解决。

1.3.3 高阶函数

案例一：Once 多次调用函数，只会触发一次

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

img

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

案例二：HOF

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

img

 function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

1.3.4 常用的高阶函数

  • Once
  • Trottle（节流）
  • Debounce（防抖）
  • Consumer / 2
  • Iterative

思考和讨论：

  • 我们为什么要使用高阶函数
    • 方便以后维护和扩展
    • 代码会更加简洁

img

1.4 编程范式

命令式与声明式

img

命令式

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);

总结

以上就是一些 javaScript 的进阶内容，这些知识在我们的日常开发中起着十分重要的作用，因此我们得好好理解，慢慢让自己的代码质量变得越来越高！

avatar
文章
阅读
粉丝