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

如何写好js

各司其职

结构表现分离：html就控制网页结构，css就控制网页样式，js就控制网页逻辑，让每个功能各司其职，以达到最好的效果，获得简洁的代码，提高代码的可维护性和可拓展性

纯展示类功能模块学会寻求零js方案

这个通过给HTML骨架加上一个checkbox的状态，然后通过绑定到兄弟节点content上，通过简单的html和css达到控制页面的结果，代码中没有写一行js，但是也实现了和js一样的点击事件的效果

<body>
  <!-- 在这里添加了一个隐藏的input，给了一个checkbox -->
  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
  </div>
  // ...
</body>

// 隐藏input
#modeCheckBox {
  display: none;
}

// 将input与兄弟节点.content绑定起来，通过checkbox的状态控制页面的css样式，适用于简单的不需要复杂业务的写法
#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

//***

组件插件化

什么是组件插件化

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

将组件插件化的优势

能供按照功能进行区分
一个插件的增加与删除并不影响系统其他功能的使用，
复用性高
拓展性强

节流案例

个人解析这个案例实际上也是一个节流案例，我的理解是：第一次点击，once传递了一个新的函数，由fn接收，此时fn !== null，然后进入return的函数中，此时执行return中的函数，fn = null，注意，这时候返回的是是return后面的函数，我们继续点击相同的按钮，此时once只会返回一个null（因为fn === null，if判断为假，不在进入代码块中），所以接下去不管怎么点都不会再触发该事件，成功节流

代码传送门

高阶函数

上一节的节流案例便是运用了高阶函数

什么是高阶函数？

代码示例

function HOF0(fn){
    // fn和function是等价的，fn接收的参数是一个函数
    return function(...args){
            return fn.apply(this ,args);
           } 
}

HOF0((e) => {
    // todo
)}

fn和function是等价的，因为高阶函数中参数fn接收的是一个函数，返回值也是一个函数，说明，在HOF0中，我们操作的始终是同一个函数，传进去一个函数，return的还是这个函数

纯函数

什么是纯函数在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数;

此函数在相同的输入值时,需产生相同的输出.
函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关.(只与函数的输入值和内部的执行有关系,外部输出无关例如键盘输入函数中由键盘输入也不算)
该函数不能有语义上可观察的函数副作用,诸如“触发事件"，使输出设备输出，或更改输出值以外物件的内容等。(函数执行时不能在里面触发其他的事件)

优点

纯函数的好处就是输出结果能够预期，能够提升库的可维护性，所以在实际开发中，鼓励使用高阶函数，减少非纯函数使用的可能性，

编程范式

命令式

强调过程，写法相对简单，前期美滋滋，但后期维护起来可能比较麻烦，拓展性和复用性较低

声明式

较强的可拓展性和可维护性，强调各司其职，但是写法相对复杂，前期工作较难

总结

月影老师讲的非常好，代码风格也非常优雅，课上我学到了非常多新的写js的姿势，希望能够不断的将这些知识转化进自己的项目中，fighting！！！

如何写好js | 青训营笔记