2017.12.19 Js事件委托、JS 数组的reduce()、c# Reverse()、DB层SQL语句拼接问题、C#控件中的KeyDown、KeyPress 与 KeyUp事件

第一组:杨昊 真干货——Js事件委托

一份好的代码,不仅仅要写的美观,还要性能卓越。事件委托可以说就是这样一种——“技巧”?不多说,进入正题。

关于事件委托

《JavaScript高级程序设计》中是这样解释的:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

使用事件委托的好处

比如现在有这样一个经典的例子——JS计算器,一般的简易计算器上都至少有20个按键,通常情况下对这些按键的响应是为每个按键绑定一个click事件,这样做是没有问题的。但是,如果是更多的按键呢,100个,有可能1000个(一般不可能)。

我们先来认清一个事实:在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间。要知道,JS中函数是以对象的形式存在的,也就意味着它需要占内存。

所以说要想进行性能优化,其中的主要思想之一就是减少DOM操作。如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

事件委托的简单实现:

现在有这样一个页面:

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>

常规的操作是图1这样的,利用事件委托是图2这样的。只进行一次DOM的交互操作,完美!


图1
图2

对了,这还有个链接,讲的真心不错。https://www.cnblogs.com/liugang-vip/p/5616484.html


第二组:冯佳丽 JS 数组的reduce()用法小结——转载

第一次关注reduce()是在对象数组去重里。

var arr = [{name:'Thor',id:1},{name:'Locki',id:1},{name:'Tony',id:2}] 
var hash= {} 
arr = arr.reduce(function(cur,next){ 
hash[next.id]?'':hash[next.id]===true&&cur.push(next) 
return cur 
},[]) 

上面代码是从数组arr里去掉重复id的元素。

arr.reduce(func(),[])传入了两个参数:匿名函数和空数组[]。

在匿名函数里的两个参数:cur指累积变量,next指被遍历的数组元素。

如果没有指定参数-空数组[],累积变量cur默认是第一个元素的值

在指定参数空数组后,累积变量cur的初始值就变成了空数组。

所以上面代码就是判断hash对象里是否已存入了当前arr数组元素的id,如果存入了,则遍历下一个元素,并把第一次存入时的元素添加到累积变量cur里。这样最后函数返回的就是去掉重复id的数组。

上面是reduce()的一个应用。下面是关于reduce()的基本介绍: 参考阮大神的介绍,reduce()对数组进行了:遍历、变形和累积操作。前提是累积变量初始值为数组。具体看下面例子:

var arr = [0,1,2,3,4] 
var handler = function(item,next){ 
item.push(next+1) 
return item 
} 
arr.reduce(handler(),[]) 

//输出结果是:[1,2,3,4,5]

首先,reduce()对数组arr进行了遍历

其次,经过reduce()处理的数组被修改。类似map()函数

最后,通过item这个累积变量,把所有元素累积在一起。这个例子里是通过push方法。

其实更能体现reduce()累积作用的例子是下面这个:

var arr = [0,1,2,3,4] 
var summary = arr.reduce(function(sum,n){ 
sum += n 
return sum 
},0) 
console.log(summary) 

//输出结果为:10

上面代码里,arr数组的每个成员被遍历求和。sum作为累积变量,初始值是0.

如果不提供第二个参数0,sum初始值也会默认为arr的第一个元素即0。

同理,对于数组的阶乘,可以很方便的使用如下代码做到:

var arr = [1,2,3,4,5] 
var times = arr.reduce(function(res,n){ 
res *= n 
return res; 
}) 
console.log(times) 

//输出结果为120


第三组 吴景霞 c# Reverse()的两点用法

Rervese的基本用途是:反转数组中元素的顺序,常见的两种用法如下:

void Array.Reverse(Array array)
  static void Main(string[] args)
        {
            char[] chs = { '清','晨','我','上','马'};
            Array.Reverse(chs);
            Console.WriteLine(chs);
            Console.ReadKey();
        }

运行结果为:马上我晨清

(更高端一点的用法还有:void Array.Reverse(Array array,int index,int length),反转数组中部分元素的顺序)

char[] char.Reverse().Array()
  static void Main(string[] args)
        {
            int[] num = { 1, 3, 2, 4 };
            num = num.Reverse().ToArray();
            for (int i = 0; i < num.Length; i++)
            {
                Console.WriteLine(num[i]);
            }
            Console.ReadKey();
        }

运行结果为:
4
2
3
1


第四组:傅云 解决DB层自定义SQL语句与框架中SQL语句的拼接问题

如何解决DB层自定义SQL语句与框架中SQL语句的拼接问题。

一开始,我就按正常的拼接方法进行数据库的操作,如下:


image.png

在运行之后会报AND附近有语法错误

于是,加了如下代码就可以解决这个问题


image.png

第五组:王颢 C#控件中的KeyDown、KeyPress 与 KeyUp事件(文末附相关链接)

  1. 这三个事件的顺序是怎么样的?
  2. KeyDown 触发后,KeyUp是不是一定触发?
  3. 三个事件的定义
  4. KeyDown、KeyUp 和KeyPress 之间的区别
  5. 如何区分是否按的是小键盘?
  6. PrScrn按键三个事件能够捕获吗?
  7. {菜单键}和{开始键}KeyPress能够捕获吗?
  8. 如何捕获系统的组合键?
  9. 通过什么方式捕获PrScrn按键事件?
一. 键事件按下列顺序发生:

KeyDown
KeyPress
KeyUp

如一个控件上可能出现3个与键盘相关的事件,下面是这些事件发生的常规顺序:
用户按“a”键,该键将被预处理和调度,而且会发生KeyDown事件。
用户按住“a”键,该键将被预处理和调度,而且会发生KeyPress事件。
用户松开“a”键,该键将被预处理和调度,而且会发生KeyUp事件。

二. KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
三. 定义

KeyDown:在控件有焦点的情况下按下键时发生。
KeyPress:在控件有焦点的情况下按下键时发生。(下面会说和KeyDown 的区别)
KeyUp:在控件有焦点的情况下释放键时发生。

四. KeyPress 和KeyDown 、KeyPress之间的区别
  1. KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
    KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
  2. KeyPress 只能捕获单个字符
    KeyDown 和KeyUp 可以捕获组合键。
  3. KeyPress 可以捕获单个字符的大小写
  4. KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
  5. KeyPress 不区分小键盘和主键盘的数字字符。
    KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
  6. 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
五. 系统组合键的判定

……
……
……
详情见word文档

六. 捕获PrScrn按键事件

……
……
……
详情见word文档

相关链接:
http://blog.csdn.net/simpkan/article/details/6087727

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

推荐阅读更多精彩内容

  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 924评论 0 9
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,595评论 2 10
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,318评论 0 8
  • 键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结...
    ShindouHikaru阅读 3,897评论 0 4
  • 想想自己距离高考已经两年了 14年的这个时间段是高考分数出来的时候 现在想想 当时的自己估计哭了很久吧 当时许多亲...
    夏沫子阅读 210评论 2 1