js开发的小问题汇总（二）

最新推荐文章于 2025-08-11 19:52:03 发布

Monday_B

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Monday_B/article/details/53256531

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了前端开发中常见的几个问题及解决办法，包括为按钮绑定click事件的正确方式、处理全局变量与局部变量冲突的策略、动态生成HTML元素的具体实现细节、CSS中垂直居中的多种方法及其优缺点，以及Vue.js中作用域问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为button绑定click事件，button没有被点击也执行了

$("#button0").click(confirm());
function confirm(){
....
}

这样写的话即使button0没有被点击，confirm函数中的代码也会被执行到，应该改为

$("#button0").click(confirm);
function confirm(){
....
}

2.注意全局变量和局域变量，尽量不要重名
在全局中定义了leftList数组，在initLeftList(leftList){…}中形参与全局变量重名，而在initLeftList方法中我又想对全局变量leftList进行修改，如果直接

function initLeftList(leftList){
for(var i=0;i<leftList.length;i++){//操作对象是形参1
....
}
leftList = [];//想操作对象是全局变量实参2
}

initLeftList(leftList)//这里是全局变量3

这样写的话，2中操作的并不是全局变量leftList，而只是function中的形参，所以有两种方法，一种是2处改为 window.leftList = [];，一种是在function中的形参改名，避免混淆

function initLeftList(leftList0){
for(var i=0;i<leftList0.length;i++){//操作对象是形参1
....
}
leftList = [];//想操作对象是全局变量实参2
}

initLeftList(leftList)//这里是全局变量3

3.动态生成html元素，场景为，在list中点击某一行，在这行的下方将生成一行来显示详情，代码如下：

   var detailDiv;//detailDiv是全局变量，表示当前选中的行Id
   function showDetails(lineId,userid){//lineId表示当前点击的行Id
        if(detailDiv == undefined){ //当第一次点击
            getDetail(lineId,userid);
        }else{//已经有过点击对象
            if(lineId == detailDiv){//当点击行就是最后显示详情行
                $("#line"+ detailDiv).toggle();//toggle()方法，切换show/display状态
            }else{//当点击行不是最后显示详情行
                $("#line"+ detailDiv).hide();
                if(document.getElementById("line"+ lineId) == null){//当点击行从未被显示过
                    getDetail(lineId,userid);
                }else{//当点击行在之前有被显示过
                    $("#line"+ lineId).show();
                }
                detailDiv = lineId;//重置detailDiv为当前点击行id
            }
        }
    }

4 关于CSS的小东西：垂直居中
垂直居中通常方法是设置line-height为父div的height，但使用中有点小问题，偶尔会有小偏差，而修改line-height的值又不是特别准确；
方法二是vertical-align:center，这个也有小误差；
方法三，算是最笨的方法，但最为准确，也方便细微的调整，子div设置float:left，此时子div浮动到父div的左上角，然后通过margin来进行调整，可以准确到视觉想到的位置上
5 关于Vue js的小问题：作用域（在methods中用ajax传值）

    var a = new Vue({
        el:'#device',
        data:{
            userId:"",
            nickName:"",
            deviceType:""
        },
        methods:{
            search:function(){
                $.ajax({
                   ...
                    url: "..&userId="+ a.userId +..,
                    success: function (res) {
                        var data = eval("(" + res + ")");
                        if (data.status == 0) {
                            a.nickName = data.nickName;
                            a.deviceType = data.deviceInfo;
                        }
                        else{alert("信息获取失败！")};
                    }
                })
            }
        }
    })

其中用a.message来调用Vue js中的变量