图片加载失败处理

1.通过js监听图片的onerror事件，然后赋值新的图片

1
2
<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">
因为没有default.jpg 所以你直接复制以上html的话，请求会死循环。

2.img 发生error的时候 before 和 after 将会起效

img 发生error的时候 before 和 after 将会起效demo

3.监听图片父元素的error事件，并且要在事件捕获阶段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="s">
        <img src="xx.jpg" alt="">
    </div>
    <script>
	//只要是父级就OK
    document.body.addEventListener('error',function(e){
        console.log(e.target);
        //e.target.src = "又是一张错误地址.jpg"; //这里如果使用base64:的图片，如果base64图片还有错误，那么也会死循环
        //使用一张1X1的透明gif图片
        e.target.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
    },true);
    </script>
</body>
</html>

Safari ajax 报错 SyntaxError: DOM Exception 12

在电脑的safari上不能发送ajax， 调试一下发现 报错 SyntaxError: DOM Exception 12

搜了一圈，找到这篇angular1.3.15 下 safari9.0.1 爆错：SyntaxError: DOM Exception 12

说是后面有个空格导致的。于是找到代码中，发现
方法中ajax会设置一个头部

1
xhr.setRequestHeader( "Authorization", ( "Bearer "+ ( get('token') || '' ) ) );

由于在get(‘token’) 的时候没有的时候就会为空，那么上面的代码就相当于

1
xhr.setRequestHeader("Authorization", ("Bearer "));

解决：
get(‘token’)不为空时再设置头。

node-inspector调试node

先安装
npm install -g node-inspector

先开个控制台再运行下面的
node-inspector

再开个控制台接着在运行

node-debug app.js

会自动打开浏览器，并断点在第一行，这样通过熟悉的方式来调试node。

每次调试要手动开两次命令行并输入命令，可以简单一点。

两种方法：

第一种：

在package.json 里面的配置

1
2
3
"scripts": {
  "debug": "set NODE_ENV=debug&& node-debug app.js"
}

先开一个命令行执行node-inspector

再运行 npm run debug

第二种：

start bash.exe 可以打开一个新的bash窗口

如果想带上命令那么

1
start bash -c "node-inspector &"

想执行多个命令就用 & 连接

下面的代码就能够同时执行两个，不用每次开窗口了

1
start bash -c "node-inspector &" & start bash -c "node-debug app.js"

在把这句整成简写tiaoshi

windows 下 在用户名录下新建了一个 .bashrc 文件 并写入简写

alias tiaoshi=’start bash -c “node-inspector &” & start bash -c “node-debug app.js”‘;
关闭命令行，再打开，发现提示错误

WARNING: Found ~/.bashrc but no ~/.bash_profile, ~/.bash_login or ~/.profile.

于是再新建没有的几个文件

1
2
3
touch .bash_profile
touch .bash_login
touch .profile

关闭命令行再打开， 此时在你的项目目录下手动输入 tiaoshi，就ok了。 默认启动的是app.js。

vuejs前进后退过场效果

当点击 下一个页面，是从右往中入场。
当点击 上一个页面，是从中到右离场。
可以给 router-view 设置，进场出场的过渡类名，来达到前进后退。

