Javascript 如何在html标记行中调用require模块的一个方法

我必须在html标记行中调用require模块。而且它是不推荐的。我认为在动态生成html标记时需要它

需要模块：

define('index',['jquery','common','stat'],function($,common,stat){
return{
    rankList:function(name){
        stat.ranklist(name,function(data){
            console.log('invoked...');

        });
    }
}

}))

html标记行：

  <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#task" data-toggle="tab" onclick="rankListCall.rank('asCount')"><em><strong>任务量大咖</strong></em></a></li>
                <li><a href="#income" data-toggle="tab" onclick="rankListCall.rank('totalAmount')"><em><strong>收入大咖</strong></em></a></li>
                <li><a href="#right" data-toggle="tab" onclick="rankListCall.rank('accurateRate')"><em><strong>准确大咖</strong></em></a></li>
            </ul>

---

大多数require模块不会将其对象导出到全局名称空间（jQuery是一个臭名昭著的例外，但我们假设它不是）。因此，您应该尝试在require调用中处理您的函数和行为。无论您导出和包含多少内容，DOM都无法“查看”您的函数，除非您将它们导出为（例如）

window.rankList

，但这就像违背了require的目的

我要做的就是访问dom和stat函数

define(['jquery','common','stat'],function(jQuery,common,stat){

    jQuery(document).on('click','.rankListCall',function() {
        var name=jQuery(this).data('name');
        stat.ranklist(name,function(data){
            console.log('invoked...',name,data);
        });
    });
});

和你的html代码

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#task" data-toggle="tab" class="rankListCall" data-name="asCount"><em><strong>任务量大咖</strong></em></a></li>
    <li><a href="#income" data-toggle="tab" class="rankListCall" data-name="totalAmount"><em><strong>收入大咖</strong></em></a></li>
    <li><a href="#right" data-toggle="tab" class="rankListCall" data-name="accurateRate"><em><strong>准确大咖</strong></em></a></li>
</ul>

---

不要尝试将函数导出到全局名称空间，而是尝试将逻辑与DOM分开。这样，您就可以处理require部分中的函数和行为。在本例中，我向元素添加了一个类和一个数据属性，以允许jQuery在元素上委托事件。

我不知道正确的方法，但这可能是可能的

onclick=somefunction（）

&

function somefunction（）{index.rankList（name）}

发生了相同的错误。我尝试用这种方法编写。没有问题，但我认为这是不明智的。函数秩（名）{require（['index']，函数（index）{index.rankList（名）；}

Uncaught TypeError: undefined is not a function 

define(['jquery','common','stat'],function(jQuery,common,stat){

    jQuery(document).on('click','.rankListCall',function() {
        var name=jQuery(this).data('name');
        stat.ranklist(name,function(data){
            console.log('invoked...',name,data);
        });
    });
});

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#task" data-toggle="tab" class="rankListCall" data-name="asCount"><em><strong>任务量大咖</strong></em></a></li>
    <li><a href="#income" data-toggle="tab" class="rankListCall" data-name="totalAmount"><em><strong>收入大咖</strong></em></a></li>
    <li><a href="#right" data-toggle="tab" class="rankListCall" data-name="accurateRate"><em><strong>准确大咖</strong></em></a></li>
</ul>