加载按钮控件的设计

   //--带有loading的按钮。
    var LoadingButton=function(opts){

        //--组件运行机制解释：
        /***
         *
         *
         * 1、组件获取加载中的模板，获取按钮元素句柄，获取原本普通状态的模板。
         * 2、系统进行初始化，然后执行setting里面的 init方法
         *
         * 3、假如调用了seLoading接口，那么组件将会转入loading状态，过程如下：
         * 3a、组件状态变为loading且运行setting的beforeLoading方法进行预处理，
         * 3b、运行onLoading方法，假如返回的是false，那么系统直接运行afterLoading方法；
         * 3c、返回的是true的话，那么系统将按钮里面的内容替换成为loading模板，然后运行afterloading方法。
         *
         * 4、假如调用了setNormal接口，那么组件将会进入normal状态且过程如下：
         * 4a、组件状态变为normal且运行setting的beforeNormal，
         * 4b、运行setting的onNormal，假如：
         * 4b（1）、返回false，则直接执行afterNormal方法
         * 4b（2）、返回true，则系统将按钮里面的内容替换成为normal模板，后续执行afterNormal方法。
         *
         *
         *
         *
         * ***/
        var _i_appData={
            loading:false //是否正在加载状态。
            ,element:""
        };
        var defaults={
            loading:'<span><i class="fa fa-spinner fa-pulse"></i></span>'//loading的模板--当执行中时候会将内容提示为这个。
            ,normal:'<span>点击我</span>' //普通状态下面的模板。
            ,element:"" //这是咯阿丁按钮的容器。
            ,init:function(element){

            }//初始化时候也随便执行这个方法。
            ,beforeLoading:function(element){

            }//--在显示loading前执行的方法，注意，假如你在这里替换了按钮容器的内容，你会发现是没用的，因为系统在随后会继续将loading模板放到按钮里面去。所以要自定义loading模板的话，你最好在onLoading里面返回false表示我不需要系统处理loading模板了，我自己来，然后将element的内容替换成为你的内容。beforeloading里面你可以进行一些更换样式之类的操作。
            ,onLoading:function(element){

                return true;
            }//--参看上面解释，假如返回false的话就不渲染了，让用户自己来。
            ,afterLoading:function(element){

            }//--执行完loading以后的运行方法。
            ,beforeNormal:function(element){

            }//--在设置为普通状态时候前执行的方法。注意，你即使在这里替换了按钮里面的内容，也会在随后被系统替换掉的，所以假如要自定义替换的内容，那么就在onNormal里面返回false，然后自己来。

            ,onNormal:function(element){

            }//参看上面解释。
            ,afterNormal:function(element){

            }//设置完普通状态后执行的方法。

            ,onClick:function(){

            }//--当按钮状态为悠闲（即，loading==false的时候），点击了就执行该方法。


        };
        $.extend(defaults,opts);
        _i_appData.element=$(defaults.element);



        var __app={
            setLoading:function(){
                _i_appData.loading=true;
                defaults.beforeLoading(_i_appData.element);
                var _res=defaults.onLoading(_i_appData.element);
                if(_res==false){

                }
                else if(_res==true){
                    _i_appData.element.html(defaults.loading);
                }
                else{
                    console.log("loading按钮里面的onLoading返回结果错误！");
                }
                defaults.afterLoading(_i_appData.element);
            }
            ,setNormal:function(){
                _i_appData.loading=false;
                defaults.beforeNormal(_i_appData.element);
                var _res=defaults.onNormal(_i_appData.element);
                if(_res==false){

                }
                else if(_res==true){
                    _i_appData.element.html(defaults.normal);
                }
                else{
                    console.log("loading按钮里面的onNormal返回结果错误！");
                }
                defaults.afterNormal(_i_appData.element);
            }
            ,__initEvents:function(){
                $(_i_appData.element).click(function(){
                    if(_i_appData.loading==false){
                        defaults.onClick();
                    }
                });
            }
        };
        (function(){
            __app.__initEvents();
            try{defaults.init(_i_appData.element);}
            catch (ee){
                console.log(ee);
            }

        })();

        return __app;

    };