如何优化自己的JS代码

2021-04-11 22:27

阅读:458

标签:dash   utf-8   func   代码   步骤   入行   对象   har   else   

尽管接触大大小小项目N多个,但是刚入行两年,

撸码还是没有完全成一定的规律;最近受到很多启发,打算沉淀沉淀自己的代码;

之前很多页面的很多js脚本本分代码,更注重效果,事件久后没有发展 性能也是很关键的一部分;

之前接触的大多是网站微站门户app的项目,从某种角度来讲   一次(多次)成型后就上线了,不注重逻辑层是否真的合理,精简;

自从接触平台类型项目    结构层  、表示层、行为层的优化一个比一个重要。

逻辑层代码需要提高注意的地方——代码的封装及方法的兼容性。

一个非常简单的抽屉效果

修改之前粗糙的写法:

定义变量data_state能将需要做判断的属性保存到内存中,减少reflow回流     从而减轻CPU负担

同样的思路去写  信息是否保存成功的案例

" , 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: "
保存成功!
" , area: [‘300px‘, , ‘auto‘] , btn: [‘确定‘] , yes: function (index, layero) { layer.close(index); } }); $("#hd_state").val("-1"); } })(); })

  检索  事件   自刷新  封装取值便捷思路:

可通过   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 + "失败!");
                    }
                })
            }


如何优化自己的JS代码

标签:dash   utf-8   func   代码   步骤   入行   对象   har   else   

原文地址:https://www.cnblogs.com/yizhiduxiublog/p/12405645.html


评论


亲,登录后才可以留言!