如何優化自己的JS程式碼
- 2020 年 3 月 3 日
- 筆記
儘管接觸大大小小項目N多個，但是剛入行兩年，
擼碼還是沒有完全成一定的規律；最近受到很多啟發，打算沉澱沉澱自己的程式碼；
之前很多頁面的很多js腳本本分程式碼，更注重效果，事件久後沒有發展 性能也是很關鍵的一部分；
之前接觸的大多是網站微站門戶app的項目，從某種角度來講 一次（多次）成型後就上線了，不注重邏輯層是否真的合理，精簡；
自從接觸平台類型項目 結構層 、表示層、行為層的優化一個比一個重要。
邏輯層程式碼需要提高注意的地方——程式碼的封裝及方法的兼容性。
一個非常簡單的抽屜效果
<script> $(function () { $(".ability_content .ability_title").click(function () { var data_state = $(this).attr("data-state"); if (data_state == 0) { $(this).children(".icon").text("+"); $(this).attr("data-state", "1"); $(this).siblings("ul").slideUp(); } else if (data_state == 1) { $(this).children(".icon").text("-"); $(this).attr("data-state", "0"); $(this).siblings("ul").slideDown(); } }); }) </script>
修改之前粗糙的寫法：
<script> $(function () { $(".toggled").click(function () { if ($(this).parent().next().css("display") == "block") { $(this).parent().next().slideUp(500); $(this).html("+"); } else { $(this).parent().next().slideDown(500); $(this).html("-"); } }) }) </script>
定義變數data_state能將需要做判斷的屬性保存到記憶體中，減少reflow迴流 從而減輕CPU負擔
同樣的思路去寫 資訊是否保存成功的案例
<script> $(function () { //保存狀態判斷 (function () { //獲取保存狀態 var hd_saveState = $("#hd_state").val(); if (hd_saveState == "0") { //保存失敗 layer.open({ type: 1 , title: "提示" , content: "<div style='text-align:center;padding:20px;'>保存失敗！</div>" , area: ['300px', 'auto'] , btn: ['確定'] , yes: function (index, layero) { layer.close(index); } }); $("#hd_state").val("-1"); } else if (hd_saveState == "1") { //保存成功 layer.open({ type: 1 , title: "提示" , content: "<div style='text-align:center;padding:20px;'>保存成功！</div>" , area: ['300px', , 'auto'] , btn: ['確定'] , yes: function (index, layero) { layer.close(index); } }); $("#hd_state").val("-1"); } })(); }) </script>
檢索 事件 自刷新 封裝取值便捷思路：
<script> $(function () { $(".seach_wrap button").click(function () { //獲取姓名 var nameSearCh = $("#nameSearCh").val(); //獲取學歷 var EduSearch = $("#EduSearch").val(); //獲取簡歷授權 var enPowerSearch = $("#enPowerSearch").val(); //獲取簡歷狀態 var StateSearch = $("#StateSearch").val(); window.location.href = "/Yuan/Pages/talent/Resume_management.aspx?page=0" + getpram('searchText', nameSearCh) + getpram('edu', EduSearch) + getpram('empower', enPowerSearch) + getpram('state', StateSearch); function getpram(key, value) { var str = ""; if (value) { str = "&" + key + "=" + value; } return str; } }); }); </script>
可通過 getpram函數方便獲取要取得四個值對應得value 並返回重載的href中。
交互部分
做前端寫交互可謂家常便飯了，交互的步驟不多，但每次用起來都不一樣，只是換湯不換藥。但自己每次都被搞迷，接觸太少，一下是整理了 關閉或發行功能按鈕的交互程式碼：
//關閉或發行操作 $(".oprate_wrap button").click(function () { var thisText = $(this).text().trim(); var metaId = $(this).attr("data-mid"); if (thisText != "查看") { postOprate(metaId, thisText, $(this))； // postOprate 函數包含三個對象組成部分 如下： } }); /** * 根據metaId和操作類型 進行 智券的發行或者關閉 * @param metaId * @param oprateText */ function postOprate(metaId, oprateText, clickObj) { var data = { "mid": metaId, "state": oprateText } data = JSON.stringify(data); $.ajax({ type: "post", url: "/Yuan/Pages/talent/Coupon_management.aspx/Product_UpdateSate", //data: JSON.stringify(obj), data: "{ 'data': '" + data + "'}", dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { if (data.d) { var getDatas = data.d.split("*"); if (getDatas[0] == 0) { pop(getDatas[1]); } else if (getDatas[0] == 1) { pop(getDatas[1]); if (oprateText == "關閉") { clickObj.html("發行"); } else { clickObj.html("關閉"); } } } }, error: function (data) { console.log(data) pop(oprateText + "失敗！"); } }) }
