Javascript (jQuery) 模块/库加载答案

【问题标题】：Javascript (jQuery) module/library loadingJavascript (jQuery) 模块/库加载
【发布时间】：2012-10-17 08:03:24
【问题描述】：

许多人都知道，Google 提供了一个 API，您可以通过调用一个简单的函数来加载特定的模块/库：

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.7.1");
    google.load("jqueryui", "1.8.2");
</script>

我目前正在开发自己的代码库，我想轻松高效地在我的网站中分发这些代码库，我想不出比上述方法更好的方法。

但是，我不太确定为此编写代码的最佳方式是什么。显然我的库将是一个对象，所以会从这样开始（我想，如果我错了，请纠正我）：

function company(){
    this.load = function(modules){
        // Modules is an array of modules to load
        // Load the separate modules here
        // from external files in their minified format
    }
}

var company = new company;
company.load(['forms']);

上述方法是正确的方法吗？然后如何从单独的文件中加载模块？

【问题讨论】：

标签： javascript jquery ajax api sinemacula

【解决方案1】：

您可以使用CommonJS Module 规范。然后您可以使用RequireJS 加载它们。

【讨论】：

猜测该网站暂时关闭，但“commonJs”链接无效，Google 到其网站的链接也无效。不管怎样，我明白了，虽然我不太明白它是如何工作的。它不知道从哪里加载我的模块等。我可能需要查看他们的网站，所以此时无法真正发表评论
啊，我以为你在问“我如何编写/加载模块”的问题，而你也在问如何分发它们。如果您有一种机制来确保文件相对于每个站点的根目录位于同一位置，您可以configure RequireJS 指向例如/scripts/ 然后拨打require(["foo", "bar"])。
当 requireJS 插件可能包含数百行代码而实际上我可能不需要超过 50 行代码时，是否有任何意义？换句话说，requireJS 插件中会有很多我不会使用的功能，因此只会浪费资源，这反过来又会破坏我这样做的意义。我正在尝试单独加载这些模块，这样我就不会将它们全部保存在一个文件中，因此使用更少的资源:-)
好吧，杰夫说programmers are expensive，但欢迎您重新发明您需要的轮子部分：D
我在大多数情况下都同意，但在这里，似乎没有必要包含所有代码，而这样做的全部目的是减少所需的资源等:-)。我实际上需要知道的是动态加载 javascript 页面的最佳方式是什么。是否像在标题中放置一个脚本标签（通过 jQuery）一样简单？

【解决方案2】：

在四处寻找并从其他人那里获得经验后，我认为以下是最好的方法。 其他人可能不同意，请随时发表评论

/**
 * Sine Macula Javascript API
 * The Sine Macula API contains all base functions for use throughout
 * all websites
 * @name class.sinemacula.js
 * @author Ben Carey
 * @version 1.0
 * @date 25/10/2012
 * @copyright (c) 2012 Sine Macula Limited (sinemaculammviii.com)
 */

function SineMacula(){

    // Only proceed if jQuery has been loaded
    if(typeof jQuery=='undefined'){
        // jQuery has not been loaded
        console.log('jQuery has not been loaded');
    }else{

        /**
         * Sine Macula Load
         * Load the Sine Macula Libraries and Plugins
         * into the current document
         *
         * The options:
         * - package: the package of libraries to load
         * - packageURL: a remote source to load the package details from
         * - libraries: any additional libraries to load
         *
         * @param object options The options for the Sine Macula load
         */
        this.load = function(options){
            var url,query,script;
            // Set the defaults for the loader
            var options = $.extend({
                package:    'none', // Do not load any packages by default
                packageURL: false, // Do not retrieve the package details from a URL by default
                libraries:  [] // Do not load any libraries by default
            },options);
            // Build the query based on the parameters supplied
            if(options.packageURL){
                // Build the query to allow for a remote
                // package definition
                query = '?packageURL='+encodeURIComponent(options.packageURL);
            }else if(options.package=='none'){
                query = '?libraries='+encodeURIComponent(options.libraries.join());
            }else{
                query = encodeURIComponent(options.package)+'/?libraries='+encodeURIComponent(options.libraries.join());
            }
            // Complete the url by appending the query
            url = '//libraries.sinemaculammviii.com/'+query;
            // Append the script tag to the end of the document
            script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;
            $('head')[0].appendChild(script);
        }
    }
};

【讨论】：