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

 更新时间:2013年07月18日 17:37:33   作者:  
JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度,下面为大家介绍下书写时的注意事项
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)
};

只在需要时,才把私有的函数改成全局的,是更安全的做法。

相关文章

  • js获取客户端外网ip的简单实例

    js获取客户端外网ip的简单实例

    这篇文章主要介绍了js获取客户端外网ip的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 利用原生JS与jQuery实现数字线性变化的动画

    利用原生JS与jQuery实现数字线性变化的动画

    最近在工作中遇到一个需要,需要将数字实现递增的动态显示,从网上找了相关的资料发现利用原生JS与jQuery都可以实现,suoyi8下面这篇文章主要给大家介绍了利用原生JS与jQuery实现数字线性变化动画的相关资料,需要的朋友可以参考下。
    2017-02-02
  • JavaScript 正则命名分组【推荐】

    JavaScript 正则命名分组【推荐】

    以往我们只是习惯于通过数组下标来访问正则匹配到的分组,但分组达到4、5个时,标识起来就会非常麻烦。V8早已实现了正则命名分组提案,只是我们很少使用,本文将介绍JS的正则命名分组
    2018-06-06
  • JavaScript判断DIV内容是否为空的方法

    JavaScript判断DIV内容是否为空的方法

    整体思路是这样的:判断div内部是否为空,如果为空,给出无数据提示;否则显示正常页面,下面给大家分享js判断div内容是否为空的方法,对判断div内容是否为空的相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JS控制按钮10秒钟后可用的方法

    JS控制按钮10秒钟后可用的方法

    这篇文章主要介绍了JS控制按钮10秒钟后可用的方法,涉及JavaScript基于时间函数控制页面元素样式动态变换的技巧,需要的朋友可以参考下
    2015-12-12
  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装

    这篇文章主要介绍了详解微信小程序中的页面代码中的模板的封装的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • Javascript 学习笔记 错误处理

    Javascript 学习笔记 错误处理

    Javascript学习笔记:错误处理.
    2009-07-07
  • js实现div拖动动画运行轨迹效果代码分享

    js实现div拖动动画运行轨迹效果代码分享

    这篇文章主要介绍了js实现div拖动动画运行轨迹效果,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 一文带你彻底搞懂JS中的Map与Set

    一文带你彻底搞懂JS中的Map与Set

    Set是一种叫做集合的数据结构(结构和Array很像),Map是一种叫做字典的数据结构,这篇文章主要为大家详细介绍了JavaScript中Map与Set用法与区别,需要的小伙伴可以参考下
    2023-11-11
  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的体积,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论