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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
node.js中grunt和gulp的区别详解
Jul 17 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue-cli3全面配置详解
Nov 14 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的call_user_func传reference引发的思考
2010/07/23 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
php实现简易计算器
2020/08/28 PHP
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
python远程登录代码
2008/04/29 Python
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python实现textrank关键词提取
2018/06/22 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python标识符命名规范原理解析
2020/01/10 Python
Python装饰器用法与知识点小结
2020/03/09 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
英文自荐信
2013/12/15 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
教代会闭幕词
2015/01/28 职场文书
学校实习推荐信
2015/03/27 职场文书
离婚律师函范本
2015/05/27 职场文书
小学运动会入场词
2015/07/18 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python