开发者

How can change this Javascript to not use global variables?

I'm having some trouble working out how to control program flow and not use global variables with the Javascript in my web app. In this example, when get_notes() is called, the ids of the received notes are stored in the current_note_ids array. When add_to_discussion() is called, current_note_ids is sent as a parameter to the server request. How can I do this without having current_note_ids as a global variable?

<script type="text/javascript">
    var current_note_ids = [];

    function add_to_discussion(){
        $.post('/add_to_discussion',{cu开发者_C百科rrent_note_ids:current_note_ids});
    }

    function get_notes(){
        $.post('/get_note_combination',{}, function(data) {            
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        }
    }

    $(document).ready(function() {

        $('#add_to_discussion_button').click(function(){
            add_to_discussion();
            return false;
        });

        $('#get_notes_link').click(function(){
            get_notes();
            return false;
        });

    });

</script>


This removes all that code from the global scope using a closure

(function () {

    var current_note_ids = [];

    function add_to_discussion(){
        $.post('/add_to_discussion',{current_note_ids:current_note_ids});
    }

    function get_notes(){
        $.post('/get_note_combination',{}, function(data) {            
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        }
    }

    $(document).ready(function() {

        $('#add_to_discussion_button').click(function(){
            add_to_discussion();
            return false;
        });

        $('#get_notes_link').click(function(){
            get_notes();
            return false;
        });

    });

})();


You can use anonymous function to make it OO-like. In this case, you can choose what to "expose".

var notes = $(function() {
    var current_note_ids = [];

    function add_to_discussion() {
        $.post('/add_to_discussion', {
            current_note_ids: current_note_ids
        });
    }

    function get_notes() {
        $.post('/get_note_combination', {}, function(data) {
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        })
    }
    return {
        add_to_discussion: add_to_discussion,
        get_notes: get_notes
    };
})();

$(document).ready(function() {

    $('#add_to_discussion_button').click(function() {
        notes.add_to_discussion();
        return false;
    });

    $('#get_notes_link').click(function() {
        notes.get_notes();
        return false;
    });

});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