第一组:姚成栋 绿茶
绿茶(Green Tea),是中国的主要茶类之一,是指采取茶树的新叶或芽,未经发酵,经杀青、整形、烘干等工艺而制作的饮品。其制成品的色泽和冲泡后的茶汤较多的保存了鲜茶叶的绿色格调。常饮绿茶能防癌,降脂和减肥,对吸烟者也可减轻其受到的尼古丁伤害。
绿茶是未经发酵制成的茶,保留了鲜叶的天然物质,含有的茶多酚、儿茶素、叶绿素、咖啡碱、氨基酸、维生素等营养成分也较多。绿茶中的这些天然营养成份对防衰老、防癌、抗癌、杀菌、消炎等具有特殊效果,是其他茶类所不及的。绿茶是以适宜茶树新梢为原料,经杀青、揉捻、干燥等典型工艺过程制成的茶叶。其干茶色泽和冲泡后的茶汤、叶底以绿色为主调,故名绿茶。绿茶是将采摘来的鲜叶先经高温杀青,杀灭了各种氧化酶,保持了茶叶绿色,然后经揉捻、干燥而制成,清汤绿叶是绿茶品质的共同特点。中国生产绿茶的范围极为广泛,河南、贵州、江西、安徽、浙江、江苏、四川、陕西(陕南)、湖南、湖北、广西、福建是我国的绿茶主产省份。
其实周边的人喝茶,基本上都只会喝周边的一些茶类,或者是一些特别有名的,我也不例外。因为家住德清,旁边就有一座产茶的山,名为莫干山。所以莫干黄芽是我平日最喜爱的绿茶之一。正如江浙人的菜肴偏甜一样,莫干黄芽抿入口中就是一股甘甜,淡淡的有点小清纯,喝上一天也不会厌。还有一类我也比较喜欢喝的就是安吉白茶,也是周边产的一种茶。比起黄芽,白茶可能更偏苦一点,但是不是那种带涩的苦,是喝一口之后半甜半苦的感觉。还有一类茶平时不怎么喝,但是名气很大,就是西湖龙井。可能是我这个年纪还没发理解龙井的味道,之前品过,觉得那种入口的苦涩并不怎么讨人喜欢,只不过回味起来倒也是有几丝别样的味道。
再讲讲喝茶(如果不是特别的情况,我还是比较喜欢喝茶,而不是品茶,因为闲时泡一杯喝一喝也没必要郑重其事的),随便拿个杯子温一下,放上茶叶,如果讲究一点可以先洗茶,全凭个人喜好。倒上热水,还是觉得不要刚沸的那种水比较好,但也不要太冷,不然茶都泡不开,记住不要焖,不然会有很奇怪的味道。喝的时候也不要大口牛饮,毕竟水还是很烫的,嗦嗦地,就跟路边的老头子一样,发出声音的那种,试了你就会知道为什么要这么喝茶了。
第二组:赵彩凤 AppCan Slider图片轮播组件
一.函数
appcan.slider({参数})
selector: /*选择器*/,
hasIndicator: true or false /*是否有位置提示条*/,
hasLabel: true or false /*是否有标签文字栏*/,
aspectRatio: 0 or !=0 /*是否控制纵横比,0为使用控件高度,>0使用纵横比*/,
index: 0 or >0 /*默认选择项*/
auto:2000 /*轮播时间,单位毫秒*/
hasContent: true or false 支持slider设置文字区域
canDown: true or false 设置图片/文字区域是否可以下拉
hasCircle: true or false 设置圆点位置提示标志
circleSlide:true or false 设置是否循环轮播(下载最新JSSDK)
二. 方法
- set(data)
data:JSON 对象数组,用于存储显示的图片、提示文字信息 - clickItem事件
data:JSON 点击条目时触发,告知点击的索引和索引对应的数据对象 - change事件
data:JSON 滑动条目时触发,告知滑动的索引
三. Demo
HTML5代码
JS代码
var slider = appcan.slider({
selector : '#slider',
aspectRatio:6/16,
hasLabel:true,
index:1,
auto:2000
});
slider.set([{
img : "../images/loading_pic1.jpg",
label:"快速!丰富稳定的UI组件、海量的行业UI模板,快速拼装APP"
}, {
img : "../images/loading_pic2.jpg",,
label:"便捷!网络部署APP,摆脱数据线"
}, {
img : "../images/loading_pic3.jpg",,
label:"高效!项目云端同步,多人协同开发"
}, {
img : "../images/loading_pic4.jpg",,
label:"所见即所得!真机同步调试应用代码"
}, {
img : "../images/loading_pic5.jpg",,
label:"高效!代码提示,无忧编程"
}])
slider.on("clickItem",function(index,data){
console.log(index,data);
})
四.
hasContent
默认hasContent为false,当hasContent为false的时候slider支持图片区域;当hasContent为true的时候slider支持文字区域 相关说明:size 设置文字内容区域的文字大小canDown
默认canDown为true,当canDown为true的时候图片/文字区域可以进行下拉;当canDown为false的时候图片/文字区域禁止下拉。hasCircle
默认hasCircle为true,当hasCircle为true的时候在图片/文字区域显示圆点位置提示标志;当hasCircle为false时不显示 相关说明:site 设置圆点提示标志的位置,默认情况下site水平居中,'Right'圆点提示标志位于右边,'Left'圆点提示标志位于左边
第三组:黄华英 Vue.js计算属性VS方法
一、计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行
这个例子是一个典型的计算属性:
var vm = new Vue({
el: '#example',//声明挂载
data: {//初始化数据
firstName: '马瑞',
lastName: '克瑞斯马斯'
},
computed: {//计算属性
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
当需要读取fullname“属性”的时候,我们去读取了实例对象上的firstname和lastname属性,然后进行了字符串的拼接操作,经历了以上一系列的计算,将最终得到的结果作为fullname“属性”的值
二、方法
可以通过调用方法来实现表达式的效果,例如将输入的数据逆序输出
用计算属性实现:
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {message: 'Hello'},//初始
computed: { // 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}})
在表达式中调用方法来实现:
Reversed message: "{{ reversedMessage() }}"
var vm = new Vue({
el: '#example',
data: {message: 'Hello'},//初始
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}})
以上两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
Vue中的方法可以互相调用,如下:
Methods:{
A:function(){A的操作},
B:function(){//在B当中调用A方法
this.$options.methods.A.bind(this)();
}}
第四组:王芳 改变checkbox的默认样式
改变checkbox的默认样式总共有两种方法,大体思路都是一样的,先将checkbox隐藏,然后用一个样式元素来伪装成checkbox,主要的不同之处在于如何设置选中后的样式。
第一种方法是使用图片,将不同状态下的样式集合到一张图片上,根据改变background-positon来改变样式,类似于css sprite,之前分享的icheck就是这个原理,这种方法的兼容性比较好,但是不够灵活。
第二种方法是使用transform绘制选中后的样式,这样就可以根据自己的喜好随意修改样式了,但是兼容性不太强。
下图代码是第二种方法,其中红色方框部分为transform的绘制过程。
-
html结构是这样的:
label将样式元素span和checkbox绑定起来
-
css是这样的:
.input:checked+.span:after实现样式切换
源码:
demo
第五组:姜葳 利用C#线程窗口调试多线程程序
在日志的某个地方写日志文件。
优点:不会干扰程序的执行,特别是对网络的多线程通信。
缺点:每次都需要打开日志文件以查看进程运行的信息。利用断点进行调试。
优点:直观,可以直接看到运行过程的值
缺点:在多个线程设置断点,可能让程序跳来跳去,还需要额外地分出一部分精力用来理清程序的逻辑利用弹出窗口来查看进程调试的信息。
优点:直观
缺点:在调试网路通信的时候,使得通信的过程产生延时,导致通信失败。利用vs2010自带的线程窗口来调试
优点:直观,可以直接从进程图上看到哪个进程是活动进程,哪些进程处于阻塞状态。
缺点:需要结合断点调试,基本上就是断点调试的加强版
编译环境:vs2010
语言:C#