[转]怎么写 JQuery插件 (案例原理)
jQuery(以下简称JQ)是一个功能强大而又小巧的JS框架,现在很多网站都在使用JQ,本站也不例外。本文教大家如何写一个属于你自己的JQ插件。
本JQ插件例子是在你网站的文章结尾处添加你的版权。
JQ插件标准的封装代码如下,首先需要闭包:
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体:
OK了,这个插件已经完成了,接下来我们来看看调用的方式。
比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:
其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:
如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:
在实际的应用中,我们当然不会写这么一个插件,因为直接用非封装的方法或者直接改页面的源码会更快更方便,我只是为了给大家一个demo,所以才写了这个鸡肋的插件。
不会JS的同学,可以直接去学JQ,这样让你在短时间内能够做出很炫的效果,而不必去啃那些厚厚的JS书籍了。不过如果你是想以JS作为职业的话,还是要从最基本的东西学起。
本文固定链接:
-----------------------------
覆盖默认参数(类/命名空间)拓展和对象(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);
调用