小米官网重构

目录

前言

一、主页

头部导航栏

二、登录页面

变量和代码简化

错误信息的简化

注册界面

跳转链接

后话

 

---

前言

学习完全部的jQuery内容之后，用更加便捷简单的jQuery，我实现了更加简单方便的效果。在小米官网里面大量的代码，也被缩减成为几行简单的代码就能解决的内容。这里立我写的代码给大家观察，可以看看我的方法，更加改善自己的jQuery代码。

---

一、主页

头部导航栏

头部导航栏，也就是选中对应选项，就可以打开对应的内容栏观看，这个内容其实非常的简单。但是实现的时候需要好好规划一下自己要怎么用jQuery实现，说不定你可以写出比我更好的方法。

首先，我们要理解一下jQuery特有的东西：隐式迭代。因为存在隐式迭代的方式，让我们选中的元素，已经在程序里面自动被遍历过一遍了，那么当我们去选择ul里面的li的时候，就会直接全部遍历一遍；然后我们就需要想起，当我们要选择其他的盒子的时候，需要去用序号锁定它的位置，因为都是按一定的循序排列的，我们只需要通过之前生成的序号，放给jQuery让他帮我们选择正确的盒子，那么我们的盒子就可以别选取到了。这就是jQuery遍历带来的便捷性。

说了这么多，我们来看看代码的演示吧：

    // 头部导航栏下拉菜单
    $(".nav-list .nav_item").on("mouseenter", function() {
        // 设置序列号
        var index = $(this).index();
        // 选中的时候打开下拉菜单
        $(".header_nav_list").stop().addClass("shadow");
        // 打开对应序号的菜单，同时隐藏兄弟菜单
        $(".nav_list_item").stop().eq(index).show().siblings().hide();
        // 这里是防止选中navlist中没有菜单的选项的时候，下拉菜单不消失的问题
        $(this).siblings(".nav_item1").on("mouseenter", function() {
            $(".header_nav_list").stop().removeClass("shadow");
        });
    });
    $(".header_nav_list").on("mouseleave", function() {
        // 只有离开下拉菜单才会收回去
        $(".header_nav_list").stop().removeClass("shadow");
    });

我们可以看到，只需要用index的方法，我们存储了每一个序号的变量，通过eq去选取当前的盒子显示，而它的兄弟结点全部隐藏，我们就实现了这个切换的效果。

---

二、登录页面

变量和代码简化

我们知道，原生js是需要通过变量将获取的元素存储起来，然后在使用的。而jQuery不需要，直接选取元素放进函数中，是可以生效的，这样节省了很多代码量。其次，可以将需要多次书写的代码放在一条里面写，只要他是同一个对象，同时增加也好，删除也好都是可以一起写的。

我们可以看看代码的演示来理解这个过程：

$(this).on("keyup", function() {
                if (this.value == '') {
                    $(".user .T_change").stop().addClass("C_change");
                    $(".user .mi-form-field__field").stop().addClass("flaseC").stop().removeClass("trueC");
                    flag0 = 0;
                    // 错误提示
                    if (num == 0) {
                        Error($(".user"), '请输入账号');
                        num = 1;
                    }
                } else {
                    $(".user .I_change").html(this.value);
                    $(".user .T_change").stop().removeClass("C_change");
                    $(".user .mi-form-field__field").stop().removeClass("flaseC").stop().addClass("trueC");
                    flag0 = 1;
                    // 错误提示
                    if (num == 1) {
                        $(".user .error").stop().remove();
                        num = 0;
                    }
                }
            });

这是我进行错误判断的代码，这里我们看到Error函数里面，放入不是变量而是元素本身，也是可以正常执行效果的，因为我们选取的对象就是元素本身，而用jQuery可以让这个过程简化。而且当我们需要对同一个对象进行操作的时候，也不需要重复的进行代码的复写，而是整合到一条里面去解决，简化了代码，而且变得更好去整理结构。

错误信息的简化

function Error(parent, content) {
        $(parent).append($("<div class='error'>" + content + "</div>"));
    };

我书写的错误信息函数，之前有三行代码，虽然不是非常长的代码，但是通过jQuery整合一条之后，你可以很快的理解它在做什么，可以更加快捷的知道变量的作用是什么。但是这里需要注意的地方是，原生JS是原生JS，jQuery是jQuery，语法是有区别的，不可以套用。

---

注册界面

跳转链接

    // 有关于跳转链接的模块
    var temp = window.location.search.substr(1);

    // 移动滑块
    // 进入时执行跳转函数
    Temp();

    // 点击名称时进行跳转
    $(".list_item .item").eq(1).on("click", function() {
        $(".register1").addClass("offreg");
        $(".register0").removeClass("offreg");
        $(".list_item .item").eq(0).children("a").addClass("change");
        $(".list_item .item").eq(1).children("a").removeClass("change");
        animate(select, itemW);
    });
    $(".list_item .item").eq(0).on("click", function() {
        $(".register1").removeClass("offreg");
        $(".register0").addClass("offreg");
        $(".list_item .item").eq(0).children("a").removeClass("change");
        $(".list_item .item").eq(1).children("a").addClass("change");
        animate(select, 0);
    });

    // 根据链接跳转函数
    function Temp() {
        if (temp === '2') {
            $(".register1").addClass("offreg");
            $(".register0").removeClass("offreg");
            $(".list_item .item").eq(0).children("a").addClass("change");
            $(".list_item .item").eq(1).children("a").removeClass("change");
            $(".select").css("left", "68px");
        }
    }

虽然我们可以经可能的简化代码，但是我目前学到的jQuery里面没有包含location的跳转链接方法，因此这块内容没有用到jQuery。同时移动滑块的内容，我是用了之前书写的animate的js代码，但是我暂时没有对animate的文件进行修改。我们可以选择去改变一下animate的代码，调整它的内容。这里我给大家一个提示：你可以是用jQuery中自带的animate方法，控制滑块的position实现这个改变的效果。

我这里之所以不改动，是因为我已经用好了这个方法，所以就没有去更改它的方法了（其实是懒）

---

后话

jQuery还有很多方法有待开发，也许我们再继续研究，还能有更好的简化方法。我的方法有不妥的地方也希望来指正我。感谢大家的观看