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 相关文章推荐
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
小程序实现录音上传功能
Nov 22 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读取msn上的用户信息类
2008/12/05 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python 忽略warning的输出方法
2018/10/18 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python各种excel写入方式的速度对比
2020/11/10 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
村党支部书记承诺书
2014/05/29 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
殡葬服务心得体会
2014/09/11 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
死亡赔偿协议书
2015/01/28 职场文书
工作简报范文
2015/07/21 职场文书
《将心比心》教学反思
2016/02/23 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android