當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

紧跟月影大佬的步伐，一起来学习如何写好JS（上）

發布時間：2023/12/4 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了紧跟月影大佬的步伐，一起来学习如何写好JS（上）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如何寫好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 代碼：

現在，大家可以來看下上面的這個版本。大家可以先想一下，這個版本會有什么問題呢？如果是你來優化，你會怎么做呢？

對于以上這段代碼，主要存在以下幾點問題：

樣式和行為沒有分離，即沒有做到職責分離
全局污染
復用性不強
封裝性不好

針對以上所存在的問題，我們來進行第二版本的優化。具體如下：

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 代碼：

大家可以看到，我們盡可能的把樣式都抽離到 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 。具體代碼如下：

從上面的代碼中我們可以看到，輪播圖是一個典型的列表結構，我們可以使用無序列表 <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 。具體如下圖：

除了以上內容以外，細心的小伙伴應該已經發現，下面切換部分還有幾個小圓點，我們稱它為控制流。那對于這些控制流來說，又該怎么設計呢？

請看下面代碼：

同時呢，我們還需要使用自定義事件來進行解耦。如下所示：

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.indexconst 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 代碼：

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.indexconst 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 ，如下圖所示：

現在我們想要做的是，點擊左邊的 ? 后，當前點擊的那一行將會進行消失操作。那么這個時候，很多小伙伴可能會像下面這樣進行操作：

但是呢，因為我們每點一次就會去觸發 removeChild 一次，所以 removeChild 在第一次觸發完之后， Dom 節點就會消失。所會出現以下報錯：

因此呢，我們提供了以下幾種解決方案，來解決上面這個問題。

（3）Once

為了能夠讓 “只執行一次” 的需求覆蓋不同的事件處理，我們可以將這個需求剝離出來。這個過程我們稱為過程抽象。先來看一張圖：

我們可以把過程抽象視為開門，開門的動作視為一個過程，那開完門后呢，我們應該把外面的東西給放進來了對吧。

外面的東西一旦進來后，那么就是把整個過程給抽象出來了，這就是過程抽象。

因此呢，針對以上代碼，我們來封裝一個 once 函數，并將其運用到上面的這個場景中。具體代碼如下：

（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設計

總結

以上是生活随笔為你收集整理的紧跟月影大佬的步伐，一起来学习如何写好JS（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：毒神绝物理方向加点
下一篇：紧跟月影大佬的步伐，一起来学习如何写好J