Transcript
组件化
什么是组件化
广告很美好，现实很…门锁的发射信号模块坏了 ....
如何解决
其它• 电脑主机• 汽车零件• ……
前端组件化
• 复杂度越来越高• 传统模式开发效率低，维护成本高• 复用性要求越来越高
前端架构在不断变化
组件化
模块化• Javascript模块化： AMD， CMD， Util.js• CSS模块化： LESS， SASS， BEM命名• 模板： tpl
组件特点• 单一职责• 资源高内聚• 松耦合• 无状态
组件化的使命• 提高功能的重用性• 减少开发和维护的成本• 增加业务的敏捷度
Webpack＋ ng1.x
JS＋ CSS＋HTML Webpack componen
t
资源聚合
npm install wbg
开发
组件库
http://103.235.225.30:4874/
后话
不要写过长的函数？
Single responsibility principle
A component of code (e.g. class or function) should perform a single well defined task
DRY Don’t repeat yourself
Minimize CouplingAny section of code (code block, function, class, etc) should minimize the dependencies on other
areas of code
Maximize CohesionCode that has similar functionality should be
found within the same component.
KISSKeep it simple, stupid
Embrace Change
top related