前端框架有什么用?

前端框架有什么用?,第1张

web前端框架是做什么的? 5分

前端框架一般指用于简化网页设计的框架,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档 *** 作,漂亮的各种控件(按钮,表单等等)。

使用前段框架可以降低界面开发周期和提高界面的美观性。

有些框架比较轻量,比如jquery,有些框架比较重量,比如extjs。一般来说重量的框架会封装更多的功能,比如extjs,封装的grid控件有很强的数据展示和 *** 作功能。

前端框架是什么?有什么用、有什么好处?

可以简单的理解成是:使用广泛的前端开发套件,可以帮助你快速的网液橡念站。

前段框架的好处:对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码,保证体验的最佳,更要考虑与市面上各大浏览器的兼容性,还需顾及Web前端表现层和前后端交互的架构,以及模块化、通闹困用类库、框架编写等一系列问题,由此提升前端开发的效率,降低开发成本和周期。

html的框架到底是用来干嘛的?什么时候用到?

你接触了后台就知道了,这样可以做到页面地址不需要变动, 但却可以利用iframe的tagert属性把显示数据的页面包含进来, div就不行,因为它没有这个target属性,文件独立出来方便重用,且结构清晰;

前端开发框架有哪些

首先我想说明一下,我们通常说的js不是框架,是语言,即javascript,据最新世界编程语言排行榜来看,已经上升到了第7位,发展迅猛,其标准是ECMAScript,现在基本上是基于ECMAScript5。jQuery是用js写的框架,其在DOM *** 作上有很明显的优势,也是时下很常用的一个js框架。

至于之外还要学习那些框架呢?

如果你说的是js框架,建议先掌握好jQuery,然后还有很多的,比如楼上提到的extjs,近几年比较流行的AngularJS,基于移动端考虑的轻量级仿jquery框架zepto,还有jquery mobile,还有适合写后端或服务端的node,等等。如果是web前端框架,就不仅仅是涉及的js了,还有html和css。个人觉如备得只有这三种语言都涉及到的框架才能说得上是web前端框架。现在比较火的是Bootstrap,还有Foundation,比较古老的有jqueryUI,easyUI等等,还有其他很多很多。如果还有算上处理方案及版本升级代码迭代等,就要用到百度团队研发的fis这种了。其实内容真的很多很多,前端任重而道远啊~

web前端框架是什么意思 10分

前端架构师必须懂得真正的编程知识,而这正是很多自封为前端架构师的人所缺乏的。我的意思不是能够剪切粘贴改进代码就行了,而是能够跟老练的工程师商讨如何能够最好地结合前端。

这就是说,前端架构师需要真正理解结构遭遇商业逻辑的问题。如果工程师说某些东西使用ASP.Net DataGrid是不可能实现的,前端架构师必须能够解释如何与为何要使用DataList或Repeater取代,解释为何DataGrid在该情景下是个错误的选择……

这只是个例子,问题还在于仅知道客户端编程也是不够的。能够使用与工程师相同的术语,能够讨论(前后端)关键集成的最佳解决方案,这是绝对必须的。

断线的风筝

我们今天正处在一个不妙的处境中,原因在于几乎没有人能够为前后端的沟壑搭桥。一般工程师不会有兴趣或实践标记,CSS, 或DOM脚本编程,大部分客户端开发者也没有与后端技术协作的经验。几周入门PHP不会成为程序员,几周入门XHTML也不会成为真正的客户端开发者。

罪魁祸首

我首先想到的十足例子是,ASP.Net完全漠视Web标准,同样地,web氛围(我们指表格和占位gif)让Web标准郁闷。企业项目的大多数框架输出的标记,即使使用1999年的标准来衡量,都是糟糕无比的。

如此巨大和“专业”的产品怎么能才够不忽视,按理说是整个项目最简单的方面?只有静态代码。理由是,基于技术的立场衡量产品,结构,CSS和其他客户端技术都是“事后诸葛亮”。表现逻辑,结构和行为混杂,压根无助于无障碍,Web标准,或者前端技术干净的分离。擡起你的头来,就在2006,这些都成受欢迎的惯例了。

