有些JS为什么不可以单独放在一个js文件里面

最新推荐文章于 2023-11-16 15:15:14 发布
转载 最新推荐文章于 2023-11-16 15:15:14 发布 · 1.5k 阅读 · 0



有些JS为什么不可以单独放在一个js文件里面

2012-08-07 16:43 583922227  |  浏览 1428 次
  Javascript编程语言 
<script language="javascript"> 
function slide(types,id,nums,class1,class2) {
  for(i=1;i<=nums;i++) {
    document.getElementById(types + i).className=class2;
    document.getElementById("_"+types+i).style.display="none";
  }
    document.getElementById(types+id).className=class1;
    document.getElementById("_"+types+id).style.display="block";
}
</script>
专业回答
奔跑吧，芝麻！ 团队    多啦不会梦
2015-11-07 18:36

JavaScript一般都可以将不同的function放入同一个JavaScript文件中，只是再放入过程中不要把<script language="javascript">  </script>也加进去。这句话是指在HTML页面识别JS代码的标签，在JS文件中不用加标签。

JavaScript一般都可以将不同的function放入同一个JavaScript文件中，但是会有一些个例会导致运行不起来，如下就是运行不起来的大致原因：

  1. 在JavaScript文件中加入了在HTML页面中加载的标签：<script language="javascript">  </script>。需要将标签取消之后才可以用之中的JS内容。

  2.  在JavaScript文件中拥有重名的function内容，这样的话JS就无法分辨客户端调用的是哪一个了。

  3. 在JavaScript文件中同样会有JQuery代码，这样的话客户端就会先加载JQuery，后加载JS，导致JS运行出错。

本回答由 电脑网络分类达人 赵康勇认证

为您推荐：

2012-08-08 09:18 提问者采纳 
能放，不过放进去的时间，要把
<script language="javascript"> 与 </script> 去的掉
 
<script language="javascript"> 与 </script> 用在用html文件中区分js代码的标记，直接用js文件话，就不要用了，用了，反而错了。
追问： 
这个肯定却掉了，可能是放还有另外一个函数里面，他也有获取id的语句应该覆盖了吧
，单独放一个js文件就可以了
追答： 
又看了一下你写的语句，理解你是想做成tab交换显示的效果，呵呵，其实你的办法太过于沉旧了，好几年前都不用这种办法了^o^，现在都用jquery来实现tab效果了。不过你用的办法是对的。js调试要学会用firebug。
提问者评价 
谢谢，可以加你为好友么，我的qq583922227

有些JS为什么不可以单独放在一个js文件里面

2012-08-07 16:43 583922227  |  浏览 1428 次
  Javascript编程语言 
<script language="javascript"> 
function slide(types,id,nums,class1,class2) {
  for(i=1;i<=nums;i++) {
    document.getElementById(types + i).className=class2;
    document.getElementById("_"+types+i).style.display="none";
  }
    document.getElementById(types+id).className=class1;
    document.getElementById("_"+types+id).style.display="block";
}
</script>
专业回答
奔跑吧，芝麻！ 团队    多啦不会梦
2015-11-07 18:36

JavaScript一般都可以将不同的function放入同一个JavaScript文件中，只是再放入过程中不要把<script language="javascript">  </script>也加进去。这句话是指在HTML页面识别JS代码的标签，在JS文件中不用加标签。

JavaScript一般都可以将不同的function放入同一个JavaScript文件中，但是会有一些个例会导致运行不起来，如下就是运行不起来的大致原因：

  1. 在JavaScript文件中加入了在HTML页面中加载的标签：<script language="javascript">  </script>。需要将标签取消之后才可以用之中的JS内容。

  2.  在JavaScript文件中拥有重名的function内容，这样的话JS就无法分辨客户端调用的是哪一个了。

  3. 在JavaScript文件中同样会有JQuery代码，这样的话客户端就会先加载JQuery，后加载JS，导致JS运行出错。

本回答由 电脑网络分类达人 赵康勇认证

为您推荐：

2012-08-08 09:18 提问者采纳 
能放，不过放进去的时间，要把
<script language="javascript"> 与 </script> 去的掉
 
