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判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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中的超全局变量
2006/10/09 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python实现进程同步和通信的方法
2018/01/02 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
高级Java程序员面试要点
2013/08/02 面试题
大学生就业自我鉴定
2013/10/26 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
最新创业融资计划书
2014/01/19 职场文书
初三化学教学反思
2014/01/23 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
考试作弊检讨书
2014/10/21 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书