javascript回调函数使用练习以及自定义toggle函数编写

javascript回调函数使用练习以及自定义toggle函数编写


昨天在编码时遇到一个业务需求是在A页面点击一个按钮到B页面,B页面有个一个确定按钮,和取消button,点击确定从B页面将选中的数据带回A页面,点击取消回到A页面,咨询了同事,决定用回调的函数的方式实现这个功能,这是第一次使用这种方法,记录下来;过程中需要对一个元素绑定2个函数,在2个函数之间来回切换,就想到jquery的toggle()方法,结果失效了,又自己尝试写了个toggle()方法,源码地址

大体思路

/**
*init 就是B页面的方法,testCallBack是A页面的方法,在testCallBack方法里调用init方法,参数data就是回调函数的返回值,不得不感叹,javascript实在是太灵活了
*/
var init = function (callback){
        if(!(typeof callback === "function")){throw Error("type error")}
        var json = [{id:1,name:"王一"},{id:2,name:"王二"}];
        callback(json);
    };
    var testCallBack = function(){
      init(function(data){
      console.log(data); //[{id:1,name:"王一"},{id:2,name:"王二"}]
      });
    }

由于在B页面我需要第一次点击button表示选中某个元素,再次点击表示删除这个元素,以前jquery有toggle()方法可以实现,现在没有了,于是我就想给button设置一个默认的value,点击切换的时候改变value ,通过判断value值来选择使用那个方法

<button value="0" id="test_button">确定button>
$("#test_button").bind("click",function(){
var val= $("#test_button").attr("value");
if(val===0){
    function a(){};
    $("#test_button").attr("value",1);
}else{
function b(){};
    $("#test_button").attr("value",0);
}
});

感觉这种方法好low,越是去网上搜了下,在stackoverflow上看到一个方法方法的地址

$.fn.toggleClick = function(){

    var functions = arguments ;

    return this.click(function(){
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments);
            iteration = (iteration + 1) % functions.length ;
            $(this).data('iteration', iteration);
    });
};

但我不想把这个方法写着jquery的extend的方法,毕竟只有当前页面用,于是我想到了jquery的$定义,我就模仿了下

var MytoggleClick = function(id){
        this.id = id;
    };
    MytoggleClick.prototype.toggle = function(){
        var functions = arguments ;
        return this.id.click(function(){
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments);
            iteration = (iteration + 1) % functions.length ;
            $(this).data('iteration', iteration);
        });
    };

就这样,搞定了;源码地址,最近经常看源代码,感觉收获很大,

你可能感兴趣的:(javascript)