青训营伴学笔记第三篇
三大原则
- 各司其职
- 组件封装
- 过程抽象
各司其职
前端网页开发的三层架构包括HTML、CSS、JS，其中最底层是 HTML，负责网页的结构；中间层是CSS，负责网页的呈现样式；最上层是JS，负责网页的行为和交互。
结合PPT和与AI的交谈，列出以下三层架构各司其职的好处：
-
分离关注点（Separation of Concerns）
- 解释：HTML、CSS 和 JavaScript 分别负责不同的任务，使得开发者可以专注于一个方面的开发。例如，前端设计师可以主要关注 CSS 来设计网页的样式，而程序员可以专注于 JavaScript 来实现交互功能，内容编辑者可以专注于 HTML 来组织内容。
- 好处：这种分工可以提高开发效率，减少错误，并且使得每个部分更容易理解和维护。
-
代码复用性（Code Reusability）
- 解释：每一层的代码都可以在不同的项目中复用。例如，一套精心设计的 CSS 样式表可以应用于多个 HTML 页面，而 JavaScript 函数库也可以在多个项目中使用。
- 好处：减少了开发时间和工作量，提高了开发的效率和一致性。
-
易于维护和更新（Ease of Maintenance and Updates）
- 解释：由于每一层的职责明确，当需要对网页进行修改时，可以很容易地定位到需要修改的代码。例如，如果需要改变网页的外观，只需要修改 CSS 文件，而不需要在 HTML 和 JavaScript 中寻找相关代码。
- 好处：降低了维护成本，减少了修改一处代码导致其他部分出现问题的风险。
-
提高性能（Improved Performance）
- 解释：通过合理地组织和优化每一层的代码，可以提高网页的加载速度和运行效率。例如，优化 CSS 和 JavaScript 的加载顺序和方式，可以减少页面的渲染时间。
- 好处：提供更好的用户体验，减少用户的等待时间，提高网站的可用性。
-
促进团队协作（Facilitates Team Collaboration）
- 解释：在大型项目中，不同的团队可以分别负责不同的层。例如，设计团队负责 CSS，开发团队负责 JavaScript，内容团队负责 HTML。
- 好处：便于团队间的协作，减少冲突，提高整体项目的开发效率。
-
兼容性和可访问性（Compatibility and Accessibility）
- 解释：这种分层架构有助于确保网页在不同的设备和浏览器上具有一致的表现。例如，通过使用标准化的 HTML 和 CSS，可以提高网页的兼容性，而通过优化 JavaScript，可以提高网页的可访问性。
- 好处：扩大了用户群体，确保更多的用户可以正常访问和使用网页。
结论：
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含HTML、CSS、JS的单元
- 好的组件具备封装性，正确性，扩展性，复用性
基本方法
- 结构设计 —— HTML
- 展示效果 —— CSS
- 行为设计 —— JS
-
- API（功能）
-
- Event（控制流）
重构
插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化
解耦
- 将HTML模板化，更易于扩展
组件框架
抽象
- 将通用的组件模型抽象出来 总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子： 操作次数的限制
-
一些异步交互
-
一次性的HTTP请求
- once
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- lterative
编程范式
命令式
- 命令式编程（imperative programming） ：包括过程式编程（procedural，例如 FORTRAN、C）和面向对象编程（object oriented，例如 C++、Java）。
声明式
- 声明式编程（declarative programming） ：包括逻辑编程（logic，例如 Prolog）和函数式编程（functional，例如 Haskell、Erlang）。
