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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
轮播的简单实现方法
Jul 28 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
typescript配置alias的详细步骤
Aug 12 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
手写一个python迭代器过程详解
2019/08/27 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
某某同志考察材料
2014/05/28 职场文书
2014年减负工作总结
2014/12/10 职场文书
党校党性分析材料
2014/12/19 职场文书
电力工程合作意向书
2015/05/11 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