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技术很烂的五个原因分析
Oct 28 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 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
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现画一颗树和一片森林
2018/06/25 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python pygame实现球球大作战
2019/11/25 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
法人授权委托书样本
2014/09/19 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
大一新生检讨书
2014/10/29 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
表扬通报怎么写
2015/01/16 职场文书
周年庆典答谢词
2015/01/20 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js