Question

Require.js加载每个页面上的每个模块，因此我在不需要加载脚本的页面上收到JavaScript错误。具体来说，news-filter.js正在我的搜索页面上加载，并导致错误： jquery-1.12.3.min.js：2未捕获错误：语法错误，无法识别的表达式：＆＃34; li。＆＃34;来自news-filter.js中的这一行

 $("ul.mediaListing").children("li."+chosenYear).filter("."+chosenCategory).each(function(c) {

我是否遗漏了reqire.js如何确定每页需要哪些脚本？我的main.js文件是：

requirejs.config({

    baseUrl: [system-view:internal]"/render/file.act?path=/assets/scripts/"[/system-view:internal] [system-view:external]"/assets/scripts/"[/system-view:external], 

    paths: {
       "jquery": "libs/jquery/jquery-1.12.3.min",
        "velocity": "libs/velocity/velocity",
        "bgstretch": "plugins/background-stretch/background-stretch",
        "campus-map": "modules/campus-map",
        "velocity-ui": "libs/velocity/velocity.ui",
        "slick": "plugins/slick/slick",
        "iscroll": "plugins/iscroll/iscroll",
        "dotdotdot": "plugins/dotdotdot/jquery.dotdotdot.min.umd",
        "select": "plugins/select/select",
        "accordion": "modules/accordion",
        "news-filter": "modules/news-filter",
        "codebird": "modules/codebird",
        "social-feed": "modules/social-feed"
    },

    shim: {

        "slick": ["jquery"],
        "select": ["jquery"],
        "bgstretch": {
            deps: ["jquery"]
        },
        "accordion": ["jquery"],
        "codebird": ["jquery"],
        "social-feed": {
            dep: ["jquery", "codebird"],
            exports: "displayFeed"
        },
        "campus-map": {
            deps: [ "jquery" ]
        },
        "velocity": {
            deps: [ "jquery" ]
        },
        "velocity-ui": {
            deps: [ "velocity" ]
        }
        },
         map: {
            '*': {
                'jQuery': 'jquery'
            }
        }

});

requirejs(

    ['jquery', 'modules/utils', 'modules/custom.ui', 'libs/jquery/paginga.jquery', "modules/social-feed", "modules/news-filter"], 
    function ($, utils, ui, paga, social, news) {

        ui();    

        $(".paginate").paginga({
            // use default options
        });
});

Answer 1

我是否遗漏了reqire.js如何确定每页需要哪些脚本？

当然看起来像你。您显示具有此文件的main.js文件（重新格式化以帮助提高可读性）：

requirejs(['jquery', 'modules/utils', 'modules/custom.ui',
           'libs/jquery/paginga.jquery', "modules/social-feed",
           "modules/news-filter"],

如果您在所有页面上使用此main.js，那么您列出的所有模块都将被加载，这意味着将modules/news-filter加载到所有页面上。这是无论是否有任何代码实际使用它。

RequireJS的工作方式，加载require调用中列出的任何依赖项。对于加载的每个模块，还会加载它们在define调用中或在配置中为它们设置的shim中列出的任何依赖项。如果列出了某些内容但代码不使用实际，则无关紧要。

关于您的配置的切线评论。在您的paths中：

"news-filter": "modules/news-filter"

但是，您在modules/news-filter来电中将其称为require，而不是news-filters。您应该使用news-filter或删除您在paths中设置的映射。 RequireJS现在允许在同一个上下文中通过两个不同的模块名称引用相同的JavaScript文件。如果您将模块作为modules/news-filter加载到一个位置，将news-filter加载到其他位置，则会遇到问题。

如果您需要使用两个不同的名称来访问同一个JavaScript文件，请使用map。 map所做的是告诉RequireJS＆＃34;当您收到模块X的请求时，请加载模块Y而不是＃34;。因此，RequireJS用不同的模块替换所请求的模块名称。

Answer 2

我喜欢非常模块化的方法，而RequireJS有很多不同的使用方法。我将分享我通常如何设置它来完成您正在寻找的内容，简化并简化实施和理解。

我完全避免在主js中有任何需要。首先，我将创建一个包含基本require.js和我创建的名为config.js的JS文件的包。我将在我的布局页面中加载此捆绑包，以便它始终可用。如果您没有使用MVC，那么我们的想法就是确保Require和我的自定义配置文件始终一起加载并始终可用，以便为此做到所需。

Config.js非常简单，在你的情况下只需要你的代码，它将如下所示：

var require = {
 baseUrl: [system-view:internal]"/render/file.act?path=/assets/scripts/"
 [/system-view:internal] [system-view:external]"/assets/scripts/"[/system-
view:external], 

paths: {
   "jquery": "libs/jquery/jquery-1.12.3.min",
    "velocity": "libs/velocity/velocity",
    "bgstretch": "plugins/background-stretch/background-stretch",
    "campus-map": "modules/campus-map",
    "velocity-ui": "libs/velocity/velocity.ui",
    "slick": "plugins/slick/slick",
    "iscroll": "plugins/iscroll/iscroll",
    "dotdotdot": "plugins/dotdotdot/jquery.dotdotdot.min.umd",
    "select": "plugins/select/select",
    "accordion": "modules/accordion",
    "news-filter": "modules/news-filter",
    "codebird": "modules/codebird",
    "social-feed": "modules/social-feed"
},

shim: {

    "slick": ["jquery"],
    "select": ["jquery"],
    "bgstretch": {
        deps: ["jquery"]
    },
    "accordion": ["jquery"],
    "codebird": ["jquery"],
    "social-feed": {
        dep: ["jquery", "codebird"],
        exports: "displayFeed"
    },
    "campus-map": {
        deps: [ "jquery" ]
    },
    "velocity": {
        deps: [ "jquery" ]
    },
    "velocity-ui": {
        deps: [ "velocity" ]
    }
    },
     map: {
        '*': {
            'jQuery': 'jquery'
        }
    }
};

那就是它。我倾向于将与每个HTML页面相关联的所有javascript文件分开，因此在设置的路径部分中，我将拥有视图名称，然后在我的源中找到相应的javascript文件。然后在我的HTML页面中，当我添加脚本时，我只需说明

 <script> require(['sign-in']); </script>

这将获取我在视图的require变量中定义的脚本文件。然后在每个脚本文件中签名，例如对于这个，我将把所有的脚都包装在一个define语句中，所以在每个JS文件的顶部你可以清楚地看到你将加载和使用的依赖项。页。它很干净，它是一个框架，它工作得非常好，它可以防止你加载你不需要的东西。

在自包含的JS文件中，您可以这样做：

define(['jquery', 'lodash', 'bootstrap'], function ($, _) {
   //All JS code here
}):

我将拥有所有需要首先定义选择器的库，然后是其他所有库。这就是它，希望一个真实的例子可以帮助你。

RequireJS正在加载所有页面上不需要的脚本

2 个答案: