组件化设计与开发

组件化设计与开发一种灵活可靠的工作方式『组件化』独立·完整·自由组合对产品设计的意义符合功能逻辑『对产品设计的意义』特定类型的信息，一定有最佳的展现方式。多个维度检索大量数据，最高效的必须是表格。保持交互一致性『对产品设计的意义』选择日期应该有统一的方式。该统一的还有很多，比如：错误提示的形式、进度条的交互方式……保持视觉风格统一『对产品设计的意义』类似的界面中，有的按钮是方的，有的按钮是圆的，那怎么行？便于多设计师协作『对产品设计的意义』两人分别设计注册界面和修改密码界面。其中都有表单，如何保持统一？便于修改设计『对产品设计的意义』比如尝试了一下浅色的主菜单，发现效果更好，难道要每页都改一遍么？对开发的意义降低耦合度『对开发的意义』如果需要把页面body部分加宽，内部许多元素排版可能会出现问题。因为各模块的尺寸都依赖原先的页面宽度。减少冗余『对开发的意义』页面中所有table标签，都可以使用同一套css，不必每个页面单独定义。优化性能『对开发的意义』按需加载资源，一个简单的登录页面，没有必要加载整站的css与js代码，拖慢速度。便于多开发协作『对开发的意义』两位前端协作开发，各自的页面中都有下拉菜单。只需要其中一人处理下拉菜单的工作任务。便于查错『对开发的意义』开发过程中，某个弹窗样式错乱。如果采用组件化开发，就能缩小排查范围。便于修改『对开发的意义』来了新需求，所有页面的标题字号要加大，难道一个个页面改吗？『布局原理』设计师要懂页面布局原理行内元素与块元素『布局原理』浮动『布局原理』绝对定位『布局原理』一个页面是如何搭建出来的『布局原理』流式布局『布局原理』弹性布局『布局原理』『设计组件化』设计师如何运用组件化思维提取产品中的共用部分导航按钮表单Tab翻页表格进度条以上这些都是经过实践验证的设计模式弹窗列表错误提示还有很多……制作成通用组件SketchSymbolSketchOverridesSketchSymbol的嵌套一个组件就是一个完整的产品把每个组件当做一个独立产品来设计考虑空状态、极端情况、尺寸变化尽可能灵活适应各使用场景思考相互间的组合方式统一组件与组件、组件与散件之间的组合方式形成规范文档之前所有的内容，最终汇集成设计规范『开发组件化』前端如何运用组件化思维按组件，而不是页面来开发轻度组件化同一个组件使用相同的html结构和class名，用同一段css代码定义样式，用同一个js函数定义交互。divclass=“form”divclass=“row”inputtype=“text”placeholder=“用户名”//divdivclass=“row”inputtype=“password”placeholder=“密码”//div/div.form{.row{padding:10px0;input{padding:5px8px;border:1pxsolid#ddd;border-radius:3px;&:focus{border-color:#1AC07C;}}}}functionformValidation(obj){……returnvar1;}formValidation($(“.form”));重度组件化每个组件的html结构、css样式、js交互都独立封装管理，定义好框架和加载方式，内容在加载时从外部填充。『重在维护』组件化不是一件轻松的工作，在项目初期的准备工作会增加一定工作量，但随时间推移会发挥出巨大的优势及时沟通反馈『组件化思维』独立·完整·自由组合“谢谢。”部分资料引自《前端工程——基础篇》