传统的网站页面包含多个header、footer、siderbar、tip(提示框/输入框)等多个公共组件,如果一味的复制粘贴,页面将会相当臃肿和难以维护。这里介绍jqurey的load()方法。目的:实现页面的组件化,方便管理和维护。如果你是Vue和React用户,请无视此文。

jquery load方法是jQuery.ajax()的一个方法,语法:$(selector).load(url,data,function(response,status,xhr))

现在,我的index.html只有一些动态加载的组件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- 头部 -->
        <div id="header"></div>
        <!-- 主页内容 -->
        <div class="main"></div>
        <!-- 提示框 -->
        <div id="tip"></div>
        <!-- 侧边栏 -->
        <div id="sideBar"></div>
        <!-- 页脚 -->
        <div id="footer"></div>
    </body>
    <script>
        $('#header').load('header.html',function(responseTxt,statusTxt,xhr){
            if(statusTxt=='success'){
                console.log('头部加载成功!')
            }
        });
        //.........动态加载其他的组件
        $('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
            if(statusTxt=='success'){
                console.log('footer加载成功!')
            }
        });
    </script>

然后,我们来看看header.html

<div class="my_nav">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">首页</a></li>
                        <li><a href="#">产品</a></li>
                        <li><a href="index.html">解决方案</a></li>
                        <li><a href="aboutUs.html">关于我们</a></li>
                    </ul>
                </div>
                <!-- script内容     -->
                <script>
                    $(window).scroll(function(){
                        if($(window).scrollTop() > 100) {
                            $(".my_nav").addClass("active");
                        } else {
                            $(".my_nav").removeClass("active");
                        }
                    })
                </script>

注意,这里本人推荐只用html片段而非标准html格式

您会遇到的两个坑:

1.组件的js加载失败,在index.html中组件定义的方法和函数无效报错。如果你使用的标准html格式,可能遇到这个问题。

index.html界面最终其实是jq通过ajax请求过来内容,在append到目标区域。而通过ajax请求方法的responseText又只会抓去完整html片段中<body>里面的内容。标准格式正好把js写在了body外面所以导致js没执行。也就是说当load()这个老司机开车的时候,body的内容上车了,js却被留在了车外。当老司机到达index.html的时候,由于之前js定义的函数和方法没有上车,index页面的控制台只能帮你报警...

2.用jquery的load方法后:jQuery获取组件dom对象失败。

加载完毕后试试在index的script里操作下 $(".my_nav").html("设置内容失败!")

原因:只有在元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件,也就是执行在前,加载在后。

我的写法(不一定好用):

$(function(){
                $('#header').load('header.html',function(responseTxt,statusTxt,xhr){
                    if(statusTxt=='success'){
                        var _li=$(".navbar-nav").find("li");//用变量保存多次调用的Dom对象,可以减少开销
                        _li.eq(0).removeClass("active")
                        _li.eq(3).addClass("active")
                        console.log('头部加载成功!')
                    }
                }); 
                $('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
                    if(statusTxt=='success'){
                        //加载完毕前要处理的事件
                        console.log('footer加载成功!')
                    }
                });      
           })

在load方法的回调函数里面提前绑定dom。

原创不易,请轻喷,Vue、React组件化框架用户请无视,如有问题请回复我!

 

 

Logo

前往低代码交流专区

更多推荐