By

gzip解压问题

使用request发送请求，原来总是将编码变成deflate，一直没有解决是gzip格式时怎么解析，今天终于静下心来解决掉了。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var request = require('request');
var zlib = require('zlib');
request({
    uri: 'http://laomu1988.github.io/js/totop.js',
    method: 'GET',
    headers: {
        "Accept-Encoding": "gzip, deflate, sdch"
    }
}, function (err, response, body) {
    if (err) console.log(err);
    console.log('statusCode:', response.statusCode);
    console.log('encoding:', response.headers['content-encoding']);
    console.log('type:',typeof body);
    console.log(zlib.gunzipSync(body) + '');
});

结果输出错误提示zlib解压失败

1
2
3
4
5
6
7
8
9
statusCode: 200
encoding: gzip
type: string
zlib.js:534
      throw error;
      ^
Error: incorrect header check
    at Zlib._handle.onerror (zlib.js:363:17)

为什么呢，直接将这段js文件保存并用zlib.gzipSync压缩后，通过网上代理对比直接请求时返回的内容，结果一致。但在代码解压的时候就是不能解压， 这说明是body有问题, 输出body内容的charCode对比压缩文件，发现有很多重复的65535,这说明request返回的body没有正确拼接。

1
2
3
for(var i = 0;i<100;i++) {
  console.log(body.charCodeAt(i));
}

解决办法

查找request的文档，发现request有个参数encoding可以定义body的编码方式， 改为null则不自动编码。最终代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var request = require('request');
var zlib = require('zlib');
request({
    uri: 'http://laomu1988.github.io/js/totop.js',
    method: 'GET',
    encoding: null,
    headers: {
        "Accept-Encoding": "gzip, deflate, sdch"
    }
}, function (err, response, body) {
    if (err) console.log(err);
    console.log('statusCode:', response.statusCode);
    console.log('encoding:', response.headers['content-encoding']);
    console.log('type:',typeof body);
    console.log(zlib.gunzipSync(body) + '');
});

By

atom-beautify总是修改换行符的解决方法

直接使用文件内部的换行符,不使用配置的换行符。
从文件packages\atom-beautify\src\beautifiers\js-beautify.coffee里面查找

1
options.eol = getDefaultLineEnding() ? options.eol #fixes issue #707

修改为

1
options.eol = if text.indexOf('\r\n') >= 0 then '\r\n'else '\r'

By

hexo博客使用

使用主题： jacman

添加RSS

我的主题配置文件已含有rss：/atom.xml， 因此我就直接安装部署了。
根目录下的配置信息：在# Extensions中添加，已经有的就免了。
plugins: hexo-generator-feed
打开Terminal（终端）输入：运行
npm install hero-generator-feed
重新部署：
hexo clean
hexo d -

站内搜索

为hexo增加本地检索功能: http://moxfive.xyz/2016/05/31/hexo-local-search/

By

iscroll滑动效果

使用iscroll滑动要禁止touchmove事件的默认动作,见demo

1
2
new IScroll('#wrapper', { scrollX: true, scrollY: false, mouseWheel: true });
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

By

npm package dependencies config

  • dependencies
  • peerDependencies 同级依赖，会和本模块安装在同一级目录
  • devDependencies
  • bundleDependencies
  • optionalDependencies

package

  • nrm 切换npm源

  • nvm 切换node版本

  • lodash 常用函数

  • request 请求数据

  • open 浏览器打开指定网页

  • 调试

    • node-inspector

  • 打包

    • webpack
    • gulp
    • grunt
    • fis3
    • browserfiy

  • 服务器

    • express
    • koa
    • file-server_bird 静态文件服务器
    • http-transpond_bird 路由

  • 数据库

    • mongodb
    • lokijs 内存数据库,操作类似mongodb
    • lowdb 内存数据库,loadsh链式处理
    • waterline 一样api链接多种数据库

  • 命令行

    • commander
    • yargs

  • 文件匹配和处理

    • filter-files 文件列表
    • node-glob 文件路径匹配
    • mk-dir 同步创建多级文件夹

  • html处理

    • jsdom
    • cheerio html的片断中构建DOM结构，然后提供像jquery一样的css选择器查询

Nodejs

By

使用命令npm install koa@next安装koa@next;

  • koa2学习笔记

  • 为什么要用koa@next取代koa?

    koa@next的中间件不需要是generate函数.这样编写一个小插件就不需要babel转换了,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// npm install koa@next
var koa = require('koa');
var app = new koa();
app.use(function (ctx, next) {
  if(!ctx.response.body) {
    ctx.response.body = 'not fount';
  }
  return next();
});
app.listen(3000, function(err) {
    err && console.log(err) || console.log('start server at http://localhost:3000');
});

By

jquery的各种高度

http://www.cnblogs.com/wyaocn/p/5819774.html

首先来说一说$(document)和$(window)，如下：

$(document).height();//整个网页的高度
$(window).height();//浏览器可视窗口的高度
$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

用一句话理解就是：当网页滚动条拉到最低端时，

$(document).height() == $(window).height() + $(window).scrollTop()。

注意，是拉到最低端！
当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()
假如您要获取整个网页的高度，不建议用$(“html”).height()、$(“body”).height()的高度，
原因：
$(“body”).height()：body可能会有边框，获取的高度会比$(document).height()小； $(“html”).height()：在不同的浏览器上获取的高度的意义会有差异，说白了就是浏览器不兼容。
说道这里，提及边框和margin还有padding，我们自然想到了jquery的另外的两个高度，那就是innerHeight()和outerHeight()
innerHeight()和outerHeight()不适用于window 和 document对象，对于window 和 document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。

innerHeight()

innerHeight:高度＋补白

outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距
innerHeight(value)
这个“value”参数可以是一个字符串（数字加单位）或者是一个数字,如果这个“value”参数只提供一个数字，jQuery会自动加上像素单位（px）。如果只提供一个字符串，任何有效的CSS尺寸都可以为高度赋值（就像100px, 50%, 或者 auto）。注意在现代浏览器中，CSS高度属性不包含padding, border, 或者 margin， 除非box-sizingCSS属性被应用。

jquery高度，放到浏览器中试一下

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

javascript的各种高度

网页可见区域宽[仅针对body]： document.body.clientWidth
网页可见区域高[仅针对body]： document.body.clientHeight
网页可见区域宽[仅针对body]： document.body.offsetWidth (包括滚动条和边框，若滚动条和边框为0，则和clientWidth相等)
网页可见区域高[仅针对body]： document.body.offsetHeight (包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等)
可视窗口宽度(包括滚动轴宽度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari
可视窗口高度，不包括浏览器顶部工具栏： window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
网页正文全文宽(不包括滚动轴的宽度)： document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
//假如网页中没有滚动轴，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等。
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高（整个屏幕的高度）： window.screen.height
屏幕分辨率的宽（整个屏幕的宽度）： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
整个浏览器可用工作区高度： window.outerHeight
整个浏览器可用工作区宽度： window.outerWidth

By

Progressive Web App 渐进式web应用特点

  • 可以添加图标到主屏
  • 全屏执行
  • 离线环境使用Service Worker 和 Cache Storage

  • 推送消息等Push Api 和 Notification Api

  • web 应用元数据（metadata）

如何创建