Question

我开发了一个包含多个JS脚本的多个页面的JQuery项目，但事情变得难以管理，我在数千行代码中迷失了方向。所以我要清理和重构整个结构，我想用REquire JS组织这个项目。

基本上所有页面都取决于jquery.js, bootstrap.js, app.js

并且每个页面都依赖于其他细节脚本（moment.js等...）

让我们说我有这样的结构：

/
    header.html (all the CSS files etc..)
    footer.html (the global app.js file and other scripts : jquery / bootstrap etc...)
    page1.html (depends on app.js 
    page2.html
    page3.html
    page4.html
    page5.html 

    js /
        app.js
        require.js

        libs /
            jquery.js
            bootstrap.js
            moment.js
            knob.js
            fileuploader.js

        pages /
            page1.js (depends on JQuery and bootstrap and moment.js)
            page2.js (depends on JQuery and bootstrap and knob.js)
            page3.js (depends on JQuery and bootstrap and fileuploader.js)
            etc...

with header.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="//static.app.com/css/bootstrap.css" rel="stylesheet">
    <link href="//static.app.com/css/bootstrap-select.css" rel="stylesheet">
    <link href="//static.app.com/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="//static.app.com/css/font-awesome.css" rel="stylesheet">
    <link href="//static.app.com/css/style.css" rel="stylesheet">
</head>
<body>
    ....

和footer.html：

    ....
    <!--<script src="//static.app.com/js/jquery.min.js"></script> 
    <script src="//static.app.com/js/bootstrap.min.js"></script>-->
    <script data-main="//static.app.com/js/app.js" src="//static.app.com/js/require.js"></script>
    <!--<script src="//static.app.com/js/require.js"></script>
    <script src="//static.app.com/js/app.js"></script>
    <script src="//static.app.com/js/logic.js"></script>-->
</body>

以及每个page.html：

{{> header}}
     <div></div>
     ....
{{> footer}}

所以我想要实现的是我只动态加载每页所需的内容，因此我不必在footer.html中包含所有内容。

我开始阅读有关要求的内容，似乎它符合这种情况，但我在所有文档中都迷失了......

这是我到目前为止所做的：

require.config({
    paths: {
        "jquery": "libs/jquery.min",
        "bootstrap": "libs/bootstrap.min"
    },
    shim: {
        "jquery": {
            exports: "$"
         }, 
         "bootstrap": {
             deps: ["jquery"]
         }
    }
});
/*require(["jquery", "bootstrap"], function ($) {


});*/

function hello () {
    alert("hello");
}

但是我可以看到我放在paths上的所有脚本都被包含在内。

请问，请提供一个简单而简单的样本，说明我想用require.js实现的目标？感谢。

将Plain JQuery项目转换为Require JS项目

0 个答案: