2017-12-27 绿茶、 AppCan Slider、Vue

第一组：姚成栋 绿茶

绿茶（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）

二. 方法

1. set(data)
   data:JSON 对象数组，用于存储显示的图片、提示文字信息
2. clickItem事件
   data:JSON 点击条目时触发，告知点击的索引和索引对应的数据对象
3. change事件
   data:JSON 滑动条目时触发，告知滑动的索引

三. Demo

HTML5代码

<div id="slider" class="slider">
</div>

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);
  })

四.

1. hasContent
   默认hasContent为false，当hasContent为false的时候slider支持图片区域；当hasContent为true的时候slider支持文字区域 相关说明：size 设置文字内容区域的文字大小

2. canDown
   默认canDown为true，当canDown为true的时候图片/文字区域可以进行下拉；当canDown为false的时候图片/文字区域禁止下拉。

3. 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“属性”的值

二、方法

可以通过调用方法来实现表达式的效果，例如将输入的数据逆序输出

用计算属性实现：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {message: 'Hello'},//初始
  computed: {    // 计算属性的 getter
    reversedMessage: function () {    
  // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    } 
 }})

在表达式中调用方法来实现：

<p>Reversed message: "{{ reversedMessage() }}"</p>
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的绘制过程。

1. html结构是这样的：
   label将样式元素span和checkbox绑定起来

   
   image.png

2. css是这样的：
   .input:checked+.span:after实现样式切换

   
   image.png

3. 源码：

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>demo</title>
     <style>
     .label{position: relative;}
     .input{display:none}
     .span{display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}
     .input:checked+.span:after{
         content: "";
         position: absolute;
         width: 9px;
         height: 4px;
         border: 2px solid #fd8845;
         border-top-color: transparent;
         border-right-color: transparent;
         -ms-transform: rotate(-60deg); 
         -moz-transform: rotate(-60deg); 
         -webkit-transform: rotate(-60deg); 
         transform: rotate(-45deg);}
     </style>
</head>
<body>
     <div>
         <label class="label">
             <input class="input" type="checkbox" name="">
             <span class="span"></span>
         </label>
     </div>
</body>
</html>

---

第五组：姜葳 利用C#线程窗口调试多线程程序

1. 在日志的某个地方写日志文件。
   优点：不会干扰程序的执行，特别是对网络的多线程通信。
   缺点：每次都需要打开日志文件以查看进程运行的信息。

2. 利用断点进行调试。
   优点：直观，可以直接看到运行过程的值
   缺点：在多个线程设置断点，可能让程序跳来跳去，还需要额外地分出一部分精力用来理清程序的逻辑

3. 利用弹出窗口来查看进程调试的信息。
   优点:直观
   缺点:在调试网路通信的时候，使得通信的过程产生延时，导致通信失败。

4. 利用vs2010自带的线程窗口来调试
   优点：直观，可以直接从进程图上看到哪个进程是活动进程，哪些进程处于阻塞状态。
   缺点：需要结合断点调试，基本上就是断点调试的加强版

编译环境：vs2010
语言：C#