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

第一组:姚成栋 图表

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

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

<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项目中,需要实现后台持续监控电量的功能,这可以拆分为三个需求:

  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时,则相应参数传递给整个页面刷新,相应模块读取参数更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342