精华内容
下载资源
问答
  • 设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计...通常的讲,框架就是就是最常用的javascript框架和Web应用框架,当然,还有CSS框架(15个CSS框架简介
     
    

    设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通常的讲,框架就是就是最常用的javascript框架和Web应用框架,当然,还有CSS框架(15个CSS框架简介Typogridphy: 适合网格布局的CSS框架用于网格设计的960网格系统)。

    下面我们介绍一些比较常见的Javascript框架,高手跳过,才学JS和ajax的朋友则应该好好了解一下。

    Dojo

    Dojo 是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。

    YUI(Yahoo! User Interface Library)

    Yahoo! User Interface (YUI) Library是一组采用DOM scripting,Dhtml和Ajax等技术开发的Web UI控件和工具。中文说过来就是“Yahoo用户界面库”。

    • Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。
    • YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护,不需要请求服务器进行页面刷新。

    jQuery

    jquery是一个快速、简洁的JavaScript框架,帮助你简化查询DOM对象,处理事件,制作动画,和处理Ajax交互过程。利用jQuery将改变你编写JavaScript代码的方式。原先用20行代码完成的功能,jQuery用10行就可以轻松搞定。

    Mootools

    MooTools 是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。

    prototype

    prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

    script.aculo.us

    script.aculo.us 是一个易于使用,支持多种浏览器,用于增强Prototype的JavaScript框架。script.aculo.us包含:动画框架(animation framework),拖放(drag and drop), Ajax控件,DOM工具,单元测试等。

    ExtJS

    ExtJS是一个跨浏览器,用于开发RIA(Rich iInternet Application)应用的JavaScript框架。提供:高性,可定制的Web UI控件库。良好的设计、丰富的文档和可扩展的组件模型。

    展开全文
  • 七个简单的Javascript框架介绍,每个学习编程初学者都可以看看,会一定的帮助
  • 7个常见Javascript框架介绍_+14个…

    千次阅读 2013-02-21 18:26:41
    通常的讲,框架就是就是最常用的JavaScript框架和Web应用框架,当然,还有CSS框架(15个CSS框架简介和Typogridphy: 适合网格布局的CSS框架和用于网格设计的960网格系统)。 下面我们介绍一些比较常见的Jav

    设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通常的讲,框架就是就是最常用的JavaScript框架和Web应用框架,当然,还有CSS框架(15个CSS框架简介Typogridphy: 适合网格布局的CSS框架用于网格设计的960网格系统)。

    下面我们介绍一些比较常见的Javascript框架,高手跳过,才学JS和Ajax的朋友则应该好好了解一下。

    Dojo

    Dojo 是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。

    YUI(Yahoo! User Interface Library)

    Yahoo! User Interface (YUI) Library是一组采用DOM scripting,DHTML和Ajax等技术开发的Web UI控件和工具。中文说过来就是“Yahoo用户界面库”。

    • Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。
    • YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护,不需要请求服务器进行页面刷新。

    jQuery

    jQuery是一个快速、简洁的JavaScript框架,帮助你简化查询DOM对象,处理事件,制作动画,和处理Ajax交互过程。利用jQuery将改变你编写JavaScript代码的方式。原先用20行代码完成的功能,jQuery用10行就可以轻松搞定。

    Mootools

    MooTools 是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。

    prototype

    prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

    script.aculo.us

    script.aculo.us 是一个易于使用,支持多种浏览器,用于增强Prototype的JavaScript框架。script.aculo.us包含:动画框架(animation framework),拖放(drag and drop), Ajax控件,DOM工具,单元测试等。

    ExtJS

    ExtJS是一个跨浏览器,用于开发RIA(Rich iInternet Application)应用的JavaScript框架。提供:高性,可定制的Web UI控件库。良好的设计、丰富的文档和可扩展的组件模型。



    转自:http://hi.baidu.com/lantonad/blog/item/90412fe8e1564238b80e2dd5.html


    14个开源Ajax框架介绍

    我们已经看过了7个Javascript框架,现在则来看一下14个开源Ajax框架

    jQPie

    这是一个扩展自jQuery,结合PHP的一个Ajax框架。支持XML,HTML和JSON handler。jQPie提供的功能包括:

    • 利用$.getJSON方法简化来自PHP的请求和处理数据。
    • 利用$.(element).load方法注入PHP生成的html到某一页面元素中。
    • 利用$.jqpie方法直接从web页面调用PHP函数。在响应$.jqpie调用时从PHP函数反过来调用jQuery。

    phpmsajax

    一组PHP文件用来支持在PHP Web应用程序中使用Microsoft AJAX Library。

    jsLINB

    jsLINB 是一个完全的浏览器端javascript解决方案,兼容大部分现代浏览器(IE6.0/IE7.0/firefox1.5 /firefox2.0/opera9/Safari2.0,Safari 缺乏测试)。它可以帮助程序开发者实现各种类型的RIA应用-在提供更加强大框架的同时更加易用。压缩的核心代码仅仅50k, 包括了javascript类型检查,强制类型,精密且灵活的事件模型,自定义事件,observer和tie/untie,boxing /unBoxing/reBoxing模型,直接调用,dom生成,查询,遍历和操作,css 样式操作,css 类操作,dom属性操作,javascript完美OO实现,javascript线程,高级Ajax,强大的Drag Drop,超级控件(可在外观/模板/行为/数据模型四个维度上定制的标准控件,可完全自定义控件)等。

    My-BIC

    My-BIC是一个易于使用,强大的Ajax/PHP框架。

    1. 支持XML,JSON和TEXT的格式Ajax数据传输。
    2. 支持EasyForms:调用一个函数就能取得Form中的所有值,并为你创建一个少许美化的查询串。ajaxObj.getForm(’formid’)。
    3. JSON客户端Encoding支持:利用该功能你就能够在客户端或服务器之间发送和接收经过JSON Encoding的数据。
    4. 网络断线保护:当服务器Down掉时My-BIC将帮助你删除请求并阻止产生更多的调用。
    5. 内置Submission队列:所有的AJAX请求将会发送到正确的顺序中,所有请求都会被存储在队列中防止被覆盖。提供一个帮助你在运行期进行调试的可视化操作界面。

    aSSL

    aSSL:SSL for Ajax。这个开源项目可用于那些需要SSL支持的Ajax应用中。

    PHPLiveX

    PHPLiveX是一个PHP类库可用于在web页面中使用Ajax调用PHP函数。它非常易于使用,在调用一个PHP函数不需要附加额外的功能,包含一个灵活地预加载属性,兼容IE, Opera, Mozilla, Firefox等浏览器。

    RSPA

    RSPA是一个基于组件事件驱动的ajax框架适用于PHP4与PHP5。使用这个框架可以从客户端控制事件调用服务器端PHP class函数。也可以在服服务器端直接操作客户端对象。

    phpAjaxTags

    phpAjaxTags是模仿著名Java标签库”AjaxTags”的一个PHP标记库。简单但强大,易于使用与安装。不需要编写js代码就能实现ajax功能。

    XAJAX

    xajax 通过Javascript直接调用PHP函数。它使用Javascript stub来调用PHP脚本中的函数,对象方法,和类方法。服务器端响应由于xajax响应对象创建,该对象提供非常多的命令比如:给一个HTML元素赋值,显示一个警告对话框等。还支持自定义脚本输出。所有特定浏览器代码(如使用XMLHttpRequest)都是抽象的,并且发送各种数据类型到服务器端都非常容易实现。xajax提供多种配置选项目以便易于与现存web应用或框架相集成。它的Javascript核心简洁明了,而且可以通过覆盖来支持更多的高级Javascript功能。

    NanoAjax

    NanoAjax是一个基于PHP5,面向对象(包括JavaScript和PHP)的AJAX框架。它使用JSON作为数据交换格式。NanoAjax能够把多个虚拟请求归结到一个正真的请求当中。整个框架非常小,并且易于使用。基于class的服务器端事件处理方式。

    Pear:HTML_AJAX

    Pear:HTML_AJAX是一个相当成熟的Ajax框架, 使用JSON进行数据传输。內建丰富的例子,包括留言板、登录、grab…等等。

    Ajax Agent

    Ajax Agent是一个非常易于使用(只需三行代码),并且非常强大的开源框架用于快速构建AJAX或RIA应用程序。支持复杂的数据类型比如:associated arrays与object。使用JSON(JavaScript Object Notation)作为数据交换格式。

    AjaxAC

    AjaxAC是一个PHP框架可用于开发/创建/生成AJAX应用程序。 特点如下:

    1. 所有应用程序代码全都包含在一个单独的class中(可以附带任何JavaScript包)。
    2. PHP文件/HTML页面的调用非常简洁。
    3. 内置简化处理JavaScript事件的功能
    4. 内置创建和处理subrequest的功能。
    5. 可以自定义配置值,所以某些元素可以在运行期才被设置。
    6. 没有杂乱的Javascript代码塞满所调用的Html代码,所有事件都是被动态附加上的。
    7. 易于与模板引擎相集成基于以上两点原因。
    8. 易于挂钩(hook)现有的PHP classe或MySQL数据库以便从subrequest返回数据。

    AJASON

    AJASON是一个基于PHP5的AJAX开发包。它具有以下特点:

    1. PHP5与JavaScript代码完全采用面向对象开发。
    2. 从JavaScript异步调用PHP函数与对象方法。
    3. 能够在服务器与客户端之间交换复杂的数据类型像arrays与object (更确切地说是对象属性)。
    4. 使用JavaScript回调函数来处理服务端响应。
    5. 能够在客户端处理服务端的AJASON错误。

     

    展开全文
  • javascript常见的7个框架,面试时最容易问到的框架题目!
  • javascript框架的优缺点

    2011-04-02 14:00:50
    javascript框架的优缺点 javascript中常见的7大框架的缺点说明!
  • JavaScript框架高级编程【PDF】

    千次下载 热门讨论 2013-10-14 14:43:52
    javascript框架高级编程——应用prototype、yui、extjs、doio、mootools》的作者团队汇集了目前最活跃、最流行的几个javascript框架,详细讲解了每个框架解决的常见web开发问题,同时研究了每个框架如何解决特定的一...
  • qed_framework 包含常见 javascript、html 模板、css 等文件的框架
  • mui:javascript框架-源码

    2021-06-03 09:58:23
    mui javascript框架 具备简单的文档选择器,包含许多常见的js数据处理函数,验证函数,事件扑捉侦听,ajax等等。
  • hapj:Javascript框架-源码

    2021-07-19 21:32:13
    HapJ是一个面向UI的javascript框架,提供了前端开发过程中常见的问题的解决方案。诸如表单校验、延迟加载、异步处理、广告轮换、以及一系列UI交互体验优化的功能。 hapj.js是其中最核心的文件,包括了UI、日志、钩子...
  • JavaScript 框架比较

    千次阅读 2013-01-10 17:32:28
    JavaScript 框架比较 显著增强 JavaScript 开发的框架概览 Joe Lennon, 软件开发人员, 自由职业者 简介: 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富的交互功能,...

    JavaScript 框架比较

    显著增强 JavaScript 开发的框架概览

    Joe Lennon, 软件开发人员, 自由职业者

    简介: 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富的交互功能,尤其是异步 HTTP 请求的出现使得不刷新页面就可以从服务器端脚本或数据库系统返回数据或响应。在本文中,您将了解如何通过 JavaScript 框架更轻松、更快速地创建具有高度交互性和响应性的 Web 站点和 Web 应用程序。


    原文链接:点击打开链接

     
       
     




    简介

    JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态操作这些对象的平台。在最初引入 JavaScript 时,通常只用于提供 Web 页面上的一些不重要的特性,如时钟功能和浏览器状态栏中的滚动文本等。另一个常见的特性是 “rollover link”,就是当用户将鼠标移到图片或文本链接上时,图片或文本链接的颜色会改变。然而,近年来,随着 Asynchronous JavaScript and XML (Ajax) 概念将基于 Web 的编程的交互性提升到一个新高度,JavaScript 也变得越来越重要。在出现 Ajax 之前,所有服务器端处理或数据库访问都需要 “刷新” 整个页面或通过浏览器呈现一个新页面。这不仅减慢了速度并使用户感到沮丧,而且还浪费带宽和资源。

    Ajax 表示 Asynchronous JavaScript and XML,但是将其称为 XML 已不再合适,因为 Ajax 请求可以返回多种格式的响应,而不限于 XML,例如 JSON (JavaScript Object Notation)。Ajax 的工作方式是允许 JavaScript 异步提交 HTTP 请求到 Web 服务器,并且在不刷新或呈现新页面的情况下呈现响应。相反,开发人员通常使用 DOM (Document Object Model) 操作来修改部分 Web 页面,显示其变化或由 HTTP 响应返回的数据。

    什么是 JavaScript 框架?

    JavaScript 本身就是一种功能强大的语言,您不需要额外的框架就可创建富互联网应用程序(RIA)。然而使用 JavaScript 并不是件容易的事,主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样,不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。

    JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试,因此,您可以放心地使用这些框架,您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。

    除了解决跨浏览器问题,使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素的代码。它们不仅提供获取 DOM 元素引用的快捷函数,而且还允许 DOM 遍历函数以菊花链(daisy-chaining)方式查找任意深度的父元素、子元素、兄弟元素。最后,框架还提供一系列函数来更轻松地操作这些对象,可以改变、添加或删除内容本身;或者使用 CSS 样式类来改变元素的外观。

    框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同,跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件,并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件(如按下 Escape 键、Return 键、光标键,等等)。

    所有这些特性都非常有用,但 JavaScript 框架有一个特性对于它最近的流行非常重要 — 支持 Ajax。与 JavaScript 的其他许多方面一样,每个 Web 浏览器往往以不同方式支持 Ajax,这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持,通常提供 Ajax 请求和响应对象,以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数(helper)。

    JavaScript 框架的典型特性

    现在,让我们看一看大多数 JavaScript 框架都具备的有用特性。包括:

    • 选择器(Selector)
    • DOM 遍历
    • DOM 操作
    • 实用(Utility)函数
    • 事件处理
    • Ajax

    在解释每个特性时,我将会用以下的一个或几个 JavaScript 框架举例说明:Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每个框架的实现和语法都各不相同,但概念都是相同的。每个框架都有一个详细的 API 参考,可帮助您理解如何使用该特定库中的特性。

    选择器

    大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。通常来说,这些选择器会使获得 HTML 元素引用的过程快很多,并允许通过 ID、类名、元素类型甚至使用一组伪选择器(pseudo-selector)来查找元素。

    例如,使用常规 JavaScript,您也许会用以下代码通过 ID 来选择 DOM 元素:

    var theElement = document.getElementById('the_element');

    与其他框架一样,MooTools 提供了执行此操作的快捷方法。除了选取该元素,MooTools 还可通过一系列实用函数扩展此元素。其语法如下:

    var theElement = $('the_element');

    如上所示的单美元符号(dollar)函数,在很多(但不是所有)流行的 JavaScript 框架中都可用,而且语法也大体一致。Prototype 库则更进一步,允许通过 ID 一次选取多个元素,并返回元素数组。和 MooTools 一样,可用 Prototype 实用函数扩展这些元素。用 Prototype 一次选取多个元素的语法是:

    var elementArray = $('element_one', 'element_two', 'element_three');

    在 实用函数 一节中,您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。

    在前面的例子中,必须提供需要选取的元素的 ID。然而,如果要选取多个元素(例如,所有图片)或是具有特定 CSS 类名的所有表行,那又怎么办呢?MooTools(还有其他库)提供了一个简单的方法来实现此功能 — 双美元符号(dollar-dollar)函数。它的工作方式与单美元符号函数相同,不同之处在于它接受 CSS 元素名、类名、伪选择器作为参数,而不是接受元素 ID 作为参数。例如,要使用 MooTools 选取 Web 页面上的所有图片,将用以下代码:

    var allImages = $$('img');

    这将返回一个包含文档中的所有图片的数组,其中每一个图片都使用单美元符号函数进行扩展,以包含 MooTools 实用函数。

    根据标记名选取元素非常有用,但如果只是想根据 CSS 类选择一个元素子集,该怎么办呢?这也很简单。在下面的例子中,MooTools 将会选择 CSS 类名为 “odd” 的所有表行。这在实现表行条状化(在表行之间交替变化背景色)时将非常有用:

    var allOddRows = $$('tr.odd');

    实际上,MooTools 提供了实现表行条状化(row striping)的更好方法。在上面的例子中,假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名:

    var allOddRows = $$('tbody:odd');

    这是一个伪选择器的例子,将会返回所有符合条件的对象,在本例中为页面中的 tbody(表主体)的所有奇数子元素。MooTools 伪选择器的其他例子包括:

    • checked — 选取所有选中的元素(例如,选中的复选框)
    • enabled — 选取所有启用的元素
    • contains — 选取所有包含作为参数传递给选择器的文本的元素(例如,contains('this text')

    如前所述,并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo! User Interface) 库第 3 版中,用以下代码根据 ID 选取元素(请注意 YUI 3 要求在 ID 前传递 ID 选择器符号 #):

    var theElement = Y.one('#the_element');

    同样,与使用双美元符号函数根据标记或类名检索元素不同的是,YUI 使用了 Y.all 函数:

    var allOddRows = Y.all('tr.odd');

    ExtJS 使用类似的方式,用以下语法根据 ID 选取元素:

    var theElement = Ext.get('the_element');

    以下语法用于根据标记和类名选取元素:

    var allOddRows = Ext.select('tr.odd');

    在下一节中,您将看到 JavaScript 框架如何轻松遍历 DOM,换句话说,就是查找选定元素的父元素、子元素、兄弟元素。您还会学到如何使用库操作 DOM 以修改元素。

    DOM 遍历

    根据 ID、元素类型或 CSS 类名查找元素非常有用,但如何根据元素在 DOM 树中的位置执行查找呢?换而言之,根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如,看一下清单 1 的 HTML 片段。


    清单 1. HTML 片段(一个 HTML 表)
    				
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email Address</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row-001">
                <td>Joe Lennon</td>
                <td>joe@joelennon.ie</td>
                <td><a href="#">Edit</a>&nbsp;
                    <a href="#">Delete</a></td>
            </tr>
            <tr id="row-002">
                <td>Jill Mac Sweeney</td>
                <td>jill@example.com</td>
                <td><a href="#">Edit</a>&nbsp;
                    <a href="#">Delete</a></td>
            </tr>
        </tbody>
    </table>
    			  

    清单 1 用缩进表示每个元素在 DOM 节点树中的位置。在该例中,table 元素是根元素,它有两个子节点,thead 和tbodythead 元素只有一个子节点 tr,后者有三个子节点 — 所有 th 元素。tbody 元素有两个子节点,均为 tr 元素,每个tr 元素又有三个子元素。每行的第三个子元素又有两个子节点,都是 (锚点)标记。

    如您所知,可以使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中,有两个元素具有 ID — 均为 tr(表行)元素,ID 分别为 row-001 和 row-002。要使用 Prototype 选取第一个 tr 元素,需要用到以下代码:

    var theRow = $('row-001');

    在前面的小节中,您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中,可以使用以下语法选取所有 td 元素。

    var allCells = $$('td');

    这段代码的问题是它将返回 DOM 中的所有 td 元素。但是,如果只希望获取 ID 为 row-001 的行中的 td 元素,怎么办呢?这时就该使用 DOM 遍历函数了。首先,使用 Prototype 选取 ID 为 row-001 的 tr 元素的所有子节点:

    var firstRowCells = theRow.childElements();

    这将返回 theRow 变量(之前已设为 ID 为 row-001 的元素)的所有子元素的数组。

    下一步,假设只希望取得该行的第一个子节点,在本例中,是内容为 “Joe Lennon” 的 td 元素。应使用以下语句:

    var firstRowFirstCell = theRow.down();

    很简单吧?这种特别的用法等价于:

    var firstRowFirstCell = theRow.childElements()[0];

    也可以表示为:

    var firstRowFirstCell = theRow.down(0);

    JavaScript 索引值从零(0)开始,所以以上语句实际上是告诉 JavaScript 选取第一个子元素。要选取第二个子元素(包含 joe@joelennon.ie 邮件地址的单元格),可以使用下面的语句:

    var firstRowSecondCell = theRow.down(1);

    或者,可以在 DOM 兄弟节点间导航。本例中,第二个单元格是第一个单元格的下一个兄弟节点,因此可以使用以下语句:

    var firstRowSecondCell = firstRowFirstCell.next();

    这与 down() 函数使用了相同的方式,因此可以使用下面的语句选择第三个单元格:

    var firstRowThirdCell = firstRowFirstCell.next(1);

    除了使用索引查找特定节点外,Prototype 还允许使用 CSS 选择器语法。考虑 清单 1 的例子,找到包含 Jill Mac Sweeney 的明细的行的第二个链接(“Delete” 链接):

    var secondRowSecondLink = $('row-002').down('a', 1);

    在本例中,可以使用美元符号函数找到 ID 为 row-002 的元素,然后向下遍历 DOM,直到找到下一个后代 a(锚点)元素。

    有些框架可以使用 “菊花链” 遍历函数,表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是:

    var secondRowSecondLink = $('row-002').down('a').next();

    考虑下面的例子:

    var domTraversal = $('row-001').down().up().next().previous();

    如您所见,菊花链方式可以将几个 DOM 遍历语句连接起来。实际上,上例实际上选择 tr 元素 row-001,因此菊花链刚好回到了起点!

    DOM 操作

    上文中,您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而,要想改变 Web 页面中的特定元素的外观或内容,需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐,幸运的是,大多数 JavaScript 框架提供了有用的函数,简化了这些操作。

    假设您有一个 div 元素,其 id 是 the-box

    <div id="the-box">Message goes here</div>

    如果要用 jQuery 改变 “Message goes here” 文本,方法如下:

    $('the-box').html('This is the new message!');

    实际上,可以在函数内部使用 HTML 代码,它将由浏览器解析。例如:

    $('the-box').html('This is the <strong>new</strong> message!');

    在本例中,div 元素的内容在 DOM 中呈现为:

    <div id="the-box">This is the <strong>new</strong> message!</div>

    当然,在一些情况下您需要使用特殊字符,如大于号或小于号。可以不指定专门的 HTML 实体代码,而是使用 jQuery 的 text 函数:

    $('the-box').text('300 > 200');

    这将把 div 元素更新为以下代码:

    <div id="the-box">300 > 200</div>

    在上面的例子中,原有内容被新内容取代。如果只是想把消息添加到文本的后面,该怎么做呢?幸好,jQuery 提供了专门的 append 函数:

    $('the-box').append(', here goes message');

    将这个函数应用到初始的 div 元素,div 元素的内容就变成下面这样:

    <div id="the-box">Message goes here, here goes message</div>

    除了附加以外,您还可以 “前置” 内容,即在已有内容的前面而不是末尾插入新内容。另外,jQuery 提供了在给定元素之外插入内容的函数,不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。

    除了 DOM 操作函数,JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如,假设您有一个表,您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类,并且您想要将这个类动态添加到行中。在 YUI 中,可以使用以下代码检查行中是否已经具有 hover 类,如果已经有的话,则删除它,如果没有的话,则添加它:

    if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');

    而且,大多数 JavaScript 框架都有内置的 CSS 操作函数。

    实用函数

    很多 JavaScript 框架提供了大量实用函数,可使 JavaScript 开发变得很容易。由于这些函数非常多,因此本文无法一一介绍。我将只讨论大多数框架都具备的一些比较重要的函数。

    如果您曾经使用 JavaScript 处理过数组,你应该熟悉使用 for 循环来遍历数组以处理数组值。例如,看一下清单 2 的代码:


    清单 2. 遍历 JavaScript 数组的传统方法
    				
    var fruit = ['apple', 'banana', 'orange'];
    for(var i = 0; i < fruit.length; i++) {
        alert(fruit[i]);
    }
    				

    清单 2 中的代码没有问题,但有些冗长。大多数 JavaScript 框架包含 each 函数,它会对数据组的每个元素调用一个指定的函数。使用 MooTools,可以用清单 3 的代码执行与清单 2 相同的操作。


    清单 3. 使用 MooTools 中的 each 函数
    				
    ['apple', 'banana', 'orange'].each(function(item) {
        alert(item);
    });
    			  

    清单 3 中的语法与 Prototype 和 jQuery 中的语法相同,而与 YUI 和 ExtJS 中的语法有细微差异。然而,当用于 hash 映射或对象而不是数组时,各框架的语法都不一样。例如在 MooTools 中,将用到清单 4 的代码:


    清单 4. 在 MooTools 中对基于键/值对的对象使用 each
    				
    var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
    hash.each(function(value, key) {
        alert(key + ": " + value);
    });
    				

    在 Prototype 中,将用到清单 5 中的代码。


    清单 5. 在 Prototype 中对基于键/值对的对象使用 each
    				
    var hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"});
    hash.each(function(pair) {
        alert(pair.key + ": " + pair.value);
    });
    			  

    每个框架都包含很多有用的函数,通常划分为 String 函数、Number 函数、Array 函数、Hash 函数、Date 函数等等。更多信息,请查阅相关 JavaScript 框架的 API 参考资料。

    事件处理

    每个 JavaScript 框架都实现了跨浏览器事件处理支持,鼓励您从旧式的内联事件连接转向一种流线化方法。看一下清单 6 中的 jQuery 示例,其中在 hover 事件中高亮显示 div 元素。


    清单 6. 使用 jQuery 连接 hover Event 
    				
    $('the-box').hover(function() {
        $(this).addClass('highlight');
    }, function() {
        $(this).removeClass('highlight');
    });
    				

    这是一个由 jQuery 实现的特殊事件,请注意它有两个函数,触发 onMouseOver 事件时调用第一个,触发 onMouseOut 事件时调用第二个。这是因为 hover 没有标准的 DOM 事件。让我们查看一个更典型的事件,例如 click(查看清单 7)。


    清单 7. 使用 jQuery 连接 click Event
    				
    $('the-button').click(function() {
        alert('You pushed the button!');
    });
    				

    如您所见,本例中只有一个函数参数。jQuery 使用这种方式处理大多数 JavaScript 事件。在 jQuery 中使用事件处理函数时,上下文变量是指触发事件的元素。有些框架并不使用这种处理方式。以 Prototype 为例,清单 8 显示了用 Prototype 实现的与清单 7 等价的代码。


    清单 8. 使用 Prototype 连接 click Event
    				
    $('the-button').observe('click', function(e) {
        alert('You pushed the button!');
    });
    				

    您首先将注意到没有 click 函数,而是使用了 observe 函数,该函数在引用它自身之前将事件作为参数。您还可能注意到该函数的参数 e。这就是指向触发事件的元素的上下文变量。为了探究其工作原理,让我们针对 Prototype 重写 清单 6 的代码(请看清单 9)。


    清单 9. 使用 Prototype 连接 hover Event
    				
    $('the-box').observe('mouseover', function(e) {
        var el = Event.element(e);
        el.addClassName('highlight');
    });
    $('the-box').observe('mouseout', function(e) {
        var el = Event.element(e);
        el.removeClassName('highlight');
    });
    				

    与 jQuery 中使用美元符号函数获取上下文变量不同的是,在 Prototype 中需要使用 Event.element() 函数。并且,您需要对mouseover 和 mouseout 使用不同的函数。

    在阅读本文的过程中,您也许会注意到函数使用内联方式创建且都没有命名。这意味着它们无法被重用。Prototype 的 hover 例子展示了如何使用已命名的函数作为替代方法。如清单 10 所示。


    清单 10. Prototype 中改进的 hover 例子
    				
    function toggleClass(e) {
        var el = Event.element(e);
        if(el.hasClassName('highlight')) 
            row.removeClassName('highlight');
        else 
            row.addClassName('highlight');
    }
    
    $('the-box').observe('mouseover', toggleClass);
    $('the-box').observe('mouseout', toggleClass);
    			  

    您会注意到,这次只定义了一个函数供 mouseover 和 mouseout 事件调用。该函数会判断元素是否已经高亮显示了类名,并根据查找结果执行添加或删除。您也许会注意到 e 参数是隐式传递的。换句话说,不需要在 observe 函数中以参数形式显式传递事件。

    Ajax

    使用 JavaScript 框架的另一个有说服力的理由是标准化的跨浏览器 Ajax 请求。Ajax 请求是一个异步 HTTP 请求,通常发送给服务器端脚本,后者返回 XML、JSON、HTML 或普通文本格式的响应。大多数 JavaScript 框架都有某种形式的 Ajax 对象,以及一个以参数形式接受一组选项的请求方法。这些选项通常包含 callback 函数,当脚本一接收到来自 Web 服务器的响应时,就会调用此函数。让我们看一下 ExtJS、MooTools 和 Prototype 中的 Ajax 请求的样子。

    首先,看一下典型的 ExtJS Ajax 请求(请看清单 11)。


    清单 11. 一个 ExtJS Ajax 请求
    				
    Ext.Ajax.request({
        url: 'server_script.php',
        params: {
            name1: 'value1',
            name2: 'value2'
        },
        method: 'POST',
        success: function(transport) {
            alert(transport.responseText);
        }
    });
    				

    ExtJS 中的 request 方法只有一个参数,这是一个包含 urlparamsmethod 和 success 等不同字段的对象。url 字段包含服务器端脚本的 URL,该脚本将被 Ajax 请求调用。params 字段本身就是一个对象,包含有将被传递给服务器端脚本的键/值对。method 字段可以取两个值:GET 或 POST。它的默认值为未定义,但如果请求中有 params,将会默认作为 POST 处理。最后一个字段 success 是 Web 服务器返回成功响应时调用的函数。在本例中,假设服务器端脚本返回普通文本,并且文本会通过警告框显示给用户。

    下一步,我们看看同样的请求在 MooTools 中是什么样子(请看清单 12)。


    清单 12. 一个 MooTools Ajax 请求
    				
    new Request({
        url: 'server-script.php',
        data: {
            name1: 'value1',
            name2: 'value2'
        },
        method: 'post',
        onComplete: function(response) {
            alert(response);
        }
    }).send();
    				

    如您所见,MooTools 与 ExtJS 非常相似。你也许注意到,与使用 params 不同,这里使用 data 字段传递变量,而且必须使用小写指定方法。还有,没有使用 success callback 函数,MooTools 使用了一个 onComplete 函数。最后,与 ExtJS 不同的是,在 MooTools 中,您需要使用 Request 对象的 send() 函数发送请求。

    最后,让我们看看 Prototype 中的请求是否具有显著的不同(请看清单 13)。


    清单 13. 一个 Prototype Ajax 请求
    				
    new Ajax.Request('server-script.php', {
        params: {
            name1: 'value1',
            name2: 'value2'
        },
        method: 'post',
        onSuccess: function(transport) {
            alert(transport.responseText);
        }
    });
    				

    同样,Prototype 的工作方式基本一致,只是有些句法上的小差别。首先,Prototype 的 Request 对象为其构造函数获取两个参数。第一个参数是请求将被发送到的 URL,第二个参数是一个具有典型 Ajax 选项的对象,如前两个例子所见。当然,由于 URL 现在作为单独的参数传递,它没有出现在选项列表中。同样需要注意,与 MooTools 不同,Prototype Ajax Request 对象构造函数隐式地发送请求,因此不需要调用任何方法来实际发起 HTTP 请求。

    大多数 JavaScript 框架中的 Ajax 支持要比此处演示的内容更加深入。重要的增强功能包括使用接收到的响应自动更新元素,而不需要任何特殊的 onSuccess 函数。一些库甚至包含预建的自动完成功能,如您在 Google 搜索引擎中所看到的,在输入时会出现常见搜索项。

    在下一节中,您将学习 JavaScript 框架为 Web 开发人员提供的用户体验(UX)增强功能。

    UX 增强功能

    到目前为止,本文全部关注的是使用 JavaScript 框架的编程优势以及它们如何简化交互式应用程序的编写。然而,对于大多数框架,还有另外一个更吸引人的方面:用户界面(UI)组件以及用户体验增强,这些在以前需要付出很大努力构建的工作现在可以轻松完成。

    本节将分别介绍以下框架的 UX 增强功能:Prototype、jQuery、YUI、ExtJS 和 MooTools。

    Prototype

    Prototype 是少数几个不提供开箱即用 UI 组件和 UX 增强功能的 JavaScript 框架之一。它将这些内容转移到其姊妹库 script.aculo.us(最新版本是 Scripty2)中。Script.aculo.us 还添加了对 Prototype 中的各种效果和行为的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 还提供拖放支持,例如滑块、in-place Ajax 编辑器和 autocompleters。与其他框架不同,Script.aculo.us 将所有控件(例如滑块和 autocompleters)的设计留给开发人员,并且未提供标准界面。

    jQuery

    与 Prototype 不同,jQuery 核心库中包含一些基本的 UX 增强。这些增强与 script.aculo.us 中的一些基本效果类似。例如 sliding 和 fading。然而,要获得更高级的 UX 特性,就需要下载 jQuery UI 库,它包含比 jQuery 核心库更多的效果,以及交互特性,如拖放、调整大小和排序。与 script.aculo.us 不同的是,jQuery UI 还包含一些小部件或组件,它们使开发具有吸引力的界面变得更加容易。目前,这些组件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。这些小部件都可以划分主题,并且 jQuery UI 包含各种各样的主题,可以适合您自己的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UI Datepicker 小部件的例子,该小部件的主题为 Cupertino。


    图 1. jQuery UI Datepicker Widget
    屏幕显示了 datepicker 例子,在 Datepicker 标题下还有一个日历。 

    YUI

    Prototype 和 jQuery 不包含开箱即用的 UI 小部件,但是 Yahoo! User Interface 库 (YUI) 包含一个 bucketload。除了支持拖放和调整大小外,YUI 第二版还包含 autocompleters、calendar 控件、carousel 组件、绘图、对话框、进度条、富文本编辑器(所见即所得文本区)、滑块、选项卡、树等等。在撰写本文时,上述小部件都没有包含在 YUI 第三版中。图 2 是结合使用这些组件的一个例子。


    图 2. 复杂的 YUI 应用程序示例
    屏幕显示的是一个电子邮件程序,包含一个打开的窗口用来输入图片选项,如图片 url 和尺寸。 

    ExtJS

    和 YUI 一样,ExtJS 包含大量开箱即用的组件,其中有很多功能强大的网格控件,支持内联编辑、分页、筛选、分组、汇总、缓冲和数据绑定。ExtJS 组件具有非常专业的外观,并且分门别类。其他小部件包括选项卡、图表、窗口(对话框)、树、布局管理器、增强的表单控件、工具栏和菜单、拖放操作和直接远程功能(direct remoting)。这仅仅是 ExtJS 所提供的一小部分,如果要查找更多 RIA 组件,请登录 ExtJS 网站。图 3 是用 ExtJS 开发的 Web 桌面程序示例,展示了这个库的丰富特性。


    图 3. ExtJS 桌面应用程序示例 
    桌面显示的是一个网格窗口、一个应用程序窗口、一个选项卡窗口。 

    MooTools

    MooTools 和 Prototype、jQuery 一样,也不包含开箱即用的 UI 控件和小部件。与 jQuery 一样,它包含一组有限的效果。其更高级的 UX 增强包含在 MooTools.More.js 扩展中。这个扩展不仅仅是简单的 UX/UI 插件,而是包含对 ArrayDateHash 和String 类以及额外的 Element 扩展的一些有趣的附加功能。至于 UX 增强功能,MooTools.More.js 包含拖放支持以及一些其他效果。这些附加功能还包括一些 UI 控件,如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinner overlays。然而,与 script.aculo.us 一样,您需要自己设计这些控件。

    Framework 比较

    表 1 是本文介绍的五个框架所含特性的详细比较。


    表 1. 框架特性比较
      Prototype jQuery YUI ExtJS MooTools
    最新版本 1.6.1 1.3.2 3.00 3.1 1.2.4
    许可证 MIT MIT & GPL BSD Commercial & GPL v3 MIT
          浏览器兼容性    
    支持 IE 6.0+ 6.0+ 6.0+ 6.0+ 6.0+
    支持 Firefox 1.5+ 2.0+ 3.0+ 1.5+ 2.0+
    支持 Safari 2.0.4+ 3.0+ 4.0+ 3.0+ 2.0+
    支持 Opera 9.25+ 9.0+ 10.0+ 9.0+ 9.0+
    支持 Chrome 1.0+ 1.0+ 未验证 未验证 未验证
          核心特性    
    支持 Ajax
    DOM 操作
    DOM 遍历
    事件处理
    JSON
    选择器
          UX/UI 增强功能    
    Accordion jQuery UI MooTools More
    动画 scriptaculous
    自动完成 scriptaculous
    浏览器历史 scriptaculous
    日历 jQuery UI
    绘图
    拖拽 scriptaculous jQuery UI MooTools More
    网格 MooTools More
    进度条 jQuery UI
    重新调整大小 jQuery UI
    富文本编辑器
    滑块 scriptaculous jQuery UI MooTools More
    选项卡 jQuery UI
    主题 jQuery UI MooTools More
    树视图

    其他重要框架

    限于篇幅,本文只介绍了五个比较常见的 JavaScript 框架。这并不表示它们是最流行的、最好的或是功能最多的框架。

    其他一些 JavaScript 框架也值得注意,包括:

    • Cappuccino
    • Dojo
    • Glow
    • GWT
    • MochiKit
    • Qooxdoo
    • Rialto
    • Rico
    • SproutCore
    • Spry
    • UIZE

    结束语

    本文向您介绍了 JavaScript 框架的概念以及它为什么会给 Web 网站和 Web 应用程序开发带来好处。本文对这些框架的常见功能作了简要描述,并举例说明在较常见的库中如何实现这些特性。本文还分别讲解了作为这五个框架的一部分或作为单独的附加功能的 UI 和 UX 增强。最后,还提供了一个直观的特性对比图表,其中列出了各个框架各自具备和缺乏的选项。有了这些知识,您应该就可以进行更深入的研究,然后明智地选择适合您及您的开发团队的框架。


    参考资料

    学习

    获得产品和技术

    • 获取 Prototype Javascript 框架。 

    • 获取 jQuery

    • jQuery User Interface 提供底层交互和动画的抽象,高级效果和可分类的小部件,这些都基于 jQuery JavaScript Library。 

    • 获取 script.aculo.us。 

    • 获取 MooTools。 

    • 下载并学习 Yahoo! YUI Library。 

    • 获取 ExtJS。 

    • 下载 IBM 产品评估版,开始使用来自 DB2、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。 

    关于作者

    //www.ibm.com/developerworks/i/p-jlennon.jpg

    Joe Lennon 是一位来自爱尔兰科克市的软件开发人员,他今年 24 岁。Joe 是 Apress 即将发行的 Beginning CouchDB 一书的作者,并且为 IBM developerWorks 撰写了许多技术文章和教程。在业余时间里,Joe 喜欢踢足球,改进一些小玩意以及玩他的 Xbox 360 游戏机。

    展开全文
  • 常用JavaScript 框架比较

    万次阅读 2016-05-19 17:25:50
    常用JavaScript 框架比较 简介 JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态...

    常用JavaScript 框架比较

    简介

    JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态操作这些对象的平台。在最初引入 JavaScript 时,通常只用于提供 Web 页面上的一些不重要的特性,如时钟功能和浏览器状态栏中的滚动文本等。另一个常见的特性是 “rolloverlink”,就是当用户将鼠标移到图片或文本链接上时,图片或文本链接的颜色会改变。然而,近年来,随着 AsynchronousJavaScript and XML (Ajax) 概念将基于 Web 的编程的交互性提升到一个新高度,JavaScript 也变得越来越重要。在出现 Ajax 之前,所有服务器端处理或数据库访问都需要刷新整个页面或通过浏览器呈现一个新页面。这不仅减慢了速度并使用户感到沮丧,而且还浪费带宽和资源。

    Ajax 表示 AsynchronousJavaScript and XML,但是将其称为 XML 已不再合适,因为 Ajax 请求可以返回多种格式的响应,而不限于 XML,例如 JSON (JavaScript Object Notation)Ajax 的工作方式是允许 JavaScript 异步提交 HTTP 请求到 Web 服务器,并且在不刷新或呈现新页面的情况下呈现响应。相反,开发人员通常使用 DOM (DocumentObject Model) 操作来修改部分 Web 页面,显示其变化或由 HTTP 响应返回的数据。

    回页首

    什么是JavaScript 框架?

    JavaScript 本身就是一种功能强大的语言,您不需要额外的框架就可创建富互联网应用程序(RIA)。然而使用 JavaScript 并不是件容易的事,主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML CSS一样,不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。

    JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试,因此,您可以放心地使用这些框架,您的基于 JavaScript RIA 将会在不同浏览器和平台上以类似的方式工作。

    除了解决跨浏览器问题,使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素的代码。它们不仅提供获取 DOM 元素引用的快捷函数,而且还允许 DOM 遍历函数以菊花链(daisy-chaining)方式查找任意深度的父元素、子元素、兄弟元素。最后,框架还提供一系列函数来更轻松地操作这些对象,可以改变、添加或删除内容本身;或者使用 CSS 样式类来改变元素的外观。

    框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同,跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件,并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件(如按下 Escape 键、Return 键、光标键,等等)。

    所有这些特性都非常有用,但 JavaScript 框架有一个特性对于它最近的流行非常重要支持 Ajax。与 JavaScript 的其他许多方面一样,每个 Web 浏览器往往以不同方式支持 Ajax,这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持,通常提供 Ajax 请求和响应对象,以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数(helper)。

    回页首

    JavaScript 框架的典型特性

    现在,让我们看一看大多数 JavaScript 框架都具备的有用特性。包括:

    ·       选择器(Selector

    ·       DOM 遍历

    ·       DOM 操作

    ·       实用(Utility)函数

    ·       事件处理

    ·       Ajax

    在解释每个特性时,我将会用以下的一个或几个 JavaScript 框架举例说明:PrototypejQueryYUIExtJS MooTools。尽管每个框架的实现和语法都各不相同,但概念都是相同的。每个框架都有一个详细的 API 参考,可帮助您理解如何使用该特定库中的特性。

    回页首

    选择器

    大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。通常来说,这些选择器会使获得 HTML 元素引用的过程快很多,并允许通过 ID、类名、元素类型甚至使用一组伪选择器(pseudo-selector)来查找元素。

    例如,使用常规 JavaScript,您也许会用以下代码通过 ID 来选择 DOM 元素:

    var theElement = document.getElementById('the_element');

    与其他框架一样,MooTools 提供了执行此操作的快捷方法。除了选取该元素,MooTools 还可通过一系列实用函数扩展此元素。其语法如下:

    var theElement = $('the_element');

    如上所示的单美元符号(dollar)函数,在很多(但不是所有)流行的 JavaScript 框架中都可用,而且语法也大体一致。Prototype 库则更进一步,允许通过 ID 一次选取多个元素,并返回元素数组。和 MooTools 一样,可用 Prototype 实用函数扩展这些元素。用 Prototype 一次选取多个元素的语法是:

    var elementArray = $('element_one', 'element_two','element_three');

     实用函数 一节中,您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。

    在前面的例子中,必须提供需要选取的元素的 ID。然而,如果要选取多个元素(例如,所有图片)或是具有特定 CSS 类名的所有表行,那又怎么办呢?MooTools(还有其他库)提供了一个简单的方法来实现此功能双美元符号(dollar-dollar)函数。它的工作方式与单美元符号函数相同,不同之处在于它接受 CSS 元素名、类名、伪选择器作为参数,而不是接受元素 ID 作为参数。例如,要使用 MooTools 选取 Web 页面上的所有图片,将用以下代码:

    var allImages = $$('img');

    这将返回一个包含文档中的所有图片的数组,其中每一个图片都使用单美元符号函数进行扩展,以包含 MooTools 实用函数。

    根据标记名选取元素非常有用,但如果只是想根据 CSS 类选择一个元素子集,该怎么办呢?这也很简单。在下面的例子中,MooTools 将会选择 CSS 类名为 “odd” 的所有表行。这在实现表行条状化(在表行之间交替变化背景色)时将非常有用:

    var allOddRows = $$('tr.odd');

    实际上,MooTools 提供了实现表行条状化(row striping)的更好方法。在上面的例子中,假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名:

    var allOddRows = $$('tbody:odd');

    这是一个伪选择器的例子,将会返回所有符合条件的对象,在本例中为页面中的 tbody(表主体)的所有奇数子元素。MooTools 伪选择器的其他例子包括:

    ·       checked选取所有选中的元素(例如,选中的复选框)

    ·       enabled选取所有启用的元素

    ·       contains选取所有包含作为参数传递给选择器的文本的元素(例如,contains('thistext')

    如前所述,并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo!User Interface) 库第 3 版中,用以下代码根据 ID 选取元素(请注意 YUI 3 要求在 ID 前传递 ID 选择器符号 #):

    var theElement = Y.one('#the_element');

    同样,与使用双美元符号函数根据标记或类名检索元素不同的是,YUI 使用了 Y.all 函数:

    var allOddRows = Y.all('tr.odd');

    ExtJS 使用类似的方式,用以下语法根据 ID 选取元素:

    var theElement = Ext.get('the_element');

    以下语法用于根据标记和类名选取元素:

    var allOddRows = Ext.select('tr.odd');

    在下一节中,您将看到 JavaScript 框架如何轻松遍历 DOM,换句话说,就是查找选定元素的父元素、子元素、兄弟元素。您还会学到如何使用库操作 DOM 以修改元素。

    回页首

    DOM 遍历

    根据 ID、元素类型或 CSS 类名查找元素非常有用,但如何根据元素在 DOM 树中的位置执行查找呢?换而言之,根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如,看一下清单 1 HTML 片段。

    清单 1. HTML 片段(一个 HTML 表)

    <table> <thead> <tr><th>Name</th> <th>Email Address</th><th>Actions</th> </tr> </thead> <tbody> <trid="row-001"> <td>Joe Lennon</td><td>joe@joelennon.ie</td> <td><ahref="#">Edit</a>&nbsp; <ahref="#">Delete</a></td> </tr> <trid="row-002"> <td>Jill Mac Sweeney</td> <td>jill@example.com</td><td><a href="#">Edit</a>&nbsp; <ahref="#">Delete</a></td> </tr></tbody></table>

    清单 1 用缩进表示每个元素在 DOM 节点树中的位置。在该例中,table 元素是根元素,它有两个子节点,thead  tbodythead 元素只有一个子节点 tr,后者有三个子节点所有 th 元素。tbody 元素有两个子节点,均为 tr 元素,每个 tr 元素又有三个子元素。每行的第三个子元素又有两个子节点,都是 (锚点)标记。

    如您所知,可以使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中,有两个元素具有 ID — 均为 tr(表行)元素,ID 分别为 row-001 row-002。要使用 Prototype 选取第一个 tr 元素,需要用到以下代码:

    var theRow = $('row-001');

    在前面的小节中,您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中,可以使用以下语法选取所有 td 元素。

    var allCells = $$('td');

    这段代码的问题是它将返回 DOM 中的所有 td 元素。但是,如果只希望获取 ID row-001 的行中的 td 元素,怎么办呢?这时就该使用 DOM 遍历函数了。首先,使用 Prototype 选取 ID row-001  tr 元素的所有子节点:

    var firstRowCells = theRow.childElements();

    这将返回 theRow 变量(之前已设为 ID row-001 的元素)的所有子元素的数组。

    下一步,假设只希望取得该行的第一个子节点,在本例中,是内容为 “Joe Lennon”  td 元素。应使用以下语句:

    var firstRowFirstCell = theRow.down();

    很简单吧?这种特别的用法等价于:

    var firstRowFirstCell = theRow.childElements()[0];

    也可以表示为:

    var firstRowFirstCell = theRow.down(0);

    JavaScript 索引值从零(0)开始,所以以上语句实际上是告诉 JavaScript 选取第一个子元素。要选取第二个子元素(包含joe@joelennon.ie 邮件地址的单元格),可以使用下面的语句:

    var firstRowSecondCell = theRow.down(1);

    或者,可以在 DOM 兄弟节点间导航。本例中,第二个单元格是第一个单元格的下一个兄弟节点,因此可以使用以下语句:

    var firstRowSecondCell = firstRowFirstCell.next();

    这与 down() 函数使用了相同的方式,因此可以使用下面的语句选择第三个单元格:

    var firstRowThirdCell = firstRowFirstCell.next(1);

    除了使用索引查找特定节点外,Prototype 还允许使用 CSS 选择器语法。考虑 清单 1 的例子,找到包含 Jill Mac Sweeney 的明细的行的第二个链接(“Delete” 链接):

    var secondRowSecondLink = $('row-002').down('a', 1);

    在本例中,可以使用美元符号函数找到 ID row-002 的元素,然后向下遍历 DOM,直到找到下一个后代 a(锚点)元素。

    有些框架可以使用菊花链遍历函数,表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是:

    var secondRowSecondLink = $('row-002').down('a').next();

    考虑下面的例子:

    var domTraversal =$('row-001').down().up().next().previous();

    如您所见,菊花链方式可以将几个 DOM 遍历语句连接起来。实际上,上例实际上选择 tr 元素 row-001,因此菊花链刚好回到了起点!

    回页首

    DOM 操作

    上文中,您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而,要想改变 Web 页面中的特定元素的外观或内容,需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐,幸运的是,大多数 JavaScript 框架提供了有用的函数,简化了这些操作。

    假设您有一个 div 元素,其 id  the-box

    <div id="the-box">Message goeshere</div>

    如果要用 jQuery 改变 “Message goes here” 文本,方法如下:

    $('the-box').html('This is the new message!');

    实际上,可以在函数内部使用 HTML 代码,它将由浏览器解析。例如:

    $('the-box').html('This is the <strong>new</strong>message!');

    在本例中,div 元素的内容在 DOM 中呈现为:

    <div id="the-box">This is the<strong>new</strong> message!</div>

    当然,在一些情况下您需要使用特殊字符,如大于号或小于号。可以不指定专门的 HTML 实体代码,而是使用 jQuery  text 函数:

    $('the-box').text('300 > 200');

    这将把 div 元素更新为以下代码:

    <div id="the-box">300 >200</div>

    在上面的例子中,原有内容被新内容取代。如果只是想把消息添加到文本的后面,该怎么做呢?幸好,jQuery 提供了专门的 append 函数:

    $('the-box').append(', here goes message');

    将这个函数应用到初始的 div 元素,div 元素的内容就变成下面这样:

    <div id="the-box">Message goes here, heregoes message</div>

    除了附加以外,您还可以前置内容,即在已有内容的前面而不是末尾插入新内容。另外,jQuery 提供了在给定元素之外插入内容的函数,不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。

    除了 DOM 操作函数,JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如,假设您有一个表,您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover  CSS 类,并且您想要将这个类动态添加到行中。在 YUI 中,可以使用以下代码检查行中是否已经具有 hover 类,如果已经有的话,则删除它,如果没有的话,则添加它:

    if(row.hasClass('hover')) row.removeClass('hover'); elserow.addClass('hover');

    而且,大多数 JavaScript 框架都有内置的 CSS 操作函数。

    回页首

    实用函数

    很多 JavaScript 框架提供了大量实用函数,可使 JavaScript 开发变得很容易。由于这些函数非常多,因此本文无法一一介绍。我将只讨论大多数框架都具备的一些比较重要的函数。

    如果您曾经使用 JavaScript 处理过数组,你应该熟悉使用 for 循环来遍历数组以处理数组值。例如,看一下清单 2 的代码:

    清单 2. 遍历 JavaScript 数组的传统方法

    var fruit = ['apple', 'banana', 'orange'];for(var i = 0;i < fruit.length; i++) { alert(fruit[i]);}

    清单 2 中的代码没有问题,但有些冗长。大多数 JavaScript 框架包含 each 函数,它会对数据组的每个元素调用一个指定的函数。使用 MooTools,可以用清单 3 的代码执行与清单 2 相同的操作。

    清单 3. 使用 MooTools 中的 each 函数

    ['apple', 'banana', 'orange'].each(function(item) {alert(item);});

    清单 3 中的语法与 Prototype jQuery 中的语法相同,而与 YUI ExtJS 中的语法有细微差异。然而,当用于 hash 映射或对象而不是数组时,各框架的语法都不一样。例如在 MooTools 中,将用到清单 4 的代码:

    清单 4. 在 MooTools 中对基于键/值对的对象使用 each

    var hash = new Hash({name: "Joe Lennon", email:"joe@joelennon.ie"});hash.each(function(value, key) { alert(key +": " + value);});

    Prototype 中,将用到清单 5 中的代码。

    清单 5. 在 Prototype 中对基于键/值对的对象使用 each

    var hash = $H({name: "Joe Lennon", email:"joe@joelennon.ie"});hash.each(function(pair) { alert(pair.key +": " + pair.value);});

    每个框架都包含很多有用的函数,通常划分为 String 函数、Number 函数、Array 函数、Hash 函数、Date 函数等等。更多信息,请查阅相关 JavaScript 框架的 API 参考资料。

    回页首

    事件处理

    每个 JavaScript 框架都实现了跨浏览器事件处理支持,鼓励您从旧式的内联事件连接转向一种流线化方法。看一下清单 6 中的 jQuery 示例,其中在 hover 事件中高亮显示 div 元素。

    清单 6. 使用 jQuery 连接 hover Event

    $('the-box').hover(function() {$(this).addClass('highlight');}, function() {$(this).removeClass('highlight');});

    这是一个由 jQuery 实现的特殊事件,请注意它有两个函数,触发 onMouseOver 事件时调用第一个,触发 onMouseOut 事件时调用第二个。这是因为 hover 没有标准的 DOM 事件。让我们查看一个更典型的事件,例如 click(查看清单 7)。

    清单 7. 使用 jQuery 连接 click Event

    $('the-button').click(function() { alert('You pushed thebutton!');});

    如您所见,本例中只有一个函数参数。jQuery 使用这种方式处理大多数 JavaScript 事件。在 jQuery 中使用事件处理函数时,上下文变量是指触发事件的元素。有些框架并不使用这种处理方式。以 Prototype 为例,清单 8 显示了用 Prototype 实现的与清单 7 等价的代码。

    清单 8. 使用 Prototype 连接 click Event

    $('the-button').observe('click', function(e) { alert('Youpushed the button!');});

    您首先将注意到没有 click 函数,而是使用了 observe 函数,该函数在引用它自身之前将事件作为参数。您还可能注意到该函数的参数 e。这就是指向触发事件的元素的上下文变量。为了探究其工作原理,让我们针对 Prototype 重写 清单 6 的代码(请看清单 9)。

    清单 9. 使用 Prototype 连接 hover Event

    $('the-box').observe('mouseover', function(e) { var el =Event.element(e); el.addClassName('highlight');});$('the-box').observe('mouseout',function(e) { var el = Event.element(e); el.removeClassName('highlight');});

    jQuery 中使用美元符号函数获取上下文变量不同的是,在 Prototype 中需要使用 Event.element() 函数。并且,您需要对 mouseover mouseout 使用不同的函数。

    在阅读本文的过程中,您也许会注意到函数使用内联方式创建且都没有命名。这意味着它们无法被重用。Prototype hover 例子展示了如何使用已命名的函数作为替代方法。如清单 10 所示。

    清单 10. Prototype 中改进的 hover 例子

    function toggleClass(e) { var el = Event.element(e);if(el.hasClassName('highlight')) row.removeClassName('highlight'); else row.addClassName('highlight');}$('the-box').observe('mouseover',toggleClass);$('the-box').observe('mouseout', toggleClass);

    您会注意到,这次只定义了一个函数供 mouseover  mouseout 事件调用。该函数会判断元素是否已经高亮显示了类名,并根据查找结果执行添加或删除。您也许会注意到 e 参数是隐式传递的。换句话说,不需要在 observe 函数中以参数形式显式传递事件。

    回页首

    Ajax

    使用 JavaScript 框架的另一个有说服力的理由是标准化的跨浏览器 Ajax 请求。Ajax 请求是一个异步 HTTP 请求,通常发送给服务器端脚本,后者返回 XMLJSONHTML 或普通文本格式的响应。大多数 JavaScript 框架都有某种形式的 Ajax 对象,以及一个以参数形式接受一组选项的请求方法。这些选项通常包含 callback 函数,当脚本一接收到来自 Web 服务器的响应时,就会调用此函数。让我们看一下 ExtJSMooTools Prototype 中的 Ajax 请求的样子。

    首先,看一下典型的 ExtJS Ajax 请求(请看清单 11)。

    清单 11. 一个 ExtJS Ajax 请求

    Ext.Ajax.request({ url: 'server_script.php', params: {name1: 'value1', name2: 'value2' }, method: 'POST', success:function(transport) { alert(transport.responseText); }});

    ExtJS 中的 request 方法只有一个参数,这是一个包含 urlparamsmethod  success 等不同字段的对象。url 字段包含服务器端脚本的 URL,该脚本将被 Ajax 请求调用。params 字段本身就是一个对象,包含有将被传递给服务器端脚本的键/值对。method 字段可以取两个值:GET  POST。它的默认值为未定义,但如果请求中有 params,将会默认作为 POST 处理。最后一个字段 success  Web 服务器返回成功响应时调用的函数。在本例中,假设服务器端脚本返回普通文本,并且文本会通过警告框显示给用户。

    下一步,我们看看同样的请求在 MooTools 中是什么样子(请看清单 12)。

    清单 12. 一个 MooTools Ajax 请求

    new Request({ url: 'server-script.php', data: { name1:'value1', name2: 'value2' }, method: 'post', onComplete: function(response) {alert(response); }}).send();

    如您所见,MooTools ExtJS 非常相似。你也许注意到,与使用 params 不同,这里使用 data 字段传递变量,而且必须使用小写指定方法。还有,没有使用 success callback 函数,MooTools 使用了一个 onComplete 函数。最后,与 ExtJS 不同的是,在 MooTools 中,您需要使用Request 对象的 send() 函数发送请求。

    最后,让我们看看 Prototype 中的请求是否具有显著的不同(请看清单 13)。

    清单 13. 一个 Prototype Ajax 请求

    new Ajax.Request('server-script.php', { params: { name1:'value1', name2: 'value2' }, method: 'post', onSuccess: function(transport) {alert(transport.responseText); }});

    同样,Prototype 的工作方式基本一致,只是有些句法上的小差别。首先,Prototype  Request 对象为其构造函数获取两个参数。第一个参数是请求将被发送到的 URL,第二个参数是一个具有典型 Ajax 选项的对象,如前两个例子所见。当然,由于 URL 现在作为单独的参数传递,它没有出现在选项列表中。同样需要注意,与 MooTools 不同,Prototype Ajax Request 对象构造函数隐式地发送请求,因此不需要调用任何方法来实际发起 HTTP 请求。

    大多数 JavaScript 框架中的 Ajax 支持要比此处演示的内容更加深入。重要的增强功能包括使用接收到的响应自动更新元素,而不需要任何特殊的 onSuccess 函数。一些库甚至包含预建的自动完成功能,如您在 Google 搜索引擎中所看到的,在输入时会出现常见搜索项。

    在下一节中,您将学习 JavaScript 框架为 Web 开发人员提供的用户体验(UX)增强功能。

    回页首

    UX 增强功能

    到目前为止,本文全部关注的是使用 JavaScript 框架的编程优势以及它们如何简化交互式应用程序的编写。然而,对于大多数框架,还有另外一个更吸引人的方面:用户界面(UI)组件以及用户体验增强,这些在以前需要付出很大努力构建的工作现在可以轻松完成。

    本节将分别介绍以下框架的 UX 增强功能:PrototypejQueryYUIExtJS MooTools

    Prototype

    Prototype 是少数几个不提供开箱即用 UI 组件和 UX 增强功能的 JavaScript 框架之一。它将这些内容转移到其姊妹库script.aculo.us(最新版本是 Scripty2)中。Script.aculo.us 还添加了对 Prototype 中的各种效果和行为的支持。包括 highlightingmorphingfoldingshakingslidingpuffing 等等。Script.aculo.us还提供拖放支持,例如滑块、in-place Ajax 编辑器和 autocompleters。与其他框架不同,Script.aculo.us 将所有控件(例如滑块和 autocompleters)的设计留给开发人员,并且未提供标准界面。

    jQuery

    Prototype 不同,jQuery 核心库中包含一些基本的 UX 增强。这些增强与script.aculo.us 中的一些基本效果类似。例如 sliding fading。然而,要获得更高级的 UX 特性,就需要下载 jQuery UI 库,它包含比 jQuery 核心库更多的效果,以及交互特性,如拖放、调整大小和排序。与 script.aculo.us 不同的是,jQuery UI 还包含一些小部件或组件,它们使开发具有吸引力的界面变得更加容易。目前,这些组件包括 AccordionDatepickerDialogProgressbarSlider Tabs。这些小部件都可以划分主题,并且 jQuery UI 包含各种各样的主题,可以适合您自己的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UIDatepicker 小部件的例子,该小部件的主题为 Cupertino

    图 1. jQuery UI Datepicker Widget

    YUI

    Prototype jQuery 不包含开箱即用的 UI 小部件,但是 Yahoo! User Interface (YUI) 包含一个 bucketload。除了支持拖放和调整大小外,YUI 第二版还包含autocompleterscalendar 控件、carousel 组件、绘图、对话框、进度条、富文本编辑器(所见即所得文本区)、滑块、选项卡、树等等。在撰写本文时,上述小部件都没有包含在 YUI 第三版中。图 2 是结合使用这些组件的一个例子。

    图 2. 复杂的 YUI 应用程序示例

    ExtJS

    YUI 一样,ExtJS 包含大量开箱即用的组件,其中有很多功能强大的网格控件,支持内联编辑、分页、筛选、分组、汇总、缓冲和数据绑定。ExtJS 组件具有非常专业的外观,并且分门别类。其他小部件包括选项卡、图表、窗口(对话框)、树、布局管理器、增强的表单控件、工具栏和菜单、拖放操作和直接远程功能(directremoting)。这仅仅是 ExtJS 所提供的一小部分,如果要查找更多 RIA 组件,请登录 ExtJS 网站。图 3 是用 ExtJS 开发的 Web 桌面程序示例,展示了这个库的丰富特性。

    图 3. ExtJS 桌面应用程序示例

    MooTools

    MooTools PrototypejQuery 一样,也不包含开箱即用的 UI 控件和小部件。与 jQuery 一样,它包含一组有限的效果。其更高级的 UX 增强包含在MooTools.More.js 扩展中。这个扩展不仅仅是简单的 UX/UI 插件,而是包含对 ArrayDateHash  String 类以及额外的 Element 扩展的一些有趣的附加功能。至于 UX 增强功能,MooTools.More.js包含拖放支持以及一些其他效果。这些附加功能还包括一些 UI 控件,如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinneroverlays。然而,与 script.aculo.us 一样,您需要自己设计这些控件。

    回页首

    Framework 比较

    1 是本文介绍的五个框架所含特性的详细比较。

    表 1. 框架特性比较

    Prototype

    jQuery

    YUI

    ExtJS

    MooTools

    最新版本

    1.6.1

    1.3.2

    3.00

    3.1

    1.2.4

    许可证

    MIT

    MIT & GPL

    BSD

    Commercial & GPL v3

    MIT

    浏览器兼容性

    支持 IE

    6.0+

    6.0+

    6.0+

    6.0+

    6.0+

    支持 Firefox

    1.5+

    2.0+

    3.0+

    1.5+

    2.0+

    支持 Safari

    2.0.4+

    3.0+

    4.0+

    3.0+

    2.0+

    支持 Opera

    9.25+

    9.0+

    10.0+

    9.0+

    9.0+

    支持 Chrome

    1.0+

    1.0+

    未验证

    未验证

    未验证

    核心特性

    支持 Ajax

    DOM 操作

    DOM 遍历

    事件处理

    JSON

    选择器

    UX/UI 增强功能

    Accordion

    jQuery UI

    MooTools More

    动画

    scriptaculous

    自动完成

    scriptaculous

    浏览器历史

    scriptaculous

    日历

    jQuery UI

    绘图

    拖拽

    scriptaculous

    jQuery UI

    MooTools More

    网格

    MooTools More

    进度条

    jQuery UI

    重新调整大小

    jQuery UI

    富文本编辑器

    滑块

    scriptaculous

    jQuery UI

    MooTools More

    选项卡

    jQuery UI

    主题

    jQuery UI

    MooTools More

    树视图

    回页首

    其他重要框架

    限于篇幅,本文只介绍了五个比较常见的 JavaScript 框架。这并不表示它们是最流行的、最好的或是功能最多的框架。

    其他一些 JavaScript 框架也值得注意,包括:

    ·       Cappuccino

    ·       Dojo

    ·       Glow

    ·       GWT

    ·       MochiKit

    ·       Qooxdoo

    ·       Rialto

    ·       Rico

    ·       SproutCore

    ·       Spry

    ·       UIZE

    回页首

    结束语

    本文向您介绍了 JavaScript 框架的概念以及它为什么会给 Web 网站和 Web 应用程序开发带来好处。本文对这些框架的常见功能作了简要描述,并举例说明在较常见的库中如何实现这些特性。本文还分别讲解了作为这五个框架的一部分或作为单独的附加功能的 UI UX 增强。最后,还提供了一个直观的特性对比图表,其中列出了各个框架各自具备和缺乏的选项。有了这些知识,您应该就可以进行更深入的研究,然后明智地选择适合您及您的开发团队的框架。

     

    展开全文
  • 常见css框架有哪些?

    千次阅读 2018-09-09 21:58:55
    当然由于缺乏实践,所以就不进行评价了~先发一下css,后续发web框架、JavaScript框架等。   1.Bootstrap 基于css,JavaScript,html 的前端框架,其中css是重点。 用来实现电脑、手机、平板不同终端设备响应...
  • 是一个多媒体JavaScript框架,可用于创建真正的跨平台和混合游戏引擎,游戏,模拟器,多媒体库和应用。 它与Web浏览器,台式机和笔记本电脑,移动设备(电话,平板电脑),台式机和手持式视频游戏机,电视机,智能...
  • JavaScript框架(最流行的16款)

    千次阅读 2018-04-19 20:09:43
    在这个列表中,既包括jQuery和Mootools,也Zepo移动JavaScript框架。里面一定你正在用的或想尝试用的JavaScript框架,看看列表吧!1. jQuery – Javascript框架应用最广泛的JavaScript框架,jQuery插件非常...
  • T3是用于构建大型Web应用程序的客户端JavaScript框架。 它的设计基于的原则,特别是: 加强组件之间的松耦合 明确显示依赖项 提供扩展点以应对意外需求 提取常见的痛点 鼓励渐进增强 自2013年以来, 一直通过连续...
  • 多年来,业界已经发布了大量JavaScript框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么这篇文章可以帮你解决问题。在本文中,我将列出用来构建 Web 应用程序的前10个...
  • 这样一款 JavaScript 框架:它更符合中国人,它对脑力记忆要求更低,它应用更轻松;它集成了特效、控件,可以一句代码就实现常见特效、控件,功能更强大。 所以,ezj。
  • 摘要:脚本资源,Ajax/JavaScript,JS框架 一款JavaScript 框架:它对脑力记忆要求更低,应用更轻松;它集成了特效、控件,可以一句代码就实现常见特效、控件,功能更强大;它是国产的。它包含JS日历组件、下拉菜单、...
  • 当听到JavaScript这个词的时候,“web开发”会一下子出现在我们的脑海中,因为JavaScript在很长一段时间里一直是web应用开发...本文就将讨论一些主要的JavaScript框架,以及它们在移动和桌面应用开发领域的优缺点。 1
  • javascript前台验证框架

    2012-06-07 16:05:53
    这是一个javascript工具,主要是验证前台用户输入的正确性,本框架是结合了jquery的dom操作,用户只需用自定义好验证的正则表达式和错误信息,在需要验证的地方进行方法调用即可。本实例中已经存在了几种常见的验证...
  • 十大热门的JavaScript框架和库

    万次阅读 2018-04-22 11:08:36
    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的...
  • 常见前端框架

    热门讨论 2016-10-02 10:30:22
    目前为止,我们常见的前端框架有bootstrap、MUI、weui,easyui,现在我们就简单认识一下这些前端框架。  Bootstrap  定义  基于HTML、CSS、Javascript的前端框架 的前端框架   特点  跨设备、跨浏览器  ...
  • JavaScript框架(常用的7个)

    千次阅读 2018-04-19 00:41:39
    通常的讲,框架就是最常用的JavaScript框架和Web应用框架,当然,还有CSS框架(15个CSS框架简介和Typogridphy: 适合网格布局的CSS框架和用于网格设计的960网格系统)。下面我们介绍一些比较常见的Javasc...
  • 构建Web应用程序的10个JavaScript框架

    千次阅读 2019-04-25 09:23:57
    多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个...Aurelia 是一个开源的现代 JavaScript 模块工具箱,其助于 Web 和移动应用程序的发展。它也被称为“下一代框架”。该框架自推出以来一直...
  • JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够...另一个常见的特性是 “rollover link”,
  • juta软件包包含摘要层,用于基于JavaScript单元测试API(JUTA)规范创建单元测试框架。 JUTA允许开发人员独立于他们使用的单元测试框架来编写可移植的单元测试。 例如,可以从茉莉花或摩卡咖啡中运行相同的测试,...
  • 本文分享一些前端开发的最著名和最影响力的框架和库。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,160
精华内容 37,664
关键字:

常见的javascript框架有

java 订阅