requirejs在jQuery中使用详解

时间：2025-01-15 07:23:12
1.充分利用requirejs模块化工具优化代码，强烈的建议将html内联脚本放入到外部的js文件中通过requirejs来引用。
<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells  to load
             scripts/ after  loads. -->
        <script data-main="scripts/main" src="scripts/"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

data-main属性告诉在加载完后加载文件。在文件中你使用requirejs可以加载你需要运行的任何js文件，因为指定数据的data-main加载数据是异步加载的。

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/ is loaded.
    //If  calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

jQuery注册他自己为全局变量“$”、“jQuery”，甚至当它侦测到AMD/RequireJs,AMD不建议使用全局功能，但是关闭这些jQuery全局功能取决于是否有非AMD代码依赖于它，jQuery有一个支持释放全局变量的控制，可以自动在你的支持任何功能，我们将在后面看到。

2.模块名

jQuery定义了命名的模块jquery(全部小写)，当它检测到AMD / requirejs。为了减少混乱，我们建议使用”jquery”作为你的模块名称。
例如：

({
    baseUrl: 'js/lib',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9., relative to
        // the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

另一种（推荐）解决方案是将文件命名为’’ ，把它放在baseUrl 目录上，然后不需要上面的路径条目。
可以根据默认ID将文件放置到路径约定中，从而避免大量的配置行baseUrl + moduleID + ‘.js’，下面的例子显示如何给第三方目录设置baseUrl 地址，代码库，并为您的应用程序代码使用一个额外的路径配置。

因此，重申一下，如果您用另一个模块名称引用jQuery，您可能会得到一个错误，像 ‘lib/jquery’，将不会成功。

    // THIS WILL NOT WORK
    define(['lib/jquery'], function ($) {...});

它不会工作，因为jquery将它注册为“jquery”,而不是lib/jquery,总的来说，明确命名模块在define()中的模块ID。

3.如何使用shim配置

下面的例子展示如何使用shim配置指定未使用define声明的插件依赖于jQuery的方法，这个例子是有用的如果你有一个现成的jQuery项目想去转换但是有不想将其修改为用define修饰。

require.config({
    "baseUrl":"/public/js",
    "paths": {
      "jquery": "jquery-1.11."
    },
    "shim": {
        'bootstrap/js/':{
            deps:['jquery'],
            exports:'bootstrap'
        },
        'layer/layer':{
            deps:['jquery'],
            exports:'layer'
        }
    }
});

define(['jquery','bootstrap/js/','layer/layer'],function($,bootstrap,layer){
    $(document).on('change', '#live_type', function(){
        loadAnchor();
    });
    var init = function(){
        loadAnchor();
    };
    return {
        init:init
    };
}); 

<script data-main="/public/js/main" src="/public/js/"></script>
<script type="text/javascript">
    require(['studio/list'],function(live){
        ();
    });
</script>

shim功能指定没有遵循AMD规范的插件即未使用define声明的插件，其中deps–指定依赖的模块ID,exports-指定模块的ID。

相关文章