前端学习笔记

前端Mock数据的方法

1.静态文件，ajax直接访问文件路径

2.字符串，但是有单双引号、换行的问题

3.网络抓包工具如fiddler，页面正常请求，监听网络拦截所请求的网址返回数据

4.deployd 可视化数据库操作界面  https://github.com/deployd/deployd 依赖于mongodb和node.js，初次安装成本较高

5.mockjs  http://mockjs.com/ 可以伪造动态的数据

6.RAP http://rap.taobao.org/org/index.do 可视化管理工具，根据文档自动生成MOCK接口

7. json-server    node插件，非常好用简单，好像只能组合单表的json

关于Viewport的理解 www.cnblogs.com/2050/p/3877280.html

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
<meta name="viewport" content="width=device-width, initial-scale=1">

移动端touch事件和click事件

touchstart -> touchmove -> touchend -> click

为了兼容ipad的触摸事件，click事件应该写成下面的样子

$(this).off("touchend").on("touchend",function(e){

myfunction();

e.preventDefault();

}).off("click").on("click",function(){

myfunction();

});

判断浏览设备的属性，其实就是通过navigator.userAgent里面的文字来判断的

比如navigator.userAgent.indexOf('iPad') > -1  说明是ipad

navigator.userAgent.indexOf('Mac OS') > -1说明是mac

更多的可以参考http://www.cnblogs.com/sese/p/5629404.html

关于svg http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/，在IE中use不支持外链.svg文件，可以通过ajax将svg文件代码加载到一个隐藏的div元素中

var ajax = new XMLHttpRequest();
ajax.open("GET", "../201407/mytest.svg", true);
ajax.onload = function(e) {
    document.body.insertAdjacentHTML("afterBegin", '<div style="display:none;">' + ajax.responseText + '</div>');
}
ajax.send();

导出svg图片： https://github.com/exupero/saveSvgAsPng

微信返回问题：在微信中打开链接点击微信顶部“返回”的时候希望直接关闭页面

微信返回时路径中的参数被丢失了，比如我原来路径是“/#abc?a=b”跳转到“/#c”后点击返回后变成了“/a#abc”路径中的参数没了，造成页面显示异常

在ios的微信中每一次路径变更都会触发window.onpopstate事件，我们只希望返回的时候做事件监听关闭页面，通过window.history.length的变更来判断是否返回，下面是我的在angular4项目中用到的代码

  public ngOnInit() {
    this.pushHistory();
    let historyLength = window.history.length;
    Observable.fromEvent(window, 'popstate').subscribe(res => {
      let isBackWard = window.history.length <= historyLength;
      if (window['WeixinJSBridge'] && isBackWard) {
        window['WeixinJSBridge'].call('closeWindow');
      }
    });
  }
  public pushHistory() {
    let state = {
      title: 'title'
    };
    window.history.pushState(state, 'title');
  }