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

什么是JavaScript?

百度百科的解释是：JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

JavaScript的好处是什么？

JS可以跨多个浏览器、平台等工作
它比其他编程语言更快、更轻量级
JavaScript可以操作DOM，使网站更具互动性

写好JS的一些原则

各司其职：让HTML、CSS和JavaScript职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。

写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现，你会怎么做？

方法一、

  const btn = document.getElementById('modeBtn');
  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 = '🌞';
    }
  });

方法二、

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

方法三、

 <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

  #modeCheckBox {
    display: none;
  }

  #modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
  }

从这个案例中，我们可以总结出，在我们编写项目时应该让HTML/CSS/JS 各司其责（应当避免不必要的由 JS 直接操作样式），来降低代码的耦合度。或者我们可以寻求纯展示类交互寻求零 JS 方案，可以用 class 来表示状态，这样可以提高网站的性能，减浏览器轻渲染压力。

编程范式(命令式与声明式)

命令式

  let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }

命令式编程更加的精细化，更严谨

声明式

  let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);

声明式编程能在特定的更高层面代码领域是给我们带来效率的提升，我们只需要对想要的结果进行深思熟虑，程序会自动的解决过程。代码也更简洁

接下来我们来看看JavaScript的纯函数

理解JavaScript纯函数

函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；在react开发中纯函数是被多次提及的；比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也是要求必须是一个纯函数；所以掌握纯函数对于理解很多框架的设计是非常有帮助的；

纯函数的维基百科定义：

在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：

此函数在相同的输入值时，需产生相同的输出。

函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。

该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

当然上面的定义可能不太好理解，所以我简单总结一下：

确定的输入，一定会产生确定的输出；
函数在执行过程中，不能产生副作用

纯函数的案例

我们来看一个对数组操作的两个函数： slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组； splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改； slice就是一个纯函数，不会修改传入的参数；

在这里插入图片描述

纯函数的优势

为什么纯函数在函数式编程中非常重要呢？

因为你可以安心的编写和安心的使用；
你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改；
你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；

React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改：

在这里插入图片描述

副作用的理解

那么这里有一个概念，叫做副作用，什么又是副作用呢？副作用（side effect）其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用；在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；

纯函数在执行的过程中就是不能产生这样的副作用：副作用往往是产生bug的 “温床”

总结： 之前对JavaScript的认知只停留在怎么用上，怎么去操作dom元素，在经过今天的课程后，更加理解JavaScript的职能和如何更好的去使用JavaScript了

JavaScript的讲解 ｜ 青训营笔记