[转]怎么写 JQuery插件 （案例原理）

jQuery（以下简称JQ）是一个功能强大而又小巧的JS框架，现在很多网站都在使用JQ，本站也不例外。本文教大家如何写一个属于你自己的JQ插件。

本JQ插件例子是在你网站的文章结尾处添加你的版权。

JQ插件标准的封装代码如下，首先需要闭包：

<</code>script type="text/javascript">

(function ($) {

 //这里放入插件代码

})(jQuery);

</</code>script>

这是jQuery官方的插件开发规范，这样写是作用是：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体：

<</code>script type="text/javascript">

(function ($) {

 $.fn.userCp = function(options) { //定义插件的名称，这里为userCp

 var dft = {

 //以下为该插件的属性及其默认值

 cpBy: "dafi", //版权所有者

 url: "http://www.dafi.cn", //所有者链接

 size: "12px", //版权文字大小

 align: "left" //版权文字位置，left || center || right

 };

 var ops = $.extend(dft,options);

 var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式

 var cpTxt = '<</code>p' + ' ' + style + '>此文章版权归<</code>a target="_blank" href="' + ops.url + '">' + ops.cpBy + '</</code>a>所有</</code>p>'; //生成版权文字的代码

 $(this).append(cpTxt); //把版权文字加入到想显示的div

 }

})(jQuery);

</</code>script>

OK了，这个插件已经完成了，接下来我们来看看调用的方式。

比如你文章所在的div的id=”article-content”，那么在此div后面（先读取到了该div，该div才可以作为后面的JS的对象）加上JS代码：

<</code>script type="text/javascript">

 $("#article-content").userCp();

<</code>script">

其实也不是一定要放到该div的后面，比如要放到head区域里的话，就要使用JQ的预读功能，也就是把页面所有的dom都读取完之后，才执行里面的JS：

<</code>script type="text/javascript">

$(function(){ //官方解释：在dom文档载入完成后执行的函数

 $("#article-content").userCp();

});

<</code>script">

如果不想使用默认的内容，比如要修改版权所有者名字、网址、文字大小和靠右显示等，那就给这个插件传几个参数：

<</code>script type="text/javascript">

 $("#article-content").userCp({

 cpBy: " T ",

 url: "http://dafi.cn",

 size: "16px",

 align: "right"

 });

<</code>script">

在实际的应用中，我们当然不会写这么一个插件，因为直接用非封装的方法或者直接改页面的源码会更快更方便，我只是为了给大家一个demo，所以才写了这个鸡肋的插件。

不会JS的同学，可以直接去学JQ，这样让你在短时间内能够做出很炫的效果，而不必去啃那些厚厚的JS书籍了。不过如果你是想以JS作为职业的话，还是要从最基本的东西学起。

本文固定链接: http://www.web92.net/178.html | WEB前端开发

-----------------------------  

覆盖默认参数（类/命名空间）拓展和对象（jquery原型）拓展

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            //检测用户传进来的参数是否合法
            if (!isValid(options))
                return this;
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
                //格式化高亮文本
                var markup = $this.html();
                markup = $.fn.highLight.format(markup);
                $this.html(markup);
            });

        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {
        return "" + str + "";
    }
    //私有方法，检测参数是否合法
    function isValid(options) {
        return !options || (options && typeof options === "object") ? true : false;
    }
})(window.jQuery);

调用

        //调用
        //调用者覆盖 插件暴露的共公方法
        $.fn.highLight.format = function (txt) {
            return "" + txt + ""
        }
        $(function () {
            $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
        });