什么叫组件化开发?

我很好奇为什么越来越重视组件化开发,ext.js却被边缘化
关注者
1384
被浏览
63967

25 个回答

我来答一下这个吧

  从第一代码农写下第一行代码开始到上个世纪的80年代的软件危机,码农一直在考虑一个问题,怎么让写代码容易。抛开找大牛,大神程序员这条路(你以为大牛,大神那么容易找啊),最后自然而然形成的一套思路就是大团队的协同合作(如同cpu发展史一样,从飙主频到飙核数)。
  协同合作?----- 这个可就麻烦了。。。。团队。。。。还合作。。。。
  几乎所有的码农开始代码的时候(我强调了几乎,不是全部,我强调了开始,不是所有时候)写代码的都是以自我为中心的。怎么解释这种情况呢,就是cow code---牛仔代码,代码风格随意看心情。这就导致了写代码协作起来极为麻烦,为什么呢?我写代码的时候 ,我和上帝知道什么我写的什么,过了一个月就只有上帝知道写的什么了。这个问题在前端领域尤其严重,原因有如下几点:
    1. 因为这个领域没多少年
    2. html/js/css发明出来的时候就只玩玩而已的工具,技术栈非常不成熟。
    3. 这个领域人员水平参差不齐。
    4. 这个最坑爹了:JS是单线程的,CSS是全局的。。。尼玛。。。。几个人一起搞,一个bug全家玩完。。。

  你这让人怎么干活。。。。活那么多。。。。人那么多。。。。相互坑不出活,老板会fire掉大家的。

  很早就有人来想办法解决这个问题,在软代时代就已经有解决这个问题的法宝--组件化。当然那时候不是那么叫的,是通过两个原则来规范这个问题的,这两个原则就是:内聚性和耦合性。
  意思就是:哥,我想按时回家哄妹子!!!你怎么写代码我不管,你的功能全在这你这儿实现(内聚性),不要让我还帮写你那块功能。另外,哥,求你了,你代码不要block(影响)我的代码(低耦合性)。

  既然解决问题的思路在这儿,前端大牛一代代前赴后继的在这条路上狂奔下去。
第一代:YUI
  200X年的时候,这个框架火啊。把JS的坑都填了以后,比较low的事情就差不多解决完了。就直扑组件化,当时一派盛世,仿佛从此以后,前端界一马平川,大家再也不用一行行代码去写了。
  YUI已经已经给了大家全部。。
  你要写个切换头图----new Y.SlideShow,你要写个时间取值----new Y.Timepicker。
  但是YUI还是倒在历史的车轮下(jquery UI也类似),为什么呢?

  YUI解决了组件化的问题,但是太过于学院派。要求每个用这个程序员如同学校里的好学生一样要熟悉整套UI规范和使用规范。就是你还是要熟悉YUI的CSS,HTML,JS,这样才能用非常爽。这就如同你如果你是个学渣,学霸把卷子给你抄了,如果你没好好听过课,给你抄你都会把\delta 抄成8,会把\sum_{a}^{b}{x} 抄成Eba。

第二代 ExtJS
  ExtJS是踩着YUI的尸体走过来的,第一版的extjs完全是拿yui改的。我第一次写ExtJS写东西的时候,我哭了。。。我感觉我要失业了。太特么,太特么,太特么好用了。这完全是给后端程序员的大大的礼物,看着一个个Java码农写着自己的业务逻辑,顺带着把前端全搞定,而且还比你们一个个前端码农还搞得好得多的时候,完完全全的失落感啊,好像世界已经完全不需要前端了,整个世界都变黑了。。。。。。
  extjs比YUI进步在那儿呢,首先它表面上有一套漂亮的UI。这个实质上就是你不用写CSS了,它帮你写好了。另外你HTML也不用写了,它也帮你写好了。这不对啊,前端页面怎么可以没有HTML和CSS呢----------------extjs都帮你封装到js里了。。。

  这就如同你是个学渣,学霸把卷子给你抄了,而且这回的卷子还都是选择题....
  这回是送分啊。。。。。

  可是PM、老板不是吃素的。。。大家都有一身好手艺啊,难分高下啊,那来个附加题吧-----这一块不太好看啊,加个闪闪的效果,那一块左右动动吧。。。。。。。。
  extjs用是很简单,定制的话。。。。。。还是改错一处,全局。。。。。