比如我们定义 prev，为上一页过渡。next，为下一页过渡。 css过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*下一页*/
.next-transition {
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}
.next-enter{
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
}
.next-leave {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
/*上一页*/
.prev-transition {
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}
.prev-enter {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
}
.prev-leave{
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

过渡定义好了，接下来就是看准时机，改变类名就好了。

如何知道你现在是一页还是下一页。

额。。。 那就本地也来一个数组，里面放访问过的页面，然后在每次在路由的 router.beforeEach 里面，判断一下
要去的页面是之前的一个，那么说明就是后退，如果不是，那么说明就是前进。

1
2
3
4
5
6
7
8
9
10
11
12

window.routeList = [];
router.beforeEach(function(transition){
    if(routeList.length > 1 && transition.to.name==routeList[routeList.length-2]){
        router.app.effect='prev';//返回
        routeList.splice(routeList.length-1,1);
    } else {
        router.app.effect='next';//前进
        routeList.push(transition.to.name);
    }
    transition.next();
});

以上就是 demo1 中转场的效果。

但是感觉转场的时候中间总是白了一段时间，以为在转场时只能存在一个。

后来看了 家有萌虎 的例子， 发现可以弄成类似原生的转场效果。
见demo2

OS X EI Capitan 9700USB网卡没办法识别

尝试接有线，然后买了个转接头

安装驱动，发现怎么也没用。如果你也遇到相同的问题，那么试着完成下面的步骤就能解决。

1、先拔下所有usb

2、重启，一旦出现黑屏，按住 command+R,直到看到黑色的屏幕，苹果标志和一个白色的进度条。松手，然后等待电脑开机进入恢复模式

3、在最上面选择，工具->终端

4、终端中运行 csrutil disable 这是关键的一步

5、从最上面选择“”，然后选择“重新启动”

6、安装驱动，然后会提示你重启 驱动地址（百度网盘）
解压下载文件，找到x86_64文件目录，双击“USBCDCNET.pkg”进行安装。

7、 打开你的终端，并执行sudo NVRAM启动参数= “ KEXT - DEV- MODE = 1 ”
然后重启

8、打开你的终端，并运行sudo的kextload /System/Library/Extensions/USBCDCEthernet.kext
然后重启

9、此时插入usb适配器，连上网线，打开系统偏好设置就会看到一个
USB 2.0 10/100M Ethernet Adaptor

搞定。

参考：

http://inkandfeet.com/how-to-use-a-generic-usb-20-10100m-ethernet-adaptor-rd9700-on-mac-os-1011-el-capitan

http://blog.163.com/sujoe_2006/blog/static/335315120156525830958/

beforeunload 不支持 safari

UBT统计需要在页面离开的时候上报一些数据

平常可以用 beforeunload 事件

1
2
3
4
5
window.addEventListener('beforeunload', function (event) {
	//上报ubt
	window._track.push();

});

但是在 safari 浏览器里面这玩意不好用
此时可以使用 pagehide方法

1
2
3
4
5
6
window.addEventListener('pagehide方法', function (event) {
	if(window._track){
		//上报ubt
		window._track.push();
	}
});

综合一下就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

//代码来自 https://github.com/amfe/lib-env/blob/master/src/browser.js?from=groupmessage&amp;isappinstalled=0
var env = function(){
         _env = {};

         var ua = window.navigator.userAgent;
         var matched;

         if((matched = ua.match(/(?:UCWEB|UCBrowser\/)([\d\.]+)/))) {
             /**
              * @instance browser
              * @memberof _env
              * @property {String} name - 浏览器名称，比如UC/QQ/Firefox/Chrome/Android/Safari/iOS Webview/Chrome Webview/IE/IEMobile/unknown等
              * @property {Version} version - 浏览器版本号
              * @property {Boolean} isUC - 是否是UC浏览器
              * @property {Boolean} isQQ - 是否是QQ浏览器
              * @property {Boolean} isIE - 是否是IE浏览器
              * @property {Boolean} isIEMobile - 是否是IE移动版浏览器
              * @property {Boolean} isIELikeWebkit - 是否是IE兼容了Webkit特性的浏览器
              * @property {Boolean} isChrome - 是否是Chrome浏览器
              * @property {Boolean} isAndroid - 是否是Android的原生浏览器
              * @property {Boolean} isSafari - 是否是Safari浏览器
              * @property {Boolean} isWebview - 是否是iOS下的Webview或Android下Chrome的Webview
              */
             _env.browser = {
                 name: 'UC',
                 isUC: true,
                 version: matched[1]
             }
         } else if((matched = ua.match(/MQQBrowser\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'QQ',
                 isQQ: true,
                 version: matched[1]
             }
         } else if ((matched = ua.match(/Firefox\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'Firefox',
                 isFirefox: true,
                 version: matched[1]
             }
         } else if ((matched = ua.match(/MSIE\s([\d\.]+)/)) ||
                         (matched = ua.match(/IEMobile\/([\d\.]+)/))) {

             _env.browser = {
                 version: matched[1]
             }

             if (ua.match(/IEMobile/)) {
                 _env.browser.name = 'IEMobile';
                 _env.browser.isIEMobile = true;
             } else {
                 _env.browser.name = 'IE';
                 _env.browser.isIE = true;
             }

             if (ua.match(/Android|iPhone/)) {
                 _env.browser.isIELikeWebkit = true;
             }
         } else if((matched = ua.match(/(?:Chrome|CriOS)\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'Chrome',
                 isChrome: true,
                 version: matched[1]
             }

             if (ua.match(/Version\/[\d+\.]+\s*Chrome/)) {
                 _env.browser.name = 'Chrome Webview';
                 _env.browser.isWebview = true;
             }
         } else if(!!ua.match(/Safari/) && (matched = ua.match(/Android[\s\/]([\d\.]+)/))) {
             _env.browser = {
                 name: 'Android',
                 isAndroid: true,
                 version: matched[1]
             }
         } else if(ua.match(/iPhone|iPad|iPod/)) {
             if(ua.match(/Safari/)) {
                 matched = ua.match(/Version\/([\d\.]+)/)
                 _env.browser = {
                     name: 'Safari',
                     isSafari: true,
                     version: matched[1]
                 }
             } else {
                 matched = ua.match(/OS ([\d_\.]+) like Mac OS X/);
                 _env.browser = {
                     name: 'iOS Webview',
                     isWebview: true,
                     version: matched[1].replace(/\_/, '.')
                 }
             }
         } else {
             _env.browser = {
                 name:'unknown',
                 version:'0.0.0'
             }
         }
         return _env;
     }();

	//在ios里面不支持beforeunload事件
	var eventName = (env.browser.isWebview && env.browser.name === "iOS Webview" || env.browser.name==='Safari' ) ? "pagehide" : "beforeunload";
	console.log(eventName);
	//页面关闭后上报数据
	window.addEventListener(eventName, function (event) {
		//上报ubt
		window._track.push();
	});

webpack版本管理

需要 HtmlWebpackPlugin 插件

index.html 使用前

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
     <link rel="stylesheet" href="./build/style.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="./build/vendor.js"></script>
    <script src="./build/build.js"></script>
  </body>
</html>

使用后

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <link href="/util/vue/build/style.4daf5db48dee3ff24cd7.css" rel="stylesheet"></head>
  <body>
    <div id="app"></div>
  <script src="/util/vue/build/vendor.4daf5db48dee3ff24cd7.js"></script><script src="/util/vue/build/build.4daf5db48dee3ff24cd7.js"></script></body>
</html>

在webpack.config.js 文件中加入

1
2
3
4
5
6
 //HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin
plugins:new HtmlWebpackPlugin({
   filename:'../d.html',//会生成d.html在根目录下,并注入脚本
   template:'index.tpl',//模板
   inject:true //https://github.com/ampedandwired/html-webpack-plugin/issues/52
 }));

生成的时候会以index.tpl为模板生成d.html，这个d.html就是最后我们所需要的

index.tpl 文件很简单

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

hexo d无法push

像往常一样 用 hexo d 来更新内容

然后来了一句这个。

1
2
3
4
5
6
7
8

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/do
cs/troubleshooting.html
Error: ssh_exchange_identification: read: Connection reset by peer
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

翻墙试了把就好了。