由浅入深了解JavaScript|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

如何写好JavaScript

1. 写好js的原则
   • 各司其责
     • HTML负责结构
     • CSS负责表现
     • js负责行为
     • 可以用class来表示状态
     • 纯展示类交互寻求零js方案
   • 组件封装
     1. 结构设计
        • 原则
          • 封装性
          • 正确性
          • 扩展性
          • 复用性
        • 解耦
          • 将控制元素抽取成插件
          • 插件与组件之间通过依赖注入方式建立联系
        • 三次重构
          • 插件化
          • 模板化
          • 抽象化
     2. 展现效果
     3. 行为设计
        • API(功能)
        • Event(控制流)
   • 过程抽象
     • 用来处理局部细节控制的一些方法
     • 函数式编程思想的基础应用
       • 高阶函数
         • 以函数作为参数
         • 以函数做为返回值
         • 常用于作为函数装饰期
       • 命令式/声明式

高阶函数与纯函数

1. 纯函数

       //加法函数
       function add(a,b){
           return a+b
       }
       add(1,2)//3
       add(3,7)//10
   

   • 纯函数不依赖外部环境，移植方便，引入都能用
   • 只需要看函数就能知道其功能，代码易读，可维护性高
   • 测试方便
2. 高阶函数

       1.箭头函数式
       function toler(fun){
           return ()=>{
               ...
           }
       }
       2.普通函数式
       function toler(func){
           return function(){
               ...
           }
       }
   

   常见的高阶函数
   1. HOF

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

   2. once

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

   3. throttle(节流)

          function throttle(fn, time = 500){
              let timer;
              return function(...args){
                if(timer == null){
                    fn.apply(this,  args);
                    timer = setTimeout(() => {
                    timer = null;
                    }, time)
                }
             }
          }
      

   4. debounce(防抖)

          function debounce(fn, dur){
              dur = dur || 100;
              var timer;
              return function(){
                clearTimeout(timer);
                timer = setTimeout(() => {
                  fn.apply(this, arguments);
                    }, dur);
              }
         }
      

   5. interative

          function iterative(fn) {
              return function(subject, ...rest) {
                  if(isIterable(subject)) {
                      const ret = [];
                      for(let obj of subject) {
                         ret.push(fn.apply(this, [obj, ...rest]));
                      }
                      return ret;
                  }
                  return fn.apply(this, [subject, ...rest]);
            }
        }
      

   6. consumer

          function consumer(fn, time){
              let tasks = [],
              timer;
      
              return function(...args){
                tasks.push(fn.bind(this, ...args));
                if(timer == null){
                  timer = setInterval(() => {
                    tasks.shift().call(this)
                    if(tasks.length <= 0){
                      clearInterval(timer);
                      timer = null;
                    }
                  }, time)
                }
              }
      

} ```

结语

JavaScript的学习还有很长一段路要走，要继续学习下去，大家一起加油吧！！！Try to be better
如果文章有不正确或存疑的地方，欢迎评论指出。