张鑫旭前言
本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件，就会想到重用，各个项目都能使用。而本文的组件，对于某具体项目而言是组件，但是，对于其他项目，就是个半封装的半吊子组件。面向设计、面向项目的web组件开发，就是本文要探讨的主旨。
一、人与组件目前这个阶段，我们所使用的web组件都是人所编写的，因此，人这个个体在赋予组件生命的时候就扮演了至关重要的角色。人的技能背景，个人喜好，甚至世界观都可以从组件中得到体现。但人无完人，因此要想诞生一款完美的组件，需要上下游很多优秀的同事，把自己最棒的世界融入进去，协作完成，其中下面这4个职位参与度较高：
注意到了没有，前端开发人员处于web组件开发流程的下游；这其实没什么，大家通力协作，组件弄好，项目做好，产品做好，皆大欢喜。然而实际上，由于大学没有前端专业，因此负责团队web组件开发的，大多是从与组件几乎不相干的后台开发转过来的，或带有明显的后台开发烙印的。也就是说，前端开发不仅处于下游，还有1/3的身子在web组件之外。
一个web组件的诞生，理想状态应该是需要设计、UI工程师、前端开发通力协作完成的。有句话怎么说来着，理想很丰满，现实很骨感。
现实是：大多数web组件都是前端开发人员一个或数人，按照业界约定俗成的套路实现的，超前于UI设计，游离于UI重构。什么意思呢？比方说一个弹出层组件，有标题、关闭按钮、主内容区域，底部确定/关闭按钮。这套结构是业界约定俗成的，开发人员在写这些组件的时候，会发挥自己的聪明才智，好好地封装，好好地设计API,目的就是可以不用关心以后设计师设计的弹出层长什么样子，因为我预留了类名接口，UI工程师换个皮肤就好了；同时能保证组件的整站复用。也就是项目开始之前，成熟、封装良好、API丰富的web组件就已存在。
亲们，读到现在，你们是不是觉得没什么问题，挺好的啊！？对的，在iPhone出现之前，大家都觉得Nokia挺好的。
从人的角度讲，这种看似牛逼的路数最大的问题就是无视了分工，所谓术业有专攻，闻道有先后，开发再逆天，也是存在局限的，或者说是人性上很难避免的东西。
1.位置与角色
大家应该都知道，设计师和程序员处于两个不同世界的，因此，当其中一个角色独自承担另外一个角色工作的时候，自然会存在诸多阻碍，其中很重要的一点就是设计重心。
前端开发写web组件，实际上也是一种代码的设计，此时，这些程序员气质浓郁的前端开发人员设计的重点自然是放在组件功能、通用性、扩展性以及易用性上，毕竟这一块是自己擅长的，至于UI，会预留API或其他接口，也能满足常规的设计需求。
如果交互设计师或UI设计师来写web组件,UI和交互可定制则是其设计的重心，发展得好的话，可以直接成为另外一种流派，直接和(开发背景前端的)面向功能的web组件流派相抗衡。但是，国内的现状是，设计师一般不参与直接的代码建设。
实际上，从职位上划分，UI开发应该是最适应构建web组件的角色，能兼顾设计之美，重构之美，以及代码之美。只可惜由于门槛低，水平良莠不齐，尤其JS方面的驾驭能力有限，于是，最后的结果是，组件的建设都落在了工程气息浓重的开发身上。
可以看到，虽然不合理，但是情非得已。有人可能要叫了：“啰哩吧嗦，狗皮膏药涂到现在，到底哪里不合理，你到是说啊！”
OK,稍安勿躁。由于组件这东西只能开发实现，导致在组件的设计以及使用上，前端开发有了非常大的话语权，下游决定了上游，设计师以及CSSer在组件眼中就是个摆设。比方说设计师对dialog弹框进行了某些微创新，比方说下面这样的(无标题无关闭大背景色块)：
去问开发可行性，结果，开发来了一句：“哎呀，这个功能我们的弹框组件目前不支持！”我相信这种场景很多同学都遇到过吧~最后，基本上都是设计师妥协，使用传统弹框交互或布局。所以，坊间才有“苦逼的设计师”的传闻。
苦逼的设计师这样苦逼地工作了很多年，还好，大家就这么过来了。然而，事物是不断发展的，技术是不断进步的，随着CSS3,SVG等现代web技术日趋成熟，我们在UI展现层能够做的事件就非常多，更新变化也更加快。在这种大环境背景下，还让开发来决定设计，显然这对产品是不负责任的。其他竞品在组件UI细节上不断闪现人性化、情感化的创新之处，交互也更加流畅与舒适；而你还抱着“我们这是成熟的弹框组件，不能随便改”的想法固步自封，使用"duangduangduang"生硬，机械，呆板的弹框组件，注定在现代web浪潮中被冲到沙滩上。
对于页面工程师，切图仔而言，其实也挺苦逼的。在部门没啥地位的页面仔们，苦学了一种新的布局，比传统实现少嵌套2层标签，且满足各种场景需求，好棒！结果交接的开发来了句“我们的选项卡组件不支持你这种结构，你需要调整下”。
具体项目的具体组件本来就应该是大家通力协作完成的，现在就因“组件是我写的，我就是发言人”的心态限制设计、重构的创造力。这就是不合理之处。
2.扬长避短
组件的作用是什么呢？就是“偷懒”，来个新页面，“啪”一套；来个新项目，也是“啪”一套。功能棒棒哒，任务完成，老婆再也不用担心我加班晚归啦！
偷什么懒呢？主要是偷自己不擅长那块的懒。这是人之常情。设计师不懂代码，他希望的组件是，直接可视化操作就OK的；页面制作人员，他希望的组件是JS功能那块它不需要操心；前端开发们，则希望组件HTML布局那块不需要关心。
好了，现在组件都是开发背景的前端写的，所以呢，很多HTML布局啊，样式表现啊，都集成在了web组件中，一些动态的表现就使用洋洋洒洒的API控制。于是，开发使用的时候，只要按照特定的套路，自己不需要去写页面之类的，组件就棒棒哒了！
这样的例子很多的，比方说知名开源项目kissy中的选项卡组件，根据我的观察，其选项卡要么是要通过JS脚本动态创建，任何特异化的需求都是通过丰富的API接口或者回调实现的。总之，组件的使用只需要玩弄JS,不需要把玩HTML;要么就是套用固定的HTML结构以及className值。这比较符合JS造诣很深的前端开发的偷懒模式。
等等，篇幅原因，就不一一举例。
这并没有什么对错之分。有的企业就是功能为王，业务导向；有的企业就是产品为王，体验优先。不同的企业文化，不同的产品要求，不同的团队规模与技术能力，决定了web组件的表现形态、使用方式等。只要符合企业的生产与成长需要，都是很棒的web组件。因此，类似kissy这样的模块集合，是否适用于单兵作战的中小企业以及注重用户体验的创业团队，就需要执行者好好斟酌斟酌了！说不定，jQueryUI可能更合适一点。
至少对于我而言，绝不会去使用对HTML做过多限制的web组件的(例如要求节点必须如何如何...)：
KISSY1.4srcNode初始化组件时必须要求内容节点必须包含类名ks-overlay-content(这里ks-为prefixCls)...
“扬长避短”原本是个褒义词，显然，我放在这里讲，是要说其不好的。有句话讲的好，叫做术业有专攻。前端开发都会HTML/CSS,毕竟相比程序开发，门槛很低，在相关领域也浸染了些年月，构建web组件的时候，感觉HTML/CSS方面的应用也是比较顺手的，功能也都能跑起来。但是，在HTML/CSS方面造诣很深的开发看来，前端开发web组件的HTML结构等设计不敢恭维。举个真实的例子：
要实现一个相对文本框定位的Auto治疗白癜风哪家比较好北京中医白癜风医学研究院怎么样