第三代:web component
  w3c,google什么的都突然有一天发现。iphone一出,我们的数钱数得手抽筋的好日子是快完了吧。以后感觉没web什么事了额。。。。。砸帅哥,霉女一见面都问装啥app,都不用电脑,笔记本,更谈不上看网页了呢。。。。
  gg一想,"不行啊",然后google买了android,"还是不行啊,我现在这么容易挣这么多钱,我就是把android养大了也不见得挣现在这么多钱额。我还是得把web这块保住啊”,w3c赶紧附和道:“对,对,对”。然后大家都知道了chrome 拼命刷版本从1~47没用几年吧。。。。web的规范是一波波的出啊, es4,5,6,7全出来了。
  然后就有了web component横空出世,带着四个小弟shadow dom/custom element/template/import。

  这回组件化的卷子又有什么不同呢?
  学校太差要被撤,学霸学渣站一条线上了,即然大家都要完,我们一起拼一把吧。
  “好”:学霸,学渣异口同声
  然后学霸帮学渣把卷子都做好了,然后对学渣说:“哥,你写上你名字吧!“

  这次的组件化完完全全不一样了,custom element的出来的组件,可以是以前任意的东西,然后注册成任意一个名字的组件,可以就<niubi-xxxcomponent>,也可叫<my-cat>,反正你想叫啥,就叫啥,然后小伙伴(host)把你的组件(element)直接import进去了以后,完全不会影响大家的开发。注意,是完全不会影响,css只是组件局部,js也是只管自己的。终于实现了大家一起出力,各干各的,完全不会相互影响。。。。这可是真正的齐头并进啊。

来个例子:
<link rel="import" href="banner.html">
<link rel="import" href="phones.html">
<link rel="import" href="list.html">
<template name="t-listBox">
    <t-banner></t-banner>
    <t-phone></t-phone>
    <t-list></t-list>
</template>

  这是前端代码么,怎么这么少。。。。。
这可是妥妥一个完整的界面啊,有banner,电话输入框,和电话列表啊。
  这是要闹那样,代码往那里写,代码往那里写啊。。。。
  这正是奥妙之所在,可以三个同学同时写<t-banner><t-phone><t-list>三个组件,然后直接import进来以后就可以直接用了。。。
高内聚,低耦合
~bingo~
世界顿时好美好 T_T

  但是。。。
  但是。。。
  但是。。。

  但是一般都是是故事的。。。。

  这规范到不成熟,到处是坑啊,我会跟你说么 T_T

  说个简单的,这一个个组件都是独立的,那样式不受外部影响,通用的样式怎么办。。。。。怎么办啊,难道一个个组件去改么。。。
我不会告诉你,有::shadow和/deep/这么奇怪的选择器,而且没用几天就被deprecated(废止)了,虽然现在还能用,但是不知道那一天取消支持,这也太让人忐忑了。

  当然,组件化的时代已经开启,为了填原生的坑,已经有无数勇士已经又踩着前者的尸体冲上来了
  他们是:
    • Angular Directives
    • Ember Components
    • React Components
    • KnockoutJS Components
    • Vue.js Components
    • Backbone Components
    • CanJS Components
    • Famous Components
    • Anything.JS Components?

  未完,有感兴趣的,我接着写。。。
最近听到“组件化”这词的时候,总是觉得很不爽,就像当年听到“Web2.0”一样。我认为,正如同Web2.0至今没有一个官方的、公认的、明确可判断的定义(Wiki那个没有明确性)一样,“组件化”在前端领域直到它退出大众视野为止,也不会有一个官方的、公认的、明确可判断的定义

而题主的问题,其实是两部分:
  • 什么叫组件化开发
  • 为什么ExtJS被边缘化
在这一点上我坚决不同意“ExtJS不是组件框架”这一说法

