公共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 相关文章推荐
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
redux.js详解及基本使用
May 24 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php 正则 过滤html 的超链接
2009/06/02 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python cumsum函数的具体使用
2019/07/29 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技