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獲取相應的代理商數據。

 

改造插件完成。