js022-高级技巧
js022-高级技巧
本章内容:
使用高级函数
防篡改对象
Yielding Timers
22.1 高级函数
1、安全的类型检测
2、作用域安全的构造函数
构造函数实际上是一个使用new操作符调用的函数,当使用new调用是,构造函数内用到的this对象会指向新创建的对象实例。
function Person(name, age, job){ //属性 this.name = name; this.age = age; this.job = job; } var person2 = new Person("lal", 18, "software enginer"); alert(window.name); alert(window.age); alert(window.job); |
由于window的name属性是用于识别连接目标和frame的,所以这里对该属性的偶然覆盖可能会导致该页面时出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数。
作用域安全的构造函数在进行任何更改之前,首先确认this对象是正确类型的实例。如果不是,那么会创建新的实例返回。
function Person(name, age, job){ //属性 if (this instanceof Person) { this.name = name; this.age = age; this.job = job; }else{ return new Person(name, age, job); } } var person1 = Person("lal-Alice" , 18, "software enginer"); alert(window.name); //"" alert(person1.name); //"meimei" var person2 = new Person("lal-Alice" , 22, "software enginer"); alert(person2.name); |
3、惰性载入函数
两种方案实现惰性载入:一、在函数被调用时再处理函数;二、声明函数时就指定适当的函数。
4、函数绑定
函数绑定要创建一个函数,可以在特定的this环境中指定参数调用另一个函数。
使用一个简单的bind()函数接收一个函数和一个环境,并返回一个给定环境中调用给定函数的函数,并将所有参数原封不动传递过去。
function bind(fn, context){ return function(){ return fn.appply(context, arguments); }; } |
5、函数柯里化
function currying:用于创建已经设置好了一个或多个参数的函数。
函数柯里化的基本方法和函数绑定是一样的:使用一个闭包返回一个函数。两者的区别在于:函数被调用时,返回的函数还需要设置一些传入的参数
curry()函数主要工作就是将返回函数的参数进行排序。curry()的参数:第一个参数,要进行柯里化的函数,接下来的是要传入的值。
22.2 防篡改对象
一旦把对象定义为防篡改,就无法撤销了。
1、不可扩展对象
一般对象默认可以扩展:可以向对象中添加方法和属性。
2、密封的对象
密封对象不可扩展,而且已有成员的[[Configurable]]特性将被设置为false。意味着不能删除属性和方法。
可以使用Object.seal()方法来密封对象。
var person = {name:"meimei"}; Object.seal(person); person.age = 18; alert(person.age); //undefined |
person对象被密封后不能对其进行修改和删除。 |
3、冻结的对象
最严格的放篡改级别是冻结的对象。冻结的对象不可扩展,又是密封了,而且对象属性的[[Writable]]
22.3 高级定时器
setTimeout()和setInterval()创建的定时器可以用于实现有趣且有用的功能。
1、重复的定时器
setInterval()创建的定时器确保了定时器代码规则地插入队列中
2、Yielding Process
chunk()方法接收3个参数:要处理的项目数组,用于处理项目的函数,以及可选的运行该函数的环境。
3、函数节流
函数节流思想:某些代码不可以在没有间断的情况下连续重复执行。
目的:只有在执行函数的请求停止了一段时间之后才执行
22.4 自定义事件
自定义事件背后的概念是创建一个管理事件的对象,让其他对象坚挺那些事件。实现此功能的基本模式可以如下定义:
代码:(还没写。。改天补上来) |
EventTarget类型有一个单独的属性:handlers,用于存储事件处理程序。还有三个方法:
addHandler() |
用于注册给定类型事件的事件处理程序 |
接收两个参数:事件类型和用于处理该事件的函数 |
fire() |
用于触发一个事件 |
接收一个参数:至少包含type属性的对象 |
removeHandler() |
用于注销某个事件类型的事件处理程序 |
是addHandler()方法的辅助,它们接收的参数一样 |
22.5 拖放
拖放的基本概念:创建一个绝对定位的元素,使其可以使用鼠标移动
设置一个onmousemove事件处理程序:
EventUtil.addHandler(document, "mousemove",function(event){ var myDiv = document.getElementById("myDiv"); myDiv.style.left = event.clientX + "px"; myDiv.style.top = event.clientY + "px"; }); |
鼠标拖动事件代码:P619
indexOf值为-1是什么意思???
1、修缮拖动功能 P620(做拖放条时应该会用到。)
2、添加自定义事件 (使拖放功能真正应用起来:创建一个新的EventTarget对象,然后添加enable()和disable()方法,最后返回这个对象)
声明:该博客由http://www.cnblogs.com/lal-fighting/原创发表,未经作者允许,不得私自转载抄袭!!!
js022-高级技巧的更多相关文章
- Javascript高级技巧
上次整理了Ajax部分,这周看完了高级技巧部分,也整理下吧. 1.类型检测 使用Object.prototype.toString.call(obj)的方式. 因为无论typeof还是instance ...
- javascript实用技巧、javascript高级技巧
字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- 22. javacript高级程序设计-高级技巧
1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- Reveal查看任意app的高级技巧(转)
原文:http://zhuanlan.zhihu.com/iOSRe/19646016 Reveal查看任意app的高级技巧 hangcom · 12 小时前 Reveal是一个很强大的UI分析工具, ...
- Linux Shel高级技巧(目录)
Linux Shell高级技巧(一) http://www.cnblogs.com/stephen-liu74/archive/2011/12/22/2271167.html一.将输入信息转换为大写字 ...
- 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
随机推荐
- win7命令行 端口占用 查询进程号 杀进程
打开CMD窗口 win+R–>cmd 根据端口号查找进程号 netstat -nao|grep 端口号 根据进程号得到进程名 tasklist |findstr 进程号 杀进程 taskkill ...
- ie-css3.htc 可以让IE低版本浏览器支持CSS3 的一个小工具
ie-css3.htc 先说道说道这斯是弄啥嘞 ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性borde ...
- hibernate在使用sql查询query自动转化成model类型数据,query.addEntity
hibernate使用自动的hql查询或者其封装的查询方法都能字段转化成对象 而如果在hibernate中使用sql时大多返回为Object[]对象 那么如何将object[]转换成model呢,答案 ...
- KVC、KVO、NSNotification、delegate 总结及区别
1.KVC,即是指 NSKeyValueCoding,一个非正式的Protocol,提供一种机制来间接访问对象的属性.而不是通过调用Setter.Getter方法访问.KVO 就是基于 KVC 实现的 ...
- Sublime Text快捷键和常用插件推荐
Sublime Text快捷键: Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有 ...
- ng-学习笔记1
1.ng-model绑定输入域的数据到控制器的属性.修改输入域的值,属性的值也将修改(双向绑定) 2.ng-repeat可用于创建表格,使用 <td>{{ $index + 1 }}< ...
- 【caffe】train_lenet.sh在windows下的解决方案
@tags: caffe python 在windows下配置caffe后,跑mnist手写数字识别的例子.发现train_lenet.sh不能运行. 那就写个python脚本替代吧. step1 定 ...
- 【BZOJ-1976】能量魔方Cube 最小割 + 黑白染色
1976: [BeiJing2010组队]能量魔方 Cube Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 884 Solved: 307[Submi ...
- 【BZOJ-1026】windy数 数位DP
1026: [SCOI2009]windy数 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5230 Solved: 2353[Submit][Sta ...
- 基于spring的文件上传--单文件上传
Spring配置文件 <bean id="multipartResolver" class="org.springframework.web.multipart.c ...