云顶娱乐集团

当前位置:云顶娱乐集团 > 云顶娱乐集团 > jQuery的Deferred对象概述,前后端抽离了【云顶娱乐

jQuery的Deferred对象概述,前后端抽离了【云顶娱乐

来源:http://www.clubskodakaroq.com 作者:云顶娱乐集团 时间:2019-11-27 03:06

上下端分离了,然后呢?

2015/07/09 · CSS, HTML5, JavaScript · 2 评论 · 前后端

原作出处: 邱俊涛的博客(@正面与反面反长卡塔尔   

编写制定更好的CSS代码

2014/01/15 · CSS · 9 评论 · CSS

本文由 伯乐在线 - yanhaijing 翻译。未经许可,禁绝转发!
德文出处:Mathew Carella。应接参与翻译组。

编辑好的CSS代码,有助进步页面包车型地铁渲染速度。本质上,引擎供给深入分析的CSS准绳越少,品质越好。MDN少将CSS选取符归类成多个重大类型,如下所示,质量依次收缩。

  1. ID 规则
  2. Class 规则
  3. 标签法则
  4. 通用法则

对作用的大范围认知是从SteveSouders在二零零六年问世的《高品质网址建设进级指南》起初,即便该书中罗列的更加的详实,但您也可以在这里查阅完整的援用列表,也能够在谷歌(Google卡塔 尔(阿拉伯语:قطر‎的《迅猛CSS选取器的一流实施》中查阅越多的细节。

正文小编想共享部分自家在编写制定高质量CSS中用到的简约例子和指南。那个都以遭到MDN 编写的高速CSS指南的错误的指导,并遵照肖似的格式。

什么样只用CSS做到完全居中

2013/10/11 · CSS · 11 评论 · CSS, 居中

本文由 伯乐在线 - 埃姆杰 翻译。未经许可,防止转发!
斯洛伐克(Slovak)语出处:codepen.io。招待参加翻译组。

【感谢@埃姆杰 的热忱翻译。假使其余朋友也可能有不错的原创或译文,能够尝尝提交到伯乐头条。】

大家都清楚 margin:0 auto; 的样式能让要素水平居中,而 margin: auto; 却不得不负众望垂直居中……直到以往。不过,请在乎!想让要素相对居中,只需求注脚成分中度,何况附加以下样式,就足以成功:

CSS

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

1
2
3
4
5
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

自个儿而不是第两个意识这种办法的人(不过自个儿恐怕敢把它叫做“完全居中”卡塔 尔(阿拉伯语:قطر‎,它有十分大希望是种非常广阔的技能。但大好些个介绍垂直居中的小说中并未有涉及过这种方法。借使不是浏览那篇小说的褒贬,小编以至向来就不会发掘那么些点子。

地点那篇小说的争辩栏中,Simon提供了三个jsFiddle的链接,其余的方法比较就黯淡无光了。(Priit也在讨论栏中提到了同样的办法卡塔 尔(英语:State of Qatar)。深刻钻研了大器晚成番后头,小编又用一点着重词找到了记载这种艺术的五个网址:站点一、站点二、站点三。

原先从未用过这种艺术的本人想试试,看看这种”完全居中”的格局到底有多么奇妙。 好处:

  • 跨浏览器,宽容性好(无需hack,可统筹IE8~IE10)
  • 无出奇标志,样式更简明
  • 自适应布局,能够行使比例和最大十分小高宽等体制
  • 从当中时不酌量要素的padding值(也无需使用box-sizing样式卡塔 尔(英语:State of Qatar)
  • 布局块能够任意调度高低
  • img的图像也足以选拔

并且注意:

  • 总得申明元素中度
  • 推荐介绍设置overflow:auto;样式幸免成分溢出,显示不健康的题目
  • 这种方式在Windows Phone上不起作用

浏览器帮助:Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测量检验能够周密地接纳在新式版本的Chrome、Firefox、Safari、Mobile Safari中,以至也得以运作在IE8~IE10上

 

用意气风发行 CSS 居中并裁剪图片

2015/07/20 · CSS · CSS

本文由 伯乐在线 - 周进林 翻译,黄利民 校稿。未经许可,制止转发!
德文出处:medium.com。接待参加翻译组。

安装图片的剪裁尺寸特别轻便,你只需在 CSS 里使用那行代码:

CSS

img { object-fit: cover; }

1
2
3
img {
     object-fit: cover;
}

就是如此。不供给语义、包装 div 只怕其余没意义的代码。

这种技巧能很好地把大小不合适的头像图片裁剪为长方形大概圆形的图片。以下边那只熊的宽图片来比喻。一旦把 object-fit:cover 技能利用在此种图片上,并且安装好,图片本人就能进展裁剪和居中。

云顶娱乐网站 1

object-fit:cover 的剪裁格局和 background-size:cover 的完全雷同,可是它是用来为 imgsvideos 和别的的传播媒介标签设置样式的,实际不是给背景图片设置样式。

一定多的新颖浏览器都补助 object-fit 技术,並且还会有 polyfill 项目令你能在更老的浏览器(IE8+卡塔 尔(阿拉伯语:قطر‎里使用该技巧。

object-fit 的别样质量感兴趣?来尝试一下。

1 赞 2 收藏 评论

jQuery的Deferred对象概述

2017/03/02 · CSS

本文由 伯乐在线 - HansDo 翻译,叙帝利 校稿。未经许可,制止转发!
土耳其(Turkey卡塔尔国语出处:Aurelio De Rosa。款待插足翻译组。

非常久以来,JavaScript 开拓者们习于旧贯用回调函数的主意来实践一些职分。最广大的例子即是利用 addEventListener()函数来增多三个回调函数, 用来在钦赐的事件(如 clickkeypress卡塔 尔(英语:State of Qatar)被触发时,实行生龙活虎多种的操作。回调函数轻易实用——在逻辑并不复杂的时候。缺憾的是,少年老成旦页面的复杂度扩充,而你由此须要执行超级多相互或串行的异步操作时,这几个回调函数会令你的代码难以保险。

ECMAScript 2016(又名 ECMAScript 6卡塔尔引进了二个原生的主意来解决那类难题:promises。假诺您还不晓得 promise 是怎样,能够翻阅那篇作品《Javascript Promise概述》。jQuery 则提供了自成生龙活虎格的另一种 promises,叫做 Deferred 对象。并且 Deferred 对象的引进时间要比 ECMAScript 引进 promise 早了一些年。在这里篇小说里,作者会介绍 Deferred 对象和它希图缓慢解决的主题素材是怎么着。

前言

前后端分离已是产业界所共鸣的大器晚成种开拓/安顿情势了。所谓的内外端抽离,并不是观念行当中的按机关分割,豆蔻年华部分人纯做前端(HTML/CSS/JavaScript/Flex卡塔 尔(英语:State of Qatar),另风流倜傥部分人纯做后端,因为这种办法是不工作的:例如非常多团伙接纳了后端的模板技能(JSP, Free马克尔, ERB等等卡塔尔国,前端的支出和调解要求贰个后台Web容器的帮助,进而无法达成真正的分开(更不用提在安插的时候,由于动态内容和静态内容混在生机勃勃道,当设计动态静态分流的时候,管理起来十一分麻烦卡塔 尔(英语:State of Qatar)。关于前后端支付的另五个批评能够参照这里。

尽管通过API来解耦前端和后端开垦进度,前后端通过RESTFul的接口来通讯,前端的静态内容和后端的动态总计分别支付,分别布置,集成一直以来是一个绕不开的主题素材— 前端/后端的使用都得以单独的运营,可是集成起来却不做事。大家要求开销多量的生命力来调度,直到上线前如故未有人有信心有所的接口都是工作的。

幸免过度约束

一条广泛准绳,不要增加不供给的牢笼。

CSS

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

 

对照表

“完全居中”并不是本篇文章中唯大器晚成的选项。要到位垂直居中,还留存着别样艺术,各自有各自的亮点。选用什么样的方法,决意于你所援助的浏览器,以至现成标签的结构。下边那张对照表能够帮您选出最相符您必要的点子。

所用样式

支持的浏览器

是否 响应式

内容溢出后的样式

resize:both

高度可变

主要缺陷

Absolute

现代浏览器&IE8+

会导致容器溢出

是*

‘可变高度’的特性不能跨浏览器

负margin值

所有

带滚动条

大小改变后不再居中

不具有响应式特性,margin值必须经过手工计算

Transform

现代浏览器&IE9+

会导致容器溢出

妨碍渲染

Table-Cell

现代浏览器&IE8+

撑开容器

会加上多余的标记

Inline-Block

现代浏览器&IE8+&IE7*

撑开容器

需要使用容器包裹和hack式的样式

Flexbox

现代浏览器&IE10+

会导致容器溢出

需要使用容器包裹和厂商前缀(vendor prefix)

关于作者:周进林

云顶娱乐网站 2

茫茫大海中的意气风发枚程序员,为了发展为多少个男神人类而尽心竭力着。关切java、python、linux、vim等(今日头条今日头条:@酒肉和尚--进林卡塔尔国 个人主页 · 作者的篇章 · 20 ·  

云顶娱乐网站 3

Deferred对象简史

Deferred目的是在 jQuery 1.5中引进的,该对象提供了一文山会海的点子,能够将八个回调函数注册进二个回调队列里、调用回调队列,以致将同台或异步函数实行结果的中标依旧败诉传递给相应的管理函数。从这未来,Deferred 对象就成了探讨的话题, 在那之中不乏商酌意见,这个见解也直接在变化。一些优异的探究的观念如《你并未领会Promise 》和《论 Javascript 中的 Promise 以至 jQuery 是怎么样把它搞砸的》。

Promise 对象 是和 Deferred 对象一齐作为 jQuery 对 Promise 的意气风发种完结。在 jQuery1.x 和 2.x 版本中, Deferred 对象信守的是《CommonJS Promises 提案》中的约定,而 ECMAScript 原生 promises 方法的建构底子《Promises/A+ 提案》也是以那意气风发议案书为底工衍生而来。所以就好像我们生龙活虎开首波及的,之所以 Deferred 对象没宛如约《Promises/A+ 议事原案》,是因为这儿后面一个根本还未有被构想出来。

云顶娱乐网站,鉴于 jQuery 扮演的先行者的剧中人物以至后向宽容性难题,jQuery1.x 和 2.x 里 promises 的接收方法和原生 Javascript 的用法并不等同。其它,由于 jQuery 本人在 promises 方面依据了其它风流浪漫套议事原案,那诱致它不可能协作别的完结promises 的库,比如 Q library。

唯独将要惠临的 jQuery 3 云顶娱乐集团,改进了 同原生 promises(在 ECMAScript二〇一四中贯彻卡塔 尔(阿拉伯语:قطر‎的互操作性。即使为了向后非凡,Deferred 对象的显要措施之意气风发(then()卡塔 尔(英语:State of Qatar)的点子签字照旧会略微分歧,但行为方面它已经同 ECMAScript 2014 规范更加大器晚成致。

少数背景

一个第一名的Web应用的布局看起来是那般的:

云顶娱乐网站 4

上下端都各自有和睦的费用流程,营造筑工程具,测验集结等等。前后端仅仅经过接口来编制程序,那几个接口或者是JSON格式的RESTFul的接口,也可能是XML的,重点是后台只承当数据的提供和计量,而完全不管理展现。而前边贰个则担任获得数量,组织数据并显现的劳作。那样结构清晰,关心点抽离,前后端会变得相对独立并松耦合。

上述的现象依然相比较优越,大家实际上在事实上条件中会有非常复杂的情形,举个例子异构的网络,异构的操作系统等等:

云顶娱乐网站 5

在实际的现象中,后端可能还有恐怕会更复杂,比方用C语言做多少搜聚,然后经过Java整合到叁个数据仓库,然后该数据旅舍又有大器晚成层Web Service,最终若干个如此的Web Service又被贰个Ruby的聚合Service整合在联合签名重返给前端。在这里样一个复杂的类别中,后台任性端点的挫败都可能过不去前端的付出流程,由此大家会动用mock的点子来消除那个主题材料:

云顶娱乐网站 6

其豆蔻梢头mock服务器能够运行一个轻巧的HTTP服务器,然后将一些静态的开始和结果serve出来,以供前端代码应用。那样的补益多多:

  1. 前后端支出相对独立
  2. 后端的速度不会影响前端开采
  3. 开发银行速度更加快
  4. 前后端都足以运用本人熟稔的能力栈(让前面一个的学maven,让后端的用gulp都会特别不顺手卡塔尔

但是当集成照旧是二个令人高烧的难点。大家一再在合龙的时候才发觉,本来协商的数据结构变了:deliveryAddress字段本来是二个字符串,今后成为数组了(业务发生了改换,系统今后能够帮助多少个快递地址卡塔 尔(阿拉伯语:قطر‎;price字段变成字符串,协商的时候是number;客户邮箱地址多了贰个层级等等。这个退换在劫难逃,何况发生,那会开支大批量的调整时间和集成时间,更别提修改之后的回归测验了。

因而唯有使用三个静态服务器,然后提供mock数据是遥远相当不够的。大家要求的mock应该还是能够成功:

  1. 前面二个注重钦命格式的mock数据来开展UI开垦
  2. 前端的支出和测试jQuery的Deferred对象概述,前后端抽离了【云顶娱乐集团】。都依据那个mock数据
  3. 后端发生钦定格式的mock数据
  4. 后端要求测量检验来确认保证生成的mock数据正是前端要求的

大约,大家须求签定一些协议,并将这么些合同作为能够被测验的中等格式。然后前后端都须要有测量试验来利用那个合同。生机勃勃旦左券发生变化,则另一方的测验会退步,那样就能够使得两方协商,并减弱集成时的荒芜。

二个事实上的现象是:前端开采原来就有个别某些公约中,缺乏了三个address的字段,于是就在合同中加多了该字段。然后在UI元帅以此字段精确的表现了(当然还安装了字体,字号,颜色等等卡塔 尔(英语:State of Qatar)。不过后台生成该公约的劳动并未感知到那黄金年代浮动,当运维生成协议部分测验(后台卡塔 尔(英语:State of Qatar)时,测量检验会退步了 — 因为它并从未变动这些字段。于是后端程序员就找前端来会谈,掌握工作逻辑之后,他会修正代码,并确定保障测量检验通过。那样,当集成的时候,就不会产出UI上少了多少个字段,可是什么人也不知情是后面一个难点,后端难点,如故数据库难题等。

再正是事实上的门类中,往往都以七个页面,四个API,两个本子,四个集体还要扩充支付,那样的合同会减弱相当多的调养时间,使得集成相对平缓。

在实行中,协议能够定义为一个JSON文件,或然两个XML的payload。只须要确定保障前后端分享同叁个合同集合来做测量检验,那么集成工作就能从当中收益。三个最轻松易行的款式是:提供部分静态的mock文件,而前者有着发将来台的要求都被某种机制拦截,并转变到对该静态能源的央求。

  1. moco,基于Java
  2. wiremock,基于Java
  3. sinatra,基于Ruby

走访sinatra被列在那地,可能熟谙Ruby的人会批驳:它但是一个后端全职能的的程序库啊。之所以列它在那处,是因为sinatra提供了风度翩翩套简洁精彩的DSL,这一个DSL非常相符Web语言,笔者找不到越来越精良的主意来驱动那一个mock server越发易读,所以就接纳了它。

后人接受符最烂

岂但品质低下何况代码很软绵绵弱,html代码和css代码严重耦合,html代码结构爆发变化时,CSS也得修改,那是多么不佳,特别是在大商家里,写html和css的屡次不是同壹个人。

CSS

// 烂透了 html div tr td {..}

1
2
// 烂透了
html div tr td {..}

 

说明

在研讨了正规化和文书档案后,笔者总括出了“完全居中”的劳作规律:

  1. 在平常文档流里,margin: auto; 的乐趣是安装成分的margin-top和margin-bottom为0。

W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

  1. 安装了position: absolute; 的因素会变成块元素,并退出普通文档流。而文书档案的其余部分照常渲染,成分疑似不在原来的职位同样。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

  2. 安装了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹后生可畏层新的盒子,因而那几个因素会填满它相对父成分的内部空间,那个相对父元素能够是是body标签,恐怕是三个装置了position: relative; 样式的器皿。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

  3. 给元素设置了宽高以往,浏览器会阻止元素填满全体的上空,依据margin: auto; 的供给,重新总结,并打包后生可畏层新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然块成分是相对定位的,又退出了日常性文书档案流,因而浏览器在卷入盒子以前会给margin-top和margin-bottom设置二个等于的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

动用“完全居中”,有意遵照了正规化margin: auto; 样式渲染的鲜明,所以应当在与行业内部卓殊的各个浏览器中起效果。

 

jQuery中的回调函数

举叁个例子来通晓为何大家须要用到 Deferred指标。使用 jQuery 时,日常会用到它的 ajax 方法实施异步的数据哀告操作。大家不要紧假若你在付出多个页面,它能够发送 ajax 央浼给 GitHub API,目标是读取一个顾客的 Repository 列表、定位到前段时间翻新一个Repository,然后找到第一个名字为“README.md”的公文并获取该公文的原委。所以依照以上描述,每三个诉求唯有在前一步成功后才干开端。换言之,这一个必要必得依次实践

上边包车型客车叙说能够调换来伪代码如下(注意自个儿用的并非真正的 Github API卡塔尔国:

JavaScript

var username = 'testuser'; var fileToSearch = 'README.md'; $.getJSON('' + username + '/repositories', function(repositories) { var lastUpdatedRepository = repositories[0].name; $.getJSON('' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) { var README = null; for (var i = 0; i < files.length; i++) { if (files[i].name.indexOf(fileToSearch) >= 0) { README = files[i].path; break; } } $.getJSON('' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) { console.log('The content of the file is: ' + content); }); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var username = 'testuser';
var fileToSearch = 'README.md';
 
$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;
 
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;
 
for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;
 
break;
      }
    }
 
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});

如您所见,使用回调函数的话,大家必要频仍嵌套来让 ajax 央求根据大家目的在于的风流洒脱豆蔻梢头试行。当代码里出现好些个嵌套的回调函数,或然有无数互相独立但要求将它们一齐的回调时,我们往往把这种情状称作“回调地狱( callback hell )“。

为了多少改进一下,你能够从自己成立的佚名函数中提抽取命名函数。但那协助并比极小,因为我们还是在回调的地狱中,如故面前遭遇着回调嵌套清劲风姿浪漫道的难点。那时是 DeferredPromise对象上台的时候了。

几个事例

作者们以那几个应用为示范,来注解怎么样在前后端分离之后,保险代码的品质,并收缩集成的财力。这么些应用项景很简单:全部人都得以看出二个条文列表,各个登入客商都足以接收自身喜好的家有家规,并为之加星。加星之后的规行矩步会保留到客户本人的民用基本中。客商分界面看起来是如此的:

云顶娱乐网站 7

不过为了潜心在大家的为主上,笔者去掉了比如登入,个人基本之类的页面,假令你是二个已报到客户,然后大家来看看哪些编写测量检验。

防止链式(交集卡塔 尔(英语:State of Qatar)选取符

那和过分约束的景况好像,更加精明的做法是简单的创制贰个新的CSS类采取符。

CSS

// 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..}

1
2
3
4
5
// 糟糕
.menu.left.icon {..}
 
// 好的
.menu-left-icon {..}

 

对齐

Deferred和Promise对象

Deferred 对象足以被用来推行异步操作,举个例子 Ajax 央求和卡通片的落到实处。在 jQuery 中,Promise指标是不能不由Deferred对象或 jQuery 对象创造。它拥有Deferred 对象的朝气蓬勃局地方法:always(),done(), fail(), state()then()。大家在下大器晚成节会讲到那一个办法和此外细节。

假定你来自于原生 Javascript 的世界,你或者会对那多少个目的的留存感觉吸引:为何 jQuery 有八个对象(DeferredPromise卡塔 尔(英语:State of Qatar)而原生JS 独有三个(Promise卡塔尔国? 在自家创作的书《jQuery 实践(第三版)》里有多少个类比,能够用来注解那几个标题。

Deferred目的常常用在从异步操作再次回到结果的函数里(重返结果可能是 error,也恐怕为空卡塔 尔(英语:State of Qatar)——即结果的生产者函数里。而回到结果后,你不想让读取结果的函数改动Deferred 对象的状态(译者注:包罗 Resolved 剖析态,Rejected 推却态卡塔尔,此时就能够用到 promise 对象——即 Promise 对象总在异步操作结果的消费者函数里被选拔。

为了理清那么些概念,大家要是你须要达成一个依照 promise 的timeout()函数(在本文稍后会来得那么些事例的代码卡塔 尔(英语:State of Qatar)。你的函数会等待钦点的生机勃勃段时间后重回(这里未有重回值),即一个生产者函数而以此函数的应和消费者们并不在乎操作的结果是成功(剖析态 resolved卡塔尔国依然诉讼失败(拒却态 rejected卡塔尔,而只关心他们必要在 Deferred 对象的操作成功、退步,或然接到进展通知后随着实践一些其余函数。别的,你还希望能确定保障花费者函数不会活动拆解剖判或屏绝Deferred对象。为了达到那生机勃勃对象,你必须要在劳动者函数timeout()中创造Deferred 对象,并只回去它的 Promise 对象,并非Deferred对象自己。那样一来,除了timeout()函数之外就未有人能够调用到resolve()reject()接着改过Deferred 对象的处境了。

在这个 StackOverflow 问题 里你能够领悟到更加多关于 jQuery 中 Deferred 和 Promise 对象的不及。

既是你早就了然里那多少个目的,让我们来看一下它们都包蕴怎么着方法。

前端开辟

依据日常的做法,前后端抽离之后,大家十分轻松mock一些数量来和谐测量检验:

XHTML

[ { "id": 1, "url": "", "title": "Python中的 list comprehension 以及 generator", "publicDate": "2015年3月20日" }, { "id": 2, "url": "", "title": "使用inotify/fswatch创设自动监察和控制脚本", "publicDate": "2014年三月1日" }, { "id": 3, "url": "", "title": "使用underscore.js营造前端接纳", "publicDate": "二〇一六年11月二十四日" } ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[
    {
        "id": 1,
        "url": "http://abruzzi.github.com/2015/03/list-comprehension-in-python/",
        "title": "Python中的 list comprehension 以及 generator",
        "publicDate": "2015年3月20日"
    },
    {
        "id": 2,
        "url": "http://abruzzi.github.com/2015/03/build-monitor-script-based-on-inotify/",
        "title": "使用inotify/fswatch构建自动监控脚本",
        "publicDate": "2015年2月1日"
    },
    {
        "id": 3,
        "url": "http://abruzzi.github.com/2015/02/build-sample-application-by-using-underscore-and-jquery/",
        "title": "使用underscore.js构建前端应用",
        "publicDate": "2015年1月20日"
    }
]

下一场,叁个恐怕的不二等秘书技是透过央求那一个json来测量检验前台:

JavaScript

$(function() { $.get('/mocks/feeds.json').then(function(feeds) { var feedList = new Backbone.Collection(extended); var feedListView = new FeedListView(feedList); $('.container').append(feedListView.render()); }); });

1
2
3
4
5
6
7
8
$(function() {
  $.get('/mocks/feeds.json').then(function(feeds) {
      var feedList = new Backbone.Collection(extended);
      var feedListView = new FeedListView(feedList);
 
      $('.container').append(feedListView.render());
  });
});

如此那般自然是足以干活的,可是此地发送央求的url并非最后的,当集成的时候我们又须求改进为实际的url。三个简短的做法是利用Sinatra来做一遍url的转移:

Shell

get '/api/feeds' do content_type 'application/json' File.open('mocks/feeds.json').read end

1
2
3
4
get '/api/feeds' do
  content_type 'application/json'
  File.open('mocks/feeds.json').read
end

与上述同类,当大家和事实上的劳务拓宽合并时,只须求连接到异平常服装务器就足以了。

在意,大家现在的基本是mocks/feeds.json那么些文件。那一个文件今后的角色就是三个合同,最少对于前带来讲是这么的。紧接着,大家的运用必要渲染加星的效用,那就须要其余叁个合同:搜索脚下客商加星过的兼具规规矩矩,因此大家插手了二个新的条约:

XHTML

[ { "id": 3, "url": "", "title": "使用underscore.js创设前端选拔", "publicDate": "二零一四年八月31日" } ]

1
2
3
4
5
6
7
8
[
    {
        "id": 3,
        "url": "http://abruzzi.github.com/2015/02/build-sample-application-by-using-underscore-and-jquery/",
        "title": "使用underscore.js构建前端应用",
        "publicDate": "2015年1月20日"
    }
]

下一场在sinatra中参加二个新的照耀:

XHTML

get '/api/fav-feeds/:id' do content_type 'application/json' File.open('mocks/fav-feeds.json').read end

1
2
3
4
get '/api/fav-feeds/:id' do
  content_type 'application/json'
  File.open('mocks/fav-feeds.json').read
end

经过那八个乞请,大家会收获多少个列表,然后依据那三个列表的混杂来绘制出装有的星号的情景(有的是空心,有的是实心卡塔 尔(英语:State of Qatar):

JavaScript

$.when(feeds, favorite).then(function(feeds, favorite) { var ids = _.pluck(favorite[0], 'id'); var extended = _.map(feeds[0], function(feed) { return _.extend(feed, {status: _.includes(ids, feed.id)}); }); var feedList = new Backbone.Collection(extended); var feedListView = new FeedListView(feedList); $('.container').append(feedListView.render()); });

1
2
3
4
5
6
7
8
9
10
11
$.when(feeds, favorite).then(function(feeds, favorite) {
    var ids = _.pluck(favorite[0], 'id');
    var extended = _.map(feeds[0], function(feed) {
        return _.extend(feed, {status: _.includes(ids, feed.id)});
    });
 
    var feedList = new Backbone.Collection(extended);
    var feedListView = new FeedListView(feedList);
 
    $('.container').append(feedListView.render());
});

剩余的一个难点是当点击红心时,大家必要发恳求给后端,然后更新红心的情形:

JavaScript

toggleFavorite: function(event) { event.preventDefault(); var that = this; $.post('/api/feeds/'+this.model.get('id')).done(function(){ var status = that.model.get('status'); that.model.set('status', !status); }); }

1
2
3
4
5
6
7
8
toggleFavorite: function(event) {
    event.preventDefault();
    var that = this;
    $.post('/api/feeds/'+this.model.get('id')).done(function(){
        var status = that.model.get('status');
        that.model.set('status', !status);
    });
}

这里又多出去叁个号召,不过使用Sinatra大家还能超轻易的支撑它:

JavaScript

post '/api/feeds/:id' do end

1
2
post '/api/feeds/:id' do
end

能够看出,在未曾后端的场所下,大家整个都开展顺遂 — 后端以致还未有曾起初做,或许正在由一个速度比大家慢的公司在付出,可是不在乎,他们不会耳濡目染我们的。

不仅仅如此,当大家写完前端的代码之后,能够做贰个End2End的测量试验。由于接收了mock数据,免去了数据库和网络的耗费时间,这几个End2End的测量检验会运作的那二个快,何况它确实起到了端到端的成效。那个测验在最终的合有的时候,还足以用来当UI测验来运作。所谓一举多得。

JavaScript

#encoding: utf-8 require 'spec_helper' describe 'Feeds List Page' do let(:list_page) {FeedListPage.new} before do list_page.load end it 'user can see a banner and some feeds' do expect(list_page).to have_banner expect(list_page).to have_feeds end it 'user can see 3 feeds in the list' do expect(list_page.all_feeds).to have_feed_items count: 3 end it 'feed has some detail information' do first = list_page.all_feeds.feed_items.first expect(first.title).to eql("Python中的 list comprehension 以及 generator") end end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#encoding: utf-8
require 'spec_helper'
 
describe 'Feeds List Page' do
  let(:list_page) {FeedListPage.new}
 
  before do
      list_page.load
  end
 
  it 'user can see a banner and some feeds' do
      expect(list_page).to have_banner
      expect(list_page).to have_feeds
  end
 
  it 'user can see 3 feeds in the list' do
      expect(list_page.all_feeds).to have_feed_items count: 3
  end
 
  it 'feed has some detail information' do
      first = list_page.all_feeds.feed_items.first
      expect(first.title).to eql("Python中的 list comprehension 以及 generator")
  end
end

云顶娱乐网站 8

有关什么编写那样的测量检验,可以参考在此之前写的那篇小说。

坚持KISS原则

想象大家好似下的DOM:

XHTML

<ul id="navigator"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> </ul>

1
2
3
4
5
<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

上边是呼应的法规……

CSS

// 糟糕 #navigator li a {..} // 好的 #navigator {..}

1
2
3
4
5
// 糟糕
#navigator li a {..}
 
// 好的
#navigator {..}

 

容器内对齐

使用“完全居中”,就足以在四个设置了position: relative的器皿中达成完全居兰秋素了! (居中例子,请前往立陶宛(Lithuania卡塔 尔(英语:State of Qatar)语原作查看卡塔尔国

CSS

.Center-Container { position: relative; } .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
.Center-Container {
  position: relative;
}
 
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

云顶娱乐网站 9

接下去的示例会假诺已经满含了以下样式,並且以逐渐丰盛样式的方法提供区别的风味。

 

Deferred对象的点子

Deferred对象卓殊灵活并提供了您或然要求的有着办法,你可以透过调用 jQuery.Deferred() 像下边相符成立它:

JavaScript

var deferred = jQuery.Deferred();

1
var deferred = jQuery.Deferred();

或者,使用 $作为 jQuery 的简写:

JavaScript

var deferred = $.Deferred();

1
var deferred = $.Deferred();

创建完 Deferred对象后,就能够使用它的后生可畏多元措施。处了曾经被撇下的 removed 方法外,它们是:

  • always(callbacks[, callbacks, ..., callbacks]): 增添在该 Deferred 对象被分析或被谢绝时调用的管理函数
  • done(callbacks[, callbacks, ..., callbacks]): 加多在该 Deferred 对象被深入分析时调用的管理函数
  • fail(callbacks[, callbacks, ..., callbacks]): 加多在该 Deferred 对象被拒却时调用的管理函数
  • notify([argument, ..., argument]):调用 Deferred 对象上的 progressCallbacks 处理函数并传递制定的参数
  • notifyWith(context[, argument, ..., argument]): 在拟定的左右文中调用 progressCallbacks 管理函数并传递制订的参数。
  • progress(callbacks[, callbacks, ..., callbacks]): 增添在该 Deferred 对象发生进展通知时被调用的管理函数。
  • promise([target]): 返回 Deferred 对象的 promise 对象。
  • reject([argument, ..., argument]): 拒却二个 Deferred 对象并以钦点的参数调用全体的failCallbacks管理函数。
  • rejectWith(context[, argument, ..., argument]): 谢绝二个 Deferred 对象并在钦点的上下文中以钦点参数调用全数的failCallbacks管理函数。
  • resolve([argument, ..., argument]): 解析三个 Deferred 对象并以钦定的参数调用全体的 doneCallbackswith 处理函数。
  • resolveWith(context[, argument, ..., argument]): 拆解深入分析二个 Deferred 对象并在钦点的上下文中以钦赐参数调用全部的doneCallbacks管理函数。
  • state(): 重临当前 Deferred 对象的气象。
  • then(resolvedCallback[, rejectedCallback[, progressCallback]]): 增多在该 Deferred 对象被解析、回绝或收到进展通告时被调用的管理函数

从以上那写方法的叙说中,作者想杰出重申一下 jQuery 文书档案和 ECMAScript 标准在术语上的不及。在 ECMAScript 中, 无论二个 promise 被成功 (fulfilled) 照旧被拒绝 (rejected),大家都在说它被剖析 (resolved) 了。可是在 jQuery 的文书档案中,被解析那个词指的是 ECMAScript 标准中的达成(fulfilled) 状态。

是因为地点列出的方法太多, 这里不大概意气风发少年老成详述。然而在下意气风发节会有几个展现 DeferredPromise用法的身体力行。第八个例子中我们会接纳Deferred 对象重写“ jQuery 的回调函数”那风度翩翩节的代码。第三个例子里作者会注明在此之前斟酌的生产者–消费者本条比喻。

本文由云顶娱乐集团发布于云顶娱乐集团,转载请注明出处:jQuery的Deferred对象概述,前后端抽离了【云顶娱乐

关键词: