Fatal编程技术网
  • html/
  • Html 如何为整个项目加载外部JS库

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

html

Html 如何为整个项目加载外部JS库,html,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, initia

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

<!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>


启动模板
这是一个测试

window.jQuery | | document.write（“”）
这包括jQuery、Bootstrap、font-awesome和我的个人样式表，如您所见

问题：如果有人转到我网站的另一个页面，例如：/profileSettings.html，该怎么办

我必须重新加载所有库吗

很抱歉，如果这是一个简单的问题，但我是一个全新的前端开发

提前感谢

每一页都完全独立于其他每一页

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

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

你必须在每个页面中包含Script，因为即使它是一个网站，每个页面都是独立工作的。您只需要一个
标签。

是的，如果您将每一页看作单独的页面。你需要把它包括在每一页中

但是如果您有母版页，那么我们可以从母版页继承相同的内容，因此无需再次添加代码/脚本

很酷的选择。

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

示例

var设备={
设备类型：'桌面'，
//要加载到母版页中的脚本
通用脚本：[
“/SiteAssets/Bar.js”，
],
//要加载到母版页中的CSS
常见的CSS：[
“/SiteAssets/nav.css”，
],
//获取设备类型
获取设备类型：函数（）{
var Getdevice=detect.parse（navigator.userAgent）；
if（Getdevice.device.type！=null）{
Device.Device\u Type=Getdevice.Device.Type；
设备.处理设备文件（设备.设备类型）；
Device.Process_Common_Files（）；
Device.Process_Common_Scripts（）；
}否则{
console.log（“检测到的设备类型：+设备.设备类型”）
}
},
//加载基于设备的css文件
处理设备文件：功能（文件类型）{
File_Type=File_Type.toLowerCase（）；
$（'head'）。追加(
''
);
},
//加载要加载到母版页中的css文件
处理公共文件：函数（）{
_.each（Device.Common_CSS，function）（每个文件）{
Common.appendfile（“css”，每个文件）；
});
},
//删除以前加载的设备文件
删除设备文件：函数（）{
$（'link[title=“tab”]”）。删除（）；
$（'link[title=“Mobile”]'）。删除（）；
$（'link[title=“desktop”]”）。删除（）；
},
//加载要加载到母版页中的脚本
进程\通用\脚本：函数（）{
_.each（设备、公用_脚本、函数（每个文件）{
Common.appendfile（“脚本”，每个文件）；
});
},
}
$（文档）.ready（函数（）{
console.log（'呈现基于设备的文件'）
设备。删除设备文件（）；
设备。获取设备类型（）；

});随着代码的增长，您将开始使用更复杂的框架，这些框架可能会使用MVC设置中的某些东西。其中一些框架允许您定义从单个HTML文件（比如索引文件）调用的多个“视图”（暂时将它们看作HTML文件）

对于那些了解AngularJS的人，我指的是编写AngularUI视图和
标记

这将允许您将依赖项放在单个文件中，而其他页面仅从该页面加载

更重要的是。
我很惊讶没有人提到使用
requirejs
或其他加载程序。
在javascript中有多个JS依赖项和多个控制器的情况下，它特别有用


当然可以查看加载程序，如
“其他页面”是一个单独的HTML文档，因此它需要嵌入这些外部资源本身。谢谢。但这不是很低效吗？这其实是我想的，但后来想“嘿，不可能是那样的”哈哈。但我会在所有页面上使用这些库。难道没有更好的方法吗？通过预处理模板生成HTML。JS连接。因此，如果我想在所有页面上使用Bootstrap/AngularJS，我需要在每个文件中调用它们？在AngularJS中，您可以包含包含所有javascript库的文件
ng include='externalLib.html'
谢谢，伙计！理解得很好