如何寫好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設計
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300498.html
標籤：其他