如何优化自己的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 + "失败！"); } }) }
