图片加载失败处理

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.

翻墙试了把就好了。