<script language="javascript"> 与 </script> 用在用html文件中区分js代码的标记，直接用js文件话，就不要用了，用了，反而错了。
追问： 
这个肯定却掉了，可能是放还有另外一个函数里面，他也有获取id的语句应该覆盖了吧
，单独放一个js文件就可以了
追答： 
又看了一下你写的语句，理解你是想做成tab交换显示的效果，呵呵，其实你的办法太过于沉旧了，好几年前都不用这种办法了^o^，现在都用jquery来实现tab效果了。不过你用的办法是对的。js调试要学会用firebug。
提问者评价 
谢谢，可以加你为好友么，我的qq583922227
如何将多个JS文件打包成一个JS文件？
MarinaTsang的博客
11-28 1915
上一篇已经记录了如何开发一个小游戏聚合SDK，既然是SDK，最终都是给外部人员使用的。调研了一下市面上的前端SDK，最终都是编译成一个 js 文件。我猜理由大概是 js 文件之间的调用都是需要网络加载的，所有内容都在一个文件里避免出现加载慢等问题。
FiddleCrawler:一个爬虫程序，用于将小提琴数据导出为单独的 js css html 和来自小提琴 URL 或小提琴 URL 数组的详细信息文件
05-29
提琴爬行者 要运行该程序，您必须首先安装 node js 和 phantomjs。 我假设您已经知道如何安装 node js 和 ... 下载任何 1.4+ 版本的 jQuery，将其命名为“jquery.js”，并将其与 FiddleCrawler.js 一起放在根文件夹中
单独js文件开头怎么写,javascript文件怎么运行
神经网络爱好者
11-16 1210
大家好，本文将围绕javascript文件的创建与引用方法展开说明，单独存放js程序的文件扩展名是一个很多人都想弄明白的事情，想搞清楚单独js文件开头怎么写需要先了解以下几个事情。JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器中的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。特点：1、弱语言 2、区分大小写3、面向对象 4、跨平台。
在页面中写js代码和引入单独的js文件的区别
iteye_15023的博客
07-09 1666
引入单独的js文件可以降低网络传输量，提高代码复用性，便于维护和管理。 例如：一个网站可能有很多页面需要引用某个javaScript函数，如果这个函数直接写在页面中，那每次加载页面时都将重复下载这部分代码。若引用单独的js文件，客户端第一次引用这个函数时就会下载js文件，后面再用直接引用本地缓存的js文件就行了。 若需要修改某一函数，而这个函数在好多页面都用，偏偏又是都将代码写在了页面中...
Js代码单独放一个文件里元素注册的事件无效
qq_34332010的博客
10-23 2412
jQuery库文件是在body元素之前加载的，但要操作dom元素必须等待dom元素加载完成后才能对dom操作。页面加载过程有两个事件： ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件，常用于jQuery） onload，指示页面包含图片等文件在内的所有元素都加载完成（可以说：ready 在onload 前） 绑定元素事件响应的JS，一定要等到相应元素加载后或文档全部加载完成后再执行
js代码可放在页面内部或单独放入js文件后调用
wmnmtm的专栏
05-21 458
  放在页面内部： &lt;script type="text/JavaScript"&gt;&lt;!--function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;x.oSrc;i++) x.src=x...
