`

Party_bid 第三、四张卡总结

阅读更多

一、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} &lt;#{email}&gt;

 对用html

<div id="user">一回 &lt;xianlihua[at]gmail.com&gt;</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">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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"

 

 

 

 

0
1
分享到:
评论

相关推荐

    uid_score_bid.dat

    数据格式 uid_score_bid 如 dingdanglbh,4.0 ,25862578 Luna-cat,5.0 ,25862578 aiyung,5.0 ,25862578

    case9_bid.rar_PSO_PSO power_PSO 潮流_case9_pso power flow

    标题中的"case9_bid.rar_PSO_PSO power_PSO 潮流_case9_pso power flow"揭示了这个压缩包文件包含的是一个关于电力系统潮流计算的案例,使用了粒子群优化(PSO, Particle Swarm Optimization)算法。PSO是一种基于...

    crc16-CCITT.rar_ccctt.5com_ccctt3bid_ccctt9. bid_crc16 ccitt ver

    标题中的"crc16-CCITT.rar_ccctt.5com_ccctt3bid_ccctt9._bid_crc16 ccitt ver"可能是指一个包含CRC-16 CCITT实现相关资料的压缩文件,其中包含了各种文档、源代码或测试向量。"ccctt.5com"、"ccctt3bid"、"ccctt9._...

    EURUSD_1 Min_Bid_2003.05.04_2019.02.02.zip

    欧美1分钟历史数据,2003年5月到2019年2月,MT4EA回测好用。

    基于JavaScript的Java_Bid招标项目前端设计源码

    该招标项目前端设计源码采用JavaScript编写,包含280个文件,涵盖177个JavaScript文件、26个CSS文件、24个HTML文件、22个Java文件以及少量地图、JSON、图像、XML等文件。整个项目旨在打造一个功能完善、界面美观的...

    mc_bid

    3. **出价优化**:mc_bid的核心在于根据各个渠道的表现和目标受众的特点,动态调整出价。这涉及到数据分析、预测模型和机器学习技术,以便在每个渠道上获取最佳的广告效果,如最高的点击率(CTR)、最低的成本每次...

    Repaso_Clases_Objetos_call_aplly_bid_22_02_2021

    标题 "Repaso_Clases_Objetos_call_aplly_bid_22_02_2021" 暗示这是一个关于回顾类与对象、`call` 和 `apply` 方法以及可能涉及到的 JavaScript 语言特性的教程或复习资料。描述部分的信息较为简单,与标题相同,...

    去噪代码matlab-PGBL_BID:PGBL_BID的Matlab代码

    去噪代码 matlab

    bid0-lid64-steam.game_steamzc9_2.0.0.2702.exe.file

    bid0-lid64-steam.game_steamzc9_2.0.0.2702.exe.file

    bid0-lid0-steam游戏管家_steambdth01_1.0.0.1487@1prw2r@gog.exe

    bid0-lid0-steam游戏管家_steambdth01_1.0.0.1487@1prw2r@gog.exe

    backup_1000821v1001400000.zip

    总结起来,这个“backup_1000821v1001400000.zip”压缩包可能包含了一个陌陌应用或系统的备份数据,其中`verify.json`和`config.json`文件提供了备份验证和应用配置信息,而`verify.sign`和`verify.signature`则保证...

    Bid Documents - Toyota Hilux Fx_pdf_

    【标题】"Bid Documents - Toyota Hilux Fx_pdf_" 暗示了这是一个与丰田Hilux FX车型相关的招标文件,格式为PDF。在IT领域,PDF(Portable Document Format)是一种广泛使用的文档格式,用于保存内容,确保在不同...

    bid_shift_reg.rar_plus

    标题“bid_shift_reg.rar_plus”暗示我们关注的焦点是一个与数字电路设计相关的项目,特别是使用VHDL(Very High-Speed Integrated Circuit Hardware Description Language)编写的双向移位寄存器。在电子工程领域,...

    bid0-lid64-steam.game_steamzc_2.0.0.2242.exe

    bid0-lid64-steam.game_steamzc_2.0.0.2242.exe

    ocds_bid_extension:允许出价统计信息和详细的出价信息被表示

    出价统计信息和详细信息 作为签约过程一部分而...bids.details数组用于提供一个或多个Bid对象,每个对象代表收到的唯一出价。 bids.statistics数组用于表示有关投标和投标者数量的关键统计信息。 数组中的每个条目都

    bid格式文件电子标书阅读器.zip

    bid格式招投标文件阅读器,可以打开浏览、管理电子招标文件,如果打不开标书文件,请按下面步骤检查:1、请查看招标文件(.bid文件)是否下载完全,请用IE下载工具下载;2、查看IE浏览器版本,如果版本低于IE8,低于IE...

    Bid Documents - Service Pick-up_OntheUp_tantakpins_

    标题中的“Bid Documents - Service Pick-up_OntheUp_tantakpins_”暗示这是一份关于服务接洽的投标文档,其中可能包含了与"OntheUp"和"tantakpins"两个关键词相关的服务流程或项目信息。"OntheUp"可能是项目、服务...

    马里奥matlab代码-Class-adapted-BID:一种基于即插即用的适应类盲图像去模糊方法

    马里奥matlab代码适应类别的BID 一种基于即插即用方法的适应类盲图像去模糊方法。 %================================================= ===================% [1]和[2]中的适用于类的BID方法的MATLAB DEMO。 该...

    matlab 电力系统潮流计算程序 9节点改进算法算例

    在提供的文件中,`quadratic_bid_ninebus.m`和`case9_bid.m`可能是两个主要的MATLAB源代码文件,它们可能包含了潮流计算的实现以及特定的优化算法,如牛顿-拉弗森法或者快速分解法。 `quadratic_bid_ninebus.m`可能...

    CCNA final3第三学期考试答案

    【CCNA Final3 第三学期考试答案解析】 在准备CCNA的最终考试,尤其是Final3时,找到准确的答案至关重要。据描述,有的学生已经找到了80%的正确答案,而有的则找到了50道题目,这表明答案的可用性与考试的随机性...

Global site tag (gtag.js) - Google Analytics