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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
深入理解js中this的用法
May 28 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
javascript定时器完整实例
2015/02/10 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
教师工作能力自我评价
2015/03/04 职场文书
预备党员转正意见
2015/06/01 职场文书
篮球赛新闻稿
2015/07/17 职场文书
导游词之崇武古城
2019/10/07 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
使用Django框架创建项目
2022/06/10 Python