Question

我创建了一个小部件，客户将其嵌入到他们的网站中。该小部件包含不同的部分，这些部分可以分别包含在客户站点中的任何位置。我已经写过脚本来从后端获取信息。但是为此，我必须传递不同的参数。

所以我如何将参数传递给脚本，以便可以区分同一脚本是否在同一页面中多次包含。

例如

    Widget 1
    <div>
        <span>...</span>
    </div>
    <script src="/xyz.js" key="8ea1878312fa3e199822366864b4a6fc" value="7"></script>

Or 
<script src="/xyz.js?value=7&key=8ea1878312fa3e199822366864b4a6fc"></script>


    Widget 2
    <div>
        <span>...</span>
    </div>
    <script src="/xyz.js" key="8ea1878312fa3e199822366864b4a6fc" value="10"></script>

Or 
<script src="/xyz.js?value=10&key=8ea1878312fa3e199822366864b4a6fc"></script>

预先感谢！

Answer 1

如果使用的是Jquery，则可以声明一个对象，该对象包含使用脚本的所有函数。然后在脚本中声明init()函数。在此功能中，应执行所有操作，这些操作将在页面上生成窗口小部件。

以下是示例（使用 Laravel ）：

your-script.js：

var myModule = {};

myModule.someAction = function (data, event) {
    var parameter = $(this).data('parameter');
    // code here
};

myModule.someAnotherAction = function (data, event) {
    // code here
};

myModule.init = function () {
    $('[data-mywidget]')on('click', myModule.someAction);
};

index.html：

<!-- Your script -->
    <script src="{{ asset('your-script.js') }}"></script>

<!-- Some markup here -->

<div data-mywidget data-parameter="{{ $my_dynamic_attribute }}">
<span>...</span>
</div>

<!-- Some markup here -->

<!-- Main script -->
<script>       
$(document).ready(function() {
    myModule.init();
});
</script

包含具有不同参数的相同脚本

1 个答案: