著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。
作者:毛文强
链接:https://www.zhihu.com/question/37946473/answer/84852303
来源:知乎

几年前,还是痴迷java的那会儿,我也曾纠结于前端框架的选择。试图找出一套一劳永逸的前端框架继承到项目架构中。搜遍全网得出以下结论:

各大前端框架可以按照“封装度”的标准来区分。

设计刚出的一套网页皮肤,封装度为0。层层封装到可以直接用后台语言写页面,封装度为10。那么我是这样来区分前端框架的。

1级——纯html+css
放5年前,基本就是用Dreamweaver刚排出来的页面或者网页查看源代码扒下来的皮肤。不涉及到js,就是纯页面皮肤。
--------------------------------
2级—— bootstrap系列
bootstrap的出现是一个里程碑事件。发源于twitter,引入了不少html5/css3的特性。由于它对响应式的支持以及良好的体验,给人一种耳目一新的感觉。其源码,不管是css还是js都值得学习一下,看后经常会有“原来还可以这样做”这种恍然大悟的感觉。不过归根结底是一套ui皮肤+少量js组成的框架,属于封装度偏低的框架。经典页面大概是这样:

--------------------------------
3~4级—— metronic/adminLTE系列
基于bootstrap或者其他1级框架,然后集成了各种jQuery插件、富文本编辑器等js库,组成的一个大杂烩工具包和案例库。皮肤基本是基于bootstrap自定义的一套主题。案例比较详尽,开发的时候找到需要的组件把前端代码复制粘贴,再稍微调试一下就能达到良好的视觉效果。根据集成的第三方库的多少,基本可以划分到3~4级封装度这样的范围。这个级别的框架的代码更多的是属于粘合剂,将各种不同的第三方库的前端代码粘合起来。经典页面大概是这样:

--------------------------------
5级—— jQuery-ui
这里要单独把jQuery-ui拿出来讲,并不是因为它的封装度有多高,而是我认为它是一个分界点。jQuery以下级别的框架,代码以css为主,自身的js代码少,框架量级更轻,更灵活,更适合互联网web产品。jQuery以上级别的框架,属于前端的重度封装,通过框架暴露的接口进行开发,开发人员甚至不需要太多前端知识,只需要详细查看框架的开发文档即可。jQuery以上级别的框架更适合传统管理软件的开发。
--------------------------------
6~7级—— easy-ui/DWZ
easy-ui基于jQuery-ui,不过具有更丰富的组件库。貌似商业版收费很高。听说某大型国企花了大价钱购买下来使用。DWZ是国产框架中我认为综合表现还不错的,完全免费,有问题可以在他们的QQ群里提。其余的之前还用过金蝶的operamasks-ui,不过现在好像已经不更新了。这一类级别的框架还有一个另外的称呼——“富客户端框架”,意思就是重度js框架。使用起来开发效率很高,当年也是一度百花齐放,框架辈出。经典页面大概是这样:
----------------------------------------------------------------
8级—— extjs系列
extjs属于前端框架领域中的庞然大物,封装程度很高,具有自成体系的元素选择引擎和浏览器兼容方案,js写法上也有自己的方式。组件很多很全。只看extjs的官方文档和示例几乎不必学习任何其他的前端知识就可以做出“很漂亮”的前端页面。当然页面很容易“撞衫”。使用时间长了,会对其产生严重依赖,离开extjs,几乎不会写前端页面了。经典页面大概是这样:

--------------------------------
9级——vaadin/GWT
最后一级,也是封装度最高的一级,也就是所谓的使用后台语言写前端。如果说之前的八级至少前端和后端还是相对分离的,后台程序在java中写,前台程序在html或者js中写;那么这一级别的框架简直会颠覆你的认知!只需在后台使用java写好了类和对象,并设置好相关的属性,网页的元素是自动通过后台对象生成的。这当然有好处,妈妈再也不用担心我不会写js和css了。然而就学一下html/css/js真的那么难吗?个人认为,尽管GWT有google的这么强悍的背书,但是这种9级封装的本质上把前后台耦合得更紧密。一个人做一个项目还可以考虑,但是一个团队前后台分离、模块化开发的时候,使用这种框架是一种灾难!所以我是极度不建议使用9级封装框架的。
--------------------------------

综上,针对不同的编程方式,给出以下参考:

1 DOP(Deadline Oriented Program,面向截止日期编程)的程序猿们有两种选择:a、努力学习html/css/js,使用2~3级框架;b、看不上前端代码的,6~8级是不错的选择。对于业务优先、老板整天嚷嚷时间有多紧、客户有多急切的项目,你可以直接选b了,我觉得老板是不会给你时间学习html/css/js的。

