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

写好JavaScript的一些原则

• 各司其职
• 组件封装
• 过程抽象

各司其职

HTML负责页面结构，CSS负责页面样式，JavaScript则负责页面行为。

• HTML/CSS/JS各司其责
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

组件封装

自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。所以我们应该学习组件化开发思想。

组件是什么？

组件是指web页面上抽出来一个个包含模版(HTML)、功能（JS)和样式(CSS〉的单元。一个好的组件应该具备封装性、正确性、扩展性、复用性等

组件抽象：

将组件中共同的逻辑抽象出来，来达到复用的作用。

小总结：

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

过程抽象

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

Once为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

编程范式：命令式/声明式

命令式编程关注的是“how to do”自己完成整个how的过程;

声明式编程关注的是“what to do”，由框架(机器)完成“how”的过程;

在原生的实现过程中，我们是如何操作的呢?

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令;这样的编写代码的过程，我们称之为命令式编程; 在早期的原生JavaScript，我们都是通过这种命令式的方式在编写代码的;

在Vue的实现过程中，我们是如何操作的呢?

我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods;这样的编写代码的过程，我们称之为是声明式编程; 目前Vue、React、Angular、小程序的编程模式，我们称之为声明式编程;