一个通用onReady函数的实现

define([], function(){
 
    function onReady(fn) {
        var DOC = document,
            html = DOC.documentElement,
            W3C = document.dispatchEvent;
        //FF曾经是没有readyState属性的
        //推断body是否存在来决定DOM文档是否载入完成
        if (!DOC.readyState) {
        var readyState = DOC.readyState = DOC.body ? "complete" : "loading";
        }
        //假设页面已经全然载入完成直接运行回调函数
        if (DOC.readyState === "complete") {
            setTimeout(fn);
        //现代游览器和IE>=IE9
        } else if (W3C) {
            DOC.addEventListener('DOMContentLoaded', function(){
                if (readyState) {
                    DOC.readyState = 'complete';
                }
                fn();
            }, false);
        } else {
            ieReady(fn);
        }
    }

    function ieReady(fn) {
       try {
           //处理iframe中的页面在IE下无法通过doScroll推断DOM知否载入完成
           if (self !== top && self.document.readyState !== 'complete') {
               setTimeout(function(){
                     ieReady.call(window, fn)
                 })
           } else if (self !== top && self.document.readyState === 'complete') {
               arguments[0]();
           } else {
               document.documentElement.doScroll('left');
                 arguments[0]();
           }
         } catch (e) {
             setTimeout(function(){
                 ieReady.call(window, fn)
             })
       }
   };

   AS.extend({
       'onReady': onReady
   });
   return onReady;
})


修正一个重大bug,ready函数是不能在AMD中定义从而异步载入的,由于DOMContentLoaded监听的触发时机是在DOM和JS.CSS载入运行完成后,但有一个例外就是JS假设是动态载入进来的,DOMContentLoaded不会等待这个异步载入的js,所以假设将绑定DOMContentLoaded事件的函数写在动态载入的js中,有一个可能就是Dom已经载入完成但动态载入的js中的为DOMContentLoaded绑定监听的代码还没有运行,所以非常有可能你为DOMContentLoaded绑定的监听不会运行.


在微信小程序中创建一个新页面通常涉及以下步骤: 1. 创建页面文件:在微信小程序的项目结构中,每个页面通常包含四个文件:`.json` 配置文件,`.wxml` 页面结构文件,`.wxss` 页面样式文件,以及 `.js` 页面逻辑文件。 2. 配置页面:在 `.json` 文件中配置页面的一些基本信息,如导航条标题、窗口背景色等。 3. 页面结构设计:在 `.wxml` 文件中定义页面的结构,类似于 HTML,使用小程序特有的标签和组件。 4. 设计页面样式:在 `.wxss` 文件中编写 CSS 样式,控制页面的布局和样式。 5. 编写页面逻辑:在 `.js` 文件中编写 JavaScript 代码,处理用户的交互逻辑和数据更新。 至于“生命函数”,这个表述可能有误,因为通常我们讨论的是生命周期函数。在小程序中,生命周期函数是指在页面生命周期的某些关键点触发的函数,它们可以让你在页面创建、显示、隐藏或者销毁时执行特定的逻辑。 例如,在小程序页面的 `.js` 文件中,有以下几个重要的生命周期函数: - `onLoad`:页面加载时触发,只执行一次。 - `onShow`:页面显示时触发。 - `onReady`:页面初次渲染完成时触发,只执行一次。 - `onHide`:页面隐藏时触发。 - `onUnload`:页面卸载时触发,只执行一次。 这里是一个简单的示例: ```javascript Page({ data: { // 页面的初始数据 }, onLoad: function(options) { // 页面创建时执行 }, onReady: function() { // 页面初次渲染完成时执行 }, onShow: function() { // 页面显示时执行 }, onHide: function() { // 页面隐藏时执行 }, onUnload: function() { // 页面卸载时执行 } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值