JavaScript进阶（二）：在一个JS文件中引用另一个JS文件
热门推荐
IT全栈 华强工作室
01-03 5万+
在一个JS文件中引用另一个JS文件 方法一 在调用文件的顶部加入下例代码： document.write(””); (注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来) 方法二 通过中间界面对js进行应用，就是我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的
vue实现把接口单独存放在一个文件方式
10-14
首先，在Vue项目的`src`目录下的适当位置，例如`src/utils`或`src/api`，创建一个新的JavaScript文件，例如`httpConfig.js`。在这个文件中，我们将定义所有的接口URL。 ```javascript // src/utils/httpConfig.js ...
vue组件内部引入外部js文件的方法
11-21
可以创建一个名为`importJs.js`的通用组件，它接受一个`src`属性来指定JS文件的URL，并监听加载和错误事件。示例代码如下： ```javascript // importJs.js import Vue from 'vue' Vue.component('remote-...
autojs脚本排队执行
snailuncle2的博客
04-17 2207
牙叔教程 简单易学 使用场景 你有多个脚本, 想让他们一个一个按顺序执行 效果展示 autojs版本 知识点 脚本是否已经销毁 获取指定脚本引擎 停止指定脚本 删除数组第一个元素 代码 // 在此处给脚本排队即可 let filePathList = ["1.js", "2.js", "3.js"]; // let filePathList = ["2.js", "1.js", "3.js"]; filePathList = filePathList.map(function (filePath)
tfjs 单独文件
02-28
tensorflowjs 的单独js文件,可以在网页中直接应用,用于网页端的神经网络搭建
单独创建js文件（外部式）引入步骤
a1071626267的博客
06-27 3096
单独创建js文件（外部式）引入步骤
JS文件中加载jquery.js(JS文件添加其他JS文件)
主宰
08-24 6113
最近有一个需求： 1.在一个html中只能引入一个js文件 不能有JS代码和其他JS文件的引入 2.这个JS文件中 还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中 这些代码用到了jQuery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js 在网上搜索了很多方法都不太实用，由于我自己离开WEB多年 最后向朋友询问得到以下代码
JavaScript基础（三）- 独立引用JS外部文件
释梦燃的博客
05-22 1万+
以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称 JS文件), 其文件后缀通常为 .js，然后将JS代码直接写在JS文件中。
把JavaScript单独写成文件，开头怎么写
monkey_sister的博客
06-17 2万+
本人对前端不感兴趣也没什么牢固的基础，但是最近一直在写前端，态度就是现学现用。。。。发现网上没有该类问题的具体解决办法，都是答非所问（我可能说的也不对），这里我介绍自己的一种解决办法，亲测可行(function (){    /*这里写你的逻辑部分*/    })();应用了jQuery框架的js文件这么写：$(document).ready(function() {  /**/ });  或者 ...
在js的单独文件中使用jQuery
清风自来
06-17 1万+
在js文件中是可以单独使用jQuery的，但是jQuery必须要在该js文件之前导入 否则js文件将无法识别 例如 &amp;lt;script src=&quot;../js/jquery-3.3.1.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;../js/mobile/mobileLogin.js&quot;&am
js代码如何单独运行，快速查看效果及功能
IT_CRH的博客
04-20 5676
怎么样运行单js页面 提示：以下是讲解内容，为了方便理解 一、单js页面的运行环境 问题抛出： 很多时候想要查看或者浏览js的显示效果，苦于大多数编译器不支持，这里我用我的方法讲解一下。 二、使用步骤 1.使用工具 （1），VScode （2），创建一个文件夹，在VScode中打开该文件夹，创建一个js文件。 2.编写代码 代码如下（示例）： var i=0; for(i=0;i<3;i++){ console.log(i); } 3.操作步骤 （1
放到一个单独的js文件呢
最新发布
07-12
<think>我们之前讨论的是在HTML页面内嵌JavaScript代码实现清空输入框的功能。现在用户希望将JavaScript代码放到一个单独的JS文件中。 解决方案： 1. 创建一个单独的JavaScript文件（例如：script.js） 2. 在该文件中编写事件监听代码，注意由于代码在HTML元素加载之后执行，需要确保DOM加载完成再绑定事件 3. 在HTML文件中通过<script>标签引入该JS文件 具体步骤： 第一步：创建script.js文件，内容如下： ```javascript // 使用DOMContentLoaded事件确保在DOM加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 获取按钮和输入框元素 const addButton = document.getElementById('addButton'); const nameInput = document.getElementById('Name'); // 如果按钮和输入框存在（避免未找到元素时出错） if (addButton && nameInput) { addButton.addEventListener('click', function() { // 清空输入框 nameInput.value = ''; // 清除验证提示（如果有） nameInput.setCustomValidity(''); }); } }); ``` 第二步：在HTML文件中引入该JS文件（假设script.js与HTML文件在同一目录） ```html <!-- 在body结束标签之前引入JS文件，确保DOM已经解析 --> <body> <!-- 之前的HTML结构 --> <div> <div class="mb-3"> <label for="Name">书名</label> <input class="form-control" type="text" id="Name" name="Name" required /> </div> <button id="addButton" class="btn btn-primary">添加</button> </div> <!-- 引入外部JS文件 --> <script src="script.js"></script> </body> ``` 关键点说明： - 使用`DOMContentLoaded`事件：确保脚本在DOM完全加载后执行，从而能正确获取到元素。 - 元素存在性检查：避免在未找到元素时执行操作导致错误。 - 外部引入：通过`<script src="script.js"></script>`引入外部JS文件，注意路径正确。 注意事项： 1. 如果按钮是动态生成的（例如通过AJAX或JavaScript动态添加），则需要使用事件委托（Event Delegation）方式绑定事件。 2. 外部JS文件不能包含`<script>`标签，直接写JavaScript代码即可。 §§相关问题§§ 1. 如果页面中有多个需要清空的输入框和对应的按钮，如何通过外部JS文件统一管理？ 2. 当使用外部JS文件时，如何调试可能出现的脚本加载失败问题？ 3. 在动态生成按钮的场景下，如何使用事件委托实现清空输入框功能？ 4. 如何优化外部JS文件的加载位置以提高页面性能？ 5. 如果多个页面都需要相同的清空功能，如何设计外部JS文件以实现代码复用？</think>要将清空输入框的功能移到单独的 JavaScript 文件中，请按照以下步骤操作： ### 解决方案 1. **创建外部 JS 文件**（如 `clearInput.js`） 2. **在 HTML 中引入该文件**（放在 `</body>` 前确保 DOM 加载完成） 3. **使用事件监听器**（避免内联事件处理） ```html <!-- HTML 文件 --> <div> <div class="mb-3"> <label for="Name">书名</label> <input class="form-control" type="text" id="Name" name="Name" required /> </div> <button id="addButton" class="btn btn-primary">添加</button> </div> <!-- 在 body 结束前引入 JS 文件 --> <script src="clearInput.js"></script> ``` ```javascript // clearInput.js 文件内容 document.addEventListener('DOMContentLoaded', function() { const addButton = document.getElementById('addButton'); const nameInput = document.getElementById('Name'); addButton.addEventListener('click', function() { nameInput.value = ''; // 清空输入框 nameInput.setCustomValidity(''); // 清除验证提示 }); }); ``` ### 关键说明 1. **DOMContentLoaded 事件**：确保脚本在 DOM 完全加载后执行 2. **元素获取**：使用 `getElementById` 获取按钮和输入框元素 3. **事件绑定**：`addEventListener` 替代内联 onclick 属性 4. **功能分离**：JS 逻辑与 HTML 结构完全解耦 ### 注意事项 - 确保 JS 文件路径正确（如不同目录需调整 `src` 路径） - 如果按钮是动态生成的，需使用事件委托： ```javascript document.body.addEventListener('click', function(e) { if(e.target.id === 'addButton') { document.getElementById('Name').value = ''; } }); ``` - 多个页面可复用同一个 JS 文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值