第一组:姚成栋 图表
其实我们的模板中是有图表的,有折线图、柱状图和饼图等等。
如第六张的折线图代码如下
<div ui-jq="plot" ui-options="
[
{ data: {{d0_1}}, label: 'A', points: { show: true }, lines: { show: true, fill: true, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } } },
{ data: {{d0_2}}, label: 'B', points: { show: true, radius: 4 } }
],
{
colors: [ '{{app.color.info}}','{{app.color.warning}}' ],
series: { shadowSize: 2 },
xaxis:{ font: { color: '#ccc' } },
yaxis:{ font: { color: '#ccc' } },
grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
tooltip: true,
tooltipOpts: { content: '%s of %x.1 is %y.4', defaultTheme: false, shifts: { x: 0, y: 20 } }
}
" style="height:240px"></div>
</div>
其中数据如下:
如果想要改成柱状图只需在上面的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文件中。
<ul v-touch:tap="message=2" style="display: none" v-show="show">
第三组:蔡永坚 Asp.Net底层解析-生命周期综合分析
经过对ASP.NET的生命周期的较详细了解后,不得不承认,微软在ASP.NET上的设计是非常精妙的,从ASPX页面源代码经过页面周期、各个服务器控件的生命周期,最终转化为html代码。这些生命周期的各个阶段功能相对独立、明确,ASP.NET开发者可以通过在特定阶段添加相关代码,以达到特定的目的。下面将页面生命周期与服务器控件生命周期在一张图上(从MSDN中复制)综合展示:
从上面的示图可以教完整地反映整个页面生命周期(控件的生命周期包含在页面周期之中)的执行流程,调用某些方法之后触发对应的生命周期事件,标志开始进入下一个生命周期阶段。
第四组:张元一 iOS定时器
EFB项目中,需要实现后台持续监控电量的功能,这可以拆分为三个需求:
- 程序需要保持在后台可以运行。
- 程序需要获取ipad精确电量。
- 需要每隔一段时间扫描一次电量,以获取当前有效的电量。
之前文章实现了需求一、二,本文先讨论需求三的实现:
创建一个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时,则相应参数传递给整个页面刷新,相应模块读取参数更新。