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实现的网站首页随机公告随机公告
Mar 14 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
如何利用React实现图片识别App
Feb 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php 团购折扣计算公式
2011/11/24 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php pdo操作数据库示例
2017/03/10 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
python win32 简单操作方法
2017/05/25 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Python双向循环链表实现方法分析
2018/07/30 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python将unicode和str互相转化的实现
2020/05/11 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
店长助理岗位职责
2013/12/13 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书