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 ...
随机推荐
- poj 1324 Holedox Moving
poj 1324 Holedox Moving 题目地址: http://poj.org/problem?id=1324 题意: 给出一个矩阵中,一条贪吃蛇,占据L长度的格子, 另外有些格子是石头, ...
- springMvc的第一个demo
1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...
- Mybatis学习--Mapper.xml映射文件
简介 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 映射文件中有很多属性,常用的就是parameterType(输入类型 ...
- extJs学习基础
显示和隐藏 所有的组件都是在show和hide方法中构造的.用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了: Ext.onReady(fun ...
- 基于@Aspect的AOP配置
1. Spring 除了支持Schema 方式配置 AOP,还支持注解方式:使用 @Aspect 来配置 2. Spring 默认不支持 @Aspect 风格的切面声明,通过如下配置开启@Aspect ...
- Mysql-linux下密码修改,忘记密码修改,超级管理用户修改
未忘记密码 方法一:在mysql系统外,使用mysqladmin # mysqladmin -u root -p password "test123"Enter password: ...
- Hive 中的分号问题
1. hive表中有一列值,是以 分号 ; 为分隔符连接存储的 1470047164;1470047628;1470049068;1470048978;1470048922;1470047658;1 ...
- js-JavaScript高级程序设计学习笔记7
第十一章 DOM扩展 1.对DOM的两个主要的扩展是Selectors API(选择符API)和HTML5. 2.jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getE ...
- linux下进程权限分析
转自http://blog.chinaunix.net/uid-27105712-id-3349522.html 在linux下,关于文件权限,大部分人接触比较多,也比较熟悉了解.但是对进程权限一般知 ...
- PHP热身
0.环境说明 win10 xampp phpstorm xampp带了apache和mysql以及phpmyadmin 1.配置mysql:修改默认编码 关mysql xampp/mysql/bin/ ...