首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在html页面中编写所有js代码,并将该html页面包含在另一个html页面中而不是.js文件中,这是一种好方法吗?

在HTML页面中编写所有的JS代码并将该HTML页面包含在另一个HTML页面中而不是.js文件中,这并不是一种好的方法。

尽管在某些情况下,将JS代码直接嵌入到HTML页面中可能会更加方便,但这种方法存在一些缺点和不推荐的原因:

  1. 可维护性差:将所有的JS代码直接嵌入到HTML页面中会导致代码的可读性和可维护性变差。当代码量增加时,难以管理和调试。
  2. 代码复用性差:将JS代码直接嵌入到HTML页面中会导致代码复用性差。如果多个页面需要使用相同的JS代码,就需要在每个页面中都进行重复编写,增加了工作量和代码冗余。
  3. 可扩展性差:将JS代码直接嵌入到HTML页面中会导致可扩展性差。如果需要在多个页面中使用相同的JS代码,当需要修改代码时,需要逐个页面进行修改,不便于统一管理和维护。

相反,推荐的做法是将JS代码单独放置在.js文件中,并通过<script>标签引入到HTML页面中。这样做有以下优势:

  1. 可维护性好:将JS代码与HTML页面分离,使得代码结构更加清晰,易于阅读和维护。可以通过编辑器或IDE提供的代码提示和自动补全功能提高开发效率。
  2. 代码复用性好:将JS代码放置在.js文件中,可以在多个页面中重复使用,提高代码复用性。当需要修改代码时,只需修改.js文件,所有引用该文件的页面都会自动更新。
  3. 可扩展性好:将JS代码放置在.js文件中,方便进行模块化开发和管理。可以根据需要引入不同的.js文件,实现按需加载和模块化开发,提高代码的可扩展性。

总结起来,将JS代码放置在.js文件中并通过<script>标签引入到HTML页面中是一种更好的方法,可以提高代码的可维护性、复用性和可扩展性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 HTML 中包含资源的新思路

只要我一直工作在 Web 上,就需要一种简单的 HTML 驱动方式,将另一个文件的内容直接包含在页面中。...通常我们通过使用 JavaScript 获取文件并将其内容附加到特定元素,或者通过在服务器端去包含文件来实现这种嵌入,但在大多数情况下,这些方法都不是我们想要的。...这是因为代码用 iframe 加载文件,并且在删除 iframe之前,用 onload 事件在 HTML 中 iframe 的位置之前注入了 iframe 里的内容。...:包含 HTML 文件 也许更有用……这是一个使用HTML而不是SVG的例子!...就目前而言,这种做法有希望成为之前将另一个文件直接包含在页面中方法的改进。 反馈 我们将会继续测试这种模式,如果我们发现了什么有趣的内容,会很快发布后续内容。

3.2K30

前沿 | 深度剖析现代 JavaScript 应用 — SitePoint

我们可以将该文件包含在另外一个文件中并且使用这些输出的函数。 或者我们也可以指定和只引入我们需要的: 这些例子摘录于 Babel website。...我们会把这个打包好的文件上传至服务器并且包含在 HTML 文件中。它将包含你引入的所有模块和它们必需的依赖。...虽然对动态网页来说,这是一个很大的进步,但它仍有其局限性;用户的每一步操作都要发送 HTML 片段或者整个页面是一种资源的浪费,尤其是从用户的角度来看。可用性仍然达不到桌面应用的响应速度。...因为页面最初在服务端渲染,所以搜索引擎可以正确的拿到索引。 部署 现代 JavaScript 应用中,编写的代码和部署到生产环境的代码是不一样的;你只部署构建过程生成的文件。...并且牢记,如果有时候在了解了全部可用选项之后,所有的一起都看起来还是混乱不堪;那就想想 KISS 准则,并且只用你认为你需要的而不是所有可用的。最终,解决问题才是最重要的,而不是使用最新的东西。