总结

如果这个世界上姿态最鲜明的产品和项目都如此低劣的方式来处理事情,其他的还有什么好说?毫无疑问,我们需要前端架构师,而且就在昨天。

归结于归结,我们有一堆相互关联的技术,很少人能够埋头钻研它们之间的关系,这很不幸。正确做事的真正价值在于容易的维护和长期的适应性。虽然在关键时刻,有些方式更容易选择其他的方法和拼凑起另外的东西。对某些人来说,这可能是可接受的做事方式。但是,对我们大部分人来说,这是拙劣的抉择,也非常不专业。

我交给你去想了。我假设你把车交给技工修理,修好了时候,瞧瞧引擎罩内大量的输送管,我不知道你对技工作何感想?

为什么需要自己实现前端框架

前端对框架(库)的大小更敏感

前端内容的渲染和交互效果的实现如果依赖JS框架(库),需要先将这些框架(库)下载到客户端,此时框架(库)的大小将直接影响到前端的首屏渲染速度。框架(库)越小,加载的速度就越快,而随着功能的越来越全,框架(库)必然会越来越大,要保证性能,需要制定加载策略。

便于制定加载策略

解决框架(库)变大的常见加载策略是将框架分为核心部分和扩展部分,核心部分在首屏渲染前必须下载完成,并且这部分的加载文件尽可能的少和小,扩展部分则可以模块化方式来懒加载。

核心部分的JS在发布时,可对文件合并,数量尽可能少,单个文件在gzip压缩后最好不要超过20K。核心部分可以是实现“JS语言扩展(面向对象),DOM *** 作API,数据交互方法(ajax),导航策略,模块化底层实现,事件底层实现,模版解析”等。扩展部分一般是一些可异步加载的UI组件,例如:输入控件、d出窗、动画API、文件上传及预览、图表控件、富文本编辑器等。

上面的实现模式,在主流的JS框架(库)中,有三类选择:一类是以ExtJS为代表的大而全的框架(库),这类框架虽然功能满足,但往往无法拆分为核心部分和扩展部分来加载,因此基本不予考虑;一类是相对轻量的YUI3、Dojo等框架(库);一类是近来流行的前端MV*系列Backbone、Ember、Angular,这类在充当核心部分时,还需要组合Underscore、RequireJS,jQuery等第三方库。

后面两类可以满足要求,但个人觉得不是完美的方案,因为在开发实际产品时,将这两类作为核心部分时,往往里面有很多是不需要的,而还有些需要自己来额外补充近来,可以是自己开发,也可以集成第三方的实现。而核心部分框架(库)如果是自己实现,则可以保证在功能完整的情况下,不多出其它的东西,加载的JS可以控制到最小,而且代码风格也统一。

便于扩展

前端代码与用户的交互直接相关,而交互的设计变化和不确定性非常大,现成的第三方实现往往难以直接利用,需要改造。有时改造第三方的框架,先要非常熟悉框架,当这个框架比较复杂时,这样的工作量和难度就大大加大了。而自实现的框架(库)则可以根据需要任意扩展,可以根据需求制定对应的规范和API。

前端开发框架有哪些

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。

Bootstrap是用动态语言LESS写的,主要包括四部分的内容:

脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。

基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。

组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。

JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。

Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。

jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。

Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。

StyleBootstrap. —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。

BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。

Bootswatch —— 提供大量免费的Bootstrap主题。

Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。

LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,......

前端开发框架有哪些

1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。 Bootst...

前端框架用哪个好

1、flex

Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。

需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本。

Apache称,该版本标志著Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。

从Macromedia卖给Adobe,然后又捐给apache,不知道搞什么名堂。不过还好没有经过大幅重构,否则就真的是悲哀了!

2、extjs

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。

功能丰富,无人能出其右。

无论是界面之美,还是功能之强,ext的表格控件都高居榜首。

华丽的界面,灵活的功能,还有开发工具都是配套的,但有个最大的问题,用就得花钱!

3、easyui

easyui帮助你构建你的web应用更加容易。

它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。

但是她有一个最大的问题就是代码只能找到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会非常麻烦!不过一个比较大的优势是开源免费,并且界面做的还说的过去!

