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 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
AJAX学习笔记
May 18 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内存缓存实现方法
2015/01/24 PHP
PHP之header函数详解
2021/03/02 PHP
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python安装OpenCV的示例代码
2020/03/05 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python 6行代码制作月历生成器
2020/09/18 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
行政助理岗位职责
2013/11/10 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
市政管理求职信范文
2014/05/07 职场文书
中职生求职信
2014/07/01 职场文书
建国大业电影观后感
2015/06/01 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
详解Vue slot插槽
2021/11/20 Vue.js