使用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对象。

三、一个复杂的示例

目录
相关文章
|
2天前
|
JavaScript 前端开发
jQuery 入口函数
jQuery 入口函数
12 2
|
1月前
|
存储 JavaScript 前端开发
[JS]JQuery 引入、入口函数、JQuery 对象
[JS]JQuery 引入、入口函数、JQuery 对象
|
4月前
|
设计模式 缓存 移动开发
像 jQuery 一样通过函数开发和调用小程序组件
像 jQuery 一样通过函数开发和调用小程序组件
|
7月前
|
JavaScript 前端开发
【前端】JQuery和JS的入口函数比较
JQuery和JS的入口函数比较
85 0
|
8月前
|
前端开发 JavaScript 程序员
【前端】使用jQuery探索正则表达时,手机号码和邮箱验证以及常用的函数
本篇文章将探索正则表达式的功能 在开发一个项目时,表单选项里,多少都会有手机号码以及邮箱选项的输入,那么除了在后端API进行值得有效验证,在前端也会对手机号码和邮箱做验证,减少对服务器得调用
48 0
|
9月前
|
JavaScript
关于jQuery中toggle参数callback函数提前执行问题
关于jQuery中toggle参数callback函数提前执行问题
50 0
|
JavaScript
关于jquery trigger函数执行两次的问题解决
关于jquery trigger函数执行两次的解决方法
139 0
|
JavaScript 前端开发
|
JavaScript Java API
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
|
JavaScript Java
Java Web——jQuery中的过滤器与第一组函数(val、text、attr)
Java Web——jQuery中的过滤器与第一组函数(val、text、attr)
Java Web——jQuery中的过滤器与第一组函数(val、text、attr)