`

jQuery:如何在页面和插件代码中自定义别名

阅读更多

众所周知,jQuery是采用$符号作为库的别名,但若是和其他类型的库一直使用是,其他库也有用$符号作为别名的,这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名,或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名,以便于其他库的兼容,为之后的插件开发之旅铺垫道路!

1.在页面使用代码中如何自定义别名

通常,我们是这样开始jQuery库的使用的:

1
2
3
4
5
6
7
$(document).ready(function() {
	//一些代码
});
//或者是简写的方式:
$(function() {
	//一些代码
});

但是,若遇到了使用其他非jQuery库的情况,就需要对上面的代码进行改动了,所以兼容性不够好。比较好的方法是将$符号写全(jQuery):

1
2
3
jQuery(function() {
	//一些代码
});

但是大家或许发现了,这样写的话,以后查找dom、或调用jQuery库中的函数,都需要写jQuery(‘p’)、jQuery.trim()。是否觉得比较麻烦,还是觉得$符号好用呢?

那么为你来介绍如何在页面代码中自定义别名的方法吧。格式如下:

1
2
3
4
jQuery(function(hiro) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert(hiro.browser.version);
});

只需要在function中传入一个自定义的参数,该参数就是你的自定义别名了。该别名可以随意地自定义,当然可以使用$符号来自定义了,格式如下:

1
2
3
4
jQuery(function($) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert($.browser.version);
});

这样使用的好处是,即使你在引入新的库后,也不会和新库产生冲突。

2.在插件代码中如何自定义别名

插件的实现原理就是将所有的插件代码都写在一个方法体内,然后执行即可。就像这样:

1
2
3
4
(function() {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量,他只在该方法体内可以获得
})(); // 该方法会立即执行(这里用到了匿名函数的概念)

这里多余的括号是必须的,因为你若不加括号的话,匿名函数就得不到执行。

那么在插件中自定义别名就很简单了,和在页面中自定义别名类似,格式如下:

1
2
3
4
(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量,他只在该方法体内可以获得
})(jQuery);

在上面的我给方法传入一个jQuery的参数,是因为该方法是对jQuery库的扩展,那么在该方法体内就可以调用jQuery库中的函数;若不传入,则无法调用jQuery库

一个小的插件编写技巧:

在我阅读国外的开发人员编写的插件时,发现很多的插件都会在代码的开始部分加上一个分号,格式如下:

1
2
3
4
;(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量,他只在该方法体内可以获得
})(jQuery);

我猜测这是因为很多的插件在代码的最前面会加上一些版权信息和使用方法的注释信息,加一个分号是为了防止注释结束遗忘吧,也告示着插件代码的开始!(个人猜测,仅供参考!)

具体的代码实现格式和运用可以阅读jQuery.tooltips.js的源代码,他的编写方式比较“正统”!

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery如何在页面和插件代码中自定义别名[文].pdf

    为了解决这个问题,jQuery提供了自定义别名的功能,使得开发者可以在页面代码和插件代码中避免与其它库的别名冲突。 1. **在页面使用代码中自定义别名** 当你需要在页面中使用jQuery,并且要确保不与其它库的`$`...

    jQuery自定义日历事项查看代码.zip

    在网页开发中,日期时间的选择是一个常见的需求,jQuery自定义日历插件通过简洁的API和丰富的配置选项,为开发者提供了高效解决方案。它支持年月视图的切换,用户可以轻松浏览不同时间段的日程安排,而日期选择功能...

    jquery插件实时实时更新时间

    要使用这个插件,只需在页面中包含jQuery库和插件代码,然后在需要显示实时时间的元素上调用插件: ```html <div id="currentTime"></div> $(document).ready(function() { $('#currentTime').myTimePlugin(); }...

    jquery 插件开发 pdf

    jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...

    JQuery插件开发 + 插件

    1. 插件定义:jQuery插件是扩展jQuery功能的小型代码模块,它们允许开发者将自定义的行为和功能添加到网页中。 2. 创建插件的基本结构: ```javascript (function($){ $.fn.myPlugin = function(options) { // ...

    jQuery插件开发全解析

    这种方式的好处在于可以在编写jQuery插件时使用 `$` 这个别名,而不会与其他库(如Prototype)的全局变量冲突。 #### 四、小结 通过学习以上两种类型的jQuery插件开发,开发者不仅能够更好地理解和利用jQuery的...

    Excel样式表格单元格选择jQuery插件

    在这个模板中,`$.fn` 是 `$.prototype` 的别名,这样我们就可以在jQuery对象上调用自定义方法。 三、Excel样式表格 Excel样式表格通常指的是具有类似电子表格功能的Web界面元素,包括单元格选择、编辑、排序、过滤...

    jQuery封装插件原理教学 Demo

    学习jQuery插件开发不仅可以提升你的JavaScript技能,还可以帮助你更好地理解和利用已有的jQuery插件,从而提高工作效率。此外,掌握插件开发技巧还能让你在实际项目中实现更多自定义功能,满足特定需求。所以,对于...

    jQuery插件

    jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的基本功能,提供了丰富的交互效果和实用工具,使得网页开发更加高效和便捷。 ### 一、jQuery插件的结构 一个基本的jQuery插件通常由以下几部分组成:...

    jquery只能输入数字的文本框插件

    一个jQuery插件通常包含一个函数,该函数接收一个或多个参数,并扩展了jQuery对象。它通过`.fn`(即`$.fn`,它是`$.prototype`的别名)来实现,这样我们就可以在jQuery选择器后直接调用该插件。 在“jquery.Number...

    jquery插件

    jQuery插件是jQuery生态中的一个重要组成部分,它是由开发者创建的,用于扩展jQuery核心功能的代码集合。这些插件可以实现各种功能,如动画效果、表单验证、图片轮播、数据可视化等。 ### jQuery插件的基本结构 一...

    jquery插件教程.doc

    本教程将详细讲解如何创建和使用jQuery插件,以提升网页开发的效率。 1. 创建jQuery插件 插件是jQuery的核心特性之一,它们扩展了jQuery的功能,让你能够自定义行为。创建一个简单的jQuery插件通常涉及以下步骤: ...

    jQuery.extend和jQuery.fn.extend的区别

    2. `jQuery.fn.extend`用于向jQuery对象添加新的方法,增强了jQuery的功能性,使我们可以自定义jQuery插件。 理解这两个方法的差异对于深入掌握jQuery并创建高效、可维护的代码至关重要。在实际开发中,合理使用...

    跟我一起学JQuery插件开发

    首先,要学习jQuery插件开发,我们先要理解插件的概念。...希望这些信息对你有所帮助,如果你对JQuery插件开发有更深入的兴趣,推荐你阅读更多的专业书籍和文档,或者参考一些开源社区的优秀项目来获得实践经验。

    jQuery插件开发全解析.pdf

    在jQuery插件开发中,开发者可以创建两种类型的插件:类级别的插件和对象级别的插件。类级别的插件允许开发者为jQuery对象添加新的全局函数,类似于在jQuery类本身上添加方法。这类插件的函数是属于jQuery命名空间的...

Global site tag (gtag.js) - Google Analytics