先挑简单的说,为什么ExtJS会边缘化
作为一个曾经现象级的框架,ExtJS是一个优秀的框架,这一点都不需要质疑,但它确实在当今被边缘化了,这与ExtJS出生的时代、定位有很大的关系
ExtJS出生在一个前端被边缘化的时代(今天轮到你自个儿被边缘化了哈哈哈),在那个年代,大家更关注于怎么去实现逻辑,而非怎么去实现用户可交互的部分,在这样的技术结构下,前端成了很多工程师的一个难点,其原因不是JavaScript,而是因为前端有两门非“Java化”的语言:CSS和HTML
而ExtJS的目的之一就是解决这两门语言,所以ExtJS在整个设计上以“只使用JavaScript可以完成应用构建”为目标,也就是我们看到的一堆JavaScript声明页面结构和交互
这在那个时代无疑是成功的,但却埋下了两个隐患:
  • 从整个架构层面上损失了定制性,主要指CSS的定制性。这在整个框架生成的DOM结构上可见一斑,人就没指望你去定制CSS,乖乖用官方皮肤吧
  • 由于需要从JavaScript再解析到DOM,有一定的性能损失,虽然使用各种方案挽回了一些,但是流畅性从一开始就难以做到极致
这两点在一开始并不成问题,反正那个以IE6为主的年代啥页面都这么慢,而且ExtJS那套皮肤在当年可是眼前一亮惊叹不已,都漂亮成那样了哪管得着定制性
但是到了如今的年代,前端不断地追求差异化、定制化,同时由用户体验的需求而引申出的流畅、性能等都被提到桌面上,那么ExtJS的两个隐患就被放大,慢慢不再被人容忍。现在说到ExtJS,很多朋友第一反应就是“慢”,第二反应就是“丑”,也正是如此
但其实ExtJS从一个框架(现在已然是解决方案)的层面上来说是很不错的,包括其MVVMC的模型也是很解决复杂应用的问题的

然后再回来说组件化是什么,但实在没啥好说的,因为我已经给了个“这东西没啥明确定义”的结论……
但是 张克军 提出的“组件化就是函数式界面开发”这一说法我是难以接受的,函数式界面开发就让它好好地叫“函数式组件化”吧,不然我们会在所谓的“传统UI框架”和“函数式界面开发”之间出现一个Gap,岂不是又要造个词给填上,多累……
我前面说会有一个Gap,这个Gap很可能就是我们现在想用“组件化”这个定义去表达的一些点,我想在此做一些个人的见解
我将之理解为以下几要素:
  1. 组件是对逻辑的封装,不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件,而这些并不能称为控件
  2. 组件具备单个可移植性,即“随加载随用”,不需要为其准备复杂的基础条件(如引入样式、引入框架等)。然而这一点现有那些所谓组件库做得并不好,技术上也不大现实
  3. 组件是声明式定义的,而非命令式。这个不想多说,很大程度上是自己主观的一个想法
而上面最重要的就是第一点,所以要问我什么是“组件化开发”,我的说法是:
把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式
这与传统开发框架的最大区别就是统一了图形元素与非图形元素,除此之外我再想不出其它真正体现区别的点了
在这个概念下,包括router、ajax、module loader、timer、animation、interval等,都是组件,共享统一的生命周期管理和对外接口,且都是声明式地进行组合
我的一位同事告诉我去年的深JS上,有位淘宝的朋友的话题叫做“前端组件服务化”,这里面提的那些个概念,是很符合我对“组件化”的认识的,他要是不给再强安个“服务化”的噱头就好了- -

不过话说回来,在这个要求之下,组件其实不是那么好进行抽象设计的,随便说几个例子,有难的也有简单的:
  • 非图形元素的各种需求如何统一接口,如timer和ajax
  • 组件可以横向组件,但是纵向复用如何解决,如希望任何图形元素都可以实现被鼠标拖拽的效果,则鼠标拖拽应该也是个组件,这个组件与其它组件的关系是什么
  • 有些组件对其可被组合的组件是有要求的,比如HTML里就不大好意思把一个<p>放进一个<span>里,这一点如何在组件上表达(实现不难,表达比较难)
  • 一些我们原本想当然认为纯的小函数的东西,是不是也能当组件玩,比如underscore.pick要不要也是个组件
想想挺好玩的……

虽然没有阿当这么极端,但我真心希望,前端能少一些概念名词,踏踏实实地提出我们面对的问题,探讨解决的方案,合作技术的实现,共享最后的成效……
为什么?