`
zarknight
  • 浏览: 147890 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【四】- Function篇

阅读更多

闭包是javascript中非常强大的工具, 在实际应用开发中,我们基本上都会用到。从各个javascript框架中,我们也可以到处看到闭包的影子。mootools在javascript的Function上扩展出了一些十分方便的创建函数闭包的方法,其中一些我们在prototype.js中也使用过,类如bind,bindAsEventListener等。

对Function的扩展,mootools主要提供了一个create方法来创建闭包,这个方法其实实现了mootools对Function的所有扩展功能,但是一般我们不会直接去用它,而是使用mootools基于这个create方法派生出的其他方法。

方法: create

参数选项列表:

bind - 创建的闭包函数中this所指向的对象。默认指向当前函数。

event -  默认为false;

             如果为true,则创建的闭包函数将会作为一个事件监听器,传入的第一个参数是一个event对象;

             如果为一个类名,则会创建这个类的一个实例,并把event对象传入该类

arguments - 一个以数组形式传入创建的闭包函数的参数列表。如果同时指定了上面的event选项和本arguments选项,则事件对象event对象将作为参数列表中的第一个,而其他参数排在其后。

delay - 延迟执行的毫秒数(setTimeout的功能)。默认不延迟执行。如果指定了,则调用该创建的闭包函数时将按指定的毫秒数延迟执行(调用返回一个时间处理句柄)。

periodical - 间隔执行的毫秒数(setInterval的共能)。默认不进行间隔执行。如果指定了,则调用该创建的闭包函数后,会每间隔指定的毫秒数后触发执行(调用返回一个时间处理句柄)。

attempt - 如果指定为true,则再创建闭包的过程中,将会使用捕捉异常,如果无异常抛出,则返回正常的闭包函数;如果发生异常,则返回捕捉到的异常对象。默认为false。

html 代码
 
  1. <input type="button" onclick="b();" />  

js 代码
 
  1. function myClass(){  
  2.  alert('X:' + event.clientX);  
  3. }  
  4. function a(){  
  5.  alert('Base...');  
  6. }  
  7. var b = a.create({'event':myClass});  
  8.   
  9. //按下按钮后,将先alert出如"X:33",接着alert  

js 代码
 
  1. function a(p1,p2){  
  2.  alert(this.getTime());  
  3.  alert(p1+'||'+p2);  
  4. }  
  5.   
  6. var b = a.create({'bind':new Date(),'arguments':[100,200]});  
  7. b();  
  8.   
  9. //alert出如"1233445"  
  10. //alert出"100||200"  

 

方法:pass

参数列表:

args - 数组形式传入的参数

bind - 可选。this指向的对象

功能:create的功能简化版。实现的即是create中选项'arguments'的功能。

js 代码
 
  1. function a(p1,p2){  
  2.    alert(p1+'||'+p2);  
  3. }  
  4.   
  5. var b = a.pass([100,200]);  
  6. b();  

 

方法:attempt

参数列表:

args - 数组形式传入的参数

bind - 可选。this指向的对象

功能:create的功能简化版,并且创建闭包函数后执行。实现的即是create中选项'attempt'为true时的功能。

js 代码
  1. myFunc.attempt([100,200]);  

 

方法:bind

参数列表:

bind - 可选。this指向的对象

args - 可选。数组形式传入的参数

功能:create的功能简化版。实现的即是create中选项'bind'的功能。

js 代码
 
  1. function myFunc() {  
  2.   this.setStyle('color', 'red');  
  3. }  
  4. var myBoundFunction = myFunction.bind(myElement);  
  5. myBoundFunction();  

 

方法:bindAsEventListener

参数列表:

bind - 可选。this指向的对象

args - 可选。数组形式传入的参数

功能:create的功能简化版。实现的即是create中选项'bind'以及'event'为true时的功能。

js 代码
 
  1. function a(){  
  2.  this.innerHTML = 'Fired at ('+event.clientX + ',' + event.clientY +')';  
  3. }  
  4.   
  5. $('mybtn').onclick = a.bindAsEventListener($('myDiv'));  


方法:delay

参数列表:

ms - 延迟执行的毫秒数

bind - 可选。this指向的对象

args - 可选。数组形式传入的参数

功能:create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'delay'的功能。

js 代码
 
  1. function a(){  
  2.  alert('Hello...');  
  3. }  
  4. a.delay(1000);  

 

方法:periodical

参数列表:

ms - 间隔执行的毫秒数

bind - 可选。this指向的对象

args - 可选。数组形式传入的参数

功能:create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'periodical'的功能。

js 代码
 
  1. function a(){  
  2.  alert('Hello...');  
  3. }  
  4. a.periodical(2000);  


=============================

Function部分就这些啦,不过也足够强大了!



 

分享到:
评论

相关推荐

    mootools详细教程

    mootools详细教程 mootools框架【一】-Element篇: 方法完全解析 mootools框架【一】-Element篇: 高级应用举例 ...mootools框架【四】-Function篇: 主要方法解析 mootools框架【五】-String篇: 方法完全解析

    mootools-中文教程

    #### 四、Function篇 Mootools提供了许多增强函数的功能,比如延迟执行、周期执行等功能。 ##### 函数操作方法 - **bind()**:改变函数的上下文(this指针)。 - **delay()**:延迟一定时间后执行函数。 - **...

    mootools 弹出框

    本篇文章将深入探讨如何在MooTools框架下创建和使用弹出框。 **一、MooTools 的基础** MooTools遵循一个模块化的结构,通过引入核心库和其他可选模块,可以轻松扩展功能。在创建弹出框之前,我们需要确保页面已经...

    mootools实现同页面不同日期选择效果

    本篇文章将深入探讨如何使用MooTools在同一页面上实现多种不同的日期选择效果。 首先,我们要理解MooTools的核心理念。MooTools基于Prototype设计模式,通过Class系统提供了面向对象的编程支持,同时它的Selector ...

    prototype1.6和mootools1.2.3在本人目前工作中比较常用的方法比较

    这篇博客将深入探讨这两个库在实际工作中的常见用法,并进行比较。 首先,Prototype是一个轻量级的JavaScript库,它的核心设计思想是扩展JavaScript的基本类型,让JavaScript对象更加面向对象。在Prototype 1.6中,...

    mootools demo打包_mootools.svn.js_中文手册.zip

    本篇将围绕"Mootools demo打包_mootools.svn.js_中文手册.zip"这一资源展开,深入探讨MooTools的核心概念、主要特性以及在实际开发中的应用。 1. **MooTools核心概念** - **模块化设计**:MooTools遵循CommonJS...

    一周学会Mootools 1.4中文教程序章

    《一周学会Mootools 1.4中文教程》是一篇旨在帮助初学者快速掌握Mootools 1.4版本的中文教程。Mootools是一种功能强大且轻量级的JavaScript库,专门设计用于简化Web中交互式JavaScript的开发工作。在某种程度上,...

    MooTools学习笔记(一)

    在本篇学习笔记中,我们将探讨MooTools的核心概念、主要功能以及如何在实际项目中应用。 1. **核心概念** - **类与对象**:MooTools基于原型的面向对象系统,允许开发者创建自定义类并实例化对象。通过`new Class`...

    mootools1.2.1 drag and drop 拖拽

    本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽效果。 **一、MooTools 1.2.1 概述** MooTools 是一个遵循MIT许可证的JavaScript框架,它的设计目标是提供模块化、可扩展和高性能的开发环境。1.2.1版本在...

    mootools实现的动态菜单

    本篇将深入探讨如何使用MooTools实现动态菜单,并兼容Firefox和Internet Explorer 8。 1. **MooTools简介** MooTools是一个轻量级且模块化的JavaScript框架,其设计理念是提供简洁的API和强大的功能,以简化Web...

    一周学会Mootools 1.4中文教程(5)Ajax

    本篇将详细介绍Mootools中的Ajax特性及其应用。 #### 二、Mootools的Ajax核心概念 ##### 1. 创建Ajax请求 在Mootools中,创建一个Ajax请求非常简单,只需要一行代码: ```javascript var myRequest = new Request...

    ToolTip_mootools

    本篇文章将深入探讨如何利用 MooTools 实现 Tooltip 效果,以及它在实际应用中的价值。 1. **什么是 Tooltip 和 MooTools?** - Tooltip 是一种网页元素,当用户将鼠标悬停在某个元素上时,会显示一个包含附加信息...

    一周学会Mootools 1.4中文教程(1)Dom选择器

    本篇文章将深入探讨Mootools 1.4版本中的DOM选择器,这是学习Mootools的基础之一。 #### 二、准备工作 为了更好地学习Mootools,推荐使用Editplus编辑器,并下载作者提供的`Mootools1.4.zip`素材文件。该素材文件...

    js mootools框架制作竖直滑动三级下拉菜单导航代码

    本篇将深入探讨如何使用MooTools框架来创建一个竖直滑动的三级下拉菜单导航。 首先,我们需要理解MooTools的基本概念。MooTools是一个基于原型的JavaScript库,它提供了一套面向对象的编程结构,使得开发者能够编写...

    (二) mootools的DOM操作

    在本篇文章中,我们将深入探讨MooTools的DOM操作,包括元素选择、创建、属性操作、事件处理以及动画效果。 首先,MooTools提供了多种方法来选取DOM元素。`$$`函数是MooTools中最常用的元素选择器,它可以接受CSS...

    mootools分页多选搜索部件特效代码

    在本篇中,我们将深入探讨如何利用MooTools实现分页和多选搜索的特效代码。 ### 1. 分页功能 分页是网页中常见的数据展示方式,尤其在处理大量数据时,能够提高用户体验。MooTools通过提供`Pages`模块来实现这一...

    MooTools 页面滚动浮动层智能定位实现代码

    本篇将深入探讨如何使用MooTools实现页面滚动时浮动层的智能定位。 首先,我们来看一下给出的HTML代码片段: ```html 我是个腼腆羞涩的浮动层... ``` 这是一个简单的div元素,具有`class`为`float`和`id`为`...

    js_framework

    在本篇文章中,我们将深入探讨jQuery、MooTools和Prototype这三大JavaScript库及其示例,帮助你更好地理解它们各自的特点、用途以及如何在实际项目中运用。 jQuery是一个轻量级、高性能的JavaScript库,由John ...

    servlet+mootool+ajax

    这篇内容将深入解析这三个技术以及它们如何在MyEclipse 8.5环境中协同工作。 Servlet是Java的一种标准,用于扩展服务器的功能,特别是在Web应用中处理HTTP请求。Servlet容器(如Tomcat或Jetty)接收HTTP请求,将其...

Global site tag (gtag.js) - Google Analytics