如何写好JavaScript|青训营笔记

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

本文主要记载在「第四届青训营 」学习到的如何写好JavaScript思想

一、课堂重点内容

1.写好JS的一些原则

-   各司其职(html、css、JavaScript职责分离)
-   组件封装（好的UI组件具备正确性、扩展性、复用性）
-   过程抽象（应用函数式编程思想）

二、课堂主要知识点

1.写好JS的原则

1.1 HTML/CSS/JS各司其职

• 在JavaScript代码中，应当避免不必要的由JS直接操纵样式

  例如，最好不要直接操控css样式内容，可以用class来表示状态，可以css提前设置类的样式，JavaScript操纵更改className以达到控制样式效果。也可以直接使用css达到控制样式的效果

  纯展示类交互寻求零JS方案

1.2 组件封装

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组建的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化（组件框架）

1.3 过程抽象

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

三、基础补充

0. JS添加事件——addEventListener()

   接收三个参数—— addEventListener("事件名" , "事件处理函数" , "布尔值"); 【现在的版本可以省略第三个参数，默认值为false】

   示例：

   要在body上添加事件处理程序，可以使用下列代码：

   document.body.addEventListener('touchmove', function (event) {
       event.preventDefault();
   },false)；
   

   要绑定给按钮绑定click事件,添加事件程序e

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

1. ducument节点——文本对象

   • body属性返回当前文档的body或frameset节点 const body = document.body就可以直接使用body.操作一些属性 如body.className等
   • document对象 document.write()等
   • var el1 = document.querySelector('.myclass');querySelector选择器

3. JavaScript箭头函数

   不带参函数函数

   hello = () => {
     return "Hello World!";
   }
   

   只有一个语句一个参数时可以简写

   hello = (val) => "Hello " + val;
   

   箭头函数的this关键字始终表示定义箭头函数的对象

   var obj = {
       birth: 1990,
       getAge: function () {
           var b = this.birth; // 1990
           var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
           return fn();
       }
   };
   obj.getAge(); //32
   

4. target

   target 属性规定哪个 DOM 元素触发了该事件。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

   event.target.innerHTML获取事件触发元素的内容（li）

   event.target.className　获取事件触发元素classname