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小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JS数组的赋值介绍
Mar 10 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
js cavans实现静态滚动弹幕
May 21 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
js判断两个数组相等的5种方法
May 06 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
2019十大人气国漫
2020/03/13 国漫
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
给女儿的表扬信
2014/01/18 职场文书
绿色环保标语
2014/06/12 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
python可视化之颜色映射详解
2021/09/15 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技