Jquery_感受插件_一个简单的文本处理插件

浏览数：28 / 时间：2015年06月09日

Jquery_感受插件_一个简单的文本处理插件

插件，之前没有动手写的时候觉得很神秘，给人一种很难的感觉，但是万事开头难，先从最简单的入手，记录一下自己的学习轨迹。插件嘛，顾名思义，额外的组件，为了拓展功能而存在，那么Jquery的插件自然而然就是为了更加丰富Jquery的功能。
一般来说，插件需要定义在一个单独的js文件中，网上很多的插件也都是这么做的，一来因为它是“插件”嘛，应该独立存在，不应该侵入代码，二来也可以清晰的维护好插件的内容。定义插件之前，我们应该都清楚在Jquery中，$是jQuery的别名，通过$.来调用库中的方法也就是通过jQuery.来调用，此时可能会有一个问题，$符号是为数不多的可以当做别名的符号，很多插件也都用$来当做自己的别名，那么类库和类库之间就可能存在冲突，根据实际情况，我们需要通过调用jQuery.noConflict();方法来消除$别名的冲突，该方法使得jQuery让出$别名，不和其他类库冲突，如此一来，就只能通过jQuery.来调用方法。
下面就给出一个插件的案例jquery.plugIn.demo.js，在插件js中，为了兼顾开发效率并缩减代码量，使用闭包的方式将jQuery关键字传入，在闭包中继续使用$作为别名。

1 //如果有必要，消除$符号的冲突
2 //jQuery.noConflict();
3 (function($){
4
5     //一个简单的插件方法
6     $.simple = function(name){
7         alert("hello " + name);
8     };
9
10     //一个稍复杂的插件方法。如果某个函数需要多个参数，或含有可选的参数，使用options（对象的方式）对默认参数进行覆盖
11     //p1和p2作为必选参数，options参数传入可选参数将默认数值进行覆盖
12     $.complex = function(p1,options,p2){
13         //alert(p1 + "  " + options + "  " + p2);
14
15         var ops = $.extend({
16             p3:‘#3‘,
17             p4:‘#4‘,
18             p5:‘#4‘
19         }, options||{});
20
21         alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23     };
24 })(jQuery);
25

测试页面：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5     <head>
6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7         <title>Jquery_16_Jquery插件基础</title>
8         <meta name="author" content="Administrator" />
9         <script type="text/javascript" src="jquery-1.11.1.js"></script>
10         
14         <script type="text/javascript" src="jquery.plugIn.demo.js"></script>
15         <script type="text/javascript">
16             $(function(){
17                 $.simple("duyt");
18
19                 $.complex("I‘am",{p3:"111",p4:"222",p5:"333"},"duyt");
20                 $.complex("I‘am",{},"duyt");
21             });
22         </script>
23     </head>
24     <body>
25     </body>
26 </html>
27

基于上述两个简单的插件方法，就可以试着写一个具有功能性的插件了，下面实现一个处理长文本标题的小插件jquery.simpleTextCutter.plugIn.js

1 (function($){
2 //文本截留插件
3     $.toFixedStr = function(OriStr,options){
4         var settings = $.extend({
5             fill:".",//可指定的省略符号
6             length:12,//可指定的保留长度
7             fillLength:3//可指定的省略符号显示长度，例如"XXX..."
8         },options||{});
9
10         if(OriStr.length >12){
11             OriStr = OriStr.substring(0,12);
12             for(var i = 0;i<settings.fillLength;i++){
13                 OriStr+=settings.fill;
14             }
15         }
16         return OriStr;
17     };
18
19 })(jQuery);
20

测试页面

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5     <head>
6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7         <title>Jquery_感受插件_简易文本处理插件</title>
8         <meta name="author" content="Administrator" />
9         <script type="text/javascript" src="jquery-1.11.1.js"></script>
10         <script type="text/javascript" src="jquery.simpleTextCutter.plugIn.js"></script>
11         
12         <script type="text/javascript">
13             $(function(){
14                 $("ul li").each(function(index) {
15                     var newStr = $.toFixedStr($(this).text(),{
16                         fill:"~",
17                     });
18                     $(this).text(newStr);
19                 });
20             });
21
22         </script>
23     </head>
24     <body>
25         <ul>
26             <li>123你你你444444444444444444</li>
27             <li>456我我我77777777</li>
28             <li>789他他他0000</li>
29         </ul>
30     </body>
31 </html>
32

以上就是实现jQuery插件的一个初步的感受

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery_感受插件_一个简单的文本处理插件