4、MiniUI

又一个基于jquery的框架,开发的界面功能都很丰富。

jQuery MiniUI - 快速开发WebUI。

它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。

使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、d出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。

界面做的挺不错,功能也挺丰富,但是有两个比较大的问题,一个是收费,一个是没有源码,说白了,不开源!基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!

5、jQuery UI

jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!

6、DWZ

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

设计目标是简单实用,快速开发,降低ajax开发成本。

欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平。

毕竟是国产的,支持一下,而且源码完全公开,可以选择一下!不过性能怎么样不敢确定!

7、GWT

Google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。

你不用......

web前端开发框架有哪些

bootstrap是twitter出的一款不错的UI框架,或者与其说是框架不如说是类库(lib),当然这里边牵扯到一个“究竟什么是框架什么是类库?”的问题,我们暂时不谈。毕竟是有大公司背景的代码堆,我觉得没什么“落伍”可言。

angular是前两年之内突然火得一塌糊涂的一个fe框架,这个我觉得可以算的上是真正意义上的框架了,MVVM双向绑定,包括它拥有足够完善的社区、生态,甚至chrome上都有很多好用的相关插件(这一点可以说是占了google出品的光),比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西,杀鸡焉用宰牛刀吧我觉得。

backbone主要针对的MVC中的M层,至少我是这么理解的。对UI层它几乎没什么太多的限制,一方面给出了coder自由度进行发挥,另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架,另外对于underscore前端模板那一套东西,说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了,不一定准确,况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我,别急着反驳,至少往下看完我说的话。

相比之下,react可以说是一个在MVC中V层做的十分出色和新颖的框架了,独特的jsx编译机制就已经让你的代码变得高大上了,我是觉得这个类库在UI层做的更彻底更专业,或者说让FE的代码更专业了。更何况,react比angular更年轻,而且同样拥有大公司背景,react native一出更是让JS工程师的地位取得了革命性的提升,(不要跟我提phonegap,用过两个东西后你会明白,react打包的app性能甩phonegap几条街没问题)。另外既然楼主提到了之前的网站是bootstrap,不妨可以看一看react-bootstrap这个东西,或许这就是你想要的。

AngularJS 与 jQuery 等传统 *** 作 DOM 的思想有所不同,

对于 jQuery 等,一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。

而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版,然后通过模版像搭积木那样组合页面。

显然的,前者在 SEO 上有天然优势;而后者,搜索引擎还只能拿到某个模版,而无内容。

暂时没想到有什么特别好的解决方案,或许,对于内容页,可以继续使用传统方式,而只在需要更多交互的地方应用 AngularJS,特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架,后端只要为前端提供数据接口,而不再需要为其拼接 HTML.

## 模块化

AngularJS 也是神衫族遵循 AMD 的。(AMD 是啥,参考:使用 AMD、CommonJS 及 ES Harmony 编写游弊模块化的 JavaScript)

虽然它也可以按照传统代码方式来写(其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework),但是,既然都提供了这么一种模块的方法,为何不用上呢

angular.module('app', [

'moduleA',

'moduleB',

])

.controller('MainCtrl', [

'$scope',

function ($scope) {

}])

而且,这种写法还可以方便做代码的合并与压缩,在后面 Grunt 自动化 一节中,就会提到使用 Nodejs/Grunt 来自动的做这些事情。

## 可复用模版 or 业务逻辑模版

今年 Google 开发者大会中 提到的 Polymer(Welcome - Polymer)

这货让人感觉像是 Angular Directives 的塌轿进化。

而 Directives 做的事,就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签,作为可复用的模版,以供组装业务调用。 Demos 可参看:Angular directives for Twitter's Bootstrap

当然,为了方便修改,很多时候在做 directive 的时候需要将 template 用 templateUrl 代替,

不用担心文件的碎片化,不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。

Directives 是作为可复用的模版,

而业务逻辑则是一般是一个业务对应一个 html 及其的 controller.


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12251906.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-22
下一篇 2023-05-22

发表评论

登录后才能评论

评论列表(0条)

保存