关于 JavaScript & jQuery 的插件开发

最新推荐文章于 2024-11-08 16:09:18 发布

diwencui7977

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量86

点赞数

文章标签： javascript 设计模式前端 ViewUI

原文链接：http://www.cnblogs.com/viphchok/articles/5381802.html

版权

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

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

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

好了，直接上码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 简单选项卡插件</title>
<style>
.tabbox input {
    background-color: #FFF;
}
.tabbox input.active {
    background-color: #000;
    color: #FFF;
}
.tabbox div {
    display: none;
    width: 200px; height: 200px; 
    background-color: #CCC; 
}
</style>
</head>
<body>
<section id="tabBox1" class="tabbox">
    <input class="active" type="button" value="tab1" />
    <input type="button" value="tab2" />
    <input type="button" value="tab3" />
    <div style="display:block;">tab-cont1</div>
    <div>tab-cont2</div>
    <div>tab-cont3</div>
</section>
<br>
<section id="tabBox2" class="tabbox">
    <input class="active" type="button" value="tab1" />
    <input type="button" value="tab2" />
    <input type="button" value="tab3" />
    <div style="display:block;">tab-cont1</div>
    <div>tab-cont2</div>
    <div>tab-cont3</div>
</section>
<script>
window.onload = function () {
    new Tabs("tabBox1");
    new Tabs("tabBox2");
};
var Tabs = function(ID) {
    var _this = this;
    var oDiv = document.getElementById(ID);
    this.aBtn = oDiv.getElementsByTagName("input");
    this.aDiv = oDiv.getElementsByTagName("div");
    for(var i = 0; i < this.aBtn.length; i++) {
        this.aBtn[i].index = i;
        this.aBtn[i].onclick = function() {
            _this.fnClick(this);
        };
    }
};
Tabs.prototype.fnClick = function(oBtn) {
    for(var i = 0; i < this.aBtn.length; i++) {
        this.aBtn[i].className = ''
        this.aDiv[i].style.display = "none";
    }
    oBtn.className = "active";
    this.aDiv[oBtn.index].style.display = "block";
}
</script>
</body>
</html>

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

1. 使用闭包

(function($) {
    // Code goes here
})(jQuery);

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

;(function($) {
    // Code goes here
})(jQuery);

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

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

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

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

var jq = function($) {
    // Code goes here
};
jq(jQuery);

这样写清楚了吧？

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

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

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 简单选项卡插件</title>
<style>
.tabbox input {
    background-color: #FFF;
}
.tabbox input.active {
    background-color: #000 !important;
    color: #FFF !important;
}
.tabbox div {
    display: none;
    width: 200px; height: 200px; 
}
</style>
</head>
<body>
<section id="tabBox1" class="tabbox">
    <input class="active" type="button" value="tab1" />
    <input type="button" value="tab2" />
    <input type="button" value="tab3" />
    <div style="display:block;">tab-cont1</div>
    <div>tab-cont2</div>
    <div>tab-cont3</div>
</section>
<br>
<section id="tabBox2" class="tabbox">
    <input class="active" type="button" value="tab1" />
    <input type="button" value="tab2" />
    <input type="button" value="tab3" />
    <div style="display:block;">tab-cont1</div>
    <div>tab-cont2</div>
    <div>tab-cont3</div>
</section>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jQuery.tabBox.js"></script>
</body>
</html>

jQuery.tabBox.js

;(function($) {
    $.fn.extend({
        //插件名称 - Tabs
        Tabs: function (options) {
            //参数和默认值
            var defaults = {
                tabMenuColor: "#FFF",     //选项卡按钮的背景颜色
                tabBoxColor: "#CCC",       //选项卡内容区的背景颜色
                currentActive: 'active'  //选项卡按钮选中样式（class名称）
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                //获得当前对象（最外层（父层）为看作一个整体对象，用它操作其内部的dom元素）
                var obj = $(this);
                //得到obj中的input对象
                var aMenus = $("input", obj);
                //得到obj中的div对象
                var aBoxs = $("div", obj);
                //为按钮绑定切换方法
                aMenus.on("click",function() {
                    var mthis = $(this);
                    var currIndex = mthis.index();
                    mthis.addClass(o.currentActive).siblings().removeClass(o.currentActive);
                    aBoxs.hide().eq(currIndex).show();
                });
                //改变切换卡样式
                aMenus.css("backgroundColor",o.tabMenuColor);
                aBoxs.css("backgroundColor",o.tabBoxColor);
            });
        }
    });
})(jQuery);

使用插件：

$(function() {
    //使用默认参数
    $("#tabBox1").Tabs();
    //使用自定义参数
    $("#tabBox2").Tabs({
        tabMenuColor: "#940",
        tabBoxColor: "#360"
    });
});

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

转载于:https://www.cnblogs.com/viphchok/articles/5381802.html