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

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          <!--
11              一般来说，插件需要定义在一个单独的文件中，可以更好的维护
12              *需要在jquery类库导入之后再导入    
13            -->
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          <!--  Date: 2014-12-01  -->
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插件的一个初步的感受