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 相关文章推荐
JavaScript常用脚本汇总(一)
Mar 04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
angular 服务随记小结
May 06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
phpinfo 系统查看参数函数代码
2009/06/05 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
使用Python实现分别输出每个数组
2019/12/06 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
研究生自荐信
2013/10/09 职场文书
法学毕业生自荐信
2013/11/13 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
党员民主生活会材料
2014/12/15 职场文书
2015教师年度考核评语
2015/03/25 职场文书
活动经费申请报告
2015/05/15 职场文书
2015年重阳节主持词
2015/07/04 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Django路由层如何获取正确的url
2021/07/15 Python