jQuery框架-3.jQuery自定义封装插件和第三方插件

一、jQuery的封装扩展

1、jQuery中extend方法使用

(挂在到jQuery和jQuery.fn两对象身上的使用)

1.1、官方文档定义:

jQuery.extend   Merge the contents of two or more objects together into the first object.把两个或者多个对象合并到第一个对象当中;

jQuery.fn.extend   Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery 实例方法 。

1.2、extend方法功能说明

  • 合并对象
jQuery.extend(target [, object1] [, objectN])

它的含义是将object1,objectN合并到target中,返回值为合并后的target,由此可以看出该方法合并后,是修改了target的结构

var newSrc=$.extend({},object1,object2,objectN.)//也就是将"{}"作为target参数。不会破坏时实际参数target的结构
var result=$.extend({},{name:"Tom",age:21},name:"Jerry",sex:"Boy"});

//result={name:"Jerry",age:21,sex:"Boy"}
  •  深浅拷贝
jQuery.extend([deep], target, object1 [, objectN])

extend方法多了一个类型为 boolean 的 [deep] 传参,当其为 true 时,将 object1 , objectN 深度复制 后合并到 target 中。

var obj1 = {
    name: "John",
    location: {
        city: "Boston",
        county: "USA"
    }
}

var obj2 = {
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

$.extend(false, {}, obj1, obj2);
 // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2);
 // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

由此可见:

深度复制 会递归遍历每个对象中含有复杂对象(如:数组、函数、json对象等)的属性值进行复制

浅度复制 不会对复杂对象内部处理直接用后边的对象覆盖第一个非boolean值得对象。

  •  jQuery类方法的扩展: jQuery类省略extend 方法中的 target 参数,该方法就只传入 object 参数,该方法功能是将该 object 合并到调用 extend 方法的对象中。
  •  jQuery对象级别的实例方法的扩展: jQuery.fn省略extend方法中的target 参数,

2、类级别的JQ封装

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。

类方法:直接可以使用类引用,不需要实例化就可以使用的方法。一般在项目中 类方法 都是被设置为工具类使用

2.1 添加新的全局函数

jQuery.foo = function() {
alert(‘This is a test.‘);
}; 

2.2 增加多个全局函数

jQuery.foo = function() {
alert(‘This is a test‘);
};
jQuery.bar = function(param) {
alert(‘This is a "‘ + param + ‘".‘);
};
jQuery.foo();
jQuery.bar();
$.foo();
$.bar(‘bar‘);

2.3 通过jQuery.extend(object)方法添加类方法

jQuery.extend({
    foo: function() {
        alert(‘This is a test.‘);
    },
    bar: function(param) {
        alert(‘this is a "‘ + param +‘".‘);
    }
});  

2.4 使用命名空间

jQuery命名空间中,禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {
foo:function() {
  alert(‘This is a test. ‘);
},
bar:function(param) {
  alert(‘This is a "‘ + param + ‘".‘);
}
};
//采用命名空间的函数仍然是全局函数,调用时采用的方法:
$.myPlugin.foo();
$.myPlugin.bar(‘baz‘);  

使用独立的插件名可避免命名空间内函数的冲突。

3.对象级别的JQ封装

  • 实例方法 必须先创建实例,然后才能通过实例调用该 实例方法 。

1、对象级别扩展方法

形式1:

;(function($){
    $.fn.extend({
        pluginName:function(opt,callback){
        //bodying
        }
    })
})(jQuery);      

形式2:

;(function($) {
    $.fn.pluginName = function() {
         // bodying
    };
})(jQuery); 

1)在jQuery环境下封装自己的插件,首先为避免与其他库的冲突,需要在插件的后面传一个jQuery参数进去,对应的函数里面的参数写入$;(防止污染$函数)

2)未避免出现问题,需在插件的前后加入分号(分号的增加并不会影响程序的运行)

建议封装框架:(当然也可以使用其他的形式,比如说把注册成jq方法单独拎出来,内容封装成函数)

;(function($){
    $.fn.tab = function(options){

        var defaults = {
            //各种参数的缺省设置
        }

        var options = $.extend({},defaults,options);

        this.each(function(){
            //封装的函数
        });

        return this;//为了更好的支持链式写法
    }

})(jQuery);

var options = $.extend({},defaults,options):利用extend方法把 defaults对象的方法属性全部整合到 options里,至于名字只是标识,符合规范即可。

this.each(function(){}):对所有满足的选择器注册扩展方法。

return this:目标为实现jq的强大链式写法,返回$对象。

废话一句:别人的用的终究没有自己的好,要么不会,要么会用,样式、行为不喜好!!!(个人看法勿pengpengpeng)

