组件规格.pptx

前端设计模式库统一规范 By xuld DPLFOR FRONT END 前端设计模式库统一规范 By xuld DPLFOR FRONT END 目录 设计模式库 设计模式库的开发规范 总结 要解决什么问题 将页面中的重复元素做成组件，以避免重复劳动。 要解决什么问题 的 一切为了节约开发成本！ 怎么解决这个问题 的 把常用的代码收集起来，以后就可以复用了。 于是，前辈们就这么做了： 开发框架。如 jQuery， Mootools … UI 组件库。如 Extjs， jQuery UI … 代码库。如 开源中国… 怎么解决这个问题 的 但是，不同的团队有不同的需求。 对一个团队来说，单纯一个框架、UI组件库是不能满足一个全部需求的。 因此，团队需要建设一个属于自己的设计模式库。 设计模式库是什么 的 设计模式库(DPL, Design Pattern Library) 底层开发框架：比如 jQuery 。 UI组件库： 比如浮层、按钮、表单验证。 业务通用模块：比如顶部条、底部版权声明。 社区：比如BUG反馈系统、技术博客、论坛。 统一的规范：包括组件规范、编码规范、使用规范等。 文档与示例：讲解组件用法。 设计模式库的愿景 的 能着实节约不少开发成本。 有足够多的现成组件。 上手与使用简单。 示例文档丰富。 可持续发展(组件能不断更新改进) 。 开发设计模式库 的 库不是一个人能做完的，我们必须合作开发，而不是反复开发重复的功能。 可以部分使用现有的资源节约成本。比如核心框架使用 jQuery，而UI组件库则是在 jQuery UI基础上修改。 开发设计模式库其实从第一个组件开始，然后慢慢积累的过程。必须先制定一个统一的开发规范才能减少团队沟通成本。 设计模式库规范 概念的统一：组件是什么 任何可以重用的代码都叫组件。 组件可以是只有 js 或只有 css。甚至可以只有一行代码。 用于界面交互的组件叫 UI组件，也叫控件(Control)。 与业务有关的组件叫配件(Widget)。 比如一个表单验证组件，任何网站都可以直接使用。但是如果加上了和服务器后台共同约定的验证用户名是否重复的功能，那么，这个组件只能在当前网站使用，即和业务有关，这类组件叫配件。 页面中比较大的一块公用组件，也可提取为模块(Module)。 比如侧边栏、顶部通条等。 如何开发组件 为什么网上有如此多的现成组件， 却还要自己写组件？ 它的UI设计不是我想要的。 我要的功能它没有，它有的功能我不要。 用起来太麻烦了。 我怕用别人的组件会出bug。 它们的代码太乱太长，我不满意。 我找不到我想要的组件。 公司不允许使用第三方框架。 自己做组件，如何避免这些问题？ 组件开发规范 的 Q：它的UI设计不是我想要的。 A：直接使用现成的组件是不肯能的。但是，我们不应该从零开始重做，而是基于现成的组件修改。组件本身只做一套UI，不考虑多主题的支持。 组件应该是易被修改的。 组件开发规范 的 Q：我要的功能它没有，它有的功能我不要。 A：组件应该提供最底层最简单的功能，但要保证全面。 组件应该是简单但完整的。 比如弹窗组件，就不需要提供使用 ajax 加载内容的API，而只提供设置其内容的API，让用户自己在Ajax回调中调用设置内容的API实现他的需求。 比如按钮组件应该提供禁用按钮的API，因为这个API是不能靠其它API组合实现的。 组件开发规范 的 Q：用起来太麻烦了。 A：首先要保证组件本身代码简单（如一行代码初始化整个组件）。其次要多写点示例、文档与教程就可以了。比较复杂的需求可以放在示例里写好，以后万一碰到了也可以直接复制示例代码。 组件应该是有示例和文档的。 示例应该包括一个最简单的用法和最复杂的用法。 组件开发规范 的 Q：我怕用别人的组件会出bug。 A：组件应该是经过多人测试与确认的。组件升级后也应该保证现有代码不会出错。 组件应该是稳定的。 代码稳定：保证浏览器的兼容。 版本稳定：不能因为组件版本的升级而导致之前代码出错。 组件开发规范 的 Q：它们的代码太乱太长，我不满意。 A：这属于开发者的习惯问题。组件开发时应该遵守一个共同的开发规范，但是这个规范是比较宽松的，能被多数人认可的。 组件应该是有共同规范的。 组件开发规范 的 Q：我找不到我想要的组件。 A：提供组件搜索功能。 Q：公司不允许使用第三方框架。 A：公司应该开发适合自己的设计模式库。 Q: 你的问题….? 组件开发规范 的 易被修改 (灵活) 简单但完整(轻量) 有示例与文档(易上手) 稳定 组件开发逆向规范 的 以上说的都是组件应该满足的要求，那么开发组件，什么是不需要满足的？ 一切以人为本，我们的目标是节约开发时间，包括组件的开发