跟着月影学 JavaScript | 青训营笔记

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

JavaScript 编码原则之各司其责

1、JavaScript 好代码的标准

学习书籍： 犀牛书、红宝书

2、 HTML/CSS/JS 各司其责

•                       让HTML、CSS、和Java职能分离
  

•                       应当避免不必要的有JS直接操作样式
  

•                       可以用class来表示状态
  

•                       纯展示类交互寻求零js方案
  

JavaScript 编码原则之组件封装

1、 组件的定义解析及特征

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

2、组件封装基本方法

•                  组件设计的原则：封装性、正确性、扩展性、复用性
  

•                  实现组件的步骤、结构设计、展现效果、行为设计
  

•                  三次重构：插件化、模板化、抽象化
                 
  

JavaScript 编码原则之过程抽象

1、过程抽象概念

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

2、 高阶函数使用模式

                                HOF
                                   1、以函数作为参数
                                   2、以函数作为返回值
                                   3、常用于作为函数装饰器
                                   

代码范例：

                            function HOF0 (fn){
                                  return function(...args)  {
                                        return fn.apply (this,args);
                                   }
                              }

常用高阶函数

    （once、throttle（节流）、debounce（防抖）、consumer/2、lterativa(可迭代)）      

4. JavaScript 编程范式

              let list = [1,2,3,4];
              const double=x=>x*2;
              list.map(double);
              
              let list = [1,2,3,4];
              let map1=[];
              for(let i=0；i<list.length;i++){
              map1.push(list[i]*2);
              }
              

个人总结

还有两章笔记没更新，这一节信息量太大了，还在慢慢消化，由于基础知识比较少，还在努力学习中