Использование модулей JavaScript во внешних файлах

Question

У меня есть скелет модуля, который добавляет запись в базу данных одним нажатием кнопки.

var Person = (function() { 
    var ajaxOpts = { 
     type: "POST", 
     url: "", 
     contentType: "application/json", 
     dataType: "json", 
     success: function() { }, 
     error: function() { }, 
     data: {} 
    } 
    function insert(data) { 
     ajaxOpts.url = "../Service.asmx/InsertPerson"; 
     ajaxOpts.data = JSON.stringify(data); 
     ajaxOpts.error = function (xhr) { 
      console.log(xhr.status); 

     }; 
     ajaxOpts.success = function (data) { 
      console.log('record successfully added'); 
      console.log(data.d); 

     } 
     $.ajax(ajaxOpts); 
    }; 
    return { 
     insert: insert 
    } 
}()); 

и я называю это с моей веб-страницы, как:

$(document).ready(function() { 
      $('#btnSubmit').click(function() { 
       var data = { 
        personId: $('#personId').val(), 
        firstName: $('#firstName').val(), 
        lastName: $('#lastName').val() 
       }; 
       Person.insert(data); 
      }); 
     }); 

Как я могу изменить этот код, чтобы убедиться, что $ является объектом JQuery, а не другая библиотека?

Answer 1

Для плагинов вы обычно обернуть код в IIFE и карту jQuery к $. Вы могли бы сделать то же самое для вашего модуля (вы даже уже IIFE):

var Person = (function($) { 
    // ... 
}(jQuery)); 

Для document.ready обратных вызовов, ссылка на Jquery передается функции обратного вызова:

jQuery(document).ready(function($) { 
    // ... 
}); 

Просто убедитесь, что вы используют jQuery вне функций.

Answer 2

Как о замене кода на главной странице, как это:

(function($) { 
    $('#btnSubmit').click(function() { 
     var data = { 
      personId: $('#personId').val(), 
      firstName: $('#firstName').val(), 
      lastName: $('#lastName').val() 
     }; 
     Person.insert(data); 
    }); 
}(jQuery));