JavaScript书写规范 | 青训营笔记

chunchun2020
78 阅读4分钟

JavaScript书写规范 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天 与大家分享JavaScript的书写规范知识，欢迎大家批评指正！

1.jpg

写好JS的原则

  • 各司其职

让HTML,CSS,JavaScript职责分离

  • 组件封装

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

  • 过程抽象

各司其职

举例：实现HTML页面白天黑夜切换

- 版本一：

1.代码

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 = '🌞';
  }
});

2.演示

单击鼠标前

image.png

单击鼠标后

image.png

3.不足分析

没有将CSS与JS分离✖

如上述body.style.backgroundColor="black"等，以JS控制CSS

- 版本二

1.代码

JS代码

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

2.演示

单击图标前 image.png

单击图标后

image.png

3.改进之处

实现了JS和CSS的分离，各司其职✔(^▽^)

- 版本三

1.代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <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>
</body>
</html>

CSS代码

body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  height: 100%;
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

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

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

2.演示

单击图标前

image.png

单击图标后

image.png

3.改进之处

零JS，仅用HTML和CSS即可控制页面✔✔✔(๑•̀ㅂ•́)و✧

- 总结

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

组件封装

基本方法

  • 结构设计

  • 展现效果

  • 行为设计

    1. API （功能）
    2. Event （控制流）

缺点

构造函数过长，非常复杂，需要优化

重构：插件化

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

优点：容易控制不同部分，一处改动不需要大量修改代码

重构：模板化

将HTML模板化，更易于扩展

通过调用方法的方式传递参数，控制页面，简化了HTML文件代码

t0196498fb325ccb123.png

组件框架：抽象

将组件抽象为通用的组件模型，简化组件设计，可以扩展设计子组件、父组件，渲染组件

2.png

总结

  • 组件设计的原则：封装性、正确性、扩展性、复用性

  • 实现组件的步骤：结构设计、展现效果、行为设计

  • 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

过程抽象

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

编程范式：高阶函数

高阶函数：Once

例子：操作次数限制

如点击按钮，希望只执行一次，防止点击多次报错，可以将过程抽象为once函数

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

3.png

高阶函数:HOF

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

4.png

常用高阶函数

  • Once
  • Throttle
  • Debounce：自动保存，鼠标跟随效果
  • Consumer：延时调用
  • Iterative：批量操作

使用函数的好处

非纯函数：测试的难度、成本高，可维护性较差

纯函数：输入输出确定，测试简单

编程范式：命令式与声明式

命令式：命令“机器”如何去做事情 (how) ，这样不管你想要的是什么(what) ，它都会按照你的命令实现。

声明式：告诉“机器”你想要的是什么(what) ，让机器想出如何去做 (how)。 更强的可扩展性

5.png

编程范式：总结

  • 过程抽象 / HOF / 装饰器
  • 命令式 / 声明式
avatar
文章
阅读
粉丝