grep、egrep
2016-01-02 16:20
218 查看
一、jade
从第三张卡开始使用jade代替html进行网页编程。jade是一款高性能简洁易懂的HTML模板引擎，是用javascript实现的。jade使用简洁的语言规则通过编译转成html文件，大大缩短了写网页的时间，更加灵活易用。jade和html、haml一样，也是用不同的标签代表不同的属性元素，只是使用的标签的表示方法跟html和haml不一样罢了。
1、安装jade插件
Shell代码
//安装到自己的工程文件夹下
npm install grunt-contrib-jade
npm install grunt-contrib-jade --save-dev
找到工程文件夹下的Gruntfile.js文件，在module.exports = function (grunt)（该函数方法，在
然后找到grunt.initConfig函数里面的watch{}添加
Js代码
jade: {
files: ['<%= yeoman.app %>/views/*'],
tasks: ['jade']
},
最后在grunt.initConfig函数里面添加需要进行转化的jade和html文件，例如：
Js代码
jade:{
bid_register: {
src: 'app/views/bid_register.jade',
dest: 'app/views/bid_register.html'
},
，
2、jade标记
jade标记跟html标记差不多，通常是html标签去掉<>，并且是使用一个代替一对开始结束标签。例如：
Jade代码
html
对应
Html代码
<html></html>
标记也有id
Jade代码
div#container
将被渲染成
Html代码
<div id="container"></div>
其中div是可以去掉的。
类的处理使用“.类名”，多个类可以串到一起，还可以跟id一起使用，即
Jade代码
#foo.bar.baz
对应
Html代码
<div id="foo" class="bar baz"></div>
文本标记
Jade代码
p wahoo!
对应
Html代码
<p>wahoo!</p>
大段文本文本块可使用“|”或“.”来表示
Jade代码
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
渲染成
Html代码
<p>foo bar baz rawr.....</p>
转义输出元素
如果我们传入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }}，可以这样做提取信息：
Jade代码
#user #{name} <#{email}>
对用html
Html代码
<div id="user">一回 <xianlihua[at]gmail.com></div>
当使用标记表示其他信息时我们需要转义一下
Jade代码
p \#{CSSer, 关注Javascript技术}
对应
Html代码
<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html}输出html所代表的其他信息
嵌套：（jade以缩进的形式判断嵌套的逻辑关系）
Jade代码
ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
快扩展（不会另起一行而是在同一行进行扩展）
Jade代码
ul
li.first: a(href='#') foo
li: a(href='#') bar
li.last: a(href='#') baz
与上面的结果相同
标记的一些属性信息可以表示在（）里，例如：其中“=”可以换成“：”
Jade代码
a(href='/login', title='View login page') Login
input(type="checkbox", checked)
二、underscore方法应用
第三张卡的实现功能跟第二张卡的方法一样，可以参考第二张卡，下面来说一下第四张卡的重难点。
第四张卡的主要难点在排序和自动弹框上。排序如果自己写方法，就会出现for循环和if的无限嵌套，逻辑思路特别混乱，使用underscore自带的js方法实现起来则非常简单。在接下来的重构中也会非常有用。下面主要讲以下排序的几个重要函数应用
1、find和filter
Js代码
_.find(list, predicate, [context])
在list数组列表中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。
Js代码
_.filter(list, predicate, [context])
遍历list中的每项值，返回包含所有通过predicate真值检测的元素值。即将符合条件的值存到一个数组中并返回。
例如：
Js代码
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方法根据处理函数的返回值，返回一个排序后的集合，以升序排列。
Js代码
var list_sort = _.sortBy(list, function (list) {
return list.price;
}) //根据价格对list进行升序排序并赋给list_sort
3、countBy
Js代码
var list_count=_.countBy(list, function (list) {
return list.price ;
}) //根据价格对数组对像进行分组，返回相同价格所对应的个数作为一个对象存储到数组里赋给bist_count
4、map
map方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组。
Js代码
_.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里要定义返回的数组的对象的表达方式或属性
Js代码
var pricegroup = _.map(count_pricegroup, function (value, key) {
return {"price": key, "count": value};
});
/把统计出的人数和价格按 {"price":key,"count":value }的形式存储到pricegroup数组中
三、JavaScript 插件之模态框及事件处理
1、模态框
模态框是自定义的弹出框，要使用模态框首先要下载bootstrap相对应的插件资源css、js文件，然后再自己编写代码设计样式。具体代码如下：
Html代码
<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 文件中如果想要显示该模态框，就要执行下面代码：
Js代码
$('#bid_resultsModal').modal("show");//bid_resultsModal为自定义的模态框的id
如果要隐藏就要把show改为hide
2、事件处理
卡4要求，弹框停留3s，自动关闭，这里有两种方法
法一：使用anjularjs自带的timeout指令，function里写3s之后执行的操作
Js代码
$timeout(function () {
$('#bid_resultsModal').modal('hide');
}, 3000);
法二：或使用setTimeout方法
Js代码
setTimeout(function(){
$('#bid_resultsModal').modal('hide')}
,3000);
四、其他问题
我把所有的数据都存在了一个数组里,当存得数据多的时候由于ng-repeat的原因会出现一个不认识的随机键值,类似$004.解决方法在ng-repeat后加track by $index,例如
Html代码
ng-repeat="bidding in activity track by $index"
从第三张卡开始使用jade代替html进行网页编程。jade是一款高性能简洁易懂的HTML模板引擎，是用javascript实现的。jade使用简洁的语言规则通过编译转成html文件，大大缩短了写网页的时间，更加灵活易用。jade和html、haml一样，也是用不同的标签代表不同的属性元素，只是使用的标签的表示方法跟html和haml不一样罢了。
1、安装jade插件
Shell代码
//安装到自己的工程文件夹下
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{}添加
Js代码
jade: {
files: ['<%= yeoman.app %>/views/*'],
tasks: ['jade']
},
最后在grunt.initConfig函数里面添加需要进行转化的jade和html文件，例如：
Js代码
jade:{
bid_register: {
src: 'app/views/bid_register.jade',
dest: 'app/views/bid_register.html'
},
，
2、jade标记
jade标记跟html标记差不多，通常是html标签去掉<>，并且是使用一个代替一对开始结束标签。例如：
Jade代码
html
对应
Html代码
<html></html>
标记也有id
Jade代码
div#container
将被渲染成
Html代码
<div id="container"></div>
其中div是可以去掉的。
类的处理使用“.类名”，多个类可以串到一起，还可以跟id一起使用，即
Jade代码
#foo.bar.baz
对应
Html代码
<div id="foo" class="bar baz"></div>
文本标记
Jade代码
p wahoo!
对应
Html代码
<p>wahoo!</p>
大段文本文本块可使用“|”或“.”来表示
Jade代码
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
渲染成
Html代码
<p>foo bar baz rawr.....</p>
转义输出元素
如果我们传入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }}，可以这样做提取信息：
Jade代码
#user #{name} <#{email}>
对用html
Html代码
<div id="user">一回 <xianlihua[at]gmail.com></div>
当使用标记表示其他信息时我们需要转义一下
Jade代码
p \#{CSSer, 关注Javascript技术}
对应
Html代码
<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html}输出html所代表的其他信息
嵌套：（jade以缩进的形式判断嵌套的逻辑关系）
Jade代码
ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
快扩展（不会另起一行而是在同一行进行扩展）
Jade代码
ul
li.first: a(href='#') foo
li: a(href='#') bar
li.last: a(href='#') baz
与上面的结果相同
标记的一些属性信息可以表示在（）里，例如：其中“=”可以换成“：”
Jade代码
a(href='/login', title='View login page') Login
input(type="checkbox", checked)
二、underscore方法应用
第三张卡的实现功能跟第二张卡的方法一样，可以参考第二张卡，下面来说一下第四张卡的重难点。
第四张卡的主要难点在排序和自动弹框上。排序如果自己写方法，就会出现for循环和if的无限嵌套，逻辑思路特别混乱，使用underscore自带的js方法实现起来则非常简单。在接下来的重构中也会非常有用。下面主要讲以下排序的几个重要函数应用
1、find和filter
Js代码
_.find(list, predicate, [context])
在list数组列表中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。
Js代码
_.filter(list, predicate, [context])
遍历list中的每项值，返回包含所有通过predicate真值检测的元素值。即将符合条件的值存到一个数组中并返回。
例如：
Js代码
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方法根据处理函数的返回值，返回一个排序后的集合，以升序排列。
Js代码
var list_sort = _.sortBy(list, function (list) {
return list.price;
}) //根据价格对list进行升序排序并赋给list_sort
3、countBy
Js代码
var list_count=_.countBy(list, function (list) {
return list.price ;
}) //根据价格对数组对像进行分组，返回相同价格所对应的个数作为一个对象存储到数组里赋给bist_count
4、map
map方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组。
Js代码
_.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里要定义返回的数组的对象的表达方式或属性
Js代码
var pricegroup = _.map(count_pricegroup, function (value, key) {
return {"price": key, "count": value};
});
/把统计出的人数和价格按 {"price":key,"count":value }的形式存储到pricegroup数组中
三、JavaScript 插件之模态框及事件处理
1、模态框
模态框是自定义的弹出框，要使用模态框首先要下载bootstrap相对应的插件资源css、js文件，然后再自己编写代码设计样式。具体代码如下：
Html代码
<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 文件中如果想要显示该模态框，就要执行下面代码：
Js代码
$('#bid_resultsModal').modal("show");//bid_resultsModal为自定义的模态框的id
如果要隐藏就要把show改为hide
2、事件处理
卡4要求，弹框停留3s，自动关闭，这里有两种方法
法一：使用anjularjs自带的timeout指令，function里写3s之后执行的操作
Js代码
$timeout(function () {
$('#bid_resultsModal').modal('hide');
}, 3000);
法二：或使用setTimeout方法
Js代码
setTimeout(function(){
$('#bid_resultsModal').modal('hide')}
,3000);
四、其他问题
我把所有的数据都存在了一个数组里,当存得数据多的时候由于ng-repeat的原因会出现一个不认识的随机键值,类似$004.解决方法在ng-repeat后加track by $index,例如
Html代码
ng-repeat="bidding in activity track by $index"
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【设计模式】代理模式
- 多文件夹下编写Makefile详解
- C#之方法与函数
- Proximal Gradient Method近端梯度算法
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
- NSTimer的使用以及NSTimer暂停和继续
- 【VBA研究】查找目录以下全部文件的名称
- 蓝桥杯 算法训练 未名湖边的烦恼
- 【ZYNQ-7000开发之八】OLED的驱动
- Java 图片提取RGB数组 RGBOfCharMaps (整理)
- nyoj--514--1的个数（贪心）
- bash shell 中的比较
- 通过SQL Server 2008数据库复制实现数据库同步备份
- VS插件-Resharper
- nyoj--514--1的个数（贪心）
- 最大流学习笔记
- failed to resolve com.android.support:appcompat-v7:23+ 解决方法
- 25、静态查找表（顺序表、索引顺序表、静态树表、折半查找） http://blog.163.com/zhoumhan_0351/blog/static/39954227200993093110226
- zzulioj--1712--Monty Hall problem(蒙提霍尔问题)
- GetCharPos