2 EOP(Experience Oriented Program,面向用户体验编程)的程序猿们,大多数做的是追求极致用户体验的互联网产品吧。那果断选1级封装度的框架,可适当借鉴2~4级的框架。

3 MOP(Money Oriented Program,面向人民币编程)对于一直做后台,趁过年放假想赚个外快的程序猿们,我知道你们也不想在前端领域有多大发展,搞好后台就足够一辈子衣食无忧了,所以还是选择6~8级吧。

此外,需要考虑搜索引擎优化的项目,慎用富客户端或者重ajax应用。

什么?你还需要考虑ie6的兼容性?出门左转有一面墙,你可以撞上去了,不送!

最后告诉大家,这些都是几年前我为了治疗自己的选择恐惧症而进行的一些分析。

现在,答主我已经不再纠结各种前端框架了。因为心中有剑,枝叶、落花皆可为剑。

转载于:https://www.cnblogs.com/pekkle/p/6568711.html

关于前端程序员写前端用什么框架更好?相关推荐

  1. Java程序员情人节_盘点程序员情人节的表白,前端程序员最浪漫,后端不服来战...

    今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...

  2. 盘点程序员情人节的表白,前端程序员最浪漫,后端不服来战

    loonggg 读完需要 3分钟 速读仅需1分钟 今天是七夕,中国的情人节,当然了就是牛郎和织女团聚的日子.在 IT 群体中,很多人都说程序员不浪漫,程序员不懂得浪漫,程序员木讷,只会敲代码,没有女朋 ...

  3. 前端程序员福利 利用node写接口

    Code is never die ! 前端程序员为什么要自己写接口?

  4. 好程序员web前端技术分享媒体查询

    为什么80%的码农都做不了架构师?>>>    好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...

  5. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    为什么80%的码农都做不了架构师?>>>    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...

  6. 前后端解析_好程序员Web前端教程分享前后端分离接口

    随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...

  7. 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别

    为什么80%的码农都做不了架构师?>>>    好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...

  8. 好程序员web前端分享js剪切板Clipboard.js 使用

    好程序员web前端分享js剪切板Clipboard.js 使用,clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素. 必须要与一个DOM元素相关联,并 ...

  9. props写法_好程序员web前端培训React中事件的写法总结

    好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...

  10. 好程序员web前端分享Nodejs学习笔记之Stream模块

    好程序员web前端分享Nodejs学习笔记之Stream模块 一,开篇分析 流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...

最新文章

  1. 1.磁盘的数据结构包括那些内容?
  2. 图解Transformer,读完这篇就够了
  3. 谷歌无人车离奇车祸曝光:人类安全员睡着后,误触关闭了自动驾驶
  4. 安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制...
  5. 内向女生适合学计算机吗,适合内向女生学的专业有哪些
  6. 如何生成 jMeter 结果分析统计图表
  7. 文章中嵌入代码块_如何在您的文章中嵌入多项选择测验问题
  8. 大唐豪侠服务器列表文件格式错误,[动态] 大唐豪侠1.2.4版本更新公告-大唐豪侠-东北游戏网...
  9. 转:正则表达式简介及在C++11中的简单使用
  10. (转)JAVA实现Windows拨号、IP切换
  11. Django搭建个人博客:改写View视图
  12. golang中字符串常用的命令
  13. python中sorted方法和列表的sort方法使用详解
  14. Eclipse中文版代码自动补全设置
  15. VS绿豆沙屏幕保护色参数设置
  16. c++ 小游戏 NO 9 最后主函数
  17. corosync+pacemaker高可用
  18. 如何用计算机弹出专业团队音序,《计算机文化基础》模拟试卷(以音序排列)
  19. 图文详解丨iOS App上架全流程及审核避坑指南
  20. 多个containers 共用一个pvc_Smart News | 糊树脂 PVC糊树脂价格有望持续上涨,相关概念股迎利好...

热门文章

  1. .tar文件和.tar.gz文件
  2. 安装tensorflow出现的问题
  3. 计算机组成原理——第七章
  4. spring学习笔记二(基于注解)
  5. Linux 网络命令 ip、ifconfig
  6. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_12-删除页面-服务端-接口开发...
  7. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_1 请求参数绑定入门
  8. 二、运行盛派的Demo(看下效果)
  9. 基于Java visualvm的可视化监控的使用
  10. python 的内置函数