江南才子 发表于 2021-8-6 14:05:37

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.p,
                        city: city_json.citylist.c.n,
                        dist: null
                  };
                }else{
                  var data = {
                        prov: city_json.citylist.p,
                        city: city_json.citylist.c.n,
                        dist: city_json.citylist.c.a.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获取相应的代理商数据。
改造插件完成。


文档来源:51CTO技术博客https://blog.51cto.com/u_3513677/3283999
页: [1]
查看完整版本: jQuery改造插件,添加回调函数