`

前端框架选型纵横谈

阅读更多

<!--[if !mso]> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]-->

<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:TrackMoves>false</w:TrackMoves> <w:TrackFormatting/> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:DoNotPromoteQF/> <w:LidThemeOther>EN-US</w:LidThemeOther> <w:LidThemeAsian>ZH-CN</w:LidThemeAsian> <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:SplitPgBreakAndParaMark/> <w:DontVertAlignCellWithSp/> <w:DontBreakConstrainedForcedTables/> <w:DontVertAlignInTxbx/> <w:Word11KerningPairs/> <w:CachedColBalance/> <w:UseFELayout/> </w:Compatibility> <m:mathPr> <m:mathFont m:val="Cambria Math"/> <m:brkBin m:val="before"/> <m:brkBinSub m:val="&#45;-"/> <m:smallFrac m:val="off"/> <m:dispDef/> <m:lMargin m:val="0"/> <m:rMargin m:val="0"/> <m:defJc m:val="centerGroup"/> <m:wrapIndent m:val="1440"/> <m:intLim m:val="subSup"/> <m:naryLim m:val="undOvr"/> </m:mathPr></w:WordDocument> </xml><![endif]-->

 

       近年来随着Web应用交互复杂度的提升,前端开发也迎来了一个高速发展的时期。除了一些老牌框架纷纷推出改动较大的升级之外,还涌现出一批新生代的 开源库和框架,推动着Web应用开发理念向越来越强调前端架构的方向发展——前端工程师。当下的前端技术可以说是处在一个新旧交替的过程之中,同时存在着许多不同的观念 和实践。

随着 jQueryExt 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,前端开发框架层出不穷,各有千秋,开发者在做技术选型时总是要费一番脑筋,本文试图对目前数量繁多的前端框架进行一些初步的分析和比较,在选择前端的技术架构时提供一些有益的参考,需要明确的是,本文探讨的前端架构是以JavaScript为主。

.纵向剖析

首先,JavaScript的库和框架繁多复杂,很大程度上源于Web前端开发本身的特殊性,JavaScriptweb应用中的职责和定位经历了巨大的改变,加上各种厂家的浏览器对ECMA标准支持参差不齐的复杂环境,这导致大家对于 JavaScript能做什么、该做什么、应该怎么做一直无法形成共识。

其次,在前端开发中对于库(Library)和框架(Framework)的区分向来是有些模糊的,像jQueryYUI这些项目的官方描述都是库(Library,却经常在各种地方被人们称作框架(Framework。传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构,控制运行流程,让开发者在合适的地方书写针对具体问题的代码;而库则附属于架构,不控制运行流程,只提供可调用的函数。但是,由于web前端开发的特殊性,这样的定义又显得过于严格苛刻了,真正称得上框架(Framework)的项目很少。因此,在比较JavaScript开源项目时,是框架(Framework)还是库(Library)并不显得那么重要了。

前端开发中,比较常见的问题大致可分为:封装原始API、基础架构、富应用架构等。

1.  封装原始API

JavaScript原生的API存在着对象、方法名繁琐,缺少常用的语法,旧浏览器(Browser)兼容不佳。通常来说封装的对象包含:

(1)DOM的选择和操作

(2)DOM事件的处理

(3)简化繁琐的XMLHttpRequest API

(4)语言增强

 

2.  基础架构

这一部分通常是各类框架中比较底层的功能,决定了采用此框架的代码是如何被组织到一起的。目标是提高代码的可维护性、可协作性和可测试性。

 

3.  富应用架构

利用设计模式进一步提高代码复用,使得开发者的精力可以主要集中在实现应用本身的功能上。

(1)代码逻辑分层:把对视觉界面、交互逻辑和数据的处理清晰地分开

(2)数据绑定:界面和数据模型进行绑定

(3)模板渲染:前端存储和渲染可复用的HTML模版

 

       .横向比较

       随着响应式网页设计的兴起,各种前端框架更是百家齐放,这使得我们在做技术选型时更要费一番脑筋,本文列举几个目前国内外较流行使用的:

       1.Bootstrap

       Bootsraphttp://www.bootcss.com)绝对是目前最流行用的最广泛的一款框架。它是一套优美、直观并且给力的web设计工具包,可以用来开发跨浏览器兼容性且美观大气的页面,提供了很多流行的样式简洁的UI组件,栅格系统及常用的JavaScript插件,支持LESSCSS的扩展。



 

 

    2.jQuery UI

    JQuery UIhttp://jqueryui.com/jQuery 项目组中对桌面端的扩展,控件和特效,与 jQuery 无缝兼容,同时,jQuery UI 中预置了多种风格供用户选择,免费,开源。



 

 

    3.jQuery EasyUI

    jQuery EasyUIhttp://www.jeasyui.com/)是基于jQuery开发的组件库,旨在快速、简易的完成页面的布局、表格等,对特效的支持丰富,提供htmlJavaScript方式使用控件,现分为免费开源版及商用版,如确定商用请务必遵循购买使用。



 

 

 

4.Sencha Ext JS

Sencha Ext JShttp://www.sencha.com/products/extjs)是 Sencha 基于 Ext JS 开发的前端框架,内容极其丰富,控件、特效等支持非常非常丰富,表格、图画、报告、布局、甚至数据连接,无所不包。然而Sencha Ext JS太过重量级,对网络的要求更高,商业化的Sencha将广大爱好开源程序猿斩于马下,Sencha其辅助产品也是付费的。



 

   

 

       5. Kissy

Kissyhttp://docs.kissyui.com) 是阿里集团自主开发的前端框架,目前在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core,用于对 DOM 的解析,Ajax 处理等。同时,有着丰富的控件,并实现了一些动画效果和特效。同样,在 Kissy 的控件中也可以看到 Bootstrap 等国外框架的影子。此外,Kissy abc 项目工具可以帮助用户实现自动化构建,并有很多扩展组件方便用户使用。



 

 

 

       .选择框架时应该考虑的方向

1.项目规模

小项目需要快速迭代,需要灵活性较高、兼容性比较好的架构。而大项目则需要关注成熟度、风格规范、可协作性、可维护性和可测试性。

2.团队的现有资源

团队是否对后台技术选择和架构有一定的偏好?是否已经对某些框架/工具有实战的经验?如果选择一个开放式的框架,是否有足够的精力来整合各类第三方工具?最后,选择一个团队不熟悉的框架,需要衡量带来的好处是否能抵消掉学习成本。

3.产品对用户体验的需求

产品本身更适合做成单页应用还是传统Web应用?产品是需要大量现成的UI组件,还是需要注重每一个细节?

在选择框架时,首先对自己的项目和团队进行定位,然后总结出具体的技术需求列表,来寻找适合的框架和周边工具,确定几个潜在选择之后,还需要开发者自己进行深入的研究和试用。

 

.总结

前端技术正处在一个新老并存、百家争鸣的时代。一方面我们需要等待HTML5以及其他W3C标准的普及,另一方面更新的标准,如Web ComponentsECMAScript 6又已在起草之中。这两个标准普及时,前端架构恐怕又会迎来一次洗牌。但不管怎样,做好足够的功课,然后根据自己的实际需求出发来进行选择总是没错的。

 

  • 大小: 21.4 KB
  • 大小: 27.8 KB
  • 大小: 41.3 KB
  • 大小: 35 KB
  • 大小: 20.5 KB
分享到:
评论

相关推荐

    前端框架分类及选型.zip

    本篇文章将深入探讨前端框架的分类以及选型策略,特别关注`Koa`框架及其相关中间件的使用。 ### 前端框架分类 前端框架主要分为三大类: 1. **MVVM(Model-View-ViewModel)框架**:如React、Vue.js和Angular,...

    前端框架分类及选型1.zip

    "前端框架分类及选型"这个主题涉及到前端开发中的重要概念和决策过程。回调函数是异步编程的基础,它在JavaScript中扮演着关键角色,特别是在处理网络请求如Ajax时。让我们深入探讨这些知识点。 首先,前端框架是...

    第5周 前端框架分类及选型.zip

    const path = require('path') const utils = require('./utils') const webpack = require('webpack') const nodeExcternals = require('webpack-node-externals') const { CleanWebpackPlugin } = require('clean...

    微前端架构选型指南.docx

    在选择微前端架构时,需要考虑到框架的限制,如前端框架的选择对微前端应用的影响。同时,IE 问题也是一个需要考虑的因素,因为许多组织需要兼容遗留系统。 微前端架构选型指南还需要考虑到依赖独立的问题,即各个...

    前端技术选型分析文档

    在众多前端框架和技术中,jQuery、Vue、React 和 Angular 成为了当前最为流行的几个选项。本文将针对这些前端技术进行深入分析,包括它们的发展趋势、资源对比、思维方式及性能、维护性、调试能力、兼容性、适用场景...

    大数据平台技术框架选型分析

    "大数据平台技术框架选型分析" 大数据平台技术框架选型分析是大数据处理的关键一步骤,涉及到硬件软件的选择、组件的选型等多个方面。在选择大数据平台技术框架时,需要考虑到多种因素,如核心功能需求、技术组件...

    微前端架构选型指南

    所以当我们的前端框架只有一个时,我们在采用微前端的技术时,可选范围就更大了。而遗憾的是,多数组织需要兼容遗留系统。IE问题。不论是在几年前,还是在今年,我们实施微前端最先考虑的就是对于IE的支持。在我遇到...

    大数据平台技术框架选型分析.pdf

    "大数据平台技术框架选型分析" 大数据平台技术框架选型分析是指在选择大数据平台技术框架时,需要考虑多种因素,以确保选择的技术框架能够满足业务需求。以下是大数据平台技术框架选型分析的知识点摘要: 一、需求...

    大数据平台技术框架选型.docx

    大数据平台技术框架选型 大数据平台技术框架选型是指在大数据平台中选择合适的技术框架,以满足业务需求和提高数据处理效率。在本文中,我们将讨论大数据平台技术框架选型的重要性、技术组件服务、选型思路和要求...

    自己整理的前端框架第一部分

    本文将围绕“自己整理的前端框架第一部分”这一主题,深入探讨前端框架的相关知识点。 首先,我们需要了解什么是前端框架。前端框架是预定义的代码结构,用于简化Web应用程序的开发,它提供了标准的编程模式、工具...

    大数据平台技术框架选型.pdf

    大数据平台技术框架选型 大数据平台技术框架选型是指选择合适的技术框架来搭建大数据平台,该框架需要满足平台的核心功能需求,包括数据存储、数据处理、数据分析等。下面是大数据平台技术框架选型的知识点总结: ...

    大数据平台框架选型分析解决方案.pdf

    "大数据平台框架选型分析解决方案" 大数据平台框架选型分析解决方案是当前大数据处理领域中的一种重要解决方案。该解决方案旨在帮助用户选择合适的大数据平台框架,以满足其核心功能需求和业务需求。 需求 大数据...

    前端vue-admin框架技术选型.xlsx

    前端vue-admin框架技术选型.xlsx

    前端架构技术选型文档文档

    为了更好地满足不同业务需求,各大互联网公司纷纷研发了自己的前端框架,如阿里的Kissy和Arale、腾讯的JX、百度的Tangram以及360的QWrap等。本文旨在探讨前端架构技术选型的原则与方法,并通过对比分析当前主流前端...

    框架设计选型之论

    框架设计选型之论chm版

    Vite前端框架,一键部署到云开发平台。.zip

    总的来说,前端开发是一个不断发展与进步的领域,随着新的样式解决方案和组件库的不断涌现,以及前端框架的不断更新和演进,前端开发的技术栈和工具链也在不断完善和丰富。未来,前端社区将继续充满朝气与活力,为...

    Brunch前端框架,一键部署到云开发平台。.zip

    总的来说,前端开发是一个不断发展与进步的领域,随着新的样式解决方案和组件库的不断涌现,以及前端框架的不断更新和演进,前端开发的技术栈和工具链也在不断完善和丰富。未来,前端社区将继续充满朝气与活力,为...

Global site tag (gtag.js) - Google Analytics