jQuery

jQuery包含了向Web服务器回发异步请求所需要的所有功能。可以用jQuery来生成POST请求或GET请求,并且当请求完成(或出现错误)时jQuery会发出通知。尽管可以使用jQuery.发送和接受XML格式的数据(毕竞Ajx中的X代表的是XML),但本章后面将会展示,使用HTML、文本或JavaScript Object Notation(JSON)格式的数据是非常繁琐的。jQuery使Ajax变得简单。事实上,jQuery简化了许多任务,已经改变了Web开发人员编写脚本代码的方式。

非侵入式JavaScript在Web早期阶段,也就是在jQuery出现以前,在同一个文件中混杂JavaScript代码和HTML标记是非常流行的做法。将JavaScript代码作为某个特性的值放入HTML元素中再正常不过了。你可能见过下面这样的onclick处理程序:

<div οnclick="javascript:alert('click');">Testing,testing</div>

当时我们可能会在标记中嵌入JavaScript代码,因为没有更简单的方法可以用来捕获单击事件。尽管嵌入的JavaScript代码可以实现事件捕获,但是这样的代码不够整洁。jQuery改变了这种状况,因为jQuery提供了查找元素和捕获单击事件的更好方法。现在可以从HTML特性中移除JavaScript代码了。事实上,可将JavaScript代码与HTML完全分离。

非侵入式JavaScript(unobtrusive JavaScript)很好地实践了JavaScript代码和标记的分离。可将所有需要的脚本代码打包到js文件中。如果查看视图的源代码,你将不会看到有JavaScript代码嵌入在标记中。即使查看视图渲染的HTML标记,也看不到任何JavaScript代码,脚本留下的唯一痕迹是一个或多个引用JavaScript文件的<script>标签。

我们可能已经发现非侵入式JavaScript之所以具有吸引力,主要是因为它遵循了MVC框架设计模式所提倡的关注点分离。它实现了内容显示(由标记实现)和交互行为(由JavaScript实现)的分离。除此之外,非侵入式JavaScripti还有其他优势。例如,将所有的脚本代码保存在单独的可下载文件中让浏览器能够在本地缓存脚本文件,从而提高网站的性能。

非侵入式JavaScript也支持在站点上使用渐进增强(progressive enhancement)的策略。渐进增强关注的是传递的内容。只要查看内容的设备或浏览器支持像脚本和样式表这样的特性,页面就会展现更高级的内容,使图像具有动画效果等。Vikipedia对渐进增强。

ASP.NET MVC5对JavaScript采用非侵入式的方法。框架将元数据放入HTML特性中,而不是将JavaScript代码注入视图来实现某种功能特性(像客户端验证)。使用jQuery技术,框架能够查找和解释元数据,然后将行为附加到所有使用外部脚本文件的元素上。由于有了非侵入式JavaScript工作,才使得ASP.NET MVC的Ajax特性支持渐进增强。如果用户浏览器不支持脚本,访问的站点也仍然会正常运作,但不会提供好的功能,像客户端验证等。为了解非侵入式JavaScript的工作原理,下面首先学习如何在MVC应用程序中使用jQuery。

jQuery的用法

当使用Visual Studio项目模板创建新的ASP.NET MVC项目时,它会默认生成使用jQuery需要的所有内容:站点布局中已经包含并引用脚本文件,可用于应用程序中的任何视图。我们来看看都预先配置了哪些东西,这样有需要的时候就知道如何添加或修改功能。每个新项目都包含一个Scripts文件夹,其中带有多个js文件。jQuery核心库是一个名为jquery-<version>js的文件,Visual Studio2013/ASP.NET MVC5发布时其版本号是1.10.2。这个文件中包含了jQuery源代码的易读注释版本。

因为jQuery非常常用,站点布局(Views/Shared/Layout..cshtml)的footer部分包含了一个jQuery脚本引用。因此,默认情况下,站点的任何视图中都可以使用jQuery。在没有使用默认布局的任何视图中,或者如果我们在站点布局中别除了jQuery脚本引用,添加jQuery脚本引用也是很容易的,只需要使用直接脚本引用或者使用预配置的jQuery捆绑。

要添加脚本引用,可包含如下所示的代码:

<script src="~/Scripts/jquery-1.10.2.js"></script>

注意,ASP.NET MVC的Razor视图引擎会把这里的~操作符解析为当前网站的根目录,即便它出现在了s℃特性中。另外一个值得注意的地方是,HTML5中不需要指定类型特性为text/javascript.

虽然简单的脚本引用(如前面所示是有效的,但是这种方法依赖于版本:如果想要更新到更新版本的jQuery,就必须在代码中查找脚本引用,并使用新版本号加以替换。更好的在视图中包含jQuery引用的方法是使用内置的、版本无关的jQuery脚本捆绑。Views/.Shared/Layout.cshtml中的脚本引用就采用了这种方法,如下所示:

@Scripts.Render("~/bundles/jquery")

除了简化将来的脚本更新,这种捆绑引用还提供了其他许多好处,例如在发布模式下自动使用微小脚本,以及将脚本引用集中到一个位置,从而只需在一个位置进行更新。

注意上面的调用将渲染/App Start/BundleConfig..cs中预定义的“jquery”脚本捆绑。这个捆绑利用了ASP.NET中的捆绑和微小特性,该特性利用版本号中包含的通配符匹配,自动优先使用jQuery的轻量版本.

public static void RegisterBundles(BundleCollection bundles)

bundles.Add(new ScriptBundle("~/bundles/jquery") Include

"~/Scripts/jquery-{version}.js"));

jQuery和NuGet

Nuget是 ASP .NET Gallery 的一员。NuGet 是免费、开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库。当需要分享开发的工具或是库,需要建立一个Nuget package,然后把这个package放到Nuget的站点。如果想要使用别人已经开发好的工具或是库,只需要从站点获得这个package,并且安装到自己的Visual Studio项目或是解决方案里。

NuGet能更方便地把一些dll和文件(如jquery)添加到项目中,而不需要从文件中复制拷贝。

ASP.NET项目模板实际上使用了NuGt程序包将jQuery库包含进来。这样,就可以使用标准的NuGet程序包更新方法来更新到jQueryl的新版本。使用NuGeti程序包包含脚本的方法再加上版本无关的捆绑引用,意味着更新项目来使用新版本的jQuy十分容易。当然,我们仍需要测试基于jQuery的代码在新版本的jQuery下工作良好,但是我们并不需要花费大量时间来下载和添加脚本,然后再手动修改脚本引用。使用jQuery和NuGet程序包的真正价值在于依赖检查。任何包含基于jQuery的库的NuGeti程序包会说明兼容的jQuery版本,保证二者的一致性。例如,如果更新了jQuery Validation程序包,NuGet会保证升级到的jQuery Validation新版本仍然可以在已安装的jQuery版本下正常使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值