css 如何防止JavaScript中的变量泄漏?

oalqel3c  于 2023-05-08  发布在  Java
关注(0)|答案(1)|浏览(209)

这是我的JavaScript代码,我为我的网站中的每个页面创建了1个js文件。它是一个任务管理器,它保存,获取和显示网页中的数据,但保存的信息似乎泄漏到其他JS文件。
这是我的代码,我怎么可能包含这些变量,使他们不泄漏和任务显示到另一个网页?网站:https://dailytaskmanager-ss.netlify.app/

var myObj= { 
    textSelect: function(){
        document.getElementById('description').select();
    },

    hide: function() {
    document.getElementById("form").style.display = "none";
    document.getElementById("show").style.display = "inline-block";

},
    show:function(){

    document.getElementById("form").style.display = "block";
    document.getElementById("show").style.display = "none";
    document.getElementById('myDate').valueAsDate = new Date();
    },
    removeTask: function () {
    var id = this.getAttribute('id');
    var myTasks = returnToDo();
    myTasks.splice(id, 1);
    localStorage.setItem('myData', JSON.stringify(myTasks));
    document.getElementById('myTasks').innerHTML = '';
    showMyTasks();
    console.log('delete');

}
};
function returnToDo(){
    var myTasks = [];
    var myTasksTemp = localStorage.getItem('myData');
    if(myTasksTemp != null){
        myTasks = JSON.parse(myTasksTemp);
    }
    return myTasks;
}
function Task(){
    this.name = document.getElementById('name').value;
    this.subject = document.getElementById('subject').value;
    this.date = document.getElementById('myDate').value;
    this.describe = document.getElementById('description').value;
}
function newTask(x,y,z,o){
    document.getElementById('myTasks').innerHTML +=
        '<div class="col l3 m4 s12 animated zoomIn"> <h4>'+z+  ':</h1>'+
        '<p>'+y+'</p>' +
        '<p>By: '+x+'</p>' +
        '<p>Due: ' +o +'</p>'+
        '<div class="btn red" >Delete</div>'+
    '</div>'
}
function showMyTasks(){
    var myTasks = returnToDo();
    document.getElementById('myTasks').innerHTML = '';
    for(var i=0;i<myTasks.length;i++){
        newTask(
            myTasks[i].name,
            myTasks[i].describe,
            myTasks[i].subject,
            myTasks[i].date
        );
    }
    var button = document.getElementsByClassName('red');
    for (var j = 0; j < button.length; j++) {
        button[j].addEventListener('click', myObj.removeTask);
        console.log(button[j].addEventListener('click', myObj.removeTask));

    }
}
function submitInfo(){
    var myTasks = returnToDo();
    myTasks.push(new Task);
    localStorage.setItem('myData',JSON.stringify(myTasks));
    showMyTasks();
    myObj.hide();
}
showMyTasks();
xt0899hw

xt0899hw1#

这样它们就不会泄露,任务就不会显示在另一个网页上?
JavaScript程序(在<script>元素的上下文中)只存在于元素所在的页面中,因此不会发生这种情况。
保存的信息似乎泄漏到其他JS文件。
为了避免在<script>元素中声明的变量与同一页面上另一个<script>元素中同名的变量发生冲突:不要使用全局变量。
或者(按我的偏好顺序):
1.使用<script type="module"将脚本设置为module
1.将脚本 Package 在block中,并使用constlet而不是var
1.将代码 Package 在IIFE
避免implicit globals。在strict mode中运行脚本是值得的,它会将它们转换为错误,使它们更容易检测。模块自动以严格模式运行。

相关问题