Top Banner
组组组
28

Component in fe

Apr 13, 2017

Download

Engineering

sking l
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Component in fe

组件化

Page 2: Component in fe

什么是组件化

Page 3: Component in fe
Page 4: Component in fe

广告很美好,现实很…门锁的发射信号模块坏了 ....

Page 5: Component in fe

如何解决

Page 6: Component in fe

其它• 电脑主机• 汽车零件• ……

Page 7: Component in fe

前端组件化

Page 8: Component in fe
Page 9: Component in fe
Page 10: Component in fe
Page 11: Component in fe
Page 12: Component in fe

• 复杂度越来越高• 传统模式开发效率低,维护成本高• 复用性要求越来越高

前端架构在不断变化

Page 13: Component in fe

组件化

Page 14: Component in fe

模块化• Javascript模块化: AMD, CMD, Util.js• CSS模块化: LESS, SASS, BEM命名• 模板: tpl

Page 15: Component in fe

组件特点• 单一职责• 资源高内聚• 松耦合• 无状态

Page 16: Component in fe

组件化的使命• 提高功能的重用性• 减少开发和维护的成本• 增加业务的敏捷度

Page 17: Component in fe

Webpack+ ng1.x

Page 18: Component in fe

JS+ CSS+HTML Webpack componen

t

资源聚合

npm install wbg

Page 19: Component in fe

开发

Page 20: Component in fe

组件库

http://103.235.225.30:4874/

Page 21: Component in fe
Page 22: Component in fe

后话

Page 23: Component in fe

不要写过长的函数?

Single responsibility principle

A component of code (e.g. class or function) should perform a single well defined task

Page 24: Component in fe

DRY Don’t repeat yourself

Page 25: Component in fe

Minimize CouplingAny section of code (code block, function, class, etc) should minimize the dependencies on other

areas of code

Page 26: Component in fe

Maximize CohesionCode that has similar functionality should be

found within the same component.

Page 27: Component in fe

KISSKeep it simple, stupid

Page 28: Component in fe

Embrace Change