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. poj 1324 Holedox Moving

    poj 1324 Holedox Moving 题目地址: http://poj.org/problem?id=1324 题意: 给出一个矩阵中,一条贪吃蛇,占据L长度的格子, 另外有些格子是石头, ...

  2. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  3. Mybatis学习--Mapper.xml映射文件

    简介 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 映射文件中有很多属性,常用的就是parameterType(输入类型 ...

  4. extJs学习基础

    显示和隐藏 所有的组件都是在show和hide方法中构造的.用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了: Ext.onReady(fun ...

  5. 基于@Aspect的AOP配置

    1. Spring 除了支持Schema 方式配置 AOP,还支持注解方式:使用 @Aspect 来配置 2. Spring 默认不支持 @Aspect 风格的切面声明,通过如下配置开启@Aspect ...

  6. Mysql-linux下密码修改,忘记密码修改,超级管理用户修改

    未忘记密码 方法一:在mysql系统外,使用mysqladmin # mysqladmin -u root -p password "test123"Enter password: ...

  7. Hive 中的分号问题

    1.  hive表中有一列值,是以 分号 ; 为分隔符连接存储的 1470047164;1470047628;1470049068;1470048978;1470048922;1470047658;1 ...

  8. js-JavaScript高级程序设计学习笔记7

    第十一章 DOM扩展 1.对DOM的两个主要的扩展是Selectors API(选择符API)和HTML5. 2.jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getE ...

  9. linux下进程权限分析

    转自http://blog.chinaunix.net/uid-27105712-id-3349522.html 在linux下,关于文件权限,大部分人接触比较多,也比较熟悉了解.但是对进程权限一般知 ...

  10. PHP热身

    0.环境说明 win10 xampp phpstorm xampp带了apache和mysql以及phpmyadmin 1.配置mysql:修改默认编码 关mysql xampp/mysql/bin/ ...