`
d0ln
  • 浏览: 2691 次
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

AngularJS之学写partyBid第四张卡片

 
阅读更多

一、jade

从第三张卡开始使用jade代替html进行网页编程。jade是一款高性能简洁易懂的HTML模板引擎，是用javascript实现的。jade使用简洁的语言规则通过编译转成html文件，大大缩短了写网页的时间，更加灵活易用。jade和html、haml一样，也是用不同的标签代表不同的属性元素，只是使用的标签的表示方法跟html和haml不一样罢了。

1、安装jade插件

Shell代码  收藏代码
  1.  //安装到自己的工程文件夹下   
  2. npm install grunt-contrib-jade    
  3. 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{}添加

Js代码  收藏代码
  1. jade: {  
  2.                 files: ['<%= yeoman.app %>/views/*'],  
  3.                 tasks: ['jade']  
  4.             },  

 

 最后在grunt.initConfig函数里面添加需要进行转化的jade和html文件，例如：

Js代码  收藏代码
  1. jade:{  
  2.            bid_register: {  
  3.                src: 'app/views/bid_register.jade',  
  4.                dest: 'app/views/bid_register.html'  
  5.            },  
  6. ，  

 

 

2、jade标记

jade标记跟html标记差不多，通常是html标签去掉<>，并且是使用一个代替一对开始结束标签。例如：

Jade代码  收藏代码
  1. html  

 对应

Html代码  收藏代码
  1. <html></html>   

 标记也有id

Jade代码  收藏代码
  1. div#container  

 将被渲染成

Html代码  收藏代码
  1. <div id="container"></div>  

 其中div是可以去掉的。

类的处理使用“.类名”，多个类可以串到一起，还可以跟id一起使用，即

Jade代码  收藏代码
  1. #foo.bar.baz  

 对应

Html代码  收藏代码
  1. <div id="foo" class="bar baz"></div>  

 文本标记

Jade代码  收藏代码
  1. p wahoo!  

 对应

Html代码  收藏代码
  1. <p>wahoo!</p>  

 大段文本文本块可使用“|”或“.”来表示

Jade代码  收藏代码
  1. p  
  2.   | foo bar baz  
  3.   | rawr rawr  
  4.   | super cool  
  5.   | go jade go  

 渲染成

Html代码  收藏代码
  1. <p>foo bar baz rawr.....</p>  

 转义输出元素

如果我们传入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }}，可以这样做提取信息：

Jade代码  收藏代码
  1. #user #{name} &lt;#{email}&gt;  

 对用html

Html代码  收藏代码
  1. <div id="user">一回 &lt;xianlihua[at]gmail.com&gt;</div>  

 当使用标记表示其他信息时我们需要转义一下

Jade代码  收藏代码
  1. p \#{CSSer, 关注Javascript技术}  

 对应

Html代码  收藏代码
  1. <p>#{CSSer, 关注Javascript技术}</p>  

 也可以使用反转义变量!{html}输出html所代表的其他信息

嵌套：（jade以缩进的形式判断嵌套的逻辑关系）

Jade代码  收藏代码
  1. ul  
  2.   li.first  
  3.     a(href='#') foo  
  4.   li  
  5.     a(href='#') bar  
  6.   li.last  
  7.     a(href='#') baz  

 快扩展（不会另起一行而是在同一行进行扩展）

Jade代码  收藏代码
  1. ul  
  2.     li.first: a(href='#') foo  
  3.     li: a(href='#') bar  
  4.     li.last: a(href='#') baz  

 与上面的结果相同

标记的一些属性信息可以表示在（）里，例如：其中“=”可以换成“：”

Jade代码  收藏代码
  1. a(href='/login', title='View login page') Login  
  2. input(type="checkbox", checked)  

 

二、underscore方法应用

第三张卡的实现功能跟第二张卡的方法一样，可以参考第二张卡，下面来说一下第四张卡的重难点。

第四张卡的主要难点在排序和自动弹框上。排序如果自己写方法，就会出现for循环和if的无限嵌套，逻辑思路特别混乱，使用underscore自带的js方法实现起来则非常简单。在接下来的重构中也会非常有用。下面主要讲以下排序的几个重要函数应用

1、find和filter

 

Js代码  收藏代码
  1. _.find(list, predicate, [context])   

 在list数组列表中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。

Js代码  收藏代码
  1. _.filter(list, predicate, [context])  

 遍历list中的每项值，返回包含所有通过predicate真值检测的元素值。即将符合条件的值存到一个数组中并返回。

例如：

Js代码  收藏代码
  1. var num = [1,2,3,4,5];  
  2. var a = _.find(num, function(num){return num == 2;});   
  3. //a的结果是：2  
  4. var a = _.filter(num, function(num){return num == 2;}); //a的结果是[2]  

 2、sortBy

sortBy方法根据处理函数的返回值，返回一个排序后的集合，以升序排列。

Js代码  收藏代码
  1. var list_sort = _.sortBy(list, function (list) {    
  2.                             return list.price;    
  3.                         })    //根据价格对list进行升序排序并赋给list_sort    

 3、countBy

Js代码  收藏代码
  1. var list_count=_.countBy(list, function (list) {    
  2.                             return list.price ;   
  3.                         }) //根据价格对数组对像进行分组，返回相同价格所对应的个数作为一个对象存储到数组里赋给bist_count  

 4、map

map方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组。

Js代码  收藏代码
  1. _.map([1, 2, 3], function(num){ return num * 3; });  
  2. // [3, 6, 9]  
  3.   
  4. _.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });  
  5. // [3, 6, 9]  

 return里要定义返回的数组的对象的表达方式或属性

Js代码  收藏代码
  1. var pricegroup = _.map(count_pricegroup, function (value, key) {  
  2.                                        return {"price": key, "count": value};  
  3.                                    });  
  4. /把统计出的人数和价格按 {"price":key,"count":value }的形式存储到pricegroup数组中   

 三、JavaScript 插件之模态框及事件处理

1、模态框

模态框是自定义的弹出框，要使用模态框首先要下载bootstrap相对应的插件资源css、js文件，然后再自己编写代码设计样式。具体代码如下：

Html代码  收藏代码
  1. <div class="modal fade">  
  2.   <div class="modal-dialog">  
  3.     <div class="modal-content">  
  4.       <div class="modal-header">  
  5.         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>  
  6.         <h4 class="modal-title">Modal title</h4>  
  7.       </div>  
  8.       <div class="modal-body">  
  9.         <p>One fine body&hellip;</p>  
  10.       </div>  
  11.       <div class="modal-footer">  
  12.         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  13.         <button type="button" class="btn btn-primary">Save changes</button>  
  14.       </div>  
  15.     </div><!-- /.modal-content -->  
  16.   </div><!-- /.modal-dialog -->  
  17. </div><!-- /.modal -->  

 模态框的定义遵循嵌套的原则，其中整个模态框的对话框内容包含modal-header、modal-body、modal-footer，可以根据自己的实际情况进行设计。

在JS 文件中如果想要显示该模态框，就要执行下面代码：

 

Js代码  收藏代码
  1. $('#bid_resultsModal').modal("show");//bid_resultsModal为自定义的模态框的id  

 

 如果要隐藏就要把show改为hide

2、事件处理

卡4要求，弹框停留3s，自动关闭，这里有两种方法

法一：使用anjularjs自带的timeout指令，function里写3s之后执行的操作

 

Js代码  收藏代码
  1. $timeout(function () {  
  2.            $('#bid_resultsModal').modal('hide');         
  3.        }, 3000);  

 法二：或使用setTimeout方法

 

Js代码  收藏代码
  1. setTimeout(function(){  
  2. $('#bid_resultsModal').modal('hide')}  
  3. ,3000);  

 四、其他问题

我把所有的数据都存在了一个数组里,当存得数据多的时候由于ng-repeat的原因会出现一个不认识的随机键值,类似$004.解决方法在ng-repeat后加track by $index,例如

Html代码  收藏代码
  1. ng-repeat="bidding in activity track by $index"  
分享到：
| AngularJS之学写partyBid第三张卡片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics