Question

如何加载外部库以使其在整个项目中都可用？比如说我有以下内容：

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <!-- Font Awesome core CSS -->
    <link href="../public/css/font-awesome.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../public/css/style.css" rel="stylesheet">
</head>

<body>
    <p>This is a test</p>

    <!-- Bootstrap core JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../jsLib/bootstrap.js"></script>
  </body>
</html>

所以这包括你可以看到的jQuery，Bootstrap，font-awesome和我的个人样式表。

问题：例如，如果某人访问我网站中的其他网页，该怎么办：/profileSettings.html

我是否必须再次加载所有库？

很抱歉，如果这是一个简单的问题，但我对前端开发完全不熟悉。

提前致谢

Answer 1

随着代码规模的扩大，您将开始使用更复杂的框架，这些框架可能会使用MVC设置中的某些内容。其中一些框架允许您定义多个“视图”（将它们视为HTML文件现在），这些视图是从单个HTML文件（例如索引文件）调用的。

对于那些了解AngularJS的人，我指的是编写Angular UI视图和<ui-view>标记。

这将允许您将依赖项放在一个文件中，其他页面只是从此页面加载。

更重要的是。 我很惊讶没有人提到使用require-js或其他装载机。它在你有多个JS依赖项和javascript中的多个控制器的情况下特别有用。

绝对查看require-js

等加载程序

Answer 2

每个页面完全独立于其他每个页面。

如果您希望脚本在任何给定页面上运行，则必须将其显式加载到该页面中。

Answer 3

是。如果它是没有任何框架的普通文件，则必须在每个文件中包含所需的lib。

Answer 4

你必须在每个页面都包含scriipt，因为即使认为它是一个网站，每个页面都与另一个页面分开工作。您只需要一个<script></script>标记。

Answer 5

是的，如果您将每个页面看作单独的页面。您需要将其包含在每个页面中。

但是如果你有一个母版页，那么我们可以从母版页继承它，所以不需要再次添加代码/脚本。

很酷的选择。

为每个页面加载一个JavaScript文件（JS文件）。然后根据需要使用该JS文件加载所有JS文件。

示例

＆＃13;
＆＃13;
var Device = { Device_Type: 'Desktop', //Scripts to be loaded in master page Common_Scripts: [ '/SiteAssets/Bar.js', ], //CSS to be loaded in master page Common_CSS: [ '/SiteAssets/nav.css', ], //to get device type Get_Device_Type: function () { var Getdevice = detect.parse(navigator.userAgent); if (Getdevice.device.type != null) { Device.Device_Type = Getdevice.device.type; Device.Process_Device_Files(Device.Device_Type); Device.Process_Common_Files(); Device.Process_Common_Scripts(); } else { console.log("Detected Device type :" + Device.Device_Type) } }, //to load device based css files Process_Device_Files: function (File_Type) { File_Type = File_Type.toLowerCase(); $('head').append( '<link rel="stylesheet" title="' + File_Type + '" href="announcement.css">' ); }, //To load css files to be loaded in master page Process_Common_Files: function () { _.each(Device.Common_CSS, function (eachfile) { Common.appendfile("css", eachfile); }); }, //To remove previously loaded device files Remove_Device_Files: function () { $('link[title="tab"]').remove(); $('link[title="Mobile"]').remove(); $('link[title="desktop"]').remove(); }, //To load scripts to be loaded in master page Process_Common_Scripts: function () { _.each(Device.Common_Scripts, function (eachfile) { Common.appendfile("script", eachfile); }); }, } $(document).ready(function () { console.log('Render device based files') Device.Remove_Device_Files(); Device.Get_Device_Type(); });
＆＃13;
＆＃13;
＆＃13;

<强>用法

（将上面的代码复制到示例之后直到使用并将其粘贴到记事本中并将其保存为device.js。然后包含到页面中。然后将必要的JS添加到此代码中。示例文件已经在代码中）< / p>
//依赖关系 https://github.com/darcyclarke/Detect.js?files=1

如何为整个项目加载外部JS库

5 个答案: