欢迎各位兄弟 发布技术文章
这里的技术是共享的
对列表进行排序可以使用 sortBy 这个方法。它的第一个参数是要排序的列表,第二个参数是一个迭代器。最后还有一个 context ,上下文的参数。
现在我这里有一个 numbers 列表 ... 它是一个数组,里面有一些数字,现在项目的顺序,排第一个的是数字 3,然后是,6,最后是,1 .. 下面,我们可以使用 _.sortBy 去对这个列表排下顺序 ... 把 numbers 传递给这个方法 ..
_.sortBy(numbers) // [1, 3, 6]
方法会返回一个排序以后的数组 ... 在这个数组里面,会按数字从小到大排列 ... 排第一个的数字 1 ,然后是 3 ,最后是 6 ..
下面,我们再去排列一个数组 ... (#输入 fruits)
fruits 这个数组里面有一些字符串项目 ... 下面,我们把它交给 sortBy 去处理一下 ...
_.sortBy(fruits) // ["apple", "banana", "orange", "pear"]
得到的结果是按照字母顺序排列的项目。 在用 sortBy 这个方法的时候,我们也可以给它一个迭代器,作为它的第二个参数。这样在这个迭代器里面,可以设置一下排序的方式。
找出列表里面的最大值,还有最小值,可以使用 max 和 min 方法。
比如找到 numbers 这个数组里面最大的数字 .. 可以这样 .. _.max ... 给它指定一个列表参数 ... 这里就是 numbers ...
_.max(numbers) // 6
返回的结果是 6 ... 也就是在 numbers 这个数组里面,最大的数字就是 6 ... 找出最小值,用的是 min .. 把 max 换成 min ..
_.min(numbers) // 1
返回的结果是 1 ,因为 1 是 numbers 里面最小的一个数字 ...
这两个方法还支持一下迭代器或者叫遍历器的参数 ... (#albums)
下面, 我们可以找到在 albums 里面, duration 属性的值最大或者最小的项目 ... 这次要处理的列表是 albums ... 再设置一下 max 方法的第二个参数 .. 用一个匿名函数 ... 用 album 表示列表里面的每一个项目 ... 在这个函数里,返回一个要判断值的属性... return album.duration ...
使用 pluck 这个方法, 我们可以把一个列表对象里的某个特定的属性的值找出来,返回的结果是这个属性的值的数组。比如,albums 这个数组里面有几个对象 ... 每个对象里都有 title 这个属性 ... 现在,我们想把所有这些对象里的 title 属性的值都找出来放在一个数组里 ...
_.pluck ... 指定一下要处理的列表 ... albums ... 第二个参数是要挑选的属性的名字 ... 这里就是 title 这个属性。
_.pluck(albums, 'title') ["继续革命", "海阔天空", "Ghost Story"]
返回的结果是一个数组,在这个数组里面,会包含 albums 这个数组里面的对象的 title 属性的值。
every 这个方法,可以去判断一下一个列表里面,是否全部都符合我们设置的规则,如果是,这个方法就会返回 true ,如果不是,就会返回 false 。
类似的还有一个 some 方法,如果列表里面有一个项目符合我们要判断的规则,就会返回 true ...
contains 这个方法,可以去判断一下列表里是否包含指定的值 ...
下面,我们去看一下这几个方法...
在 albums 里面,有三个对象 ... 我们判断一下这些对象里面是否都有 title 这个属性 ... _.every ... 先指定一下要判断的列表 ... 这里就是 albums ..
再去设置一下要判断的东西 ... 它应该是一个函数 ... 可以给它一个参数 ... 这个参数可以表示列表里面的单个项目 ... 这里我们用 album 来表示 ... 然后在这里面,用一个 return ... 再使用 Underscore 的 has 方法 ... 去判断一下对象里面,是否包含指定的属性 .. 这个对象就是 album ... 要检查的属性是 title ...
如果列表里面的每一个对象里面都有 title 这个属性,它就会返回 true ...
要找出包含某些属性还有对应的值的项目,可以使用 where 这个方法。 现在你看到的 albums 是一个数组,数组里面的每一个项目都是一个对象 ... 对象的内容表示某张音乐专辑 ...
比如我们要找到 artist 属性的值是 Beyond 的项目 ... 输入 _.where ... 指定一下要查找的列表 ... 这里就是 albums ... 第二个参数是要查找的属性还有对应的值 ... 它是一个对象 ... 属性是 artist ... 值是 Beyond ...
_.where(albums, {artist: 'Beyond'})
回车 ... 得到的结果就是包含 artist 这个属性并且它的值是 Beyond 的项目 ... 我们也可以查找多个属性还有对应的值 ... 比如要找到 artist 属性的值是 Beyond ,还有 releaseYear 是 1992 的项目 ...
在这个要找的属性里面,再加上一个 releaseYear ... 值是 1992
_.where(albums, {artist: 'Beyond', releaseYear: 1992})
使用 find 这个方法,可以去找到列表里面第一个符合我们设置的规则的结果。下面,去试一下 ..
比如这个 tracks 数组 .. 找出这个数组里面的元素的字符长度大于 2 的第一个项目 ... _.find ... 要查找的列表是 tracks ... 再设置一下它的第二个参数,是一个函数 ... 在这个函数里面,我们可以去设置一下查找的规则 ...
这里我们让它返回元素字符长度大于 2 的第一个项目 ...
_.find(tracks, function(track){ return track.length > 2; }) // "不可一世"
回车 ... 返回的结果是 不可一世 ... 因为在 tracks 这个数组里面,第一个字符长度大于 2 的项目就是这个 不可一世 ... 如果你想得到所有的符合设置的规则的项目 ...
可以使用 filter 这个方法 ...
_.filter(tracks, function(track){ return track.length > 2; }) // ["不可一世", "温暖的家乡", "无语问苍天", "早班火车"]
Underscore 里面的 reduce 方法,可以把一个列表里面的所有的值,用你想要的方法换算成一个值。比如一个数字列表,你可以得到它们彼此相加的结果。
下面,我们使用这个方法去处理一下 numbers 这个数组 ... 让这个数组里的值彼此相加,返回这个相加之后的结果 ...
这个方法的第一个参数是要处理的列表,第二个参数是遍历器,或者叫迭代器,循环处理器 .. 第三个参数是存储结果的一个初始的状态 ... 最后有一个可选的 context 参数。
_.reduce ... 先指定一下要处理的列表 .. 这里就是 numbers 这个数组 .. 第二个参数是迭代器 ... 用一个匿名函数 ... 第三个参数是存储结果的初始状态 ... 这里我们设置成 0 ...
在这个迭代器函数里面支持几个参数 ... 第一个参数表示当前结果,一般用 memo 来表示,第二个参数表示本次循环的列表里面的值 .. 第三个参数是 index ,如果处理的列表是个对象的话,这个参数就应该是 key ,最后一个参数表示列表本身 ...
这里我们只需要两个参数 .. memo 还有 number ... number 列表 numbers 里面的一个数字。
遍历列表里面的每一个项目映射到一个迭代器里面去处理,然后返回一个新的处理之后的列表。这就是 map 这个方法的功能。它的用法跟上个视频里介绍的 each 方法差不多 ...
下面,我们用 map 再去处理一下 tracks 这个数组 ... 比如我们要给这个数组里面的每一个项目的值都添加一个书名号 ...
_.map ... 指定一下要遍历的列表 ... 这里就是 tracks 这个数组 ... 然后再设置一下,迭代器,或者叫循环处理器 ... 其实就是一个处理列表里面的项目的函数 ... 这里我用一个匿名函数 ...
然后用 track 表示当前要处理的列表里面的项目 ... 你可以根据自己的需求去命名这个参数。
在这个函数里面,返回处理之后的结果 .. . 用一个 return ... 一个书名号 .. 加上 track ... 表示当前这个项目 ... 后面再加上书名号的另一部分 ...
_.map(tracks, function(track) { return '《 ' + track + ' 》';})
回车 ...
会给我们返回处理之后生成的新的列表 ... 在这个数组里面,每一个项目的值的周围都会有一组书名号 ...
如果你想循环去处理一个列表,比如一个数组,或者一个对象。可以使用 Underscore 的 each 方法 ... 这个方法有两个参数,第一个参数是要处理的列表,第二个参数是一个迭代器。each 方法会把列表里面的每一个项目,都交给这个迭代器去处理一下 ...
如果列表是一个数组的话,这个迭代器接收的参数就是 element ,表示当前这次处理的元素 ... 第二个参数是 index,表示这个元素在数组里面的索引号 .. 最后一个参数是 list ,表示这个列表本身。
如果要处理的列表是个对象的话,这个遍历器的第一个参数是对象的值,可以用 value 表示 ... 第二个参数是 key ,表示对象里的属性的名字 .. 最后一个参数是 list ,表示要处理的这个列表对象。
下面, 我们去试一下这个方法 ...
先处理一下 tracks 这个数组 ... 要做的事就是,在控制台上输出这个数组里面的每个项目的索引号,还有对应的值 ... underscore 点 each ,使用 underscore 的 each 这个方法 ... 要处理的列表是 tracks ... 再设置一下处理这个列表的函数,也就是遍历器 ...
下面我们先介绍一下这个课程里用到的东西,你可以在课程的资源包里,找到一个启动项目 ... 用 Bracks 编辑器打开这个项目目录,就是你现在看到的这个样子 ..
index.html 是项目的主页 ... 在这个文档上,用到了 bootstrap 框架的样式表 ... 还有 jquery ... underscore.js ... 这是 underscore 库的文件 ...
下面的 data.js ... 在 js 这个目录的下面 ... 在这个文件里面,事先定义好了一些要在这个课程里面用到的数据 ... 一些数组还有对象 ...
最后的 app.js ,是一个空白的脚本文件 ... 在课程里面,我们可能需要在它里面去输入几行代码 ...
这个课程的大部分的测试,都是在 Chrome 浏览器的控制台上完成的 ...
在浏览器里,打开这个 index.html ...
打开控制台,可以点击 视图 菜单 .. 开发者 ... 选择 JavaScript 控制台 ... 或者也可以直接使用快捷键 alt + command + J 打开控制台。
windows 上应该是 alt + ctrl + J
在 Underscore 里面,提供了非常多,而且非常实用的一些函数去处理数据。比如你可以用一个函数去处理一个数组或对象里面的每一个项目,你可以查找,过滤数据,可以对数据进行排序还有分组,可以找出两组数据之间的不同的地方,或者相交的地方,你可以去掉数据列表里面的重复的东西。
Underscore 还提供了一些跟函数相关的方法,比如我们可以把一些方法跟对象绑定到一起,这样在方法里面,可以使用对象里面的属性,我们还可以延时去执行函数,可以防止滥用函数,可以创建一次性的函数。
最后,我们再看一下 Underscore 里的链式调用。
1)介绍
1) 介绍
这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉及到很多概念,观点,个人的看法,有不确切的地方,欢迎指正。
float: left;
float: right;
background(-image)*: url([^\)])*\)
position: relative;
position: absolute;