2018-01-10 图表、 Vue：v-if与v-show比较、 Asp.Net底层解析-生命周期综合分析、iOS定时器、javascript使用的两项原则

第一组：姚成栋 图表

其实我们的模板中是有图表的，有折线图、柱状图和饼图等等。

如第六张的折线图代码如下

其中数据如下：

如果想要改成柱状图只需在上面的html代码fillColor属性中加入：

 bars: { show: true, barWidth: 0.6, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] } }

---

第二组：徐晋 Vue：v-if与v-show比较

1. 共同点

都是动态显示DOM元素

2. 区别

（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

Tips：（1）如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；

原因：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；于是value为true时，只能将element style中的display效果清除，并不能覆盖css中的display效果；

如下图所示，value=true时，v-show改变的是element.style，由于无效，显示效果由css文件中的display决定。

解决办法：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。

---

第三组：蔡永坚 Asp.Net底层解析-生命周期综合分析

经过对ASP.NET的生命周期的较详细了解后，不得不承认，微软在ASP.NET上的设计是非常精妙的，从ASPX页面源代码经过页面周期、各个服务器控件的生命周期，最终转化为html代码。这些生命周期的各个阶段功能相对独立、明确，ASP.NET开发者可以通过在特定阶段添加相关代码，以达到特定的目的。下面将页面生命周期与服务器控件生命周期在一张图上(从MSDN中复制)综合展示：



从上面的示图可以教完整地反映整个页面生命周期（控件的生命周期包含在页面周期之中）的执行流程，调用某些方法之后触发对应的生命周期事件，标志开始进入下一个生命周期阶段。

---

第四组：张元一 iOS定时器

EFB项目中，需要实现后台持续监控电量的功能，这可以拆分为三个需求：

1. 程序需要保持在后台可以运行。
2. 程序需要获取ipad精确电量。
3. 需要每隔一段时间扫描一次电量，以获取当前有效的电量。

之前文章实现了需求一、二，本文先讨论需求三的实现：
创建一个NSTimer变量，每隔25s，执行一次getbatterylevel函数，

-(NSTimer *)timer{
    if (!_timer) {
        _timer = [NSTimer scheduledTimerWithTimeInterval:25.0 target:self selector:@selector(getbatterylevel) userInfo:nil repeats:YES];
    }
    return _timer;
}

在程序进入后台时，启动Timer：

#pragma mark - 程序进入后台
-   (void)applicationDidEnterBackground:(UIApplication *)application {
//开启定时器 不断向系统请求后台任务执行的时间
    [self.timer fire];
}

获取电量并存储在变量中

-(void)getbatterylevel {
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:@"HH:mm:ss"];
    NSDate *datenow = [NSDate date];
    NSString *nowtimeStr = [formatter stringFromDate:datenow];
   
    NSString *str = self.textViewString;
    self.textViewString = [NSString stringWithFormat:@"%@ level is:  %.f%% \n%@ ",nowtimeStr,[UIDevice currentDevice].batteryLevel*100,str];
    NSLog(@" self.textViewString %@",self.textViewString);
    self.myVC.batteryLevellb.text = [NSString stringWithFormat:@"CurrentBatteryLevel：%.f%%",[UIDevice currentDevice].batteryLevel*100];
    self.myVC.textview.text = self.textViewString;
}

本项目demo的GitHub地址：
https://github.com/Frued/BatteryLevel

---

第五组：陈孚楠 javascript使用的两项原则(接上文)

Hijax，即渐进增强的Ajax，也被称为“简化的Ajax”，也是hijack（劫持）的意思，也可直接理解成保存和操纵历史的Ajax，Hijax是由Jeremy Keith（杰里米基斯）提出来的。

DOM Scripting: Hijax

主要原理：

传统Web的表单提交和链接方式都会重新刷新加载整个页面，这样会造成内容和资源的重复加载，对服务器造成压力和浪费。

Hijax的原理是“劫持”表单提交和URL链接，然后通过Ajax获取数据后局部更新DOM及内容，从而减少带宽消耗和服务器压力，避免页面刷新带来的闪烁感和重复感，改善用户浏览体验。如果客户端不支持JS或XMLHttpRequest，则表单和链接会按传统方式提交和跳转。

HTML5的History API能更好的实现这样的功能，且更新URL地址时页面不刷新，支持浏览器后退和前进按钮，这个时候你也可以直接理解成History+Ajax。

5.5 Session history and navigation
Manipulating the browser history

优点：
1、改善用户浏览体验，避免页面刷新带来的闪烁感和重复感；
2、减少服务器压力和带宽浪费。

缺点：
似乎只有一点，对搜索引擎不友好，不过Google的爬虫会索引这样的URL格式，即由一个由井号和叹号构成的URL字符串(#!)，称为Shebang（也称为Hashbang），我们在Shell和Python会经常看到这样的字符串，通过程序解析字符串并加载相应的模块或内容。不过HTML5的History API不需要这样的URL格式，直接使用传统URL格式就可以了。基于HTML5的History API的Hijax是更好的Hijax。

个人理解：
当浏览器支持ajax 时 ，只需要将相应参数传递给要更新的模块页面，得到该模块产生的html，由javascript 的 innerHTML 局部刷新该模块所在区域。

当浏览器不支持ajax时，则相应参数传递给整个页面刷新，相应模块读取参数更新。