zepto前端（web前端培训教程：什么是Zepto）

本文目录

• web前端培训教程：什么是Zepto
• 如何实现 zepto的ajax 前置过滤器

web前端培训教程：什么是Zepto

属于框架的一种，主要应用在移动端，其功能类似于PC端上的jQuery框架，语法也基本和jQuery类似。可以认为是移动版的JQ吧主要是优化JS中的DOM操作，让繁杂的DOM操作变得更简单，另外就是帮助开发者处理了兼容问题。

如何实现 zepto的ajax 前置过滤器

Rails中Jquery支持下的Ajax请求在rails中使用 Ajax 是十分方便的，你可能早已经熟悉了这样的代码：在views中声明属性 :remote =》 true ：《%= form_for(@post, :remote =》 true) do |f| %》 《div class="field"》 《%= f.label :title %》《br /》 《%= f.text_field :title %》 《/div》 《div class="field"》 《%= f.label :content %》《br /》 《%= f.text_field :content %》 《/div》 《div class="actions"》 《%= f.submit %》 《/div》《% end %》接着在对应 controller 里接收请求，做如下处理：respond_to do |format| format.html format.js { render ’success’ } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理end最后就是在 success.erb.js 文件里做一些操作：alert("ok")Everything is so easy!但是，你知道为什么可以使用 remote 属性来发送ajax请求吗？在rails中assets目录下的 application.js 文件可以看到：//= require jquery//= require jquery_ujs对，就是要归功于 jquery_ujs.js 这个文件，它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。亲，说到这儿，你能猜到我想要说什么了吗？对！如果我们想在rails里使用zepto来发送ajax请求，我们要做的就是模仿 jquery_ujs.js 所做的。在Rails基于Zepto使用Ajax卖了半天的关子，终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用，文档里大概是这样一种方式：Ajax requests$.ajax$.ajax(options) ⇒ XMLHttpRequest type (default: “GET”): HTTP request method (“GET”, “POST”, or other) url (default: current URL): URL to which the request is made data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with …Ajax callbacks beforeSend(xhr, settings) success(data, status, xhr) error(xhr, errorType, error) complete(xhr, status) …Ajax events…在发送ajax请求时，我们可以指定ajax请求的类型，url等属性，在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了，现在我们要做的就是来模拟jquery_ujs.js所做的工作：我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:$(document).ready(function() { //...}添加一个 click 事件:$(document).ready(function() { $(’.load’).live(’click’, function() { //可以在这里取页面上的一些数据 var text = $(".data").text(); $.ajax({***隐藏网址*** url: ’所请求的url’, // data为发送的数据，将以url?a=xx&b=xxx这种方式发送 data: { a: xxx, b: xxxx }, // 期望服务器返回的数据类型: dataType: ’json’, timeout: 10000, beforeSend: function(xhr, settings) { //回调函数 }, success: function(data){ //data为返回数据 }, error: function(xhr, type){ //错误处理 } }); });}现在请求已经到达服务器， controller 收到请求并进行相应处理：def custom data = Model.find(data) # return the data as the format of json respond_to do |format| format.json { render :inline =》 data.to_json } endend得到了返回的数据，在上面的success函数里进行相应的处理。这里需要注意的一点是：controller里返回的数据必须与发送ajax请求时指定的dataType 同一类型，否则就无法响应了。举个例子来说明一下：你可以上这个网站，这个是我专门为手机用户做的，前端采用了zepto框架。页面上的导航栏以及 加载更多 按钮都对应着一个个click事件，每次点击都会触发一个ajax请求，比如点击加载更多的时候，会到服务器请求5条新闻数据，其中发送ajax请求时还会触发一个回调函数，通过 beforeSend 实现等待时的加载效果。如果你想了解更多可以fork这个 仓库 。另外，zepto的其它用法其实和jquery差不多，有需要的话可以好好研究一下。