js代码
/*******************************************************************************************************
* 类级别的插件开发
* 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。
* 典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。
* 关于类级别的插件开发可以采用如下几种形式进行扩展:
*******************************************************************************************************/
//添加一个新的全局函数
//jQuery.foo = function() { alert('This is a test. This is only a test.');};
//定义多个全局函数
//jQuery.foo = function() { alert('This is a test. This is only a test.');};
//jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".');};
//使用jQuery.extend(object);
//jQuery.extend({
// foo: function() {
// alert('This is a test. This is only a test.');
// },
// bar: function(param) {
// alert('This function takes a parameter, which is "' + param +'".');
// }
// });
//解决Jquery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。
//jQuery.myPlugin = {
// foo: function() { alert('This is a test. This is only a test.'); },
// bar: function(param) { alert('This function takes a parameter, which is "' + param + '".'); }
// };
/*******************************************************************************************************
* 对象级别的插件开发
* jQuery.fn.extend(object)
*******************************************************************************************************/
//jQuery.fn.extend({
// check: function() {
// return this.each(function() { this.checked = true; });
// },
// uncheck: function() {
// return this.each(function() { this.checked = false; });
// }
//});
(function($) {
$.fn.myPlugin = function() {
};
$.fn.myPlugin.foo = function(){
alert(init('fy'));
alert('This is a test. This is only a test.');
};
$.fn.myPlugin.bar = function(param){
alert('This function takes a parameter, which is "' + param + '".');
};
// $.fn.myPlugin.check = function(){
// return $this.each(function() { this.checked = true; });
// };
// 私有函数
function init(obj) {
return obj;
};
})(jQuery);
html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/fy.js"></script>
<script type="text/javascript">
$(function(){
//添加一个新的全局函数
//jQuery.foo();
//$.foo();
//定义多个全局函数
//$.foo();$.bar('baz');
//使用jQuery.extend(object);
//$.foo();$.bar('baz');
//解决Jquery插件冲突
//$.myPlugin.foo();
//$.myPlugin.bar('baz');
// 对象级别的插件开发
//$("input[type=checkbox]").check();
//解决Jquery插件冲突
//$.fn.myPlugin.foo();
//$.fn.myPlugin.bar('baz');
});
</script>
</head>
<body>
<input type="checkbox">
</body>
</html>
其他(闭包)
先从闭包特点解释,应该更好理解.
闭包的两个特点:
1、作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.
我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
但是有闭包特性的js函数有点特殊.
就例子来说:
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
这是个标准的闭包.在函数a中定义了函数b,a又return了b的值.这些可以先不管.
var c = a();
c();
这两句执行很重要.
在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
可是,如果我们再多执行一行.
var c = a();
c();
c();
第一次弹出0,第二次执行却弹出了1.
也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.
a是return过了,但是,a及内部值却依然存在,这就是闭包.
好了,总结下,
1,闭包外层是个函数.
2,闭包内部都有函数.
3,闭包会return内部函数.
4,闭包返回的函数内部不能有return.(因为这样就真的结束了)
5,执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在.
闭包的应用场景(呵呵,复制的参考资料)
1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.
另外,还有一种格式颇受争议:
(function(a,b){...})(a,b);
如果你使用过jquery,并且观察过他的代码,你就会很奇怪他的写法,网上有人也把这种格式叫做闭包.
参考资料:http://wenku.baidu.com/view/fd6131d276a20029bd642de5.html
分享到:
相关推荐
### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...
jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...
这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...
总结来说,jQuery插件开发中的五种形态小结通过一系列的示例和说明,为开发者展示了如何创建一个高效、可维护的插件。这五个形态涉及到了代码的独立性、链式操作、插件的可配置性、生命周期的管理、无冲突处理以及...
**jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...
jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...
《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理和动画制作。对于开发者而言,掌握jQuery插件的开发技巧是提升工作效率的重要一环。本篇将深入探讨...
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...
首先,要学习jQuery插件开发,我们先要理解插件的概念。jQuery插件本质上是通过某种机制对jQuery核心模块进行扩展的方法或额外功能。在编写属于自己的插件时,我们不仅可以提高开发效率,还可以在不同的项目中重复...
jQuery插件开发是一项能够极大提升前端开发效率和代码可复用性的技术。在学习开发jQuery插件之前,需要先了解一些基础概念和最佳实践,以及避免在开发过程中的一些常见陷阱。 首先,我们需要掌握什么是jQuery插件。...
在学习jQuery插件开发之前,需要了解jQuery库本身的功能和组成。jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。在进行jQuery插件开发时,尤其需要关注...
**通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jQuery插件开发是创建可复用、模块化代码的一种有效方式,它允许开发者扩展jQuery的功能,满足特定需求。本文将深入探讨jQuery插件开发的几个关键点:jQuery扩展、私有域以及定义插件的基本步骤。 首先,我们来看...
### jQuery插件开发精品教程 #### 一、引言 jQuery是一个广泛使用的JavaScript库,其核心功能之一是通过插件扩展其功能。在这一部分,我们将了解到插件对jQuery的重要性,以及如何使用插件来提升jQuery的能力。 ##...
学习jQuery插件开发对于任何希望提升自身前端开发能力的开发者而言,是一项非常重要的技能。 在插件开发中,首先需要了解的是插件开发的基本模式。根据《jQuery高级编程》所述,jQuery插件开发主要有以下几种方式:...
这篇博文“JQuery插件开发 + 插件”可能涉及到如何创建自定义的jQuery插件以及如何利用这些插件来增强网页功能。下面我们将深入探讨jQuery插件开发的相关知识点。 一、jQuery插件基础 1. 插件定义:jQuery插件是...