jQuery改造插件，添加回调函数

江南才子

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  callback('stuff', 'goes', 'here'); // 给callback赋值，callback是个函数变量
}
function foo1(a, b, c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
</script>

callback这个参数必须是函数才有效。才能起到回调的作用。

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  if(typeof callback === 'function'){
    callback('stuff', 'goes', 'here'); // 给callback赋值，callback是个函数变量
  }else{
    alert('fuck you');
  }
}
function foo1(a, b, c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
var foo3 = 'a';
doSomething(foo3);
</script>

foo3不是函数的时候，弹出fuck you
jQuery实例
原函数

$.fn.citySelect=function(settings)

添加回调

$.fn.citySelect=function(settings, changeHandle) // 添加回调函数changeHandle

给回调函数赋值

//选项变动赋值事件
    var selectChange = function (areaType) { 
      if(typeof changeHandle === 'function'){ // 判断callback是否是函数
        var prov_id = prov_obj.get(0).selectedIndex;
        var city_id = city_obj.get(0).selectedIndex;
        var dist_id = dist_obj.get(0).selectedIndex;
        if(!settings.required){
          prov_id--;
          city_id--;
          dist_id--;
        };
        if(dist_id<0){
          var data = {
            prov: city_json.citylist[prov_id].p,
            city: city_json.citylist[prov_id].c[city_id].n,
            dist: null
          };
        }else{
          var data = {
            prov: city_json.citylist[prov_id].p,
            city: city_json.citylist[prov_id].c[city_id].n,
            dist: city_json.citylist[prov_id].c[city_id].a[dist_id].s
          };
        }
        changeHandle(data, areaType); // 返回两个处理好的数据
      }
    };

获取省市县数据data以及触发的change事件类型areaType

// 选择省份时发生事件
      prov_obj.bind("change",function(){
        cityStart();
        selectChange('prov'); // 返回数据
      });
      // 选择市级时发生事件
      city_obj.bind("change",function(){
        distStart();
        selectChange('city'); // 返回数据
      });
      
      // 选择区级时发生事件
      dist_obj.bind("change",function(){
        selectChange('dist'); // 返回数据
      });

在各个事件中执行
前端使用

$("#s_city").citySelect({
  prov: "江苏省",
  city: "宿迁市",
  dist: "宿城区",
  nodata: "none"
},
function(data, type) {
  selectAgent(data.city, data.dist);
});

使用回调回来的data数据，用于selectAgent函数中

function selectAgent(city,district){
    $.ajax({
      type:"POST",
      url:"{sh::U('Index/ajax',array('todo'=>'getagent'))}",
      data:"city="+city+"&district="+district,
      success:function(json){
        json = JSON.parse(json);
        opt_str = "<option value=''>-请选择-</option>"
        if(json.status == 1){
          $.each(json.data,function(index,con){
            opt_str += "<option value="+con.id+">"+con.name+" 电话:"+con.tel+"</option>"
          })
        }
        $('#agent_id').html(opt_str);
      }
    });
  }

去ajax获取相应的代理商数据。
改造插件完成。