一、jade
从第三张卡开始使用jade代替html进行网页编程。jade是一款高性能简洁易懂的HTML模板引擎,是用javascript实现的。jade使用简洁的语言规则通过编译转成html文件,大大缩短了写网页的时间,更加灵活易用。jade和html、haml一样,也是用不同的标签代表不同的属性元素,只是使用的标签的表示方法跟html和haml不一样罢了。
1、安装jade插件
//安装到自己的工程文件夹下 npm install grunt-contrib-jade npm install grunt-contrib-jade --save-dev
找到工程文件夹下的Gruntfile.js文件,在module.exports = function (grunt)(该函数方法,在Gruntfile
文件中通过modules.exports
告诉Node
定义Grunt配置,并返回一个函数)函数里面添加“grunt.loadNpmTasks('grunt-jade');”。该命令告诉grunt从grunt-jade包中加载命令。
然后找到grunt.initConfig函数里面的watch{}添加
jade: { files: ['<%= yeoman.app %>/views/*'], tasks: ['jade'] },
最后在grunt.initConfig函数里面添加需要进行转化的jade和html文件,例如:
jade:{ bid_register: { src: 'app/views/bid_register.jade', dest: 'app/views/bid_register.html' }, },
2、jade标记
jade标记跟html标记差不多,通常是html标签去掉<>,并且是使用一个代替一对开始结束标签。例如:
html
对应
<html></html>
标记也有id
div#container
将被渲染成
<div id="container"></div>
其中div是可以去掉的。
类的处理使用“.类名”,多个类可以串到一起,还可以跟id一起使用,即
#foo.bar.baz
对应
<div id="foo" class="bar baz"></div>
文本标记
p wahoo!
对应
<p>wahoo!</p>
大段文本文本块可使用“|”或“.”来表示
p | foo bar baz | rawr rawr | super cool | go jade go
渲染成
<p>foo bar baz rawr.....</p>
转义输出元素
如果我们传入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }},可以这样做提取信息:
#user #{name} <#{email}>
对用html
<div id="user">一回 <xianlihua[at]gmail.com></div>
当使用标记表示其他信息时我们需要转义一下
p \#{CSSer, 关注Javascript技术}
对应
<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html}输出html所代表的其他信息
嵌套:(jade以缩进的形式判断嵌套的逻辑关系)
ul li.first a(href='#') foo li a(href='#') bar li.last a(href='#') baz
快扩展(不会另起一行而是在同一行进行扩展)
ul li.first: a(href='#') foo li: a(href='#') bar li.last: a(href='#') baz
与上面的结果相同
标记的一些属性信息可以表示在()里,例如:其中“=”可以换成“:”
a(href='/login', title='View login page') Login input(type="checkbox", checked)
二、underscore方法应用
第三张卡的实现功能跟第二张卡的方法一样,可以参考第二张卡,下面来说一下第四张卡的重难点。
第四张卡的主要难点在排序和自动弹框上。排序如果自己写方法,就会出现for循环和if的无限嵌套,逻辑思路特别混乱,使用underscore自带的js方法实现起来则非常简单。在接下来的重构中也会非常有用。下面主要讲以下排序的几个重要函数应用
1、find和filter
_.find(list, predicate, [context])
在list数组列表中逐项查找,返回第一个通过predicate迭代函数真值检测的元素值,如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。
_.filter(list, predicate, [context])
遍历list中的每项值,返回包含所有通过predicate真值检测的元素值。即将符合条件的值存到一个数组中并返回。
例如:
var num = [1,2,3,4,5]; var a = _.find(num, function(num){return num == 2;}); //a的结果是:2 var a = _.filter(num, function(num){return num == 2;}); //a的结果是[2]
2、sortBy
sortBy方法根据处理函数的返回值,返回一个排序后的集合,以升序排列。
var list_sort = _.sortBy(list, function (list) { return list.price; }) //根据价格对list进行升序排序并赋给list_sort
3、countBy
var list_count=_.countBy(list, function (list) { return list.price ; }) //根据价格对数组对像进行分组,返回相同价格所对应的个数作为一个对象存储到数组里赋给bist_count
4、map
map方法对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组。
_.map([1, 2, 3], function(num){ return num * 3; }); // [3, 6, 9] _.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; }); // [3, 6, 9]
return里要定义返回的数组的对象的表达方式或属性
var pricegroup = _.map(count_pricegroup, function (value, key) { return {"price": key, "count": value}; }); //把统计出的人数和价格按 {"price":key,"count":value }的形式存储到pricegroup数组中
三、JavaScript 插件之模态框及事件处理
1、模态框
模态框是自定义的弹出框,要使用模态框首先要下载bootstrap相对应的插件资源css、js文件,然后再自己编写代码设计样式。具体代码如下:
<div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
模态框的定义遵循嵌套的原则,其中整个模态框的对话框内容包含modal-header、modal-body、modal-footer,可以根据自己的实际情况进行设计。
在JS 文件中如果想要显示该模态框,就要执行下面代码:
$('#bid_resultsModal').modal("show");//bid_resultsModal为自定义的模态框的id
如果要隐藏就要把show改为hide
2、事件处理
卡4要求,弹框停留3s,自动关闭,这里有两种方法
法一:使用anjularjs自带的timeout指令,function里写3s之后执行的操作
$timeout(function () { $('#bid_resultsModal').modal('hide'); }, 3000);
法二:或使用setTimeout方法
setTimeout(function(){ $('#bid_resultsModal').modal('hide')} ,3000);
四、其他问题
我把所有的数据都存在了一个数组里,当存得数据多的时候由于ng-repeat的原因会出现一个不认识的随机键值,类似$004.解决方法在ng-repeat后加track by $index,例如
ng-repeat="bidding in activity track by $index"
相关推荐
数据格式 uid_score_bid 如 dingdanglbh,4.0 ,25862578 Luna-cat,5.0 ,25862578 aiyung,5.0 ,25862578
9点潮流计算PSO的优化算法 很简单,只要在MATLAB运行就可以
Repaso_Clases_Objetos_call_aplly_bid_22_02_2021
欧美1分钟历史数据,2003年5月到2019年2月,MT4EA回测好用。
去噪代码 matlab
mc_bid
bid0-lid64-steam.game_steamzc9_2.0.0.2702.exe.file
crc-16的编码,使用的多项式是G(x)=x^16+x^12+x^5+1
bid0-lid0-steam游戏管家_steambdth01_1.0.0.1487@1prw2r@gog.exe
backup_1000821v1001400000.zip
Bid Documents - Toyota Hilux Fx
bid0-lid64-steam.game_steamzc_2.0.0.2242.exe
附加服务器 欢迎使用Addons Server存储库! 请随时访问托管的当前项目的网页。 如果要安装,请遵循 指南。 我们希望您的帮助! 如果您有任何疑问,可以通过与我们联系。 请在此处报告错误: : 或您可以通过访问AMO...
出价统计信息和详细信息 作为签约过程一部分而...bids.details数组用于提供一个或多个Bid对象,每个对象代表收到的唯一出价。 bids.statistics数组用于表示有关投标和投标者数量的关键统计信息。 数组中的每个条目都
VHDL语言编写,实现双向移位寄存器功能,在MAX+plus软件下实现
马里奥matlab代码适应类别的BID 一种基于即插即用方法的适应类盲图像去模糊方法。 %================================================= ===================% [1]和[2]中的适用于类的BID方法的MATLAB DEMO。 该...
bid格式招投标文件阅读器,可以打开浏览、管理电子招标文件,如果打不开标书文件,请按下面步骤检查:1、请查看招标文件(.bid文件)是否下载完全,请用IE下载工具下载;2、查看IE浏览器版本,如果版本低于IE8,低于IE...
kp guide on how to use the kp tools
create index book_bid_idx on book(bid); create index abc on student(sid,sname); create index abc1 on student(sname,sid);他们是不同的 2、查看索引 select index_type,index_name,table_name,uniqueness from...
PHP Pro Bid v5.zip