h5开发页面逻辑 - fayerSmile

h5开发页面逻辑

一、页面展示 http://192.168.3.3:8080/dist/view/index.html

1、简单编写了一个阅读器的模式

2、h5+css3+base64(字体图形)

3、页面逻辑commonjs+webpack

【】用localStorage获取和存储本地信息，每次刷新页面后，记录上次浏览后的历史信息。

//用localStorage保存设置信息方法
exports.Util = (function() {
    var prefix = \'ficiton_reader_\';
    var StorageGetter = function(key) {
        return localStorage.getItem(prefix + key);
    };
    var StorageSetter = function(key, val) {
        return localStorage.setItem(prefix + key, val);
    };
    return {
        StorageGetter : StorageGetter,
        StorageSetter : StorageSetter
    }
})();

 

require(\'./read.css\');
var _Util = require(\'util/util.js\');
var hogan = require(\'hogan.js\');
var templatecontainer = require(\'./head.string\');
var read = {
    data :{
        list:[
            {"data_color":"#f7eee5","bgcolor":"#f7eee5","font_color":"#000"},
            {"data_color":"#e9dfc7","bgcolor":"#e9dfc7","font_color":"#000"},
            {"data_color":"#a4a4a4","bgcolor":"#a4a4a4","font_color":"#000"},
            {"data_color":"#cdefce","bgcolor":"#cdefce","font_color":"#000"},
            {"data_color":"#283548","bgcolor":"#283548","font_color":"#7685a2"},
            {"data_color":"#0f1410","bgcolor":"#0f1410","font_color":"#4e534f"}
        ]
    },

    init : function(){
        this.renderColor();
        this.bindEvent();
    },
    bindEvent : function(){
        var _this = this;
        //缓存dom节点
        var Dom = {
                $nightbutton : $(\'#night-button\'),//夜间模式按钮
                $topNav : $(\'#top-nav\'),//头部
                $bottomNav : $(\'.bottom_nav\'),//底部
                $fontButton : $(\'#font-button\'),//字体大小选择按钮
                $fontContainer : $(\'.font-container\'),//字体容器
                $bkContainer : $(\'#bk-container\'),//背景选择按钮
                $bodycontainer : $(\'.container\'),
                $Rootcontainer : $(\'#fiction_container\'),//文章内容区域
                win : $(window)
            };
        var InitFontSize;//字体大小
        var NightMode = false; //是否是夜间模式
        //
        //屏幕中央事件
        $(\'#action_mid\').click(function(){
            if(Dom.$topNav.hasClass(\'hide\')){
                 showEvent();
             }else{
                 hideEvent();
            }
        });
        //对屏幕的滚动监控
        Dom.win.scroll(function(){
            hideEvent();
        })
        var hideEvent = function(){
            Dom.$topNav.addClass(\'hide\');
            Dom.$bottomNav.hide();
            Dom.$fontContainer.hide();
            Dom.$fontButton.removeClass(\'current\');
        };
        var showEvent = function(){
            Dom.$topNav.removeClass(\'hide\');
            Dom.$bottomNav.show();
        }
        //点击字体按钮，显示隐藏字体容器
        Dom.$fontButton.click(function(){
            if(Dom.$fontContainer.css(\'display\') == \'none\'){
                Dom.$fontContainer.show();
                Dom.$fontButton.addClass(\'current\');
            }else{
                Dom.$fontContainer.hide();
                Dom.$fontButton.removeClass(\'current\');
            }
        })
        
        //点击屏幕，隐藏字体容器
        Dom.$Rootcontainer.click(function(){
            Dom.$fontContainer.hide();
            Dom.$fontButton.removeClass(\'current\');
        });
        /**************字体-大小样式************/
        //获取字体设置信息
        InitFontSize = _Util.Util.StorageGetter(\'font-size\');//01)获取localStorage里font-size的值
        InitFontSize = parseInt(InitFontSize);
        if(!InitFontSize){//02)如果字体信息不存在
            InitFontSize = 16; //03)那就给InitFontSize设置一个初始值
        }
        Dom.$Rootcontainer.css(\'font-size\',InitFontSize)//04）设置容器字体大小；
        //字体放大
        $(\'#large-font\').click(function(){
            if(InitFontSize >20){
                return;
            }
            InitFontSize += 1;
            //localStorage里缓存字体信息
            _Util.Util.StorageSetter(\'font-size\',InitFontSize);
            Dom.$Rootcontainer.css(\'font-size\',InitFontSize);
        });
        //字体缩小
        $(\'#small-font\').click(function(){
            if(InitFontSize <12){
                return;
            }
            InitFontSize -= 1;
            _Util.Util.StorageSetter(\'font-size\',InitFontSize);
            Dom.$Rootcontainer.css(\'font-size\',InitFontSize);
            
        });

        /**************字体-背景样式************/
        //获取本地背景信息
        var body_color = _Util.Util.StorageGetter(\'background_color\');
        var font_color = _Util.Util.StorageGetter(\'font_color\');
        if (body_color) {
            $(\'body\').css(\'background-color\',body_color);
        }
        if (font_color) {
            Dom.$Rootcontainer.css(\'color\',font_color);
        }

        //点击背景按钮
        Dom.$bkContainer.on(\'click\', \'.bk-container\', function(){
            var body_color = $(this).data(\'color\');
            var font_color = $(this).data(\'font-color\');
            $(\'body\').css(\'background-color\',body_color);
            Dom.$Rootcontainer.css(\'color\',font_color);
            //存储本地背景信息
            _Util.Util.StorageSetter(\'background_color\',body_color);
            _Util.Util.StorageSetter(\'font_color\',font_color);
            //选择背景按钮
            $(this).find(\'div\').addClass(\'current\').parent(\'.bk-container\')
                .siblings(\'\').children().removeClass(\'current\');
            //如果字体颜色为夜间模式
            if($(this).data(\'color\') == \'#0f1410\'){
                $(\'#day_icon\').show();
                $(\'#night_icon\').hide();
                //_this.selectColorStatus(body_color);
            }else{
                $(\'#day_icon\').hide();
                $(\'#night_icon\').show();
                //_this.selectColorStatus(body_color);
            }
        })
        //背景按钮选中状态
        this.selectColorStatus(body_color);
        /******************夜间模式**************/
        //点击夜间模式
        Dom.$nightbutton.click(function(){
            if(NightMode){
                //进入夜间模式
                $(\'#day_icon\').hide();
                $(\'#night_icon\').show();
                switchMode("#e9dfc7",\'#000\',false);
                // NightMode = false;
            }else{
                //进入白天模式
                $(\'#day_icon\').show();
                $(\'#night_icon\').hide();
                switchMode("#0f1410",\'4e534f\',true);
                // NightMode = true;
            }
        })
        //切换夜间模式
        var switchMode = function(bgcolor,color,Boolean){
            $(\'body\').css(\'background-color\',bgcolor);
            Dom.$Rootcontainer.css(\'color\',color);
            _this.selectColorStatus(bgcolor);
            _Util.Util.StorageSetter(\'background_color\',bgcolor);
            _Util.Util.StorageSetter(\'font_color\',color);
            NightMode = Boolean;
        }
    },
    //刷新页面，选中状态
    selectColorStatus : function(bodycolor){
        var body_color = bodycolor;//获取localStorage里背景颜色值;
        //添加背景按钮选中状态
        for(var i = 0,iLength = this.data.list.length; i < iLength; i++){
            //判断本地背景颜色是否等于data里的颜色
            if(this.data.list[i].data_color === body_color){
                //如果相等，给节点添加上current
                this.data.list[i].isActive = true;
                //去掉页面其他按钮的状态
                $(\'.bk-container\').eq(i).find(\'div\').addClass(\'current\')
                    .parent(\'.bk-container\').siblings(\'\').children().removeClass(\'current\');
            }
        }
        //如果本地存储的背景色是夜间模式的，则按钮文字显示“白天”
        if(body_color === \'#e9dfc7\'){
            $(\'#day_icon\').hide();
            $(\'#night_icon\').show();
        }else{
            $(\'#day_icon\').show();
            $(\'#night_icon\').hide();
        }
    },
    //渲染背景按钮
    renderColor : function(){
        var _html =  this.renderHtml(templatecontainer, this.data);
        $(\'#bk-container\').html(_html);
        var $bg_container = $(\'.bk-container\');    
        for(var i = 0,iLength = this.data.list.length; i < iLength; i++){
            $bg_container.eq(i).css(\'background-color\',this.data.list[i].bgcolor);
        }
    },
    // 渲染html模板
    renderHtml : function(htmlTemplate, data){
        var template    = hogan.compile(htmlTemplate),
            result      = template.render(data);
        return result;
    }
}

$(function(){
    read.init();
})

 在线项目：http://walking.komect.com/    可以同时在pc和手机端显示。（这个项目比较早，没有用模块化commonjs+webpack，页面是通过jsrennder渲染的。这里放这个项目的目的是展示h5的页面效果。）