jQuery插件开发模式

function People(name)
{
  this.name=name;
  //对象方法
  this.Introduce=function(){    //这种形式是特权方法this.xx=function(){}
    alert("My name is "+this.name);
  }
}
//类方法
People.Run=function(){
  alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
  alert("我的名字是"+this.name);
}

 

//测试
//实例化对象
var p1=new People("Windking");    //My name isWindking

p1.Introduce();    //I can run

People.Run(); p1.IntroduceChinese();    //undefined

$.fn.bgChange = function() {   //bgChange是自己定义的函数名字
  //在这里面,this指的是用jQuery选中的元素
  //example :$('a'),则this=$('a')
  this.css('color', 'red');
}

<ul>
    <li>
        <a href="http://www.webo.com/liuwayong">我的微博</a>
    </li>
    <li>
        <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
    </li>
    <li>
        <a href="http://wayouliu.duapp.com/">我的小站</a>
    </li>
</ul>
<p>这是p标签不是a标签，我不会受影响</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.bgChange.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').bgChange();    //（对比一）
    })
</script>

$.fn.bgChange = function() {
  //在这里面,this指的是用jQuery选中的元素
  this.css('color', 'red');
  this.each(function() {
    //对每个元素进行操作
    $(this).append(' ' + $(this).attr('href'));
  }))
}

 return this.each(function() {

$.fn.bgChange = function(options){  
//给定一个默认值。  
   var defaults = {  
        color:"black",fontSize:"12"  
    }; 
//将传递的值替换为默认值，(如果options为空，则使用defaults，可以避免传递的options为null和没有传递options的情况)
 var options = $.extend(defaults,options);
//插件内容写在这里
return this.css({
    'color':options.color,
    'fontSize':options.fontSize
});
 } 

$("a").bgChange({    //（对比二）

    color:"blue"
 })

$.fn.bgChange = function(options){  
//给定一个默认值。  
   var defaults = {  
        color:"black",fontSize:"12"  
    }; 
//将一个空对象作为第一个参数
 var options = $.extend({},defaults,options);
//插件内容写在这里
return this.css({
    'color':options.color,
    'fontSize':options.fontSize
});
 } 

//定义Beautifier的构造函数(这还是个全局变量，它会被附到全局的window对象上)
var Beautifier = function(ele, opt) {
  this.$element = ele,
  this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration':'none'
  },
  this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
  beautify: function() {
    return this.$element.css({
      'color': this.options.color,
      'fontSize': this.options.fontSize,
      'textDecoration': this.options.textDecoration
    });
  }
}
//在插件中使用Beautifier对象
$.fn.bgChange = function(options) {
  //创建Beautifier的实体
  var beautifier = new Beautifier(this, options);
  //调用其方法
  return beautifier.beautify();
}

$(function() {
  $('a').bgChange({
    'color': '#2C9929',
    'fontSize': '20px',
    'textDecoration': 'underline'
  });
})

(function() {
  //定义Beautifier的构造函数
  var Beautifier = function(ele, opt) {
  ······
})();

var foo=function(){
  //别人的代码
}//注意这里没有用分号结尾
 
//开始我们的代码。。。
;(function(){
  //我们的代码。。
  alert('Hello!');
})();

;(function($, window, document,undefined) {
  //定义Beautifier的构造函数
  var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
      'color': 'red',
      'fontSize': '12px',
      'textDecoration': 'none'
    },
    this.options = $.extend({}, this.defaults, opt)   //可刚改为：this.options=$.extend({},this.defaults,opt || {})
  }
  //定义Beautifier的方法
  Beautifier.prototype = {
    beautify: function() {
      return this.$element.css({
        'color': this.options.color,
        'fontSize': this.options.fontSize,
        'textDecoration': this.options.textDecoration
      });
    }
  }
  //在插件中使用Beautifier对象
  $.fn.bgChange = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
  }
})(jQuery, window, document);

var name = 'Wayou';
document.getElementById(‘example').innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号，JavaScript中保持单引号