首页
学习
活动
专区
工具
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.1K30

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

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

29120

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

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

11.1K20

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

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

2.1K20

Web 应用开发进化论

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

4.2K10

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

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

2K10

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.2K60

React Server Components手把手教学

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

63430

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

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

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

94030

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

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

3.6K40

HTML5 CSS3

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

3.4K40

为什么 RSC 才是正确答案?

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

22210

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

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

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

2.5K50

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

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

2.8K10

HTML 渲染那些事儿

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

1.4K30

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

虽然网页设计是网站的外观,但前端开发是将该设计的页面通过代码的形式在网络上进行展现,加入一些功能特效 !使之具有一定的交互性! 什么是前端开发人员?...前端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 树可用。)

30220
领券