requireJS的简单运用

最新推荐文章于 2024-05-03 11:08:18 发布

足迹_念过

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量295

点赞数

分类专栏： javascript 文章标签： requirejs javascript js模块化

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

</pre>app.js  这个是作为requirejs的人口js，即在对应的html页面中有<pre name="code" class="html"><script data-main="js/app" src="js/lib/require.js"></script>

其中app的后缀js可以省略，非AMD格式的使用shim加载，其后为为其依赖项，其代码如下

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app"
    },
    "shim": {
        "jquery.alpha": ["jquery"],
        "jquery.beta": ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

main.js 是将由非AMD格式的js文件重新以AMD进行加载，代码如下：

define(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

jquery.alpha.js 加载的js

$.fn.alpha = function() {
    return this.append('<p>Alpha is Go!</p>');
};

jquery.beta.js 加载的js

$.fn.beta = function() {
    return this.append('<p>Beta is Go!</p>');
};

app.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery+RequireJS Sample Page</title>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>jQuery+RequireJS Sample Page</h1>
        <p>Look at source or inspect the DOM to see how it works.</p>
    </body>
</html>

目录结构如下图：

足迹_念过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
requireJS的简单运用

app.jsrequirejs.config({ "baseUrl": "js/lib", "paths": { "app": "../app" }, "shim": { "jquery.alpha": ["jquery"], "jquery.beta": ["jquery"] }});// Load the
复制链接

扫一扫