jq_$.extend和$.fn.extend插件开发和方法的封装

时间:2022-10-07 16:47:38

--------杂谈--------

随着使用的使用js和jq使用的越来越娴熟,也就是说日常产品经理给的一些需求,已经在自己的能力范围内了。空出来了一点时间,来研究如何优化你的代码,

不管是性能上,还是美观上,都应该有一个更好的提升。你决定做这件事的时候,就应该用最大的努力,去做到最好,给自己最好的答案。要是每天浑浑噩噩

的混日子,老来想必会后悔吧。特别是在工作中,一定要做好,做好了就有人看到,自然利益什么的就会向你靠。或者不单单是金钱,还有爱情呢。所以一定

要做最好的自己。做最好的自己。

-------技术段--------

下面写的都是我自己在开发中的一些理解,当然想法也是在参考别人的思想后自己总结的一套,忘君喜欢。

$.extend这个是JQ提供的添加静态内容的方法,在开始开发的时候你会掂量着这个功能如何实现,是的,你在掂量的时候就应该把一整个页面的功能一个一个

的细分成一个个方法,这个方法实现这个小功能,那个方法实现那个小功能。思路会清晰很多。

$.fn.extend是添加动态内容的一个方法,像什么click,hover等一些事件就可以封装在其中。

代码示例:

             (function() {
//添加一个静态方法
$.extend({
add: function(a, b) {
return a + b;
}
});
//添加动态方法
$.fn.extend({
alertWhileClick: function() {
$(this).hover(function() {
console.log($(this).val());
})
}
});
$("#input1").alertWhileClick();
console.log($.add(3, 4))
})(jQuery)

注意此代码是有顺序的,先引入JQ,封装的方法在前面,而最后才是调用的方法,不然事件是不会其效果的。

全部代码:

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<title></title>
</head> <body>
<input type="text" name="input1" id="input1" value="wushuhongshigehuaidan" />
<script type="text/javascript">
(function() {
//添加一个静态方法
$.extend({
add: function(a, b) {
return a + b;
}
});
//添加动态方法
$.fn.extend({
alertWhileClick: function() {
$(this).hover(function() {
console.log($(this).val());
})
}
});
$("#input1").alertWhileClick();
console.log($.add(3, 4))
})(jQuery)
</script>
</body> </html>