33120
  • 【译】开始学习React - 概览和演示教程

    静态HTML文件 第一种方法不是安装React的流行方法,也不是我们本教程其余部分的工作方式,但是如果你接触过jQuery之类的库,这将很熟悉并易于理解。...创建React App 我刚刚使用的是将JavaScript库加载到静态HTML页面中并动态渲染React和Babel的方法不是很有效,并很难维护。...保存文件后,你会注意到localhost:3000页面会自动编译并刷新数据。 继续并删除/src目录中的所有文件,我们将创建自己的样板文件,而不至于臃肿。...你会注意到,我们使用的是className而不是class。这是我们的第一个提示,此处编写的代码是JavaScript,而不是HTML。...此代码的新方面是componentDidMount(),这是一种React生命周期方法。生命周期是在React中调用方法的顺序。挂载mounting是指项目已经插入DOM中。

    11.2K20

    2020前端性能优化清单(三)

    现代浏览器会将脚本解释为 JavaScript 模块并按预期运行,而旧版浏览器则无法识别该属性并忽略该属性,因为该属性是未知的 HTML 语法。...tree-shaking[9] 是一种清理构建产物的方法,它让构建结果只包含在生产中实际使用的代码,并消除 Webpack 中未使用的引入。...请注意,Web Workers 无法访问 DOM,因为 DOM 不是“线程安全的”,并且执行的代码需要包含在单独的文件中。 26 能否将频繁执行的功能抽离到 WebAssembly?...基本上,通过告诉浏览器需要加载的内容使浏览器在长时间网络往返过程中不会被任何事情阻碍,这是最大化使用带宽的一种好方法。...显然,你可能会让浏览器获取不需要的数据并预加载不需要的页面,因此好的做法是对预加载的请求数量做好控制。比如预取在检查出来的脚本中经过确认的,或者在关键的动作调用进入可视区域时进行推测性预取。

    2.2K20

    2020前端性能优化清单(三)

    现代浏览器会将脚本解释为 JavaScript 模块并按预期运行,而旧版浏览器则无法识别该属性并忽略该属性,因为该属性是未知的 HTML 语法。...tree-shaking[9] 是一种清理构建产物的方法,它让构建结果只包含在生产中实际使用的代码,并消除 Webpack 中未使用的引入。...请注意,Web Workers 无法访问 DOM,因为 DOM 不是“线程安全的”,并且执行的代码需要包含在单独的文件中。 26 能否将频繁执行的功能抽离到 WebAssembly?...基本上,通过告诉浏览器需要加载的内容使浏览器在长时间网络往返过程中不会被任何事情阻碍,这是最大化使用带宽的一种好方法。...显然,你可能会让浏览器获取不需要的数据并预加载不需要的页面,因此好的做法是对预加载的请求数量做好控制。比如预取在检查出来的脚本中经过确认的,或者在关键的动作调用进入可视区域时进行推测性预取。

    2.1K10

    Web 应用开发进化论

    所有这些仍然是异步发生的。 现在,在创建博客文章后,如果博客文章的数据不是静态的,而是存储在数据库中的,服务器如何发送 HTML 文件呢?...然而,多页面应用并不是一个真正的术语,因为它是单页应用流行之前的默认设置。 代码拆分 我们了解到,SPA 默认以一个小的 HTML 文件和一个 JS 文件的形式提供。...这会影响 SPA 的用户体验,因为将 JavaScript 文件从 Web 服务器传输到浏览器的初始加载时间会增加。加载完所有文件后,用户可以从一个页面导航到另一个页面而不会中断。...代码拆分不需要像之前的场景那样在路由级别发生。例如,也可以将较大的 React 组件提取到其独立的 JavaScript 包中,以便它只会在实际使用它的页面上加载。...在当前页面,用户可以看到他们所有的博客文章,因此在加载此页面时需要获取所有这些博客文章。这些获取的文章在代码中会被保存为客户端内存中的状态。

    4.2K10

    「译」React 服务器组件 (RSCs) 的深入分析

    作为开发者,我们用 JavaScript 类作为组件编写应用,并使用 Webpack 这样的打包工具,将所有内容打包成一个经过良好编译和树摇(tree-shaken)的代码包,准备在生产环境中发布。...虽然 TTFB 本身不是核心网络指标,但它会影响这些指标。较差的 TTFB 会导致核心网络指标的恶化。SSR 的另一个缺点是,在客户端 React 完成对页面的水合作用之前,页面是无响应的。...这种方法仅重建必要部分而不是整个应用。我们在构建时静态生成页面的“初始版本”,但在用户访问后(服务器请求触发数据检查时),能重建包含过时数据的页面。...这是客户端组件如何被加载的方式。如果客户端组件是主包的一部分,它将被执行。如果不是(即懒加载),一个获取脚本被添加到主包中,当需要渲染时,该脚本将获取组件的 CSS 和 JavaScript 文件。...与此同时,Next.js 触发挂起的异步组件,并将它们格式化为 HTML 并包含在一个个流式传输到浏览器的 RSC 负载中,连同一个知道如何交换事物的 $RC 脚本。

    21510

    2018 年 Java,Web 和移动开发需要学习的 12 个框架

    在本文中,我分享了12个与Java开发、移动app开发、Web开发和大数据相关的有用框架。如果你认为还有值得Java和Web开发人员在2018年学习的好框架,那么请随时分享到评论中。...1)Angular 这是另一个JavaScript框架,也在我的2018年学习清单中。它提供了一个完全的客户端解决方案。你可以使用AngularJS在客户端创建动态网页。...由于它是一个JavaScript库,因此你可以使用script标签将其包含在HTML页面中。它使用指令(Directives)扩展HTML属性,并使用表达式将数据绑定到HTML。...使用Spring Boot编写基于Spring的Java应用程序就像使用main()方法编写核心Java应用程序一样简单。...12)Xamarin Xamarin是一种通过单一和共享C#代码库为所有平台快速制作移动应用程序,为每个平台构建自定义本地用户界面,或者使用Xamarin.Forms跨平台编写单个共享用户界面的方法。

    3.3K60

    React Server Components手把手教学

    ❝生活的乐趣取决于生活都本身,而不是取决于工作或地点 ❞ 大家好,我是「柒八九」。...如果想了解更多关于网络相关的东西,可以参考之前写的网络篇 ---- 在服务器组件出现之前,我们编写的所有 React 代码都是在客户端(浏览器)上进行渲染的。...在常规的开发中,我们只有在Node.js或Express中才会看到这种代码 然后我们查询数据库并获取数据,以便将其传递给我们的JSX进行渲染。...'; // 零捆绑包 function NoteWithMarkdown({text}) { // .... } ❝简而言之,如果我们在服务器组件内使用任何第三方库,该库将不会包含在客户端的捆绑包中...我们在这里是看不到page.tsx文件或CourseList.tsx文件信息。这是因为这些是「服务器组件,它们永远不会成为我们的客户端捆绑包的一部分」。

    85630

    高性能Javascript--脚本的无阻塞加载策略

    不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继续。...浏览器必须首先下载外部文件的代码,这要占用一些时间,然后 解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。   ...通过这种方法,就不再需要两个 标签(每个标签加载一个文件),一个标签就可以加载他们。这是在HTML页面包含多个外部Javascript的最佳方法。   ...保持Javascript文件短小,并限制http请求的数量,只是创建反应迅速的网页应用第一步。 但诸如大型网页有大量的Js代码,保持源码短小并不总是一种最佳选择。...另一个选择是直接将loadScript()函数嵌入在页面中,这可以减少一个http请求的开销。

    97330

    Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目

    使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。...,几乎所有需要手动编写的代码都在其中。...还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。...3.App.vue 上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。 .vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。...在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由

    1.1K30

    HTML5 CSS3

    js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案...13、解释jsonp的原理,以及为什么不是真正的ajax   Jsonp并不是一种数据格式,而json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,具体是通过动态创建script标签,...然后通过标签的src属性获取js文件中的js脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上使用的并不是ajax技术 14、什么是...答案:在js中,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非是一视同仁的,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问),至于函数表达式,则必须等到解析器执行到它所在的代码行...如何用原生JS实现Jq的ready方法? window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

    3.5K40

    浅谈移动端页面无刷新跳转问题的解决方案

    不流畅,因此不采用传统的页面跳转方式,看到不少手机网页开发的框架都都是在一个html文档中包涵多个页面的内容,每页放到不同的 里面。...它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。 一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。...在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称SPA,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面中,并通过...单页面是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。...对于性能低下带宽窄小的移动端而言这是个非常好的优化点,减少了页面重载和数据传输,提高用户体验。

    3.7K40

    为什么 RSC 才是正确答案?

    服务器负责呈现完整的 HTML,而不是发送依赖于客户端 JavaScript 来构建页面的几乎空的 HTML 文件。然后,这个完整的 HTML 文档将直接发送到浏览器。...由于 HTML 是在服务器上生成的,因此浏览器能够快速解析并显示它,从而缩短了初始页面加载时间。这是服务器端渲染的可视化:解决CSR的缺点服务器端方法有效地解决了与CSR相关的问题。...其次,浏览器可以立即加载页面 HTML 内容,而不是出现空白屏幕或加载微调框。水合 HydrationSSR 立即提高内容可见性的方法有其自身的复杂性,特别是在页面的交互性方面。...其次,当前的方法要求所有 React 组件在客户端进行水合作用,而不考虑它们对交互性的实际需求。...此过程可能会低效地消耗资源并延长加载时间和用户交互时间,因为他们的设备需要处理和呈现甚至可能不需要客户端交互的组件。这引出了另一个问题:所有组件都应该水合吗,即使是那些不需要交互性的组件?

    45310

    Jump Start Bootstrap 第1章

    但是你已经实现了这些功能,并且只要写一点HTML就能使用这个网站,这就是Bootstrap。所有必要的CSS类和JavaScript代码,都已经包含在Bootstrap包内。...它使用标准的HTML建立全部组件。使用Bootstrap,开发人员只需专注于编写适当的HTML,框架可以理解并渲染相应的标记。 CSS原型的需要 拥有一个好的CSS框架的主要原因是为了简化开发过程。...好的CSS框架的一些主要亮点包括: 更快的开发 组织和维护代码 让你把时间花在创新上,而不是重新发明轮子 Bootstrap的起源 在2011年,在Twitter工作的的一对网页开发者,Mark Otto...首先,我们在/css文件夹中创建一个名为app.css(或任何你想要的)的新文件。然后我们打开index.html并链接到新的CSS文件。...CSS文件中删除CSS样式。 如果您想要更改web页面中仅一个特定按钮的样式,而不是针对Bootstrap的选择器,请使用ID来应用CSS更改。

    3.5K40

    成为一名专业的前端开发人员,需要学习什么?

    虽然网页设计是网站的外观,但前端开发是将该设计的页面通过代码的形式在网络上进行展现,并加入一些功能特效 !使之具有一定的交互性! 什么是前端开发人员?...前端Web开发人员使用三种主要编码语言来编写由Web设计人员创建的网站和Web应用程序设计: HTML CSS JavaScript 他们编写的代码在用户的浏览器中运行(而不是后端开发人员,其代码在...jQuery不是必须从头开始编写所有代码,而是让前端Web开发人员为项目添加现成元素,然后根据需要进行自定义(知道JavaScript如此重要的一个原因)。...单元测试是测试单个源代码块的过程(指示网站应该如何工作的指令),单元测试框架提供了一种特定的方法和结构(每种编程语言都有不同的方法和结构)。...您可以编写测试,在执行操作后在页面上查找特定HTML等内容(例如,确保如果用户忘记填写所需的表单字段,则会弹出表单错误框)。

    1.3K20

    ​什么是 JavaScript?

    服务器端代码与客户端代码 这是一种普遍的 server-client 架构,在服务器上,由 PHP、Python、Ruby 等后端语言,输出一个 HTML 页面,由客户端主动请求,发送到客户端并在客户端浏览器上运行...内部 在页面内部直接使用 script 标签添加: // 在此编写 JS 代码 这和使用 style 标签在页面内添加样式代码是类似的: /...("DOMContentLoaded", function({ // JS代码 }); 另一种简单的,但通常不被采纳的作法是:将 js 文件放在页面底部标签前,这种方法是不可靠的,解析走到这里的时候...补充一条:使用 DOMContentLoaded 事件检测 DOM 树是否可用,是一个好习惯,但并不是在所有情况下都需要这样做。实现开发中,许多程序员懒惰,统一都是在.ready()中写起始代码的。...(注:.ready()是 jQuery 类库中的一个方法,代表页面 DOM 树可用。)

    33320

    HTML 渲染那些事儿

    但是,在笔者看来只有我们真正了解浏览器是如何将 HTML 渲染到页面上这一过程,在真正落地网页优化性能时才能做到所谓的心中有数,而不是人云亦云的添加一些优化参数或者属性。...HTML 中的 JavaScript 会阻塞页面的渲染吗? 网络上绝大多数文章都是片面的告诉你结论: JS 会阻塞页面渲染,不过结果真的是这样吗?...首先,在 HTML 加载 JavaScript 存在两种方式,一种为内敛脚本也就是直接将 JS 写在 HTML 中,另一个中称为外部资源,也就通过 script 脚本加载的外部资源。...Css 是否会阻塞页面渲染 无论是 Css 还是 Js 文件,都会存在两种模式一种是内联一种是外部脚本。...其实过多的关心 JS 而忽略 Css 文件恰恰会适得其反。绝大多数时候影响页面首屏渲染的时机恰恰是 css 文件在作祟。

    1.5K30

    干货 | 新时代的 SSR 框架破局者:qwik

    服务器端渲染 (SSR) 是一种在服务器中进行渲染 HTML 而不是由浏览器中执行 JS 获得网页(SPA)的技术。...这种方式并不是从服务端下发的 HTML 文件来进行渲染页面,相反而是通过浏览器获取到服务端下发 HTML 中的所有的 JS 文件后执行 JS 代码从而在客户端通过脚本进行页面渲染。...总而言之,hydration 其实是通过下载并重新执行 SSR/SSG 呈现的 HTML 中的所有 JS 脚本并执行来恢复组建中的事件处理程序。...而 qwik 提出的概念恰恰相反,获取完服务端下发的 HTML 页面后所有的交互效果实际上都是一种惰性创建的效果。...大多数同学看完上边的内容我相信也会存在“惰性加载脚本会影响用户交互体验吗”这样的疑问。 首先,qwik 中既然选择在触发用户行为时,再惰性加载并执行响应的 JS 脚本。

    2.7K50
    领券