己短不可藏
己短不可藏
4月前 · 6 人阅读

类级别的插件开发:

1.1使用jQuery.extend(object);

jQuery.extend({
      foo: function() {
          alert('This is a test. This is only a test.');
        },
      bar: function(param) {
          alert('This function takes a parameter, which is "' + param +'".');
        }
     }); 

1.2 使用命名空间
虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名,但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {         
foo:function() {         
  alert('This is a test. This is only a test.');         
 },         
 bar:function(param) {         
  alert('This function takes a parameter, which is "' + param + '".');   
 }        
}; 

采用命名空间的函数仍然是全局函数,调用时采用的方法:
$.myPlugin.foo();
$.myPlugin.bar('baz');
通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

第二种是对象级别的插件开发

形式1:

(function($){    
  $.fn.extend({    
   pluginName:function(opt,callback){    
             // Our plugin implementation code goes here.      
   }    
  })    
})(jQuery);  

形式2:

(function($) {      
   $.fn.pluginName = function() {    
        // Our plugin implementation code goes here.    
   };     
})(jQuery);

形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。
这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.


OK,有了上面的理论基础我们就来实践一哈~,现在我来自己写一个jquery的fullpage插件。
先写好一个规定的HTML结构:

<!DOCTYPE html>
<html>
<head>
<script data-src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <section class="sc">1</section>
    <section class="sc">2</section>
    <section class="sc">3</section>
    <section class="sc">4</section>
    <section class="sc">5</section>
  </div>
</body>
</html>

然后开发我们的插件:

(function ($){
  function Slide(colors,direction){
    this.colors = colors || ['pink','blue','green','yellow','gray'];
    this.direction = direction || 'vertical';
    this.init();
    this.bind();
  }
  Slide.prototype.init = function($wrapper,$scs){
    var _this = this;
    $('html,body').css({
      'width':'100%',
      'height':'100%',
      overflow:'hidden',
      padding: 0,
      margin: 0
    });
    
    this.$wrapper =$('.wrapper');
    this.$scs = $('.sc');
    this.curIndex = 0;
    this.sliding = false;
    
    this.$wrapper.css({
      'width':'100%',
      'height':'100%',
      position: 'relative'
    });
    this.$scs.css({
      position: 'relative',
      'width': '100%',
      'height': '100%',
      'background': function(index){
        return _this.colors[index];
      }
    });
  };
  Slide.prototype.bind = function(){
    var _this = this;
    var timer;
    this.$wrapper.on('mousewheel',function(e){
      if(timer){
        clearTimeout(timer);
      }
      
      timer = setTimeout(function(){
        if(e.originalEvent.deltaY > 0){
        if(_this.curIndex == _this.colors.length-1) return;
        _this.$wrapper.animate({
          top:  -100 * (_this.curIndex+1) +"%"
        });
        _this.curIndex++;
        console.log(_this.curIndex);
      }
      if(e.originalEvent.deltaY < 0){
        if(_this.curIndex === 0) return;
        _this.$wrapper.animate({
          top: -100 * (_this.curIndex -1) +"%"
        });
        _this.curIndex--;
        console.log(_this.curIndex);
      }
      },300);
    });
  };
  $.mySlide = function(){
    return new Slide();
  };
  $.mySlide();
})(jQuery);

大概写了一下jquery开发插件的思路,不是很精细,比较丑陋,希望大佬不要嘲笑我o(╯□╰)o

收藏 0
关键词: function jquery section curind
评论