关于 JavaScript & jQuery 的插件开发

 

　　最近在温故 JavaScript 的面向对象，于是乎再次翻开了《JavaScript高级程序设计》第3版，了解到其中常见的设计模式，以前刚出道时遗留下来的困惑和不解，同时也茅塞顿开豁然开朗了，每一次翻阅每一次都有新的认识。

　　之前写过 jQuery 插件，其实其中原理也很简单，不过我在想原生 JavaScript 插件的我应该要怎么写？网上的教程略显复杂，我自己理解来说就是把一些属性跟方法封装起来可以随时复用吧。

　　不知道用 构造函数+原型模式 来封装一个函数（类）然后随时调用，把它当作一个插件（这个想法我也不知道正不正确，因为很少用原生 JS 写插件），在接口传参达到复用目的。（如果这种想法有错误，恳请大神们严厉指正）

好了，直接上码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JavaScript 简单选项卡插件</title>
  6. <style>
  7. .tabbox input {
  8.     background-color: #FFF;
  9. }
  10. .tabbox input.active {
  11.     background-color: #000;
  12.     color: #FFF;
  13. }
  14. .tabbox div {
  15.     display: none;
  16.     width: 200px; height: 200px;
  17.     background-color: #CCC;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <section id="tabBox1" class="tabbox">
  23.     <input class="active" type="button" value="tab1" />
  24.     <input type="button" value="tab2" />
  25.     <input type="button" value="tab3" />
  26.     <div style="display:block;">tab-cont1</div>
  27.     <div>tab-cont2</div>
  28.     <div>tab-cont3</div>
  29. </section>
  30. <br>
  31. <section id="tabBox2" class="tabbox">
  32.     <input class="active" type="button" value="tab1" />
  33.     <input type="button" value="tab2" />
  34.     <input type="button" value="tab3" />
  35.     <div style="display:block;">tab-cont1</div>
  36.     <div>tab-cont2</div>
  37.     <div>tab-cont3</div>
  38. </section>
  39. <script>
  40. window.onload = function () {
  41.     new Tabs("tabBox1");
  42.     new Tabs("tabBox2");
  43. };
  44. var Tabs = function(ID) {
  45.     var _this = this;
  46.     var oDiv = document.getElementById(ID);
  47.     this.aBtn = oDiv.getElementsByTagName("input");
  48.     this.aDiv = oDiv.getElementsByTagName("div");
  49.     for(var i = 0; i < this.aBtn.length; i++) {
  50.         this.aBtn[i].index = i;
  51.         this.aBtn[i].onclick = function() {
  52.             _this.fnClick(this);
  53.         };
  54.     }
  55. };
  56. Tabs.prototype.fnClick = function(oBtn) {
  57.     for(var i = 0; i < this.aBtn.length; i++) {
  58.         this.aBtn[i].className = ''
  59.         this.aDiv[i].style.display = "none";
  60.     }
  61.     oBtn.className = "active";
  62.     this.aDiv[oBtn.index].style.display = "block";
  63. }
  64. </script>
  65. </body>
  66. </html>

刚出道的我看过一本书 《锋利的jQuery》第2版在这本书里面了解到了 jQuery 插件开发，首先在开发之前先简单了解一下它的特点：

1. 使用闭包

  1. (function($) {
  2.     // Code goes here
  3. })(jQuery);

可能我们有时候会见到这种写法

  1. ;(function($) {
  2.     // Code goes here
  3. })(jQuery);

在最前面多了一个 ； 分号，这是因为我们开发插件一般都会用前端自动化工程打包发布版本，会压缩和合并一些代码，加上 ； 分号是为了避免代码压缩和与其它代码合并混淆时候出现报错，所以就加了一个 ； 分号与前面代码分隔出来，各自执行不干扰。

这是 jQuery 官方的插件开发规范要求，使用这种编写方式有什么好处呢？

  1. 避免全局依赖；
  2. 避免第三方破坏；
  3. 兼容 jQuery 操作符 '$ ' 和 'jQuery '。

对于这种写法不理解？没关系，我们换个写法，其实它等同于：

  1. var jq = function($) {
  2.     // Code goes here
  3. };
  4. jq(jQuery);

这样写清楚了吧？

2. 扩展
jQuery 提供了 2 个供用户扩展的 ‘基类’  $.extend 和 $.fn.extend；
$.extend 用于扩展自身方法，如 $.ajax , $.getJSON 等， $.fn.extend 则是用于扩展 jQuery 类，包括方法和对 jQuery 对象的操作。为了保持 jQuery 的完整性，我比较趋向于使用 $.fn.extend 进行插件开发而尽量少使用$.extend；

3. 选择器
jQuery 提供了功能强大，并兼容多种 css 版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。

  1. 尽量使用Id选择器，jQuery的选择器使用的 API 都是基于 getElementById 或 getElementsByTagName，因此可以知道 效率最高的是 Id 选择器，因为 jQuery 会直接调用 getElementById 去获取 dom，而通过样式选择器获取 jQuery 对象时往往会使用 getElementsByTagName 去获取然后筛选；
  2. 样式选择器应该尽量明确指定 tagName, 如果开发人员使用样式选择器来获取 dom，且这些 dom 属于同一类型，例如获取所有 className 为 jquery 的 div，那么我们应该使用的写法是 $("div.jquery") 而不是 $(".jquery")，这样写的好处非常明显，在获取 dom 时 jQuery 会获取 div 然后进行筛选，而不是获取所有 dom 再筛选；
  3. 避免迭代，很多同学在使用 jQuery 获取指定上下文中的 dom 时喜欢使用迭代方式，如 $(".jquery .child")，获取 className 为j query 的 dom 下的所有 className为 child 的节点，其实这样编写代码付出的代价是非常大 的，jQuery 会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如 $(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2) 之类的方式。

让我们看看其中的基础框架：

  1. //为避免冲突，将我们的方法用一个匿名方法包裹起来
  2. ;(function($) {
  3.     //扩展这个方法到jQuery
  4.     $.fn.extend({
  5.         //插件名字
  6.         pluginname: function() {
  7.             //遍历匹配元素的集合
  8.             return this.each(function() {
  9.                 //在这里编写相应代码进行处理
  10.             });
  11.         }
  12.     });
  13.  //传递jQuery到方法中，这样我们可以使用任何JavaScript中的变量来代替"$"
  14. })(jQuery);

根据上面的代码，我来写一个简单的 jQuery 插件：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery 简单选项卡插件</title>
  6. <style>
  7. .tabbox input {
  8.     background-color: #FFF;
  9. }
  10. .tabbox input.active {
  11.     background-color: #000 !important;
  12.     color: #FFF !important;
  13. }
  14. .tabbox div {
  15.     display: none;
  16.     width: 200px; height: 200px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <section id="tabBox1" class="tabbox">
  22.     <input class="active" type="button" value="tab1" />
  23.     <input type="button" value="tab2" />
  24.     <input type="button" value="tab3" />
  25.     <div style="display:block;">tab-cont1</div>
  26.     <div>tab-cont2</div>
  27.     <div>tab-cont3</div>
  28. </section>
  29. <br>
  30. <section id="tabBox2" class="tabbox">
  31.     <input class="active" type="button" value="tab1" />
  32.     <input type="button" value="tab2" />
  33.     <input type="button" value="tab3" />
  34.     <div style="display:block;">tab-cont1</div>
  35.     <div>tab-cont2</div>
  36.     <div>tab-cont3</div>
  37. </section>
  38. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  39. <script src="js/jQuery.tabBox.js"></script>
  40. </body>
  41. </html>

jQuery.tabBox.js

  1. ;(function($) {
  2.     $.fn.extend({
  3.         //插件名称 - Tabs
  4.         Tabs: function (options) {
  5.             //参数和默认值
  6.             var defaults = {
  7.                 tabMenuColor: "#FFF",     //选项卡按钮的背景颜色
  8.                 tabBoxColor: "#CCC",       //选项卡内容区的背景颜色
  9.                 currentActive: 'active'  //选项卡按钮选中样式（class名称）
  10.             };
  11.             var options = $.extend(defaults, options);
  12.             return this.each(function () {
  13.                 var o = options;
  14.                 //获得当前对象（最外层（父层）为看作一个整体对象，用它操作其内部的dom元素）
  15.                 var obj = $(this);
  16.                 //得到obj中的input对象
  17.                 var aMenus = $("input", obj);
  18.                 //得到obj中的div对象
  19.                 var aBoxs = $("div", obj);
  20.                 //为按钮绑定切换方法
  21.                 aMenus.on("click",function() {
  22.                     var mthis = $(this);
  23.                     var currIndex = mthis.index();
  24.                     mthis.addClass(o.currentActive).siblings().removeClass(o.currentActive);
  25.                     aBoxs.hide().eq(currIndex).show();
  26.                 });
  27.                 //改变切换卡样式
  28.                 aMenus.css("backgroundColor",o.tabMenuColor);
  29.                 aBoxs.css("backgroundColor",o.tabBoxColor);
  30.             });
  31.         }
  32.     });
  33. })(jQuery);

使用插件：

  1. $(function() {
  2.     //使用默认参数
  3.     $("#tabBox1").Tabs();
  4.     //使用自定义参数
  5.     $("#tabBox2").Tabs({
  6.         tabMenuColor: "#940",
  7.         tabBoxColor: "#360"
  8.     });
  9. });

好了，该码上都码了，写的比较仓促，后面会慢慢的优化这篇文章，若有低级问题恳请大神们严厉指正。

关于jquery插件 入门的更多相关文章

  1. jQuery插件入门

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQ ...

  2. jQuery 插件入门

    先看http://www.cnblogs.com/lideng/p/3605551.html http://www.cnblogs.com/xcj26/p/3345556.html (非常细致  很多 ...

  3. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  4. jQuery插件：跨浏览器复制jQuery-zclip

    jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...

  5. jQuery插件开发入门

    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入 ...

  6. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  7. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  8. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 非常基础的css注意点

    排版了很多页面,才发现自己忽视了一个很基本且重要的知识点: 一个div在一般的浏览器中,算它的width,要计算其content,padding,border. 但是在CSS中定义一个div的widt ...

  2. iframe与frameset（转载）

    frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram     ...

  3. php部分--操作MySQL 增删改查

    1.建立主页 并进行信息的显示和查询 <table width="95%" border="1" cellpadding="0" ce ...

  4. CString用法总结

    概述:CString是MFC中提供的用于处理字符串的类,是一种很有用的数据类型. 它很大程度上简化了MFC中的许多操作,使得MFC在做字符串操作时方便了很多. 不管怎样,使用CString有很多的特殊 ...

  5. Ci分开配置网站前台后台的方法

    CodeIgniter 是一个简单快速的PHP MVC框架.EllisLab 的工作人员发布了 CodeIgniter.许多企业尝试体验过所有 PHP MVC 框架之后,CodeIgniter 都成为 ...

  6. linux环境进程的停止

    使用 #ps auxf|grep 你想要获取的进程,如下,我想要获得的是nginx的进程号 图中黄色的便是进程号, 在此我们想kill掉主进程就要把后面有master字样的进程号kill掉 命令如下 ...

  7. 点亮LED(库函数实现)

    本次测试采用的芯片是STM32F103CB 我的开发板如下: 此开发板有8个led,分别为D11,D12,D13,D14,D15,D16,D17,D18.查询核心板的电路图后知道其对应芯片的控制引脚为 ...

  8. 常用的文件和目录操作命令【转vbird】

    cdpwdmkdirrmdirlscprmmvcattacnlmorelessheadtailtouch cd (变换目录) 我们知道vbird这个使用者的家目录是/home/vbird/,而root ...

  9. tomcat　源码解析

    how_tomcat_works https://www.uzh.ch/cmsssl/dam/jcr:00000000-29c9-42ee-0000-000074fab75a/how_tomcat_w ...

  10. 伪类选择器:root的妙用

    css3的元素旋转功能非常强大,也非常吸引人,但是很多时候因为浏览器使用率的问题,我们必需要想办法兼容一些低版本的浏览器,特别是ie这朵奇葩. 想要实现元素旋转本来很简单的一个属性就能实现,那就是tr ...