前端开发中最好少造轮子,除非你是BAT
日期:2016-08-17点击:3156
HTML、CSS、JavaScript是前端的根基,这是无可否认的事实。正如一辆车当然都是由一堆钢板和螺钉组成的,但是现在还有人拎着个锤子敲敲打打的造车吗?李书福说过,“汽车不过是四个轮子加两个沙发”,去一趟家具城和轮胎店,车不就造出来了吗?(好吧,我承认夸张系数有点大)
码农的世界里面经常会提到造轮子,也就是你为了造车而先拿扳手大锤去敲一个车轮出来,然后再用你做出来的车轮你做出来的座椅去组装成车。这种方式绝对的私人订制,但是这都是BAT干的事,其他团队和开发者这么干估计只能造一辆小孩子的玩具车,还是给3岁以下儿童用的这种:
大部分团队要做的是尽量使用现成的东西组装,而不是全部自己开发,就像现在网上卖的家具一样,一套组件寄过来组装一下就成了一张漂亮的桌子。工程上对于规模较大的产品,必须要用组件化的思维去开发,将项目分解成一个个小组件分给各个小组去开发,各个小组之间相互独立,最后将所有组件拼成一个完整的成品。而很多小部件其实是通用的,也有很多组织或者个人将自己做好的组件共享出来,直接使用这些现成的组件,显然是能大大加快开发进度的。
另外,一个显而易见的事实是,随着科技的日益进步,终端设备的多样化、页面可视化技术的发展,前端技术已经越来越复杂了,再也不是3岁小孩的玩具水平了。比如说用户交互的增强,比如说终端的多样化,这些都大大增加了前端开发的复杂度。这个时候从最底层从0开始开发,跟放着现成的打火机不用而去钻木取火一样,元谋人都笑了。
一套Web代码,多平台应用
众所周知,目前移动设备有安卓、苹果两大阵营,而国内微信的恐怖占有率也让我们不得不开发微信公众号版本,也就是一个应用至少需要android、iOS、Web App三个版本。3个版本使用完全不同的技术开发,相互之间不能共用代码,也就是说至少需要3班人马去开发。当然大家都希望直接用一套代码跑在3个平台上,具有这个能力的就只有Web App技术了,因为他本质上是一个网页,而网页是不分平台的。
但纯Web App有两个问题,一是对硬件的操作能力较弱(原生只有HTML5的一些硬件API),二是性能比原生差。为了提高对硬件的操作能力,可以使用phoneGap、Titanium这种底层中间件来调用底层硬件,而且可以通过插件的形式扩展,可以说在调用硬件的能力上,这种方式跟原生已经没什么差异了。这种开发方式与开发Web App无异,目前多数hybrid App都是用这种方式开发的。另一方面,性能方面由于HTML5技术的发展,结合CSS3的话,性能上也有了明显的提升。这里你可能会说,Web App在安卓版微信上非常容易卡顿呀。这里要科普一下,Web App是通过Web View渲染的,如果Web View的渲染能力不行,就会有明显的卡顿现象,而安卓微信的Web View用的是10cent的X5内核,国产虽好,仍需努力!作为对比,可以将同样的Web App放到iOS版微信去看看,性能基本不输原生,因为iOS版微信用的是与Safari同样的Web View内核!在谷歌火狐等移动浏览器上,性能也相当高,而且随着技术发展可以预见,在不久的将来Web App和原生App在性能上的差异基本可以忽略了。
前端好热闹
因为设备的进化太快、多平台也需要web开发的需求旺盛,所以现在前端变得前所未有的热闹。各大互联网巨头都推出了自己的前端框架,但框架虽多,核心思想都只有一个:组件化开发。
何为组件化开发呢?搭过积木吗?组件化就是讲一个个页面功能体做成一个个的积木块,开发的时候再将各个部分拼接出一个页面,如下每个框就是一个组件:
一个网站由多个页面组成,一个页面由多个组件组成,然后大组件又可以由小组件组成,将小组件拼成大组件,将大组件拼成大组件,再拼成页面模块,这就是组件化开发。
So Easy?Too Naive!
这里看到的组件化只是UI表现层的组件化,完整的组件化还包括交互事件、展现样式、数据交互,也就是说组件拥有自己的属性、方法以及数据交互能力。比如常见的搜索提示列表,用户输入信息传到服务器上,服务器根据用户输入词查找后将数据返回前端,再由前端展示,效果如下:
常用的UI库如Bootstrap实现了样式和动画的封装,但是数据交互方面还要自己处理。自己写也是可以的,服务器将数据返回来,然后前端用字符拼接或者DOM模板技术合成HTML放入网页中,这一步俗称渲染。当然渲染可以在前端做,也可以在服务器端完成。简单的字符串拼接大概是这样的:
01 |
<input type= "text" id= "" value= "红烧肉" > |
02 |
03 |
<input type= "button" id= "" value= "搜索" > |
04 |
05 |
<ul id= "test-ul" > </ul> |
06 |
07 |
<script type= "text/javascript" > |
08 |
09 |
var temp = '' , |
10 |