这是我参与[第四届青训营]笔记创作活动的第三天。

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

写好JS的一些原则：

各司其职

让HTML、CSS和JavaScript职能分离。

2.组件封装

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

3.过程抽象

应用函数式编程思想

样例：切换日间/夜间背景：

点击太阳图标进行切换

版本一：

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

版本二：

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

版本一直接去操作CSS,版本二则是操作状态。

版本三：

<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/t0120cc2085
</div>
<div class="description"><p>
这是一间营业时间从午夜十二点到早上七点的特殊食堂。眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前</p>
</div>
</main>
</div>



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

样例总结：

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

组件封装：

例子：轮播图

1、结构：HTML

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

<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list _item--selected">
<img src="https://p5.ssl.qhimg.com/t0119c746></li>
<li class="slider-list_ _item">
<img src="https://p4.ssl.qhimg.com/t01adbe3></li>
<li class="slider-list_item">
<img src="https://p2.ssl.qhimg.com/t01645cd5></li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01331ac1></li>
</ul>
</div>

2、表现：CSS

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

#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{
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
.slider-list___item--selected{
transition: opacity 1s;
opacity: 1;
}

3、行为：JS 行为:API

Slider
+getSelectedltem(）
+getSelectedltemlndex()
+slideTo()
+slideNext()
+slidePrevious()

class Slider{
constructor(id){
this.container = document.getElementById( id);this.items = this.container
.querySelectorAll( ..slider-list__item, .slider-1}
getselectedItem(){
const selected = this.container
-querySelector('.slider-list___item--selected')return selected
}
getSelectedItemIndex(){
return Array.from(this.items).index0f(this.getSe}
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(){

总结:基本方法

结构设计
展现效果
行为设计
- API(功能)
- Event(控制流)

重构:插件化

解耦

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

总结

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

过程抽象

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

高阶函数

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

function once(fn) {
return function(...args){
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
    }
  }
}

高阶函数 HOF

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

常用的高阶函数：

Once
Throttle
Debounce
Consumer/2
Lterative

编程范式

命令式
声明式

命令式强调怎么做：

let list =[1，2，3，4];
let mapl =[];
for(let i =; i< list.length; i+t){
mapl.push(list[i] * 2);
}

声明式更加简介:

let list = [1，2，3，4];
const double = x→>×*2;
list.map(double);

例子

Toggle-命令式
Toggle-声明式
Toggle-三态

命令式：

switcher.onclick = function(evt){
if(evt.target.classNane ==='on'){
evt.target.className= 'off';
}else{
evt.target.className = 'on';
 }
}

声明式：

function togglei...actions){
return functionl(...args){
let action = actions.shift();
actions.pushiaction);
return action.apply(this, args;
  }
}
switcher.onclick = togglet{
evt =>evt.target.className = 'off',
evt =>evt.target.classNarme = 'on'
};

总结

·过程抽象/HOF/装饰器
·命令式/声明式

JavaScript|青训营笔记

这是我参与[第四届青训营]笔记创作活动的第三天。

写好JS的一些原则：

样例总结：

组件封装：

总结

过程抽象