Question

对不起代码墙。我试图尽可能地简化它。我的控制台输出位于底部。我有一个两个视图页面。为了促进代码模块化，我的页面结构如下：

<html>
    <head>
        <script src="js/jquery.js"></script>
        <script src="js/view1.js"></script>
        <script src="js/view2.js"></script>
        <script src="js/main.js"></script>

        <style>
            #view2 { display: none; }
            #view3 { display: none; }
        </style>
    </head>
    <body>
        <div id="view1" class="box">
            <div>View1</div>
            <button class="btn-show2">View2</button>
            <button class="btn-show3">View3</button>
            <button class="btn-echo">Echo Val</button>
        </div>
        <div id="view2" class="box">
            <div>View2</div>
            <button class="btn-back">Back</button>
            <button class="btn-echo">Echo Val</button>  
        </div>
        <div id="display-out"></div>
     </body>
</html>

现在每个＆＃34;查看＆＃34;拥有它自己的相关JS文件，如下所示。例如view1.js是：

$(document).ready(function(e) {
    $("#view1 .btn-show2").click(function(e) {
        showContainer("view2");
    });

    handlers['btn-echo']['view1'] = function(params) {
        $("#display-out").html("View1 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random());
    };

    init['view1'] = function(params) {
        console.log('view1 init routine.  Active View is ' + active_view);
    };

    destroy['view1'] = function(params) {
        console.log('view1 destroy routine.  Clean up view 1');
    };  
});

和view2.js是：

$(document).ready(function(e) {
    $("#view2 .btn-back").click(function(e) {
        showContainer("view1");
    });

    handlers['btn-echo']['view2'] = function(params) {
        $("#display-out").html("View2 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random());
    };

    init['view2'] = function(params) {
        console.log('view2 init routine.  Active View is ' + active_view);
    };

    destroy['view2'] = function(params) {
        console.log('view2 destroy routine.  Clean up view 2');
    };  
});

最后，main.js具有以下结构：

    var active_view = null;
    var handlers = [];
    var init = [];
    var destroy = [];

    $(document).ready(function(e) {
        active_view = "view1";
        init['view1']();
    });

    handlers['btn-echo'] = [];
    $(document).on('click', '.btn-echo', function(e) {
        console.log("In initial click delegatorm active_view is " + active_view + "!!");
        if(handlers['btn-echo'] != null && typeof handlers['btn-echo'][active_view] == "function") {
            handlers['btn-echo'][active_view]("LOL");
        }
    });

    function showContainer(container_id, data) {
        $("body .box").each(function(e) {
            var id = $(this).attr('id');
            if(id == container_id) {
                active_view = container_id;
                console.log("In showContainer, active_view is now " + active_view + "!!");
                if(typeof init[id] == "function"){
                    init[id]("");
                }
                $(this).slideDown();

            }else{
                if(active_view = id && typeof destroy[id] == "function") {
                    destroy[id]();
                }
                $(this).slideUp();
            }
        });
    }

正如您所看到的，当视图更改时，全局active_view会更改（来自showContainer）。但是，这是以下控制台输出：

view1 init routine.  Active View is view1 view1.js:11 //Start on view1
In initial click delegatorm active_view is view1!! test.html:45 //Click Echo
view1 destroy routine.  Clean up view 1 view1.js:15 //Click switch to view2
In showContainer, active_view is now view2!! test.html:56
view2 init routine.  Active View is view2 view2.js:11
In initial click delegatorm active_view is false!! //Click echo again

这里发生了什么？为什么active_view会变错？

Answer 1

通过查看CSS，您有3个容器.box。所以它意味着在你的循环showContainer中，你将有3次迭代。

现在，您将进入视图＃2，但最后一次迭代在＃3上。现在让我们看看会发生什么（我们跳过第一次迭代）：

//Loop 2
var id = $(this).attr('id'); //id = 'view2'
if(id == container_id) // 'view2' == 'view2' : true
    active_view = container_id; active_view = 'view2'

//Loop 3
var id = $(this).attr('id'); //id = 'view3'
if(id == container_id) // 'view3' == 'view2' : false
else
    if(active_view = id && typeof destroy[id] == "function") // Your probleme is here

你知道，这里有一个拼写错误，它应该是active_view == ...。现在您要为active_view

指定一个值

一步一步做什么：

active_view = id && typeof destroy[id] == "function"; //Step 1
active_view = 'view3' && typeof destroy[id] == "function"; //Step 2
active_view = true && typeof destroy[id] == "function"; //Step 3; Since left side is true, interpret right side
active_view = typeof destroy[id] == "function"; //Step 4
active_view = typeof destroy['view3'] == "function"; //Step 5
active_view = false; //Step 6; Since the result in your log is false, I suppose destroy['view3'] is not a function

切换视图时为什么我的变量未定义？

1 个答案: