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

1 写好JS的一些原则

1. 各司其责 2. HTML CSS JS各司其责 3. 应当避免不必要的由JS直接操作样式 4. 可以用class来表示状态 5. 纯展示类交互寻求零JS方案
2. 组件封装
   1. 组件设计的原则：封装性、正确性、扩展性、复用性
   2. 实现组件的步骤：结构设计、展现效果、行为设计
   3. 三次重构
      1. 插件化
      2. 模板化
      3. 抽象化
3. 过程抽象
   1. 用来处理局部细节控制的一些方法
   2. 函数式编程思想的基础应用

无JS版本：

 <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模板化，更易于kuoz。
• 抽象化（组件框架）：将组件通用模型抽象出来。

2 编程范式

编程范式有三种：命令式、声明式和函数式。

命令式编程：是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。

声明式编程：是以数据结构的形式来表达程序执行的逻辑。即告诉计算机应该做什么，但不指定具体要怎么做。

函数式编程：以函数为第一位，即函数可以出现在任何地方，可以把函数作为参数传递给另一个函数，即关注做什么而不是怎么做。