标签：闭包 pac dft 例子 code query 执行 方式 操作
虽然现在 vue angular react 当道啊
但是那 JQ还是有一席之地
很多很多的小单位啊.其实还会用到
我也放一个例子吧
虽然我也不是很肯定有没有人写的比我更好啊
但是我相信 我这个还是蛮实用的
话不多说 丢代码
JQ插件标准的封装代码如下，首先需要闭包：
<scripttype="text/javascript">(function ($) { //这里放入插件代码})(jQuery);</script> |
这是jQuery官方的插件开发规范，这样写是作用是：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
接着给插件加入主体：
<scripttype="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 = ‘<p‘ + ‘ ‘ + style + ‘>此文章版权归<atarget="_blank"href="‘ + ops.url + ‘">‘ + ops.cpBy + ‘</a>所有</p>‘; //生成版权文字的代码 $(this).append(cpTxt); //把版权文字加入到想显示的div }})(jQuery);</script> |
OK了，这个插件已经完成了，接下来我们来看看调用的方式。
比如你文章所在的div的id=”article-content”，那么在此div后面（先读取到了该div，该div才可以作为后面的JS的对象）加上JS代码：
<scripttype="text/javascript"> $("#article-content").userCp();<script"> |
其实也不是一定要放到该div的后面，比如要放到head区域里的话，就要使用JQ的预读功能，也就是把页面所有的dom都读取完之后，才执行里面的JS：
<scripttype="text/javascript">$(function(){ //官方解释：在dom文档载入完成后执行的函数 $("#article-content").userCp();});<script"> |
如果不想使用默认的内容，比如要修改版权所有者名字、网址、文字大小和靠右显示等，那就给这个插件传几个参数：
<scripttype="text/javascript"> $("#article-content").userCp({ cpBy: " T ", url: "http://dafi.cn", size: "16px", align: "right" });<script"> |
标签：闭包 pac dft 例子 code query 执行 方式 操作
原文地址：http://www.cnblogs.com/wulibo/p/7233294.html
