通过weui-1.1.3源码学习前端开发（四）从example看起-src/example.js文件-优快云博客

本文详细介绍了使用jQuery实现页面管理的技巧，包括解决移动端click事件延迟的fastClick函数，图片预加载函数preload，修复Android输入bug，以及设置微信JS-SDK的setJSAPI函数。通过页面模板读取和初始化pageManager对象，实现了页面路由管理和底部固定布局的自适应调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点example.js文件

整体结构，使用的基本的$(function(){})，参考jquery吧

定义了一个对象pageManager，六个函数，最后调用init()，初始化完成。先看几个不重要的函数

function fastClick()

在手机端Web app开发中，click事件存在300ms的延迟问题，会造成响应缓慢。所以，对支持touch的元素的click事件，用touchstart和touchend事件模拟，提高响应的速度，所以叫“fastClick”；

function preload()

缓存了几个图片，页面显示的时候使用；

function androidInputBugFix()

解决一个Android手机的输入问题，具体参考代码的注释

function setJSAPI()

设置微信的JS-SDK

pageManager对象，实现页面管理，页面路由(利用hash实现)

function setPageManager()，读取页面模板，并且初始化pageManger对象

function setPageManager(){
        var pages = {}, tpls = $('script[type="text/html"]');

        for (var i = 0, len = tpls.length; i < len; ++i) {
            var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
            pages[name] = {
                name: name,
                url: '#' + name,
                template: '#' + tpl.id
            };
        }
        pages.home.url = '#';

        for (var page in pages) {
            pageManager.push(pages[page]);
        }
        pageManager
            .setPageAppend(function($html){
                var $foot = $html.find('.page__ft');
                if($foot.length < 1) return;

                var winH = $(window).height();
                if($foot.position().top + $foot.height() < winH){
                    $foot.addClass('j_bottom');
                }else{
                    $foot.removeClass('j_bottom');
                }
            })
            .setDefault('home')
            .init();
    }