如何写好JavaScript | 青训营笔记

Melan
77 阅读5分钟

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

一、什么才是好的JavaScript代码?

1、写好JS的原则

image.png

image.png

image.png

  • 各司其职，职能分离
  • 组件封装，扩展复用
  • 过程抽象，函数编程

2、应用举例

image.png

以上的图片，用JS实现白天模式和夜晚模式的切换

版本一

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

这个JS代码直接用JS代码去控制CSS样式，很显然违反了各司其职的原则，而且也不能够复用

版本二

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

这个版本就更加简洁了，运用JS修改选择器，整体替换主题样式，实现更加巧妙和灵活。但是还是使用了JS直接去控制CSS

版本三

#modeCheckBox {
    display: none;
  }

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

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

这个版本则是采用了纯CSS的写法控制样式。利用checkbox的选中与未选中的状态来切换样式。

3、总结

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

二、组件封装

1、什么是组件

组件是指Web页面上抽出来一个个包含模版 (HTML)、功能 (JS) 和样式 (CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。

2、各个部分（以轮播图为例）

结构：HTML

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。

表现：CSS

  • 使用CSS绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符(modifier)
  • 轮播图的切换动画使用CSS transition

行为：JS

定义一系列的函数实现轮播图各个功能，并实现解耦。

反思

以上我们具体实现了一个特定的轮播图，但是并未将其封装为一个组件以供日后或者他人使用

3、重构

插件化

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系

模板化

将HTML模板化，更易于扩展

组件框架

将组建模型抽象出来

4、总结

  • 组件设计的原则:
    • 封装性
    • 正确性
    • 扩展性
    • 复用性
  • 实现组件的步骤:
    • 结构设计
    • 展现效果
    • 行为设计
  • 三次重构
    • 插件化
    • 模板化
    • 抽象化

三、过程抽象

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

函数式编程思想的基础应用

例子--操作次数限制

一些异步交互

  • 什么是异步

异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。

一次性HTTP请求

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

使用高阶函数

使用promise函数

Promise 是现代 JavaScript 中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）。

/* 使用promise进行ajax的封装操作*/

function sendAjaxByPromise(){
    return new Promise((resolve,reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.open('get','url','true');
        xhr.onreadystatechange = () =>{
            if(xhr.readyState===4){
                if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
                    const res = JSON.parse(xhr.responseText);
                    console.log(res);
                    console.log("请求成功");
                }else{
                    console.log("请求失败");
                }
            }
        };
        xhr.send();
    })
}
sendAjaxByPromise();

四、编程范式

命令式

命令式编程就是关注计算执行步骤，如何执行，注重过程。

函数式

函数式编程，主要强调如何通过函数的组合变化来解决问题，关注结果。

声明式

**不再指示计算机如何工作，而是指明确希望得到的结果。这种编程方式会改变我们习以为常的命令式编程相比，会让我们的轻松许多。 **

总结

JS学会还不行，如何写好更是一门大学问

参考

MDN文档，掘金社区文章，青训营内容

avatar
文章
阅读
粉丝