2016年11月总结

时间 2019-11-13

标签 2016年 11月总结繁體版

原文原文链接

11月折腾/研究的料

浏览记录相关(window.history与document.referer)
css3相关(animate作loading动画)
微信端滚动穿透问题
移动端宽度自适应
页面布局和书写样式能力提高

浏览器历史记录相关

在作页面回退功能的时候接触到浏览器历史记录相关的问题特别头疼。（貌似咱们大前端无法跟踪用户的行为？应该是本身了解的太少的缘由，求教啊!）研究了window.history对象也没有找到解决方案。另外还了解了document对象的referer方法（用来获取打开当前文档的文档的URI）。javascript

先来讲说window.history对象，返回进行浏览记录的操做的方法有3个，分别是：css

window.history.go(n);根据n的值进行前进回退n步的操做。其中-1和1与下面的两个方法实现的效果同样。
window.history.back();与浏览器的后退按钮相同。
window.history.forward();与浏览器的前进按钮相同。html
ps： window.location.replace()方法进行页面跳转时会覆盖当前页面在浏览器历史中的记录。
ps2： h5在history API中新增了向浏览历史添加一条状态的方法，名为 window.history.pushState(state, title, url)。各浏览器支持良好。它的效果与 window.location = "#foo"的操做至关，这两种行为都会建立和激活另外一个和当前页面有关的历史纪录。可是==pushState()有其余优点==：
- 新URL能够是当前URL同源下的任意地址。相反的，设置window.location会让你保持在相同页面，除非你只修改hash.
- 若是没必要要，你能够不改变URL，相反的，将window.location设定为“#foo”；只会建立一个新的历史纪录，若是当前hash不为#foo.
- 你能够关联任意的数据到你的新历史纪录中。使用基于hash的方法，你须要将全部相关的数据编码为一个短字符串。

须要注意的是：==pushState()方法毫不会致使hashchange 事件被激活，即便新的URL和旧的只在hash上有区别。==前端

操做示例：java

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);

其余参考博客css3

ps3: document.referrer返回载入当前文档的文档的URI。若是当前文档是经过地址栏直接输入的或者书签栏进入的，则返回一个空字符串。浏览器

原先对回退按钮的要求是：微信

当前页的上一页为空或者不是从首页或者其余与咱们公司相关的页面进来的，回到首页或者回到它的上一页级页面。（这个上一级页面坑人了，主要是一些页面的地址栏须要带参，不用historyAPI的方法或者document.referrer貌似都不行）wordpress

看看其余公司的h5页面的回退方案布局

**家h5页面：直接从地址栏进入带回退按钮的页面，则隐藏回退按钮，页面上能够点击“首页”按钮来回到首页。
淘宝h5页面：
- ==场景一==：==商品页==点击加入购物车（未登陆状态）--进入-->>==登陆页==--点击浏览器返回按钮-->>==商品页==--点击浏览器返回按钮-->>==商品页==;
- ==场景二==：==商品页==点击购物车（未登陆状态）--进入-->>==购物车==--跳转-->>==登陆页==--跳转-->>==购物车==--点击返回按钮-->>==购物车==--再点-->>==商品页==
- 总结：使用了相似window.location.replace();的方法。覆盖了登陆页的记录。而后经过history.back();返回。
京东h5页面：同淘宝。

最后采用的方案:document.referrer+history.back();+window.location.replace();

判断载入当前页的文档的域名是否相同；
流程：搜索页--进入-->>详情页--进入-->>登陆页--返回-->>详情页--返回-->>搜索页；

登陆后在浏览器历史记录中的排位是

section 第三条记录
详情页以前的页面（回退按钮返回的页面）
section 第二条记录
详情页（登陆后展现的页面）
section 最新的记录
登陆页（浏览器前进按钮返回的页面）

至此, 感受走火入魔了。这个问题是否真的有必要深刻解决呢？感受有点钻牛角尖。接下来准备根据history的新的API写一个单页应用的demo，就over。

css3 利用content+animate实现loading动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css content 换行demo</title>
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
    }
    dot {
        display: inline-block; 
        height: 1em; line-height: 1;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '.\A..\A...';
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
        0% {transform: translateY(0em);}
        33% { transform: translateY(-1em); }
        66% { transform: translateY(-2em); }
    }
</style>
<body>
    <a href="javascript:" class="grebtn">订单提交中<dot></dot></a>
</body>
</html>

参考连接

微信端（移动端）滚动穿透的问题

这个是在写公司h5页面的时候遇到的，由于页面的侧边栏有须要滚动的内容，而这个时候若是整个屏幕也发生滚动的话体验感特差，而后我又上各大论坛以及Google扒了一下，如今已基本解决这个问题了。
首先附上个人js代码

var $solveFix = {
        scrollTop:undefined,
        bodyWidth:undefined,
        offFix: function (){
            this['scrollTop'] = $('body').scrollTop();
            this['bodyWidth'] = $('body').width();

            //禁止屏幕滚动，点击‘对比中的房源’时恢复滚动
            $('body, html').css({
                'position': 'fixed',
                'top': - this['scrollTop'],
                'left': '50%',
                'margin-left': - this['bodyWidth'] / 2,
                'z-index': 1
            });
        },
        onFix: function (){
            $('body, html').css({'position': 'static', 'top':0, 'margin': '0 auto'}).scrollTop(this['scrollTop']);
        }
    }

以上代码采用的是fix定位的方案使==整个body，html浮起来，这样就使得整个页面不会发生上下的滚动，而内部的子元素依然能够自由地上下滑==。然而，在后面的实践中，发现这个方案有个不足之处：

在禁止滚动的时候，body的可视部分若是有输入框，则在它获取焦点，弹出虚拟键盘时，整个页面都会随之上滑。这个问题待解决，目前只能尽可能避免这种布局。

ps: 在查阅文档和各大论坛的时候有人提出用body, html{overflow:hidden;}的方案，可是在微信端不起做用。

移动端宽度基于rem单位的自适应布局

首先贴上个人js代码（也能够用css的媒体查询来实现）

var root = document.getElementsByTagName('html')[0],
        NATIVE_W = 640;
function updateSize(){
        var w = window.innerWidth;
        if(w > 500) {
            w = 500;
        }else if(w < 320) {
            w = 320;
        }
        var cw = w / (NATIVE_W / 27.30666666666667);
        root.style.fontSize = cw + 'px';
}

window.onload = function(){
        updateSize();
        document.getElementsByTagName('body')[0].style.display = 'block';        
}
window.onresize = function(){ updateSize(); }

核心是==保持不一样宽度的设备下，宽度与根节点font-size的比例保持一致。== 在此基础上，加了最大、最小宽度的限制。