Включить один и тот же скрипт с разными параметрами

Question

Я создал виджет, который клиент будет вставлять на свои сайты. Этот виджет содержит различные части, которые могут быть включены в любом месте сайта клиента. Я написал по сценарию, чтобы получить информацию от серверной части. Но для этого мне нужно передать разные параметры.

Так как я могу передать параметры в скрипт, чтобы я мог различить, если один и тот же скрипт включался несколько раз на одной странице.

* 1005 например *

    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 ):

Ваш-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