JavaScript ｜青训营写好JS的一些原则各司其职、组件封装、过程抽象。各司其职 HTML/CSS/JS各司

写好JS的一些原则

各司其职、组件封装、过程抽象。

各司其职

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

// 1.直接改样式
body.style.backgroundColor='black';
body.style.color='white';
e.target.innerHTML='(';

// 2.通过改变class
if(body.className!='night') {
  body.className='night';
} else{
  body.className='';
}

// 3.纯css实现
#modeCheckBox {
  display:none;
}
#modeCheckBox:checked+.content {
  background-color:black;
  color:white;
  transition:all 1s;
}

<input id="modeCheckBox" type="checkbox">
<div class="content">
  <label id="modBtn" for="modeCheckBox"></label> //相当于点击checkbox
</div>

组件封装

组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。

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

用absolute将图片重叠在一起。
轮播图切换的状态使用修饰符。
切换动画用transition
行为：API

class Slider {
   getSelectedItem() //返回当前图片
   getSelectedItemIndex() //返回当前图片的序号
   slideTo() //翻到指定序号的图片
   slideNext() //下一页
   slidePrevious() //上一页
   }

行为：控制流

// 左右箭头和跳转小圆点
<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)

基本方法

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

重构

插件化

解耦

将HTML模板化，更易于扩展

抽象化(组件框架)

将组件通用模型抽象出来

过程抽象

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

高阶函数

HOF

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

常用：

Once
Throttle 节流函数
Debounce 防抖函数
Consumer
iterative

编程范式

命令式： 强调怎么做

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=>x*2;
list.map(double);

代码质量优化

数据抽象➡过程抽象➡异步+函数式

function isPowerOfFour(num) {
  num=parseInt(num);

  return num>0&&
         (num&(num-1)===0)&&
		 (num& 0xAAAAAAAAAAAAA)===0;
}

function isPowerOfFour(num) {
  num=parseInt(num).toString(2);
  
  return /^1(?:00)*$/.test(num);
}

总结

学JS任重道远，打基础很重要，建议看ES6打好基础。本节课程感觉较难，得掌握部分JS知识才能看懂。

JavaScript ｜ 青训营