公共js在页面底部加载的注意事项介绍


Posted in Javascript onJuly 18, 2013

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度。
但是,php控制器一般这样写:

$this->load->view($HEADER); 
$this->load->view($MENU); 
$this->load->view($VIEW_SHOW, $data); 
$this->load->view($FOOTER);

$FOOTER是个共用模版,用于加载js及css文件。
$VIEW_SHOW作为主模版,则可能要单独写些js代码,这些代码通常需要使用公共文件的资源的话,把js写到$FOOTER的后面就不方便了,jQuery的$(document).ready又用不了。这时候,用window.onload就可以了,如下:
window.onload = function() { 
(function($) { 
function test() {alert(123);} 
//或写些基于jQuery的绑定什么的 
})(jQuery) 
};

但如果你想从window.onload外调用里面的函数,比如你想在这个窗口的子iframe中调用parent.test()是不会有结果的。
这时,变通一下,把函数作全局变量就可以了。
var test; // 全局作用域的声明 
window.onload = function() { 
(function($) { 
test = function() {alert(123);}; 
//或写些基于jQuery的绑定什么的 
})(jQuery) 
};

只在需要时,才把私有的函数改成全局的,是更安全的做法。
Javascript 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
vue vant Area组件使用详解
Dec 09 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 #Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 #Javascript
GRID拖拽行的实例代码
Jul 18 #Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
JS获取鼠标坐标的实例方法
Jul 18 #Javascript
You might like
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php简单实现MVC
2015/02/05 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
js中new一个对象的过程
2017/02/20 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python是否适合网页编程详解
2019/10/04 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
演讲稿格式
2014/04/30 职场文书
小学生常见病防治方案
2014/06/06 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
nginx 配置指令之location使用详解
2022/05/25 Servers