zoukankan      html  css  js  c++  java
  • 如何优化自己的JS代码

    尽管接触大大小小项目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 + "失败!");
                        }
                    })
                }


  • 相关阅读:
    【杭电】[2071]无限的路
    【杭电】[1161]Eddy's mistakes
    【杭电】[1859]最小长方形
    【杭电】[2083]简易版之最短距离
    【CodeForces】[614A]Link/Cut Tree
    【杭电】[2076]夹角有多大
    【杭电】[2055]An easy problem
    【杭电】[2036]改革春风吹满地
    【杭电 】[2040]亲和数
    【杭电】[2044]一只小蜜蜂...
  • 原文地址:https://www.cnblogs.com/yizhiduxiublog/p/12405645.html
Copyright © 2011-2022 走看看