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. JavaScript学习笔记- 省市级联效果

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. android之服务

    android中的进程优先级 前台进程 拥有一个正在与用户交互的Activity(onResume方法被调用) 与一个前台Activity绑定的服务 服务调用了startForeground onCr ...

  3. 68 id -显示用户的id

    Linux id命令用于显示用户的ID,以及所属群组的ID. id会显示用户以及所属群组的实际与有效ID.若两个ID相同,则仅显示实际ID.若仅指定用户名称,则显示目前用户的ID. 语法 id [-g ...

  4. 通过ADO方式连接数据库

    首先你正确安装了MySQL的数据库驱动程序(mysql-connector-odbc-5.1.6-win32.msi )或者64位的 本地连接: 1.在桌面上新建一个空的文本文件mysql.txt,重 ...

  5. Android Studio 解决更新慢的问题

    Android Studio 解决更新慢的问题 最近在一些群里有伙伴们反应工具更新慢,由于国内网络对google限制的原因,android studio更新一直是个老大难的问题,为了,提高sdk下载的 ...

  6. Spring 配置文件中将common.properties文件外置

    将配置文件的路径从项目中移出来 1. 在springApplicationContext中 <context:property-placeholder location="file:$ ...

  7. To IOC,代码结构演变的随想

    代码结构演变 项目开始阶段 需求: 提供一个系统,可以在新春佳节之际以邮件的形式给员工发送新春祝福. 开发人员: 张三 版本一 string msg = "新年快乐!过节费5000.&quo ...

  8. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  9. maven打包忽略测试用例

    忽略单元测试失败: $ mvn test -Dmaven.test.failure.ignore=true 跳过单元测试: mvn install -Dmaven.test.skip=true 跳过测 ...

  10. WakeLock, AlarmManager, JobScheduler

    应用程序耗电的实质,是所启用的硬件在消耗电量. 手机的耗电单元 CPU: 应用处理器(AP)和基带处理器(BB或BP) GPU(图形处理单元) 外设:wifi,BT, GPS,LCD等 AP是ARM架 ...