步骤:

  1. // 1. 定义立即调用的函数
  2. +function($){
  3. "use strict"; //使用严格模式ES5支持
  4. //后续步骤
  5. // 2. xx 插件类及原型方法的定义
  6. // 3. 在jQuery上定义xx插件,并重设插件构造器
  7. // 4. 防冲突处理
  8. // 5. 绑定触发事件
  9. }(window.jQuery)

代码例子(bootstrap的alert.js):

  1. /* ========================================================================
  2. * Bootstrap: alert.js v3.2.0
  3. * http://getbootstrap.com/javascript/#alerts
  4. * ========================================================================
  5. * Copyright 2011-2014 Twitter, Inc.
  6. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7. * ======================================================================== */
  8.  
  9. +function ($) {
  10. 'use strict';
  11.  
  12. // ALERT CLASS DEFINITION
  13. // ======================
  14.  
  15. var dismiss = '[data-dismiss="alert"]'
  16. var Alert = function (el) {
  17. $(el).on('click', dismiss, this.close)
  18. }
  19.  
  20. Alert.VERSION = '3.2.0'
  21.  
  22. Alert.prototype.close = function (e) {
  23. var $this = $(this)
  24. var selector = $this.attr('data-target')
  25.  
  26. if (!selector) {
  27. selector = $this.attr('href')
  28. selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
  29. }
  30.  
  31. var $parent = $(selector)
  32.  
  33. if (e) e.preventDefault()
  34.  
  35. if (!$parent.length) {
  36. $parent = $this.hasClass('alert') ? $this : $this.parent()
  37. }
  38.  
  39. $parent.trigger(e = $.Event('close.bs.alert'))
  40.  
  41. if (e.isDefaultPrevented()) return
  42.  
  43. $parent.removeClass('in')
  44.  
  45. function removeElement() {
  46. // detach from parent, fire event then clean up data
  47. $parent.detach().trigger('closed.bs.alert').remove()
  48. }
  49.  
  50. $.support.transition && $parent.hasClass('fade') ?
  51. $parent
  52. .one('bsTransitionEnd', removeElement)
  53. .emulateTransitionEnd(150) :
  54. removeElement()
  55. }
  56.  
  57. // ALERT PLUGIN DEFINITION
  58. // =======================
  59.  
  60. function Plugin(option) {
  61. return this.each(function () {
  62. var $this = $(this)
  63. var data = $this.data('bs.alert')
  64.  
  65. if (!data) $this.data('bs.alert', (data = new Alert(this)))
  66. if (typeof option == 'string') data[option].call($this)
  67. })
  68. }
  69.  
  70. var old = $.fn.alert
  71.  
  72. $.fn.alert = Plugin
  73. $.fn.alert.Constructor = Alert
  74.  
  75. // ALERT NO CONFLICT
  76. // =================
  77.  
  78. $.fn.alert.noConflict = function () {
  79. $.fn.alert = old
  80. return this
  81. }
  82.  
  83. // ALERT DATA-API
  84. // ==============
  85.  
  86. $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
  87.  
  88. }(jQuery);

Javascript 插件统一的实现步骤的更多相关文章

  1. javascript插件制作学习-制作步骤

    原生JavaScript插件开发学习 自己制作的demo大家可以看下https://www.cnblogs.com/zimengxiyu/p/9814889.html 插件制作步骤: (一)构造函数 ...

  2. JavaScript插件架构

    1.HTML布局规则 默认情况下,所有的插件都可以通过设置特定的HTML代码和相应的属性来实现.也就是说,在网页加载的时候,JavaScript代码会自动检测这些标记,并自动绑定相应的事件,而无需添加 ...

  3. 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  4. 开源原生JavaScript插件-CJPCD(省市区联动)

    一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...

  5. Bootstrap支持的JavaScript插件

    1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...

  6. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  7. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  8. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  9. ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...

随机推荐

  1. fatal: Not a git repository (or any of the parent directories): .git

    $ git remote add origin https://github.com/heyuanchao/YouxibiClient.gitfatal: Not a git repository ( ...

  2. Altium designer 原理图库快速创建

    Altium designer 原理图库快速创建,原来都没发现用这个功能,最近查了一下很好用,就是通过Excel编写管脚名称再直接导入就可以了,很方便的. 1.首先在Excel创建填好对应管脚名称. ...

  3. 普通session vs MemcachedSession vs RedisSession

    一.普通session(数据存储在内存中) #!/usr/bin/env python # -*- coding:utf-8 -*- from hashlib import sha1 import o ...

  4. 集合函数COUNT

    直接计算函数COUNT(*)的值,例如,计算pet表中猫的只数: 计算pet表中species的列的数目: 假如你想知道有多少不同种类的的宠物数目.你可以通过使用关键字DISTINCT来得到该数目: ...

  5. [vsftp]500 OOPS: cannot change directory

    这个报错需要检查 1./etc/passwd 用户的主目录 2./etc/vsftpd/vuser_conf 下每个用户的local_root 3.每个用户目录给ftpuser加上rwx权限,一定要有 ...

  6. 学习练习 java 线程

    package com.hanqi.xc; import java.util.*; public class lianxi extends Thread { public void run() { c ...

  7. K均值算法实现

    运行环境:Ubuntu+Code::Blocks(G++) K-均值:在D(数据集)中随机地选择k个对象,每个对象代表一个簇的初始均值或中心.对剩下的每个对象,根据其与各个簇中心的欧式距离,将它分配到 ...

  8. 互斥对象 Mutex 和MFC中的CMutex

    互斥(Mutex)是一种用途非常广泛的内核对象.能够保证多个线程对同一共享资源的互斥访问.同临界区有些类似,只有拥有互斥对象的线程才具有访问资源的权限,由于互斥对象只有一个,因此就决定了任何情况下此共 ...

  9. ionic 不同view的數據交互

    angular中通過service factory 等服務來對不同的控制器進行數據交互 ,ionic 也一樣... var app = angular.module('ionicApp', ['ion ...

  10. 【MySQL】MySQL锁和隔离级别浅析二 之 INSERT

    最近在整理线上性能时,发现一台线上DB出现两个insert产生的死锁问题 ------------------------ LATEST DETECTED DEADLOCK ------------- ...