2017-07-24 更新:增加单例模式。

jquery插件开发框架代码

/*
* 插件编写说明:
* 1、插件命名:jquery.[插件名].js,如jquery.plugin.js
* 2、对象方法添加到jQuery.fn上,全局方法添加到jQuery对象本身上
* 3、插件内部的this指向通过选择器获取的jQuery对象
* 4、可以使用this.each遍历所有的元素
* 5、所有的方法以分号结束;插件头部先添加一个分号
* 6、插件应该返回一个jQuery对象,以保证插件的链式操作
* 7、使用闭包形式,使用$作为jQuery的别名以避免冲突
* 8、单例模式
*/ //为了兼容性良好,开始前有个分号
; //传入jQuery是为了确保在匿名函数中正确的使用jQuery对象,防止多库共存时$冲突
//传入window、document并非必须,只不过为了更快的访问window和document
//获得没有未被修改的 'undefined',因为实际并没有传递这个参数。
(function($, win, doc, undefined) { var alertPlugin = function(opts) {
//保存this变量
var _self = this; //定义默认参数
_self.opts = {
content: '弹出内容'
}; //根据传入的参数扩展默认参数
if(opts && $.isPlainObject(opts)) {
$.extend(_self.opts, opts);
} //调用函数方法
_self.show(_self.opts);
}; //函数方法实现
alertPlugin.prototype = {
show: function(opts) {
alert(opts.content);
}
} //扩展插件
$.fn.extend({
alertPlugin: function(opts) {
//遍历所有元素
return this.each(function() {
//单例模式
var instance;
if(!instance) {
instance = new alertPlugin(opts);
}
});
}
});
})(jQuery, window, document); //jQuery,window,document作为实参

插件调用

//未传递参数的调用
$('.a').alertPlugin();
//传递参数的调用
$('.a').alertPlugin({content: '新弹出内容'});

jquery插件开发通用框架的更多相关文章

  1. jQuery插件开发(转)

    jQuery插件开发 - 其实很简单 [前言]jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常 ...

  2. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  3. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  4. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  5. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  6. jQuery插件开发(溢出滚动)

    声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...

  7. jQuery插件开发的五种形态[转]

    这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...

  8. 掌握jQuery插件开发

    进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用? 第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件 ...

  9. 掌握jQuery插件开发,这篇文章就够了

    ---恢复内容开始--- 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及数据jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足形影 ...

随机推荐

  1. 在WPF中使用全局快捷键

    今天写一个小程序中使用到了全局快捷键,找到了我之前写的文章在c#中使用全局快捷键翻了一下,发现它是WinForm版本的,而我现在大部分写WPF程序了,便将其翻译了为WPF版本的了. static cl ...

  2. 图片未完成加载显示loading

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  3. Spring加载Hibernate 映射的几种方式及区别

    LocalSessionFactoryBean有好几个属性用来查找hibernate映射文件: mappingResources.mappingLocations.mappingDirectoryLo ...

  4. mysql 报错ERROR 1064 (42000),原因使用了mysql保留字 (right syntax to use near 'groups)

    msql 8.0 执行语句: SELECT *  FROM groups; 会报如题的错误, 需加反引号进行修改: SELECT *  FROM `groups`; //////////分割线//// ...

  5. dao层的泛型实现(2种方法)

    一: package com.wzs.test2.dao; import java.util.List; public interface CommonDAO { public <T> v ...

  6. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  7. find-k-pairs-with-smallest-sums

    // https://discuss.leetcode.com/topic/50527/java-10ms-solution-no-priority-queue class Solution { pu ...

  8. DIV焦点事件详解 --【focus和tabIndex】​

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...

  9. Android实现图片轮显效果——自定义ViewPager控件

    一.问题概述 使用ViewPager控件实现可横向翻页.水平切换图片等效果,但ViewPager需要手动滑动才能切换页面,图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切 ...

  10. 说一说activity

    activity与service,provider,receiver并称为 android的四大对象. 而activity,是展现界面的必不可少的组件.我这里有几个问题要问了,他是如何加载,他是如何进 ...