javascript 插件开发教程
如何自己开发一款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.参数合并
它的含义是将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>
javascript 插件开发教程的更多相关文章
- jQuery插件开发教程
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- JavaScript强化教程 - 六步实现贪食蛇
1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- JavaScript强化教程 -- cocosjs场景切换
场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- javascript 基础教程[温故而知新一]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- JavaScript强化教程——Cocos2d-JS中JavaScript继承
javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...
随机推荐
- 关于计算机学习的书（doc,mobi,epub,pdf四种格式）
关于计算机学习的书(doc,mobi,epub,pdf四种格式) <html> <body> <div> 21天学通C+ +2016/6/22 18:47文條 30 ...
- 在SpringCloud中MAVEN配置文件中的更改
<mirrors> <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> ...
- 【转】 MySQL主从（Master-Slave）复制
首先声明:此文是在失去U盘极度郁闷的时候写的,有些零散,估计也有错误.欢迎大家指出 MYSQL服务器复制配置 这是根据我之前看的MYSQL复制的文档然后自己亲自实验的过程.配置的功能比较简单. 环 ...
- sql 性能优化 索引碎片
1.索引 简单的说,索引就像书本的目录,目录可以快速找到所在页数,数据库中索引可以帮助快速找到数据,而不用全表扫描,合适的索引可以大大提高数据库查询的效率.(1). 优点大大加快了数据库检索的速度,包 ...
- 安全检测及分析神器—AppScan使用教程
最近项目准备验收,所以最近在做项目验收的准备工作:我们公司规定,项目的安全检测必须通过才能进行项目验收:公司的安全部门用的检测软件就是大名鼎鼎的IBM Rational Appscan;在教由安全部门 ...
- kubernetes（k8s）Pod污点与容忍
污点(taints)与容忍(tolerations) 对于nodeAffinity无论是硬策略还是软策略方式,都是调度 pod 到预期节点上,而Taints恰好与之相反,如果一个节点标记为 Taint ...
- img引用网络图片资源无法加载问题解决
近期在自己项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题 解决办法: 在图片显示的界面把meta referrer标签改为never <meta name ...
- DLL中使用字符串时的注意事项。
library dll1; uses SysUtils, Classes; {$R *.res} function TESTDLL:string;stdcall; begin Result:='tes ...
- IDHTTP
Delphi IDHTTP用法详解 一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接 ...
- 1242 斐波那契数列的第N项
1242 斐波那契数列的第N项 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 斐波那契数列的定义如下: F(0) = 0 F(1) = 1 F(n) = F( ...