从外部JS插件重载函数的正确语法

时间:2012-10-02 19:04:55

标签: javascript jquery debugging object syntax

我正在使用bootstrap datepicker plugin,我需要在插件末尾重载headTemplate对象。

看起来像这样:

var DPGlobal = {
        modes: [ ... ],
        isLeapYear: function ( year ) {
             [...]
        },
        [...]

        headTemplate: '<thead>'+
                        '<tr class="datepicker-btn-group">'+
                            '<th class="prev"><div class="dp-btn"><i class="timely-icon-arrow-left"/></div></th>'+
                            '<th colspan="5" class="switch"><div class="dp-btn"></div></th>'+
                            '<th class="next"><div class="dp-btn"><i class="timely-icon-arrow-right"/></div></th>'+
                        '</tr>'+
                    '</thead>',
       contTemplate: '<tbody><tr><td colspan="7" class="grid-picker"></td></tr></tbody>'
};

所以,诚然,我还在学习javascript,所以我试图解决为什么下面的代码不会做我想要的。

首先,我需要检查外部JS文件是否已加载且函数是否可用,我正在尝试使用带有回调的jQuery .load()方法。我在document目标时遇到一些参考错误,我对这方面的最佳做法感到困惑 - 我真的只想说

$( 'lib/bootstrap-datepicker/js/bootstrap-datepicker.js' ).load( function() {
 // overwrite/load function 
}); 

但是这会引发一堆目标/引用错误,所以相反,我正在尝试以下内容,因为jQuery文档表明我需要传递我正在检查的脚本作为调用{的第一个参数{1}}功能而不是目标。这经常让我感到困惑 - 当我想要执行某种全局的函数并且不引用任何特定的函数时(因为.load()引用尝试),在jQuery中引用的东西。

document

最后一件事(对于每个人都是抱怨),是因为我不了解headTemplate最初是如何通过冒号声明的:

$( document ).load( 'lib/bootstrap-datepicker/js/bootstrap-datepicker.js', function() {
    origDPGlobal.headTemplate = DPGlobal.headTemplate;
            DPGlobal.headTemplate = // 'string of HTML for new template';
});

我是否需要将这些重新声明为数组中的原型对象,如下所示?

var DPGlobal = {
    [...],
    headTemplate: '// html string',
    contTemplate: '//html string'
};

非常感谢帮助新手!

1 个答案:

答案 0 :(得分:1)

夫妻俩:

首先,load用于将文件的内容加载到元素中。您正在寻找getScript http://docs.jquery.com/Ajax/jQuery.getScript

其次,以下内容相同(只是创建对象):

//one way to build an object
var DPGlobal = {
    headTemplate: '// html string',
    contTemplate: '//html string'
};

//another way to build the same object
var DPGlobal = {};
DPGlobal.headTemplate = 'html string';
DPGlobal.contTemplate = 'html string';

你知道,花括号方法最初只是在对象上设置属性,就像你以后分配它们一样。

第三,您对如何覆盖模板的猜测很接近。如果引用方括号中的属性,则需要使用字符串:

//your way
DPGlobal['headTemplate'] = '// new html string';
DPGlobal['contTemplate'] = '// new html string';

//same as
DPGlobal.headTemplate = '// new html string';
DPGlobal.contTemplate = '// new html string';