JavaScript程序开发之JS代码放置的位置


Posted in Javascript onJanuary 15, 2016

JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下。

一般来说有两种方式,写在界面上和使用.js文件。

1.1界面上的Head部分

可以直接放在head标签内,如下代码

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
<script type="text/javascript"> 
//your js code 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

1.2界面上的body部分

一般都是直接放在body部分的,如下

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

放在head和body中没有什么区别,一般代码量不多的时候,而且只有当前页面使用这些js,那就直接写在界面上吧。

2、JS文件

对于那些复杂的,而且代码量很多的JS,最好放在专门的一个.js文件里,然后在页面上按照js文件的相对路径引用进来。

这样的好处是,可以防止很多重复的js代码。可以将一些公用的js方法放在外部js文件里。

比如,一般使用visual studio 2010新建的asp.net工程中都带的有jquery-1.4.1.js文件,我们看怎么使用这个js文件。
比如页面的文件结构如图,

JavaScript程序开发之JS代码放置的位置

要在MyJSFrm.aspx中使用这个js文件就这样引入。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

总之,别忘了使用相对目录,如果当前页面文件的目录层级比较深,那就使用../自己算目录的层级吧。

js 三种位置的区别:

head :

-- 在调用脚本时,已经完成加载了
--

body :

-- 在生成页面的时候就已经完成加载了
--

外部js :

-- 引用外部js 注意:外部js不能包含<script></script>这两个标签
-- 主要是为了节省当多个页面重复调用相同js函数时,可以节省在每个页面中嵌入相同的js代码;

浏览器不识别 js 解决办法 :<!--
代码部分
//-->

Javascript 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
VueJS全面解析
Nov 10 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 #Javascript
JavaScript知识点总结之如何提高性能
Jan 15 #Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
轻松实现jquery手风琴效果
Jan 14 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python实现DDos攻击实例详解
2019/02/02 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
数学教学随笔感言
2014/02/17 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
单位工作证明范本
2015/06/15 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
JS封装cavans多种滤镜组件
2022/02/15 Javascript