js/jquery 高效率編程一

來源:互聯網
上載者:User

我們一般寫js或者jquery的時候 一般都是隨性的 用click 用var申請全域變數 或者局部變數這個是我在工作中像我的一個js很牛逼的一個同事學習到的 在此共用出來 多總結 主要的話 多看我紅色注釋部分//這個是我的一個遮罩層方法 方法定義在我之前部落格裡面var mask=new WindowMask(); //將所有的變數定義在一個函數裡面 或者是一個對象裡面 那麼每次改動的話 只要改這個地方 每次擷取也就擷取這個地方 這個就是我們代碼裡面的封裝 物件導向編程 這樣代碼易於維護//最終返回所以的變數的一個數組function GetParm(obj){     //擷取操作下拉框     var sel=$(obj);     //擷取當前td的前一個td     var prevtd=sel.parent().prev();     //擷取當前td的下一個td     var nexttd=sel.parent().next();     //擷取源環境ID     var hidSrcSerialID=prevtd.children(":first").val();     //源環境編號+名稱     var SrcNo_Name=encodeURI($.trim(prevtd.text()).replace(" ","&"));     //目標環境ID     var hidAimSerialID=prevtd.children(":eq(1)").val();    //目標環境select     var enviSelect=nexttd.children(".SelectSrc");     //目標環境顯示內容      var enviShowName=nexttd.children(".ShowName_No");      //操作的值      var selectAction=sel.val();      return {      SrcSerialID: hidSrcSerialID,      SrcNo_Name:SrcNo_Name,       AimSerialID:hidAimSerialID,      EnviSelect:enviSelect.is(":visible"),      EnviSelectValue:enviSelect.val(),      ActionWay:selectAction      };}  //還有一種方法就是定義一個全域的對象來儲存所有的變數已經相應的方法var ListVar={    isFullScreen:false,  //表單是否是全屏    status:[            {text:'失敗',val:0},            {text:'不適用',val:1},            {text:'待執行',val:2},            {text:'執行中',val:3},            {text:'成功',val:4},            {text:'阻塞',val:5}           ],  optionText:"<option value =\"0\">失敗</option><option value =\"1\">不適用</option><option value =\"2\">待執行</option><option value =\"3\">執行中</option><option     value =\"4\">成功</option><option value =\"5\">阻塞</option>",  Operate:{    checkRow:"checkRow",    status:"status",    desc:"desc",    ecNumber:"ecNumber",    caseNo:"caseNo",    doTime:"doTime",    annex:"znnex",    newEc:"newEc",    relationEC:"relationEC",    cancelEc:"cancelEc",    step:"step",    reportLink:"reportLink"  },  getOptionText:function(value){           var options=[];                         for(var i=0,item;i<this.status.length;i++)            {                item=this.status[i];                options.push("<option value =\""+item.val+"\" ");                if(value==item.text)                    options.push("selected=\"selected\"");                                    options.push(">"+item.text+"</option>");              }            return options.join('');     }    }//還有一種方法是定義一個全域變數 儲存所有的變數 但是 卻加一個初始化方法 在需要的時候 初始化就行//dom載入完畢後 調用相應的初始話方法$(function(){    MenuBar.init();    CaseDoList.init();    GTGrid.init();    });var MenuBar={        init:function(){        //調用篩選狀態的初始化方法        this.screenStatus.init();         $("#showCheckMenu").click(MenuBar.checkCondition);          this.modifyStatus.init();          ....         },    checkCondition:function(){//彈出框過濾條件           .......    },    setFilterText:function(){        ...    },    screenStatus:{//篩選狀態        init:function(){          //自訂初始化方法            ....        },        show:function(){        //自訂方法        ........                    },        hide:function(){              //自訂方法        ........                    },        chang:function(){         //自訂方法        ........                   }            },} //MenuBar    //調用第一種方法$(".Change").change(function(){       //調用方法擷取所有的變數      var paramJson=GetParm(this);       var nexttd=$(this).parent().next();      var enviShowName=nexttd.children(".ShowName_No");      var enviSelect=nexttd.children(".SelectSrc");                  switch($(this).val()){     //選擇了 複製     case "0":      //上面定義的遮罩層      mask.show("資料處理中");       enviSelect.hide();       enviShowName.show();       $.post("FrmTestCaseCopyEnviroment.aspx", { SrcNo_Name: paramJson.SrcNo_Name, isAjaxRequest: "1"},                function(data) {                 enviShowName.html(data.replace("&"," "));                      //上面定義的遮罩層         mask.hide();                });             break;       //選擇了不 複製       case "1":       enviSelect.hide();       enviShowName.hide();       break;       //選擇了對應       case "2":       enviShowName.hide();       enviSelect.show();       //如果目標環境id不存在 則追加一條 請選擇       if(paramJson.AimSerialID=="-1"||paramJson.AimSerialID==undefined)       {        mask.show("資料處理中");        enviSelect.html('');        enviSelect.append("<option value='-1' selected='selected'>請選擇</option>");        //從後台載入select www.2cto.com       $.post("FrmTestCaseCopyEnviroment.aspx", { isAjaxRequest: "2"},                function(data) {                   var jsonObj = $.parseJSON(data);                   for (i=0;i<jsonObj.length;i++) {                      enviSelect.append("<option value=\"" + jsonObj[i].value + "\" >" + jsonObj[i].text + "</option>") ;                 }                 mask.hide();          });       }       else{          enviSelect.val(paramJson.AimSerialID);       }       break;       }          }) 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.