如何写好JS - 三大原则
- 🌂序言
- 一、☂️什么才是好的JS代码？
- 二、🧵 写好JS的一些原则
- 1. 各司其职👋
- （1）定义
- （2）例子阐述
- 2. 组件封装🤏
- （1）定义
- （2）例子阐述：轮播组件
- （3）轮播组件重构：插件化
- （4）轮播组件重构：模板化
- （5）轮播组件重构：组件框架
- （6）总结
- 3. 过程抽象👌
- （1）定义
- （2）例子阐述
- （3）Once
- （4）高阶函数
- 1）高阶函数是什么
- 2）常用高阶函数
- （5）思考和讨论
- （6）编程范式
- 1）命令式与声明式
- 2）例子展示
- 三、🎩结束语
- :) 往期推荐
🌂序言
对于前端来说，js 可以说是非常常见的脚本语言之一了。前端工程师写的最多的代码，可能就是 js 代码了。可很多时候，我们都只是 CV 工程师，只管把代码写完跑起来了就行，但是呢，殊不知存在的一个问题是，我们一个稍微疏忽的编写，就很容易导致程序不知不觉的bug出现。
因此呢，写好 js 代码，必须要遵循到几大原则：各司其职、组件封装和过程抽象。
前段时间参加了字节的青训营，有幸听到月影大佬💁♂️的直播课。那么接下来，我们就跟着月影大佬的步伐，来了解一下如何写好 JS ~
一起来学习吧~⛱️
一、☂️什么才是好的JS代码？
在真正讲解写好 JS 的三大原则之前，我们先来谈论一个话题，什么才是好的 JS 代码呢？
对于好的 js 代码来说，应该要遵循的是以下三个原则。分别是：
- 各司其职
- 组件封装
- 过程抽象
那么下面，我们将依据这三个原则，来进行展开细述。
二、🧵 写好JS的一些原则
1. 各司其职👋
（1）定义
写前端的小伙伴们应该知道，前端为什么要分成 HTML 、 CSS 和 JS 。那其实实际上，在前端中， HTML 负责结构， CSS 负责表现，而 JS 负责行为。如下图所示：
（2）例子阐述
我们先来看一道题目，假设现在要写一段 JS ，控制一个网页，让它只会浅色和深色两种浏览模式。如下图所示：
如果是你来实现，你会怎么做呢？
Now，我们先来看第一个版本。
先来看 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>
<header>
<button id="modeBtn">🌞</button>
<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>
</body>
</html>
现在来看 css 代码：
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
}
div.pic img {
width: 100%;
}
#modeBtn {
font-size: 2rem;
float: right;
border: none;
background: transparent;
}
最后，我们来看 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 = '🌞';
}
});
现在，大家可以来看下上面的这个版本。大家可以先想一下，这个版本会有什么问题呢？如果是你来优化，你会怎么做呢？
对于以上这段代码，主要存在以下几点问题：
- 样式和行为没有分离，即没有做到职责分离
- 全局污染
- 复用性不强
- 封装性不好
针对以上所存在的问题，我们来进行第二版本的优化。具体如下：
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>
<header>
<button id="modeBtn"></button>
<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>
</body>
</html>
CSS 代码：
body, html {
width: 100%;
height: 100%;
max-width: 600px;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
transition: all 1s;
}
div.pic img {
width: 100%;
}
#modeBtn {
font-size: 2rem;
float: right;
border: none;
outline: none;
cursor: pointer;
background: inherit;
}
body.night {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn::after {
content: '🌞';
}
body.night #modeBtn::after {
content: '🌜';
}
JS 代码：
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
大家可以看到，我们尽可能的把样式都抽离到 css 当中，这样让职责更加的分离，代码效果更好。
那看到这里，可能有的小伙伴就会像，有没有可能所有的内容都放在 css 当中呢，而不要去用到 JS 来实现。答案是肯定的。接下来我们来看第三个版本。
进一步优化，我们来看第三个版本。 HTML 代码与上面一样保持不变，没有 JS 代码。下面附上新的 CSS 代码：
body, html {
width: 100%;
height: 100%;
max-width: 600px;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
box-sizing: border-box;
}
.content {
padding: 10px;
transition: background-color 1s, color 1s;
}
div.pic img {
width: 100%;
}
#modeCheckBox {
display: none;
}
/* 当选中时，给其再加个content类 */
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn {
font-size: 2rem;
float: right;
}
#modeBtn::after {
content: '🌞';
}
/* 当选中时，对content类的内容进行修改 */
#modeCheckBox:checked + .content #modeBtn::after {
content: '🌜';
}
大家可以看到，修改到最后版本的时候，是不是就只剩下 HTML 和 CSS 了呢，是不是简洁了许多了呢。
现在，我们来对以上这个例子做个小结。深夜食堂例子结论如下👇
HTML/CSS各司其职；- 应当避免不必要的使用
JS来直接操作样式； - 可以用
class来表示状态； - 纯展示类交互寻求零
JS解决方案。
到这里，相信大家对上面这个例子也有了一定的了解。
同时，上面代码已放到在线网站 code.h5jun 上，大家根据自身需求在下面点击链接进行获取哦~
👉深夜食堂：版本一
👉深夜食堂：版本二
👉深夜食堂：版本三
2. 组件封装🤏
（1）定义
组件是指 Web 页面上抽出来的一个个包含模板（ HTML ）、功能（ JS ）和样式（ CSS ）的单元。好的组件具备封装性、正确性、扩展性和复用性。
（2）例子阐述：轮播组件
用原生 JS 写一个电商网站的轮播图，应该怎么实现呢？
大家先来看下我们想要实现的轮播组件的效果。具体如下图：
那么现在，依据上面这个效果图，我们来进行代码设计。
首先是结构设计： 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/t01abe3351db853eb3.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/t01331ac159b58f5478.jpg" />
</li>
<li class="https://slider-list__item">
<img src="htttps://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg" />
</li>
</ul>
</div>
从上面的代码中我们可以看到，轮播图是一个典型的列表结构，我们可以使用无序列表 <ul> 元素来进行实现。
继续，我们来对它的展现效果 css 进行设计。具体代码如下：
#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 {
/* 使用 css 绝对定位将图片重叠再同一个位置 */
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
/* 轮播图切换的状态使用修饰符 */
.slider-list__item--selected {
/* 轮播图的切换动画使用css transition */
transition: opacity 1s;
opacity: 1;
}
对于以上所设计的 css 来说，主要有以下几个特点：
- 使用
css绝对定位将图片重叠在同一个位置； - 轮播图切换的状态使用修饰符（modifier）；
- 轮播图的切换动画使用
CSS transition。
下面我们来对它的行为也就是 JS 进行设计。具体代码如下：
class Slider {
constructor(id) {
this.container = document.getElementById(id);
this.items = this.container
.querySelectorAll('.slider-list__item, .slider-list__item--selected');
}
getSlectedItem() {
const selected = this.container
.querySelector('.slider-list__item--selected');
return selected;
}
getSlectedItemIndex() {
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.getSlectedItemIndex();
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);
}
}
JS 其实就是用来设计一些行为 API ，那对于 API 设计来说，它应该尽量保证原子操作，且职责要单一，满足灵活性。
下面给出上面这段 JS 代码中的 API 。具体如下图：
除了以上内容以外，细心的小伙伴应该已经发现，下面切换部分还有几个小圆点，我们称它为控制流。那对于这些控制流来说，又该怎么设计呢？
请看下面代码：
<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>
同时呢，我们还需要使用自定义事件来进行解耦。如下所示：
const detail = { index: idx }
const event = new CustomEvent('slide', { bubbles: true, detail })
this.container.dispatchEvent(event)
以上代码在线网址👉轮播组件第一版本
现在，我们先来总结一下上面这个基本方法的结构组成，如下所示：
- 结构设计
HTML； - 展现效果
CSS； - 行为设计
JS，分别包含API(功能)和Event(控制流)。
好了，到这里，我们的轮播组件基本上也就完成啦！但是呢，同学么看上面的代码，是否有发现存在什么样的问题呢？
在上面的几段代码设计中，主要存在以下问题：
- 构造函数太复杂
- 可扩展性和灵活性相对较小
（3）轮播组件重构：插件化
上面这段代码明显是还不够好的，那如果是让你来重构这个轮播图组件，你又会怎么做呢？
现在，我们首先来对这个组件进行解耦。所谓解耦，就是：
- 将控制元素抽取成插件；
- 插件与组件之间通过依赖注入的方式来立联系。
如下图所示：
从上图中我们可以知道，将向左向右滚动，以及底下的点击切换按钮，这三个控制元素给抽取出来形成插件。
抽离后的三个插件分别进行封装，封装结果如下：
class Slider{
constructor(id, cycle = 3000){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = cycle;
}
registerPlugins(...plugins){
plugins.forEach(plugin => plugin(this));
}
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';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
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);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler)
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
// 封装控制器函数
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';
});
}
}
// 封装左滑函数
function pluginPrevious(slider){
const previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
// 封装右滑函数
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();
});
}
}
const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
以上代码在线网址👉轮播组件解耦第一步
（4）轮播组件重构：模板化
上面我们初步将控制元素进行插件化。细心的小伙伴可能已经发现，上面的图片数据，是固定的，我们如果想要滚动四张，那就得四个 <li> 元素，那如果这个时候是一百张呢，我们也要去写100个 <li> 来进行控制吗？
答案肯定是否定的。因此，我们继续解耦操作，通过将 HTML 进行模板化，使其更容易扩展。如下图所示：
我们通过将不固定数量的内容以动态的方式进行绑定，最终使该组件的扩展性更强。附上代码：
HTML 代码：
<div id="my-slider" class="slider-list"></div>
CSS 代码：
#my-slider{
position: relative;
width: 790px;
height: 340px;
}
.slider-list ul{
list-style-type:none;
position: relative;
width: 100%;
height: 100%;
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;
}
.slide-list__control{
position: relative;
display: table;
background-color: rgba(255, 255, 255, 0.5);
padding: 5px;
border-radius: 12px;
bottom: 30px;
margin: auto;
}
.slide-list__next,
.slide-list__previous{
display: inline-block;
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height:50px;
text-align: center;
font-size: 24px;
line-height: 50px;
overflow: hidden;
border: none;
background: transparent;
color: white;
background: rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0;
transition: opacity .5s;
}
.slide-list__previous {
left: 0;
}
.slide-list__next {
right: 0;
}
#my-slider:hover .slide-list__previous {
opacity: 1;
}
#my-slider:hover .slide-list__next {
opacity: 1;
}
.slide-list__previous:after {
content: '<';
}
.slide-list__next:after {
content: '>';
}
.slide-list__control-buttons,
.slide-list__control-buttons--selected{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 0 5px;
background-color: white;
cursor: pointer;
}
.slide-list__control-buttons--selected {
background-color: red;
}
JS 代码：
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>`;
}
registerPlugins(...plugins){
plugins.forEach(plugin => {
const pluginContainer = document.createElement('div');
pluginContainer.className = '.slider-list__plugin';
pluginContainer.innerHTML = plugin.render(this.options.images);
this.container.appendChild(pluginContainer);
plugin.action(this);
});
}
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';
}
let item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
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);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const pluginController = {
render(images){
return `
<div class="slide-list__control">
${images.map((image, i) => `
<span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
`).join('')}
</div>
`.trim();
},
action(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';
});
}
}
};
const pluginPrevious = {
render(){
return `<a class="slide-list__previous"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
};
const pluginNext = {
render(){
return `<a class="slide-list__next"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list__next');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
};
const slider = new Slider('my-slider', {images: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
通过对数据内容的抽离，这样组件的扩展性是不是就更加友好了呢。
以上代码在线网址👉轮播组件解耦第二步
（5）轮播组件重构：组件框架
最后，我们来对整个组件的框架进行抽象。所谓抽象，即将通用的组件模型给抽象出来。如下图所示：
下面附上 JS 代码：
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 ''
}
}
class Slider extends Component{
constructor(id, opts = {name: 'slider-list', data:[], cycle: 3000}){
super(id, opts);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = opts.cycle || 3000;
this.slideTo(0);
}
render(data){
const content = data.map(image => `
<li class="slider-list__item">
<img src="${image}"/>
</li>
`.trim());
return `<ul>${content.join('')}</ul>`;
}
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';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
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);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const pluginController = {
render(images){
return `
<div class="slide-list__control">
${images.map((image, i) => `
<span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
`).join('')}
</div>
`.trim();
},
action(slider){
let controller = slider.container.querySelector('.slide-list__control');
if(controller){
let buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
controller.addEventListener('mouseover', evt=>{
var 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;
let selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
});
}
}
};
const pluginPrevious = {
render(){
return `<a class="slide-list__previous"></a>`;
},
action(slider){
let previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
};
const pluginNext = {
render(){
return `<a class="slide-list__next"></a>`;
},
action(slider){
let previous = slider.container.querySelector('.slide-list__next');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
};
const slider = new Slider('my-slider', {name: 'slide-list', data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
大家可以看到，一开始我们先抽象出 Component ，之后呢，让 Slider 去继承 Component ，这样就更完美地把逻辑给抽离出来了。
（6）总结
现在，我们来对上面一整个组件所进行的一系列重构操作做一个归纳。具体如下👇
- 组件设计的原则： 封装性、正确性、扩展性、复用性；
- 实现组件的步骤： 结构设计、展现效果、行为设计；
- 三次重构： 插件化、模板化、抽象化（组件框架）。
3. 过程抽象👌
（1）定义
- 所称抽象，指的是用来处理局部细节控制的一些方法；
- 过程抽象，是一种思维方法，也是一种编程范式；
- 函数式编程思想的基础应用。
如下图所示：
由上图，我们可以把过程抽象视为函数的输入和输出。
（2）例子阐述
假设我们现在要做一个 to do list ，如下图所示：
现在我们想要做的是，点击左边的 ✅ 后，当前点击的那一行将会进行消失操作。那么这个时候，很多小伙伴可能会像下面这样进行操作：
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);
});
});
但是呢，因为我们每点一次就会去触发 removeChild 一次，所以 removeChild 在第一次触发完之后， Dom 节点就会消失。所会出现以下报错：
因此呢，我们提供了以下几种解决方案，来解决上面这个问题。
（3）Once
为了能够让 “只执行一次” 的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。先来看一张图：
我们可以把过程抽象视为开门，开门的动作视为一个过程，那开完门后呢，我们应该把外面的东西给放进来了对吧。
外面的东西一旦进来后，那么就是把整个过程给抽象出来了，这就是过程抽象。
因此呢，针对以上代码，我们来封装一个 once 函数，并将其运用到上面的这个场景中。具体代码如下：
function once(fn) {
return function (...args) {
if(fn) {
const set = fn.apply(this, args);
fn = null;
return ret;
}
};
}
button.addEventListener('click', once((evt) => {
const target = evt.target;
target.parentNode.className = 'completed';
setTimeout(() => {
list.removeChild(target.parentNode);
}, 2000);
}));
（4）高阶函数
1）高阶函数是什么
依据于上面过程抽象的思想，目前我们以它为衍生的还有高阶函数。
所谓高阶函数，即以函数作为参数或以函数作为返回值的一种函数。还有另外一种情况是，如果你既以函数作为参数，又以函数作为返回值，那么这种类型的称之为函数装饰器。
下面我们来看一些常见的高阶函数。
2）常用高阶函数
- Once一次函数：只执行一次的函数。
- Throttle节流：将频繁执行变为每隔一段时间执行一次。
- Denounce防抖：将频繁执行变为最后一次执行。
- Consumer：用来消费数据。（Consumer补充）
- Iterative：迭代器。
上面高阶函数的标题中已对应放入相应的例子，小伙伴们可以对应点击进行学习，这里不再一一进行举例。
（5）思考和讨论
现在我们来思考一个问题，为什么要使用高阶函数呢？
事实上，在一个系统中，纯函数越多时，这个系统的可维护性是越好的。
所谓的纯函数，如果输入的值是唯一的，且输出的值也是唯一的，那它就是纯函数。比如：
function add(x, y) {
return x + y;
}
add(1, 2); // 3
那么非纯函数呢，就是输入和输出的值不是唯一的，那它就不是纯函数。比如：
let x = 10;
function foo() {
return x++;
}
function bar() {
return x * 2;
}
foo();
foo();
bar();
bar();
假设我们稍微调整了函数的顺序，那么它的执行结果都是不一样的，这种就称为了非纯函数。
之所以要使用纯函数的原因在于，它能使得我们代码的可维护性和可扩展性变得更好。
（6）编程范式
1）命令式与声明式
将上面的高阶函数归类起来，我们可以把它总结为命令式与声明式。如下图所示：
在实际的应用当中，我们可以说 javascript 既有命令式也有声明式。
对于命令式编程来说，它指的是命令机器如何去做事情 (how) ，这样不管你想要的是什么 (waht) ，它都会按照你的命令实现。
而对于声明式编程来说，它旨在告诉机器你想要的是什么 (what) ，让机器想出如何去做 (how) ，这种方式的可扩展性会更高。
如下图所示：
2）例子展示
下面给出几个例子，供大家体验实际应用中的效果~
👉Toggle - 命令式
👉Toggle - 声明式
👉Toggle - 三态
以上三个例子所描述的是关于在不同状态下颜色的切换效果，大家可以点击链接进行查看~
三、🎩结束语
在上面的这篇文章中，我们讲解了如何写好 JS 的三大原则，分别是各司其职、组件封装以及过程抽象。同时呢，还学习了高阶函数和编程范式，以及其中的一些用法。
到这里，关于写好 JS 的三大原则讲解就结束啦！不知道大家是否对 JS 又有一个新的认识呢？
如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛
😃 往期推荐
👉值得关注的HTML基础知识
👉css还只停留在写布局？10分钟带你探索css中更为奇妙的奥秘！
👉【青训营】- 前端只是切图仔？来学学给开发人看的UI设计