使用jQuery封装实用函数

一、引言

项目开发中,前端会有一个辅助工具类的js文件,比如cookie的操作,团队成员自己封装的方法。大多数时候,我们开发人员自己都是写一个全局函数,不考虑后期维护人员也会写相同的代码,然后造成代码之间的冲突。之前维护的一段代码如下:

 

var g=function(id){
    return document.getElementById(id);
};

var $$=function(id){
    return document.getElementById(id);
};
g("testdiv").style.color="red";
$$("testdiv").innerHTML="this is a test.";

因为代码历史久远,也不知道是不是在jQuery出来之前写的呢,还是之后。开发者为了节
省后面写document.getElementById()这个方法,在页面居然用了两个缩写去替代。$$应该后面的开发人员添加进去的,可能他觉得使
用g来代替document.getElementById()不是很明显。这个也说明,在开发过程中,很多开发者为了去大规模修改别人的代码,我们喜欢
在别人代码上添加内容,不想删除内容。这样项目是可以运行了,但是大量冗余代码也产生了,对后期的维护和重构非常的不利。以上只是举个实际项目中例子。

二、实例

后面引入jQuery之后,开发者大多数都喜欢用$来替代。到目前为止,我使用的第三方类
库,基本上没有以$来定义的。所以基本上没有出现过$代表的不是jQuery对象。但是为了代码可维护性,并且在我们写代码中,使用的$是jQuery对
象,我们需要安全进行编写函数。因为有时项目的名字不同,我们还会使用命名空间才区分它们。

(function($){
    $.say=function(what){
        alert("I say "+what);
    }
})(jQuery);

这里我们将jQuery对象传入到函数中,以确保我们在函数内部使用的$是jQuery对象。

三、一个复杂的示例

时间: 2024-11-16 17:38:01

使用jQuery封装实用函数的相关文章

jQuery实用函数用法总结_jquery

本文以实例的形式总结了jQuery的常见实用函数.分享给大家供大家参考之用.具体示例如下: 1.修剪字符串 $('#id').val($.trim($('#someid').val()))   2.遍历集合 可能这样写: var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++){ } 还有可能这样写: var anObject = {one: 1, two: 2}; for(var p in anObject){ }

jQuery常用知识点总结以及平时封装常用函数_jquery

本文为大家介绍了jQuery中常用知识点及函数,包含许多细节方面的知识,下面我们一起学习一下. jQuery中为我们提供了很多有用的属性,自己总结的一些常用的函数.个人认为在在线排盘开发中会比较常用的,仅供大家学习和参考. 刚开始学习前端的时候开始整理这个文档,现在内容已经逐渐增多.虽然现在看起来,文档里的内容非常简单,但是看着这些内容,好像还依稀记得这一行行代码当时被记录的情景.所以我想把这段回忆保存起来,为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. ** 此文

JavaScript框架的实用函数

实用函数 许多JavaScript框架都带有大量的实用函数,这些函数使得应用JavaScript开发应用程序更加容易.这篇文章有太多内容需要补充,所以我将讨论大多数框架中更为引人注目的函数中的一个. 如果你曾经使用过JavaScript数组,你可能对使用循环来迭代数组操作其值非常熟悉.例如,想想清单2的代码: 清单2:迭代JavaScript数组的传统方法 var fruit = ['apple', 'banana', 'orange'];for(var i = 0; i < fruit.len

jQuery的animate函数实现图文切换动画效果

  animate()在jquery中作为一个方法,可用于创建动画效果,jquery中的animate()方法让那个页面增加了很好的视觉效果 在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. ? 1 2 3 4 5 6 7 8 <div class="wrap">    <img src="images/s1.jpg" alt="

NodeJS中利用Promise来封装异步函数

这篇文章主要介绍了NodeJS中利用Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦,非常的实用的小技能,希望小伙伴们能够喜欢 在写Node.js的过程中,连续的IO操作可能会导致"金字塔噩梦",回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦. Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作,但是当需要连续的IO操作时,你的回调函数会多重嵌套,代码很不美观

jquery的ajax函数的原理是什么,jquery和ajax的关系是什么?

问题描述 jquery的ajax函数的原理是什么,jquery和ajax的关系是什么? jquery的ajax函数的原理是什么,jquery和ajax的关系是什么? 解决方案 历史遗留的原因,不同浏览器初始化ajax的方式不同,jquery的ajax对此做了封装.实现了异步调用.jquery是一个ajax的库,但是不是唯一的库. 解决方案二: 历史遗留的原因,不同浏览器初始化ajax的方式不同,jquery的ajax对此做了封装.实现了异步调用.jquery是一个ajax的库,但是不是唯一的库.

jQuery的animate函数实现图文切换动画效果_jquery

在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <

详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())_jquery

一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 $.get("data.php",$("#firstName.val()"),function(data){$("#

jQuery.Callbacks()回调函数队列用法详解_jquery

本文实例讲述了jQuery.Callbacks()回调函数队列用法.分享给大家供大家参考,具体如下: 1.jQuery.Callbacks The jQuery.Callbacks() function, introduced in version 1.7, returns a multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firi