如何自己开发一款js或者jquery插件

引子

初学js不久，接触到js插件开发，其实很简单，不像网上吹嘘的那么复杂，又要掌握js，掌握jquery,其实没有那么复杂，下面简单介绍，供学习使用。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery，不知道为啥这么写，我理解的就是【参数合并，用户自定义参数与默认参数合并，如果用户输入参数与默认参数重复，则覆盖默认参数】

通过$.fn 向jQuery添加新的方法【$.fn.functioName,调用就是$(selector).functionName】

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

插件开发

第二种插件开发方式一般是如下定义

1.自定义插件名称

$.fn.pluginName = function() {

    //pluginName 为jq调用的函数名称

}

2.参数合并

$.extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}

这样做的目的是调用的时候非常灵活，可以不传参数，使用默认参数，也可以传入自定义参数。

3.书写自定义插件核心功能

注意：

刚刚介绍的是自定义插件，还有一种使用频繁的插件，就是扩展插件方法。还有一种称谓叫：对象插件开发，即扩展已有元素的已有属性。
实例1：(function($){
    $.fn.extend({
        width:function(q){
            var mm={para1:"para1",para2:"para2"};
            var para=$.extend({},mm,q);
            alert(para.para1);
            $(this).click(function(){
                alert("click");
            });
        }
    })
})(jQuery)
$(function(){
    var q={para:"123",para2:"456"};
    $(".testplugin").width(q);
})

实例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>testplugin.html</title> 
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
      <script type="text/javascript" src="item/js/jquery.min.js"></script>

 
<!--   <script type="text/javascript" src="item/js/testplugin.js"></script></head> -->
<!--       <script type="text/javascript" src="item/js/testReady.js"></script> -->
  <script type="text/javascript">
  (function($){
    $.fn.testPlugin=function(options){
    var defaultpara={para1:"para1",para2:"para2"}
    var para=defaultpara=$.extend({},defaultpara,options);
    alert(para.para1);
    }
})(jQuery)
$(function(){
var options={para1:"123"};
$("testplugin").testPlugin(options);
})
  </script>
  <body>
    This is my HTML page. <br>
    <div >
      <label title="s" class="testplugin">label</label>
    </div>
  </body>
</html>

Tags: jquery，插件

巴特西

javascript 插件开发教程

如何自己开发一款js或者jquery插件

引子

jquery插件开发模式

插件开发

最新文章

热门文章