这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
写好JS的原则
1.各司其责
让HTML,CSS,和JavaScript分离
2.组件封装
好的UI组件具备封装性、正确性、扩展性、复用性。
组件封装的基本方法:要设计一个UI组件,我们需要做结构设计,用CSS来实现展现效果,最后进行为设计。行为设计包括API(功能)去设计一些接口和Event(控制流)使用自定义事件
用CSS来
3.过程抽象
用来处理局部细节控制的一些方法,是函数式编程思想的基础应用,理解了过程抽象之后,我们可以让我们的代码拥有更好的扩展性,让代码更好的通用。
总结起来就是我们在写代码的时候不应该用JavaScript来控制样式,可以用class来表示状态,然后用JavaScript来控制状态,如果是纯展示类交互要取寻求零JS方案,这是做前端工程师要迈出的第一步;在与UI交互的时候,我们需要把UI组件封装起来使用;
4.组件可以做什么优化
因为理解了过程抽象之后,我们可以让我们的代码拥有更好的扩展性,让代码更好的通用。当构造函数太复杂时可以重构构造函数实现组件的插件化将控制元素抽取成插件插件与组件之间通过依赖注入方式建立联系,可以把代码变得简单;
如果插件化之后还不太玩美可以进行优化:
- 将HTML模板化,更易于扩展
- 将组件通用模型抽象出来,通过继承实现需要的方法
最后再补充一个小知识点:纯函数的特点,纯函数的行为是可预期的且没有副作用;听了这节课之后发现,完成一个需求不仅仅是把这个需求用代码给实现,还要考虑代码的优化和复用,要为以后需求改变的维护做打算,这样我们才能够实现代码的最大价值。