组件规范

前端设计模式库统一规范ByxuldDPLFORFRONTEND目录•设计模式库•设计模式库的开发规范•总结要解决什么问题将页面中的重复元素做成组件，以避免重复劳动。要解决什么问题的一切为了节约开发成本！怎么解决这个问题的把常用的代码收集起来，以后就可以复用了。于是，前辈们就这么做了：•开发框架。如jQuery，Mootools…•UI组件库。如Extjs，jQueryUI…•代码库。如开源中国…怎么解决这个问题的但是，不同的团队有不同的需求。对一个团队来说，单纯一个框架、UI组件库是不能满足一个全部需求的。因此，团队需要建设一个属于自己的设计模式库。设计模式库是什么的设计模式库(DPL,DesignPatternLibrary)设计模式库统一的规范底层开发框架UI组件库业务通用模块文档和示例社区底层开发框架：比如jQuery。UI组件库：比如浮层、按钮、表单验证。业务通用模块：比如顶部条、底部版权声明。社区：比如BUG反馈系统、技术博客、论坛。统一的规范：包括组件规范、编码规范、使用规范等。文档和示例：讲解组件用法。设计模式库的愿景的能着实节约不少开发成本。•有足够多的现成组件。•上手和使用简单。•示例文档丰富。•可持续发展(组件能不断更新改进)。开发设计模式库的1.库不是一个人能做完的，我们必须合作开发，而不是反复开发重复的功能。2.可以部分使用现有的资源节约成本。比如核心框架使用jQuery，而UI组件库则是在jQueryUI基础上修改。3.开发设计模式库其实从第一个组件开始，然后慢慢积累的过程。必须先制定一个统一的开发规范才能减少团队沟通成本。设计模式库规范概念的统一：组件是什么组件（Component）控件（Control）配件（Widget）模块（Module）•任何可以重用的代码都叫组件。组件可以是只有js或只有css。甚至可以只有一行代码。•用于界面交互的组件叫UI组件，也叫控件(Control)。•和业务有关的组件叫配件(Widget)。比如一个表单验证组件，任何网站都可以直接使用。但是如果加上了和服务器后台共同约定的验证用户名是否重复的功能，那么，这个组件只能在当前网站使用，即和业务有关，这类组件叫配件。•页面中比较大的一块公用组件，也可提取为模块(Module)。比如侧边栏、顶部通条等。如何开发组件为什么网上有如此多的现成组件，却还要自己写组件？1.它的UI设计不是我想要的。2.我要的功能它没有，它有的功能我不要。3.用起来太麻烦了。4.我怕用别人的组件会出bug。5.它们的代码太乱太长，我不满意。6.我找不到我想要的组件。7.公司不允许使用第三方框架。自己做组件，如何避免这些问题？组件开发规范的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:你的问题….?组件开发规范的灵活稳定规范简单易被修改(灵活)简单但完整(轻量)有示例和文档(易上手)稳定组件开发逆向规范的以上说的都是组件应该满足的要求，那么开发组件，什么是不需要满足的？1.一切以人为本，我们的目标是节约开发时间，包括组件的开发时间。2.不考虑代码执行效率。3.使用不多的组件，不关心代码质量，能用就好。4.永远不要追求技术上的完美。使用简单代码可读性代码简短代码效率组件示例和文档规范的•示例页应该至少包含一个最简单的例子和一个最完整的例子。•示例页只引用组件必须的源码，不会引用无关的文件。•保证用户读过示例页后就会以最简单的方式使用组件；读过文档后就会使用组件的全部功能。组件使用流程规范•按需使用：复制源码。当然，如果组件量比较多的话，一一复制会比较麻烦，因此需提供一个工具（带界面），自动将需要使用的组件提取出来。•全部载入：如果对性能要求不高的话，可以事先将全部组件合为一个文件，然后一次性全部载入。为什么不使用类似seajs的模块化Seajs可以使用，但不应该在组件层面上。比如常用的工具函数、DOM操作和Ajax等，在制作组件时当然是分开的。但是一次项目必然会同时使用这些组件，如果模块化细分到这个程度，反而会导致模块依赖错综复杂，再加之需求经常变动，最后会带来非常高的维护成本。自己的或网上的组件库合成业务组件生态圈加载项目比如组件库中有Base,DOM,AJAX3个组件。（组件之间是独立的）而生态圈中将这3个组件合为了一个：common.js（因为根据业务需要，这3个组件肯定会用到）项目中使用seajs（大项目）或直接引入方式（小项目）载入common.js。总结设计模式库是开发中不可缺少的一部分，每个团队都应该创建自己的设计模式库。本期主要介绍了设计模式库的总体规划方案，并重点介绍了制作组件的总体方向。下期将介绍在这个大方向下，具体应该如何开发组件以及代码构架。AnyQuestion?