二、jQuery插件

1.highcharts插件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hignCharts</title>
    <style type="text/css">
        .container{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="container" class="container">

    </div>
</body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
        // 图表初始化函数
        var chart = Highcharts.chart(‘container‘, {
            chart: {
                type: ‘bar‘,
                inverted:‘false‘,
            },
            series:[
                {
                    name:"销售额",
                    data:[20000,30000,20500,20500],
                    lineWidth:2
                },
                {
                    name:"销售额",
                    data:[30000,11190,35100,46000].reverse()
                }
            ],
            title:{
                align:"center",
                text:"各季度销售统计",
                style:{ "color": "#ff0000", "fontSize": "20px" }
            },
            yAxis:{
                title:{
                    text:"销售额"
                }
            },
            exporting:{
                allowHTML:"true",
            },
            xAxis:{
                title:{
                    text:"季度"
                },
                categories: [‘一季度‘, ‘二季度‘, ‘三季度‘, ‘四季度‘],
                tooltip:{
                    padding:20,
                    pointFormat: ‘{series.name}: <b>{point.y}</b><br/>‘,
                }
            },
            legend:{
                title:{
                    text:"类别"
                }
            },
            credits: {
                href: ‘http://www.cnblogs.com/witkeydu/‘,
                text: ‘大仲马的博客‘,
                style: {fontSize: 16, color: ‘#888888‘, fontWeight: ‘bold‘}
            }
        });
</script>
</html>

2.jqueryui插件

3.Autocomplete插件

4.Draggable插件

5.DatePicker插件

6.dialog插件

原文地址:https://www.cnblogs.com/witkeydu/p/8541906.html

时间: 2024-10-28 19:13:44

jQuery框架-3.jQuery自定义封装插件和第三方插件的相关文章

iOS调试技巧之打印输出 -----A: (NSString *)description B:自定义LOG C:使用第三方插件快速打印

A:重写- (NSString *)description函数 如果有一个Product 产品对象  Product.h中 1 #import <Foundation/Foundation.h> 2 3 typedef enum : NSUInteger { 4 RED = 1, 5 GREEN, 6 } ProductColor; 7 8 @interface Product : NSObject 9 10 @property (nonatomic, assign) ProductColor

jquery入门之jquery简

Jquery是javascript中中众多框架中的一个框架.它是轻量级的js库,以DOM元素为核心一点一点地给他们添加新功能.Jquery的特色就是"面向集合和方法连缀",Jquery的设计秉承了一致性和对称性原则,它的大部分概念都是从html和css的结构中借用来的.它利用CSS选择符创建jquery对象,为这些对象提供丰富的方法,批量操作其中的DOM元素,而且让所有方法尽可能再返回这个对象以实现方法连缀调用,这些绝妙的创意组合在一起,让写javascript代码变得妙趣横生! Jq

封装自己的jquery框架

jQuery is a fast small JavaScript library 如何封装自己的jQuery <script> // 这里使用沙箱模式,可以防止全局污染 (function(window,undefined){ var jQuery = function (ele){ return new jQuery.prototype.init(ele) } // 原型替换 jQuery.fn = jQuery.prototype ={ constructor:jQuery, init:

JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

  前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器. JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents.events.实现动画效果,

关于angularjS与jQuery框架的那些事

这篇文章主要介绍了jQuery和angularJS的区别浅析,本文着重讲解一个熟悉jQuery的程序员如何应对angularJS中的一些编程思想的转变吗,需要的朋友可以参考下 最近一直研究angularJs最大的感受就是它和之前的jQuery以及jQuery各种库的设计理念完全不一样.如果不能认识到这一点,而对于之前做jQuery开发的程序员,去直接学习angularJs的话,很可能学了很久还不知道这个东西到底是什么,拿来做什么的,怎么和UI进行结合等问题,我也是到处找资料看了看,在此把自己学习

天猫首页迷思之-jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例

前文有简单的实现了一个制作懒加载的方法,但其实以方法的形式做插件扩展性不强.那么本文就来用面向对象的方法将其制作成一个真正的插件: 我想要的最终的调用效果是: 1 $(".loading").lazyLoadDiv_cc({ 2 //自定义效果,可不填 3 "beginHeight":400, 4 "loadingBgClass":"loading", 5 "whenToLoad":"someIn

jquery插件开发及 jquery自定义函数

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为

jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

Jquery进度条插件 Progress Bar插件应用方法

搞的我小纠结了一会,最后感谢同事分享文章,得以结局,呵呵,小经验还是要保存的个人使用总结: <script type="text/ 网页特效" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js">&