从零开始学_JavaScript_系列（27）——myblog的优化【1】样式表分离、localStorage

myblog的建立参照：

http://blog.csdn.net/qq20004604/article/details/52019904

本来打算今天写的轮播图，不过突然看到localStorage，一时兴起先搞这个了。下次再写轮播图吧

【1】全局样式和独立样式的分离

我将样式表分割为全局表和独立表；

 

l 在全局的样式里，是一些通用的样式，他们的特点是复用率高，例如设置隐藏效果的.displayNONE，他只有一条属性那就是display:none;加载全局样式时，样式表在head部分。

l 在独立的样式里，是一些当前页面专有的样式，其加载链接时放在jade的对应的模块里面进行加载。为了防止污染，将当前jade里的dom结点其尽量在同一个div下面，这个div主要用于使用后代样式选择器识别。

 

【2】初步调节：

index.jade

extends layout
block content
    link(rel='stylesheet', href='./stylesheets/index.css')
    div.Blog-index
        div.hero-unit
            h1  #{index.title}
            p   #{index.description}
                br
                br
                //修改以下部分
                if(!user())
                    br
                    br
                    a.btn.btn-primary.btn-large(href="/login")  #{index.login}
                    a.btn.btn-large(href="/reg")    #{index.regNow}
                else
                    textarea#textarea.uneditable-input
                    button#postBlog.btn.btn-large #{index.submit}
                    button#clearBlog.btn.btn-large #{index.emptyInput}
                div#submitError.alert.alert-error.displayNONE.myalert
                div#submitSuccess.alert.alert-success.displayNONE

        div.row.content#content
            div.span4
                h2  烟雨江南说
                p   当欲望没有了枷锁，就没有了向前的路
                p   只有转左，或者向右
                p   左边是地狱，右边也是地狱
            div.span4
                h2  烟雨江南说
                p   那些都是极好极好的
                p   可是我偏偏不喜欢
            div.span4
                h2  烟雨江南说
                p   我不怕傻
                p   只怕
                p   遇不到
                p   可以让我变傻的人
            div.span4
                h2  烟雨江南说
                p   人在年轻的时候总会有些莫名的坚持，
                p   并且以此感动着自己，
                p   却时常会在不经意间让真正重要的东西从指间流走。
            div.span4
                h2  烟雨江南说
                p   记忆真是一种奇怪的东西，
                p   有时候会涤荡所有的苦难，只留下温情，
                p   有时候却磨灭掉曾有的欢乐，唯剩下苍白和丑陋。
            div.span4
                h2  烟雨江南说
                p   那存在的，都是幻影。
                p   那永恒的，终将毁灭。
                p   世界万物，缤纷色彩，都是被蒙蔽的人心罢了。
            div.span4
                h2  烟雨江南说
                p   诸神以真相示人，而世人却视而不见
            div.span4
                h2  烟雨江南说
                p   只有绵羊会向狮子要求平等，
                p   而狮子们从来不会这样想。
            div.span4
                h2  烟雨江南说
                p   愿迷途的旅人，从此得享安息。
                p   因理想而不朽，因归返而救赎。
        div#scrollToFoot 滚动到底部然后加载内容

 

layout.jade

doctype html
html
    head
        title #{layout.title}
        link(rel='stylesheet', href='./stylesheets/bootstrap.min.css')
        link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css')
        link(rel='stylesheet', href='./stylesheets/global.css')
        script(type="text/javascript",src='javascripts/jq.js')
        script(type="text/javascript",src='javascripts/bootstrap.min.js')
        script(type="text/javascript",src='javascripts/blog.js')
    body
        div.navbar.navbar-fixed-top
            div.navbar-inner
                div.container
                    a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                    a.brand(href="/") #{layout.topTitle}
                    div.nav-collapse
                        ul.nav
                            li
                                a(href="/") #{layout.indexButton}
                            //以下是修改后的部分
                            if(user())
                                li
                                    a(href="/logout") #{layout.logout}
                            else
                                li
                                    a(href="/login") #{layout.login}
                                li
                                    a(href="/reg") #{layout.reg}
                            li
                                a(href="/language") #{layout.language}
                    span.brand(style='float:right') #{layout.foot}
        div#contrainer.container
            - var ErrorAlert = err()
            if(ErrorAlert)
                div.alert.alert-error #{ErrorAlert}
            block content
            hr
        fotter
            p   #{layout.foot}

global.css

body {
    padding-top: 60px;
    padding-botom: 40px;
}

.displayNONE {
    display: none;
}

fotter p {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #aaa;
    font-size: 18px;
    text-align: center;
}

index.css

.Blog-index #textarea {
    resize: none;
    width: 300px;
    height: 100px;
    cursor: text;
}

.Blog-index #postBlog {
    position: relative;
    left: 20px;
    vertical-align: top;
}

.Blog-index #clearBlog {
    position: relative;
    left: -90px;
    top: 27px;
    width: 110px;
    height: 44px;
}

.Blog-index .myalert {
    position: absolute;
}

.Blog-index #scrollToFoot {
    border: 1px solid #ccc;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
}


.Blog-index .row {
    color: #555;
}

 

样式目前依然和之前保持一致

 

 

【3】添加localStorage用于计数用户第几次访问本网站

简单介绍localStorage：他类似cookie，用于存储数据。他的特点是：

①存储于本地，不发送到服务器；

②使用简单，localStorage.变量名   即可

③清除历史记录后被清空；

④浏览器关闭后依然存在。

⑤HTML5新增

因此，只需要更改前端代码即可。

修改blog.js

$(document).ready(function () {
    //根据url，设置高亮
    if (window.location.pathname === '/') {
        $(".nav-collapse .nav li:first-child").addClass("active");
    }
    else if (window.location.pathname === '/login') {
        $(".nav-collapse .nav li:nth-child(2)").addClass("active");
    }
    else if (window.location.pathname === '/reg') {
        $(".nav-collapse .nav li:nth-child(3)").addClass("active");
    }


    //给原生的Date添加一个方法，传递的参数是格式
    Date.prototype.Format = function (fmt) { //author: meizz
        var obj = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var key in obj)
            if (new RegExp("(" + key + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (obj[key]) : (("00" + obj[key]).substr(("" + obj[key]).length)));
        return fmt; //返回值是格式化好之后的时间
    }

    var testLocalStorage = function () {    //鉴别浏览器是否支持localStorage，如果支持则返回true
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    }
    if (testLocalStorage()) {
        if (!localStorage.visits) {
            localStorage.visits = 1;
        } else {
            localStorage.visits++;
        }

        $("fotter p")[0].innerHTML += "<br>在上次清除历史记录后，localStorage技术告诉我，你是第" + localStorage.visits + "次打开本页面。" + (localStorage.lastVisitTime ? ("你上次访问时间是：" +
            localStorage.lastVisitTime) : (""));
        localStorage.lastVisitTime = new Date().Format("yyyy-MM-dd HH:mm:ss");
    }
})