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-高级技巧的更多相关文章

  1. Javascript高级技巧

    上次整理了Ajax部分,这周看完了高级技巧部分,也整理下吧. 1.类型检测 使用Object.prototype.toString.call(obj)的方式. 因为无论typeof还是instance ...

  2. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  3. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

  4. 12 个CSS 高级技巧汇总[转载]

    使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...

  5. 22. javacript高级程序设计-高级技巧

    1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...

  6. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

  7. Reveal查看任意app的高级技巧(转)

    原文:http://zhuanlan.zhihu.com/iOSRe/19646016 Reveal查看任意app的高级技巧 hangcom · 12 小时前 Reveal是一个很强大的UI分析工具, ...

  8. Linux Shel高级技巧(目录)

    Linux Shell高级技巧(一) http://www.cnblogs.com/stephen-liu74/archive/2011/12/22/2271167.html一.将输入信息转换为大写字 ...

  9. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  10. 12个CSS高级技巧汇总

    1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...

随机推荐

  1. win7命令行 端口占用 查询进程号 杀进程

    打开CMD窗口 win+R–>cmd 根据端口号查找进程号 netstat -nao|grep 端口号 根据进程号得到进程名 tasklist |findstr 进程号 杀进程 taskkill ...

  2. ie-css3.htc 可以让IE低版本浏览器支持CSS3 的一个小工具

    ie-css3.htc 先说道说道这斯是弄啥嘞 ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性borde ...

  3. hibernate在使用sql查询query自动转化成model类型数据,query.addEntity

    hibernate使用自动的hql查询或者其封装的查询方法都能字段转化成对象 而如果在hibernate中使用sql时大多返回为Object[]对象 那么如何将object[]转换成model呢,答案 ...

  4. KVC、KVO、NSNotification、delegate 总结及区别

    1.KVC,即是指 NSKeyValueCoding,一个非正式的Protocol,提供一种机制来间接访问对象的属性.而不是通过调用Setter.Getter方法访问.KVO 就是基于 KVC 实现的 ...

  5. Sublime Text快捷键和常用插件推荐

    Sublime Text快捷键: Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有 ...

  6. ng-学习笔记1

    1.ng-model绑定输入域的数据到控制器的属性.修改输入域的值,属性的值也将修改(双向绑定) 2.ng-repeat可用于创建表格,使用 <td>{{ $index + 1 }}< ...

  7. 【caffe】train_lenet.sh在windows下的解决方案

    @tags: caffe python 在windows下配置caffe后,跑mnist手写数字识别的例子.发现train_lenet.sh不能运行. 那就写个python脚本替代吧. step1 定 ...

  8. 【BZOJ-1976】能量魔方Cube 最小割 + 黑白染色

    1976: [BeiJing2010组队]能量魔方 Cube Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 884  Solved: 307[Submi ...

  9. 【BZOJ-1026】windy数 数位DP

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5230  Solved: 2353[Submit][Sta ...

  10. 基于spring的文件上传--单文件上传

    Spring配置文件 <bean id="multipartResolver" class="org.springframework.web.multipart.c ...