青训营笔记：论如何优化JavaScript

这是我参与「第四届青训营 」笔记创作活动的第3天，今天学习了如何写好Javascript，在我看来，要想用JavaScript在网站上写出好的逻辑，首先需要最基础的语法

• JavaScript基本语法 1.JavaScript的语法和Java语言类似，每个语句以; 结束，语句块用{…}，定义时用var定义，否则就会被认为是全局变量。JavaScript不区分整数和浮点数，统一用Number表示，要获取字符串某个指定位置的字符，使用类似Array的下标操作，索引号从0开始。他有独特的设计模式，比如strict模式等

• 如何写好Javascript

写JavaScript，首先要明确3个原则，

1. 各司其责 让html，css，JavaScript只能分离

2.组件分割

将各种ui组件封装和使用，

3.过程抽象

在处理ui过程交互的时候，我们不仅仅要对数据抽象也要对过程抽象，使得扩展性和复用性增加

-案例分析 深夜食堂（来自月影老师教学分析）

在该网页上点击图标使得背景图片改变，一般的思路为：获取组件，创建点击事件，实现效果。下面来看两个版本的代码

          btn.addEventListener('click', (e) => {
            const body = document.body;
            if(e.target.innerHTML === '🌞') {
              body.style.backgroundColor = 'black';
              body.style.color = 'white';
              e.target.innerHTML = '🌜';
            } else {
              body.style.backgroundColor = 'white';
              body.style.color = 'black';
              e.target.innerHTML = '🌞';
            }
          });
          

2

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

通过对比两种代码，我们能找到不同块之间的相同点，从而优化代码使得代码更加简介，大家在练习的过程中才能慢慢练习写好代码的水平。

案例2轮播图

类似例如京东的轮播形式，我们用原生的javascript可以实现 我们可以使用无序列表u1来实现

            position: relative;
            width: 790px;
          }

          .slider-list ul{
            list-style-type:none;
            position: relative;
            padding: 0;
            margin: 0;
          }

          .slider-list__item,
          .slider-list__item--selected{
            position: absolute;
            transition: opacity 1s;
            opacity: 0;
            text-align: center;
          }

          .slider-list__item--selected{
            transition: opacity 1s;
            opacity: 1;
          }

行为：JS，行为API 定义slide类，实现api

            const controller = slider.container.querySelector('.slide-list__control');
            if(controller){
              const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
              controller.addEventListener('mouseover', evt=>{
                const idx = Array.from(buttons).indexOf(evt.target);
                if(idx >= 0){
                  slider.slideTo(idx);
                  slider.stop();
                }
              });

总而言之，写出震撼的行为和JavaScript的思考密不可分，青训营继续加油！