前端框架_前端框架对比 - CSDN
精华内容
参与话题
  • 前端流行的十大框架

    千次阅读 2018-09-02 22:45:48
    十大前端开发框架 原文出处http://blog.jobbole.com/41950/ 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架,第二节将会跟大家分享...

    十大前端开发框架

    原文出处http://blog.jobbole.com/41950/

    编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架,第二节将会跟大家分享更多其他的框架。

    随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂。

    十年前,一切都还简单得多。那个时候,大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道,并通过添加几个浏览器的hack,来兼容诡异的旧版本 IE 浏览器。时至今日,随着过去五六年间手持电子设备的突飞猛进,一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷,电子阅读器,以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。

    可以预见,在不远的将来,相对于使用台式机,越来越多的人会使用移动设备来访问互联网。事实上,已经有相当数量的一部分人只通过智能手机上网。这意味着,我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品,这至关重要。在撰写本文的时候,尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果,但是用于实现这一目标的技术以及工具正在变得越来越好。

    在不知道浏览设备屏幕大小的时候,最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备(如智能手机以及平板电脑)上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸,然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的,但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便,链接太小难以点击,缩放以及滚动的操作多多少少会让人在阅读的时候分心。

    响应式网页设计利用同样的HTML文档来适配所有的终端设备,响应式网页设计会根据设备屏幕的大小加载不同的样式,从而在不同的终端设备上呈现最优的网页布局。举个例子,当你在大屏幕桌面浏览器中查看一个网页的时候,网页的内容可能是分为很多列的,并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面,你会发现页面的内容呈现在同一列中,并且导航按钮足够大,点击起来很方便。你可以在Media Queries这个网站上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例,然后改变浏览器窗口的大小,你会看到网页的布局会根据窗口大小相应变化。

    到目前为止,我们可以看出,响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢?我们每个人都需要成为web大师才能驾驭这门技术么?或者是利用我们已经掌握的web基本知识就已经足够了?目前有什么工具可以帮到我们么?

    这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难,但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架,你可以花最少的力气创建响应式且符合标准的网站,一切都很简单并且具有一致性。使用框架有很多好处,比如说简单快速,以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用,即使只掌握少量的web知识,你也可以毫无障碍的使用它们。

    简而言之,如果你认真对待目前的web开发工作,那么使用框架进行开发就不是可选项而是必须要做的事情。你的站点必须高度灵活以适应不同的浏览器,平板,智能手机以及其他各种各样的手持设备。

    一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了大家的使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。

     

    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.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
    • BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
    • Bootswatch —— 提供大量免费的Bootstrap主题。
    • Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
    • LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

     

    2. Fbootstrapp

    Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

     

    3. BootMetro

    BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

     

    4. Kickstrap

    Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

    App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。

    选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。

    附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。

     

    5. Foundation

    Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

    Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price tables),进度条(progress bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。

    Foundation框架还提供了很多有用的扩展。

    • 模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。
    • HTML模板 —— HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。
    • 图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。
    • SVG 社交网络图标(Social Icons)—— 一组不依赖分辨率的社交网络图标(可缩放矢量图标)。
    • 响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。
    • 关闭帆布布局(Off-Canvas Layouts)—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

    如你所见,对于web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

     

    6. GroundworkCSS

    GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

    GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

    GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

    你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。

    GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

     

    7. Gumby

    Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

    它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

    Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip links),拨动开关(toggles and switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的web项目中尽情使用。

    Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

     

    8. HTML KickStart

    HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

    这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。

    你可以使用99Lime UIKIT提供的UI组件来搭建你的产品线框图。

     

    9. IVORY

    IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

    当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。

     

    10.Kube

    最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

    Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。

     

    总结

    我希望看过本文之后,当你为新项目选择框架时,能够对各种各样的框架有更好的认识。在文章中,我尝试着列出了我所知道的目前应用最广泛,功能最全面,结构最优的一些前端开发框架。不过如你所知,大千世界,瞬息万变,因此,如果你知道本文中没有列出的其他的优秀开发框架,欢迎你在评论中与我们分享,这样会使本文更加有帮助,谢谢。

    展开全文
  • 2019年几大主流的前端框架(UI/JS)框架

    万次阅读 多人点赞 2019-04-15 17:48:37
    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,...

    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。

    要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念:

    HTML负责结构,网页想要表达的内容由html书写。

    CSS负责样式,网页的美与丑由它来控制

    JS负责交互,用户和网页产生的互动由它来控制。

    web前端发展至今,演变出了无数的库和框架;说到库第一时间想到的是不是jquery?在小编刚接触库的时候也是从jQuery开始的;今天我们就来说说前端发展到现在都有哪些好用的库框架。

    2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造。这一年中有很多热门的前端开发框架,下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。

    在这互联网飞速发展的信息时代,技术的更新迭代也在加快。目前看来,火了十几年的Java技术现在仍然是棵常青树。回想两年前初来咋到,也是想好好当一名java程序员,五年计划都行想好了,最后还是阴差阳错搞了前端。前端目前来看还是非常火的,随着IT技术的百花齐放,新的前端框架不断推出,但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品,产品又在不同程度的推进着技术的演进。Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在不同业务场景下的角色互换。而随着Node.js的出现语言的角色也在发生着转变,js扮演了越来越重要的角色。也就有了茶余饭后也把了解到的知识整理一下。

    前端UI框架组件库:

    说到前端框架我第一印象中想起React、Vue和Angular,不知道你是否与我一样想到这些,现在常用的有:Bootstrap、jQuery UI、BootMetro、AUI常用的还有很多、就不一一跟大家举例出来了,因为很多朋友认为在不同项目开发中用到的前端框架不一样,其实也有一款可以适用于多种项目开发的前端框架,只是没发现。

    用前端框架开发项目的原因?

    这个应该是最好解决的问题,首先就是减少造轮子的想法,能够快速的开发一款web应用对于公司来说都是非常愿意开到的,在时间和成本之间就能够节约很多的时间,这是其中一点,另外一点就是使用前端框架的组件功能,只要组件功能强大,什么样的项目都能够开发(前提是:要熟悉前端框架的功能!),时间成本问题就能够轻松解决。

    没有设计师也能做出精美页面效果的前端框架

    虽然市场中有很多的前端框架,但部分UI框架是属于组件库,然而QUICK UI跟当下流行的三大底层框架React、Vue和Angular不同,QUICK UI提供了一整套前端解决方案,包括前后端分离的开发框架、100多种功能强大的UI控件、几十套精美的皮肤模板和近16万字的开发文档,满足你所以开发项目都不是问题。

    前端框架库:

    1.Node.Js

    地址:http://www.runoob.com/nodejs/nodejs-tutorial.html (中文网)
    描述:Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
      Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

      简单的说 node.js 就是运行在服务端的 JavaScript。

      Node.js 是一个基于Chrome javascript 运行时建立的一个平台。

      Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

    用途:
      1. RESTful API(目前比较流行的接口开发风格)

      这是NodeJS最理想的应用场景,可以处理数万条连接,本身没有太多的逻辑,只需要请求API,组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。

      2. 统一Web应用的UI层

      目前MVC的架构,在某种意义上来说,Web开发有两个UI层,一个是在浏览器里面我们最终看到的,另一个在server端,负责生成和拼接页面。

    不讨论这种架构是好是坏,但是有另外一种实践,面向服务的架构,更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用,就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的,他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

      3. 大量Ajax请求的应用

    例如个性化应用,每个用户看到的页面都不一样,缓存失效,需要在页面加载的时候发起Ajax请求,NodeJS能响应大量的并发请求。  总而言之,NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

     

    2.angular.Js(比较厉害,github排名也比较高)

    地址:http://www.runoob.com/angularjs/angularjs-tutorial.html (中文网)
    描述:AngularJS[1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    用途:通过描述我们应该就能很好的明白AngularJS的真实用途了,MVVM,模块化,自动化双向数据绑定等等。除了简单的dom操作外,更能体现Js编程的强大。当然应用应该视场合而定。
    它的出现比较早,也是曾经比较流行的前端js框架,但是今年来随着reactJS与VueJS的出现,它的热度在慢慢降低。
     

    3.JQuery Mobile

    地址:http://www.w3school.com.cn/jquerymobile/    (中文网)
    描述:Query Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
    用途:jQuery Mobile 是创建移动 web 应用程序的框架。
          jQuery Mobile 适用于所有流行的智能手机和平板电脑。

          jquery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

     

    4.requirejs

    地址:http://www.requirejs.cn/
    描述:RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
    RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录。

    用途:模块化动态加载。
     

    5.Vue.js(目前市场上的主流)

    地址:http://cn.vuejs.org/
    描述:Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.js 更容易上手。
    目前市场上比较流行的前后端分离的开发模式,大多前端都是vueJS做的,具体的优点请大家看官方文档。
     

    6.backbone.js

    地址:http://www.css88.com/doc/backbone/
    描述:Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序。
     

    7.React.js(gihub排名仅次于vue.js)

    地址:http://reactjs.cn/react/docs/why-react.html
    描述:React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。

    8.Amaze UI

    Amaze UI是轻量级的前端应用框架,是国内比较流行的框架,比较适用于移动端响应式开发框架,可以按照项目要求生成专属的UI框架库进行使用,组件非常丰富,可以构建出漂亮的web页面。

    官网地址:http://amazeui.org/

    三、可视化组件

    1.Echarts

    地址:http://echarts.baidu.com/
    描述:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
     

    2.tableau(收费)

    地址:http://www.yuandingit.com/special/tableau/index.html
    描述:Tableau 是桌面系统中最简单的商业智能工具软件,Tableau 没有强迫用户编写自定义代码,新的控制台也可完全自定义配置。在控制台上,不仅能够监测信息,而且还提供完整的分析能力。Tableau控制台灵活,具有高度的动态性。
     

    四、前端构建工具

    1.gulp

    地址:http://www.gulpjs.com.cn/
    描述:易于使用
          通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

          构建快速

          利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

          插件高质

          Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

          易于学习

          通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

    2、ES or webPackage

    1.Bootstrap中文网

    先分享下,如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习

    Bootstrap,让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件,还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。

    Bootstrap中文网地址:http://www.bootcss.com/

    2. Layui

    layer是一款口碑极佳的web弹层组件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui 首个版本发布于2016年秋,她区别于那些基于 MVVM 底层的 UI 框架,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

    Layui官网地址:https://www.layui.com/

    3.ElementUI

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI 。适合于Vue的UI框架;

    官网地址:http://element-cn.eleme.io/#/zh-CN

    4.Mint UI

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

    官网地址:http://mint-ui.github.io/

    5.angular

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

    官网地址:http://www.angularjs.net.cn/

    6.React

    React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

    官网地址:http://react-china.org/

    7.vue.js

    近几年最火的前端框架当属Vue.js了,Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人--尤雨溪
     

    几款常用的高质量web前端框架

    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。

    QUICK UI

    QUICK UI是一套完整的企业级web前端开发解决方案,由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量,提高开发效率,快速构建功能强大、美观、兼容的web应用系统。

    QUICK UI优势:

    ①功能最为强大

    QUICKUI经历了7年的迭代更新,不断从客户的各种业务中对组件的需求进行归纳和抽离,从而打造新的组件和功能。现在最新的4.0版本框架包含了一百多种组件,一千多个应用场景示例。可以说在前端框架领域中,QUICKUI拥有功能最强大组件库。

    ②运行最为稳定

      很多其他的第三方UI控件在简单场合使用OK,到了复杂的场景中就会出现很多问题,这种现象很常见,因为在组件设计时无法预料到所有的应用场合。而QUICKUI在7年间经历了数千个项目实际检验,在各种复杂场景都应用过,并根据客户的反馈不断完善和调整。目前的第四代可以说是最稳定、最完美的版本。

    ③丰富精美的界面皮肤

      跟其他web前端框架仅仅是一套组件库不同,QUICKUI是一整套前端解决方案,拥有丰富的外观界面解决方案。采用现今流行的扁平化设计理念,推出了包括登录、响应式web、工作桌面、地图类、门户风格、大屏展示风格等等几百套制作精美、用户体验优秀的界面。这些界面是以QUICKUI皮肤包的形式发布,使用和更换都非常方便。

    ④事无巨细的开发文档

    QUICKUI拥有16万字+的开发文档,框架和组件的每一个功能点都有详细的讲解和代码示例,用于开发过程中随时查阅。除了框架机制讲解和组件使用教程,文档还涉及web前端开发的很多知识。仔细阅读并结合框架使用的话,你很快就能成为web开发的高手。

    ⑤上手开发非常容易

    QUICKUI采用组件化思想来构建组件,一个组件就是一两句html的标签,使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来,很大程度减少前台编码的出错率;保留了HTML的布局方式,从而快速进行页面布局。对开发者前台技术要求也非常低,只需要了解html语法和一些简单的JS即可,从而把更多精力放在业务功能的实现上,极大地提高开发效率。

    ⑥浏览器兼容性非常好

    QUICKUI4.0使用了很多HTML5,CSS3技术用于提高表现力和用户体验,这些新的特性在现代浏览器中会有很好的效果。但是,国内依然有大量的用户在使用IE7、IE8等旧时代的浏览器,为照顾这部分用户,框架采用了渐进式思想,确保低版本浏览器也能正常使用。所以,QUICKUI兼容IE7以上所有主流浏览器。

    flex

     

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

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

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

     

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

     

    extjs

     

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

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

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

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

     

    easyui

     

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

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

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

     

    jQueryUI

     

    jQueryUI是一套jQuery的页面UI插件,包含很多种常用的页面空间,例如Tabs(如本站首页右上角部分)、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。  功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!

     

    MiniUI

     

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

    jQueryMiniUI–快速开发WebUI。

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

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

     

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

    DWZ

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

     

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

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

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

    YUI

    Yahoo!UILibrary (YUI)是一个开放源代码的JavaScript函数库,为了能建立一个高互动的网页,它采用了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。使用授权为 BSD许可证,基本上没怎么研究过!YUICompressor倒是挺出名的,这套UI库不知道应用的情况怎么样!

     

    Sencha

    Sencha是由ExtJS、jQTouch以及Raphael三个项目合并而成的一个新项目。

     

      大公司的框架,并且是几样库的强强联合,值得推荐!

    OperaMasks-UI

    OperaMasks-UI是OperaMasks团队2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端JavaScriptUI组件库。目前,该团队已将这一产品以LGPL开源协议开放给社区。

     

      文档丰富,功能齐全,而且很容易使用和开发!而且是国产的哟!

     

      以上排序是整理时的排序,一起整理分析一下,下次用的时候就不用到处找了,我想同样的问题应该也存在在很多程序员身上,任何一款UI框架,只要能够容易入手就行。 

    展开全文
  • web前端框架——一些简单理解

    万次阅读 2018-08-09 20:19:06
    可以把bootstrap也叫作前端框架,也可以把jQuery zepto等叫做前端框架,当然AngularJS Backbone也叫做前端框架。不同就在于他们所针对的意义不一样bootstrap是目前桌面端最为流行的开发框架,一经 Twitter 推出...

    以下为百度内容+自己总结:

    前端框架一般指用于简化网页设计的框架,前端框架分很多种,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件。可以把bootstrap也叫作前端框架,也可以把jQuery zepto等叫做前端框架,当然AngularJS Backbone也叫做前端框架。不同就在于他们所针对的意义不一样bootstrap是目前桌面端最为流行的开发框架,一经 Twitter 推出,势不可挡。Bootstrap 主要针对桌面端市场,Bootstrap3 提出移动优先,不过目前桌面端依然还是 Bootstrap 的主要目标市场。偏向于大而全,你想加个导航可以有,加个按钮可以有。

    jQuery, Zepto则更“高级”,或者说更“低级”一些,他并没有直接给你提供按钮 事件响应等,而且帮你设置好了许许多多的方法,需要什么自己来实现。像是工具箱,里面只有扳手和锤子,虽然不可以直接吃直接用,但是可以造出房子,造出生产吃的的机器(成品)。而AngularJS和Backbone则更高级了,当然也更“低级”。他们的意义不在于如何吃,如何造。而更像是如何吃的更香,如何让吃的看起来更像以及如何吃起来看着更香……AngularJS很伟大的一点之一就是实时,这一点改变了很多很多,而且意义非凡,将传统的“点一下,弹一下”,变成了“ ”

     

    javascript其标准是ECMAScript,现在基本上是基于ECMAScript6(ES6)。jQuery是用js写的框架,其在DOM操作上有很明显的优势,也是时下很常用的一个js框架。

    做表单比较好的插件QUICK UI:

    1、它的表格组件一直被用户誉为jquery中最好的表格,拥有良好的性能和兼容,包括实现跨行跨列的复杂表格、树形表、父子表、即时编辑表格等近100项功能点

     

    2、表单控件种类非常丰富,几乎囊括了所有常见的表单元素类型,能够充分满足企业级应用的表单开发方面。

     

    3、大量的图形化组件。例如矢量地图

     

    环形进度条

     

    4、跟其他框架的一个很大不同点是,它不仅仅是一套组件库,还包含了丰富的皮肤模板。例如响应式web类型:

     

    工作桌面类型

     

    地图应用类型

     

    5、最新版本中针对大数据的可视化展现方面,还推出了一系列的展示模板。

     

    展开全文
  • 国内5款优秀的WEB前端框架

    千次阅读 2018-04-12 17:51:34
    1. JX(腾讯)官网地址:http://alloyteam.github.io/JX/#homeJX 是一个类似 ...JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode ,于2012年切换到Github。 JX 框架同时适用于 Web ...

    1. JX(腾讯)

    官网地址:http://alloyteam.github.io/JX/#home

    JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 WebQQ 等大规模的 WebApp。

    JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode ,于2012年切换到Github。 JX 框架同时适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模、工业级的Web App,腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发,兼容目前所有主流浏览器。

    腾讯团队打造的前端开发框架JX

    2. KISSY(淘宝)

    官网:http://docs.kissyui.com/

    KISSY是淘宝的前端类库,几乎在淘宝的每个页面上都能看到它的身影。

    3. Tangram(百度)

    官网:http://tangram.baidu.com/

    Tangram是一款实用的JavaScript基础库,通过它可以快速构建出高度互动的Web应用程序。Tangram具有全浏览器兼容,平滑升级体验以及自由定制输出最小尺寸的特点。

    4、NEJ(网易)

    官网:http://nej.netease.com/

    NEJ一个简洁,美观,真正的跨平台web前端开发框架


    5、QWrap(百度)

    官网:http://www.qwrap.com/

    QWrap是百度有啊前端团队推出的一个Javascript框架,支持IE6+、Firefox、Chrome、Safari、Opera等浏览器,在BSD协议下开源发布。


    1. 提供jQuery一样方便的dom功能,同时又打破jQuery“专注于dom”的约束,也提供非dom的许多功能。

    2. 提供prototype方便的原型功能,同时又提供Javascript1.6的泛型功能,并且提供用户有选择方便与严谨的自由。

    3. 提供YUI2一样的静态方法库,同时又用所谓的Helper规范来做到真正的绝对静态,让组件开发者可以发布出无依赖的组件。

    4. 学习YUI3的use,同时又摈弃YUI3的严谨性洁癖,让use更实用。

    5. QWrap独创特的Helper + Wrap + Retouch + Apps设计,让QWrap有更多的灵性等待你去发现。

    版权声明: https://blog.csdn.net/zdp072/article/details/24182259
    展开全文
  • 10大html5前端框架

    千次阅读 2018-11-29 15:52:33
    Bootstrap ... ... 总结:Bootstrap 最大的优势就是它非常流行,还有就是界面比较和谐, 劣势是 class 命名不够语义化,并且各种...虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前...
  • 什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。...
  • 有哪些目前流行的前端框架

    万次阅读 2017-10-09 17:56:18
    使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中可能会用到不同的组件功能,这样说可能有一点片面,但是在面临几十种再做出选择的时候确实有一定的难度,难道每一种我都要去熟悉?这是不可能的事情,...
  • 目前最流行的开源前端框架

    千次阅读 2018-06-12 16:52:52
    经常使用目前互联网比较流行的前端框架,小编根据自己工作中、关注中的一些前端框架进行了梳理,对于现在的开发者来说,都向着全栈方向发展,所以必须掌握些前端比较流行的框架,这样才能增强自己的技术体系框架,也...
  • 几款常用的高质量web前端框架

    万次阅读 2017-09-20 17:09:33
    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。
  • 2018几大主流的UI/JS框架——前端框架

    万次阅读 多人点赞 2019-02-23 19:32:08
    这一年中有很多热门的前端开发框架,下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。 在这互联网飞速发展的信息时代,技术的更新迭代也在加快。目前看来,火了十几年的Java技术现在仍然是棵常青...
  • 如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,...
  • 推荐几款目前最热门的前端框架

    千次阅读 2018-08-15 10:02:28
    目前最热门的前端框架 1、bootstrap  目前最流行的 HTML, CSS 和 JavaScript 框架,用于开发响应式,移动端先行的 web 项目 gethub:https://github.com/twbs/bootstrap 官网:http://getbootstrap.com/   ...
  • 前端CSS框架我选择了Bootstrap,不过后来还发现挺多好看的框架的,我是后悔了,列出来大家慢慢选  可以使用Bootswatch来装饰Bootstrap,有不同的免费主题可以选择semantic-ui,如果熟悉Bootstrap,学习这个基本...
  • 目前主流的web前端框架有:Bootstrap、妹子UI、MUI移动前端框架等之外,国内的一些前端大神和前端大神团队琢磨出了以下几个不错的web前端框架。   第一款前端框架:FrozenUI – 专注于移动web的UI框架 ...
  • Vue,React,Angular等前端JS框架对比,PC Web端Bootstrap,easy UI,AntDesign UI等前端UI框架对比,自己整理的,有需要的可以看看!
  • 前端三大框架比较

    万次阅读 2018-05-08 11:20:51
    React与Vue相同点使用 Virtual DOM,有较高的运行速度提供组件化功能可使用mobx与vuex...完全的javascript能力更繁荣的社区生态Vue可使用JSX,但推荐使用模版语言而不是JSX学习曲线平缓Angular特点完善的MV*框架,...
  • element 饿了么前端框架基础

    万次阅读 2017-11-30 15:22:51
    Attributes 内的参数使用 :editable="false" 前面要用 “:”才能是属性生效 官网地址 http://element-cn.eleme.io/#/zh-CN/component/installation
  • 前端三大框架的区别

    千次阅读 2019-08-20 11:35:49
    一、vue.js 优点:更轻量,单页面,简单易学 缺点:不支持IE8 二、Angular 优点:模块化功能强大、自定义directive非常灵活...缺点:并不是一个完整的框架,需要加上ReactRouter和Flux才能完成。 长按二...
  • 个人博客前端框架

    千次阅读 2018-01-20 18:48:19
    使用vue实现我的个人博客,连接路径:https://eight1302.github.io/blog/blog/view/home/index.html
  • 主流web前端技术框架有哪些?

    万次阅读 2018-11-07 16:08:21
    Web架构是为解决Web开发中开放性问题而设计的具有一定约束...Bootstrap是一款很受欢迎的前端框架,基于HTML、CSS、JavaScript设计的,简单灵活,使得Web开发更加快捷,Bootstrap中包含了丰富的Web组件和13个jquery插...
1 2 3 4 5 ... 20
收藏数 328,431
精华内容 131,372
关键字:

前端框架