如何自己开发一款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 插件开发教程的更多相关文章

  1. jQuery插件开发教程

    jQuery插件开发教程  ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...

  2. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  3. JavaScript强化教程 - 六步实现贪食蛇

    1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...

  4. JavaScript强化教程——JavaScript 总结

    本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...

  5. JavaScript强化教程 -- cocosjs场景切换

    场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...

  6. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  7. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

  8. javascript 基础教程[温故而知新一]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  9. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

随机推荐

  1. MySql5.7默认生成的密码无法正常登陆

    1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2.重启 mysqld 服务:sys ...

  2. HTML5的新增功能有哪些？

    HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...

  3. Hbase表类型的设计

    HBase表类型的设计 1.短宽 这种设计一般适用于: * 有大量的列 * 有很少的行 2.高瘦 这种设计一般适用于: * 有很少的列 * 有大量的行 3.短宽-高瘦的对比 短宽 * 使用列名进行查询 ...

  4. iOS: NSTimer使用小记

    目录 1. NSRunLoopCommonModes和Timer 2. NSThread和Timer 3. GCD中的Timer 返回目录 1. NSRunLoopCommonModes和Timer ...

  5. spring AOP (使用AspectJ的注解方式 的aop实现) (6)

    目录 一.在 Spring 中启用 AspectJ 注解支持 二.AspectJ 支持 5 种类型的通知注解: 2.1.使用之前的 计算器接口和实现类 ArithmeticCalculator.jav ...

  6. vue中配置可修改的服务器接口api

    https://www.jianshu.com/p/377bfd2d9034?utm_campaign 太坑了,找了全网,几乎都不能用,也不知道哪写错了,这个是可以用的.

  7. this和super差异

    <三> this和super差异 1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句) 2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中 ...

  8. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  9. java中Date日期类型的大小比较

    方法一:java.util.Date类实现了Comparable接口,可以直接调用Date的compareTo()方法来比较大小 String beginTime = "2018-07-28 ...

  10. poj 3258 二分

    题意:看了很久才懂,有n个石头,去掉m个后,求跳两个石头或石头和岸边距离最小的最大值,就是至少要跳的距离的最大. 参考博客: 代码: #include<stdio.h> #include& ...