4 篇博文 含有标签「javascript」

一直都不知道如何获取javascript中，函数的形参个数。

javascript作为一个函数式编程的语言，hooker的使用多不胜数。我遇到一个很灵活的一个hooker接收器：

钩子函数异步 resolve 规则
我们经常需要在钩子函数中进行异步操作。在一个异步的钩子被 resolve 之前，切换会处于暂停状态。钩子的 resolve 遵循以下规则：

• 如果钩子返回一个 Promise，则钩子何时 resolve 取决于该 Promise 何时 resolve。
• 如果钩子既不返回 Promise，也没有任何参数，则该钩子将被同步 resolve。
• 如果钩子不返回 Promise，但是有一个参数 (transition)，则钩子会等到 transition.next(), transition.abort() 或是 transition.redirect() 之一被调用才 resolve。

我估计他是对返回值做判断，看看是不是object有没有.then属性以及.then是不是一个函数。这样就知道是不是promise了。 但是我真心绞尽脑汁都没弄明白怎么他怎么实现用了一个参数transition.next()的情况的。

答案在这里。

真心的，我看了好多好多本javascript的书籍，但是一直都没有注意到这个地方！！！！ 大概是没说吧？！！

var fn = function(x, y){return x+y;};
fn.length // 2

在中国桌面操作系统，windows还是占主流，windows中文版使用的是GBK编码，然后我神奇的发现我所爬的那个网站，即使在linux下，返回的html竟然也是GBK编码的！！

javascript原生就支持几种编码转换，但是好像就两三种，种类特别少。一般情况下我们写javascript都是出于开发者环境，少遇到非Unicode的编码，所以考虑编码的情况并不多。但是万一遇到了咧？
那个时候，就该使用iconv-lite库了！

npm install iconv-lite

具体使用看教程就好，这里只提醒一下：使用iconv.decode(buffer, encoding)的时候，第一个参数传的是Buffer。做爬虫的时候，应该用http或者request直接拿出Buffer来，然后用iconv-lite转换。直接拿body估计是不行的。

var iconv = require('iconv-lite');
var getBufferWithHeader = co.wrap(function *(url) {
  return new Promise(function (resolve) {
  var buffer = [];
  request({url, jar: jarWithCookie}, function (error, response, body) {})
    .on('data', function (chunk) {
      buffer.push(chunk);
    })
    .on('end', function () {
      buffer = Buffer.concat(buffer);
      resolve(buffer);
    });
  })
});
var getPageWithHeader = co.wrap(function *(url) {
  var out = yield getBufferWithHeader(url);
  return iconv.decode(out, 'GBK');
})

正则匹配内容的多处地方的注意事项。

一般情况下，javascript的正则在匹配到第一个位置之后，就不在匹配了。然而在做爬虫的时候常常需要得到所有匹配的内容，这时可以用g修饰符来开启全局匹配。

var regex = /b/g;

var str = 'abba';

regex.test(str); // true
regex.test(str); // true
regex.test(str); // false

于是想获得所有符合的内容，可以通过：

var aFilePath = 'path to file';
var regex = /src=\"(pic\?id=\d{2,})\"/g;
var data = yield fs.readFileAsync(aFilePath);
var name = regex.exec(data)[1];
var urls = [];
var match;
picUrlRegex.lastIndex = 0;
do {
  match = picUrlRegex.exec(data);
  if(match)
    urls.push(match[0]);
} while (match);

实现。
这里有一个特别需要主要的是，你需要手动的使用picUrlRegex.lastIndex = 0;来复位索引。

一直觉得react太折腾，ng太庞大，knockout太老土，像我需要开发大型SPA的，总是找不到路可走。如果你有跟我一样的感受，那来试试vuejs吧。

vuejs​

vuejs是一个在美国的中国小伙子开发的一个数据绑定库，有着简洁的代码风格。
作者尤雨溪开发并维护着这个项目，项目的两个核心：

本质上 Vue.js 做的是两件事情，数据绑定和视图层组件化。

都非常吸引我，因为我认为大型SPA必须要采取组件式开发，另外我需要一个纯粹（不要像angular这么繁杂）的数据绑定库。

vuejs在实现上很吸引人的一点是，它跟knockoutjs一样，采取依赖链而不是脏数据 检查的方式来实现绑定，这样其运算量不会因为监听器的数量增加而增加，在一定程度上保证了大型SPA的性能。

components​

见vuejs文档的components一章。
另见vuejs文档创建大型应用一章。这章提供了一种.vue后缀的开发方法。由于组件应该是包括了模版、逻辑代码、样式的，于是怎么布置这些个文件的位置就是一种学问了，通常我们会给每一个component一个文件夹，index.js作为入口。而.vue可以把三样内容放在一个.vue文件里。这样文件树突然就变得超级的干净简洁了。（你可以从他的demo看到他使用stylus、coffeescript、jade全都是最简洁的语言）
但是我放弃了使用.vue，虽然尤雨溪甚至提供了sublime显色插件，但是毕竟多了一层编译过程，有时候显色不正常还算小事，出了错不好定位那就比较耽误事儿了，所以我采取的是webpack+style-loader的解决方案，其实这也是vueify的工作方式(它使用的是insert-css)，只是我使用更传统的布局，手动地加载罢了。

var vue = require('vue');
var genData = function(){
  require('style!./style.less');
  return {};
};
var component = vue.extend({
  template: require('./template.jade')(),
  data: genData
})
module.exports = component;

当然了，webpack.config得相应配置上

module: {
  loaders: [
    { test: /\.jade$/, loader: "jade-loader"},
    { test: /\.html$/, loaders: ["raw-loader"]},
    { test: /\.less$/, loaders: ["raw-loader","less-loader"]},
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]}

updated：2016-03-14 还是用上了webpack + .vue的架构，没办法不用不行啊。 特别是引入了babel之后就更难找到出错的地方了，不过接受这一设定的话，整个项目突然变简洁了。 当然还是有难以定位出错点的问题，想其他办法解决吧。

vue-router​

vue-router提供了开发SPA所需的路由和历史功能，与vuejs配合那自然是真真好的。

vuex​

vuex提供了开发大型SPA的状态管理。

后记​

vuejs正式版1.0.0于2015年10月27日终于面世了。