这是我参与「第五届青训营 」伴学笔记创作活动的第 一 天

JavaScript 编码原则

各司其责

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

下面有三段代码。

• 版本1

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

• 版本2

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

• 版本3

#modeCheckBox{
display: none;
}

#modeCheckBox:checked + .content 
{
background-color: black;
color:  white;
transition: all 1s;
}
<header>
<label id-""modeBtn" for="modeCheckBox"></label-<h1>深夜食堂</h1>
</header>

• 版本一通过id来操作元素样式
• 版本二通过控制class来改变样式
• 版本三通过纯css代码来实现样式变换

组件封装

总结:基本方法

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

重构：插件化

解耦

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

示例代码

function pluginController(slider){
const controller = slider.container.querySelector(if(controller){
const buttons = controller.querySelectorAll( '.s1controller.addEventListener( 'mouseover', evt=>{const idx = Array.from(buttons).indexof(evt.taif(idx =0){
slider.slideTo(idx);slider.stop();
}
});
controller.addEventListener( 'mouseout", evt>{slider.start(;
});

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( '.Sthis.cycle = opts.cycle l3000;
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>;}

这里的情况就是将slider从大组件中抽取出来单独成一个小组件，使用依赖注入的方式将小组件和大组件联系起来。

过程抽象

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

示例

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

高阶函数

• HOF 以函数作为参数以函数作为返回值常用于作为函数装饰器 HOF
• Once
• Throttle
• Debounce
• Consumer/2
• lterative

编程范式

• 命令式

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

• 声明式

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

声明式代码更加简洁