我的前端工具

不定期更新

工具
Vscode编辑器:
https://code.visualstudio.com/
微软出品的编辑器

特效库

Pixi.js
http://www.pixijs.com/
高效率的Canvas/webgl库 

工具库

async
https://github.com/caolan/async
异步控制/处理库

underscore
http://underscorejs.org/
常用操作库 

在线工具

Staticfile cdn
https://www.staticfile.org/
七牛提供的cdn服务

发布于
2016-12-15

koa,yield与co库

目前我最欣赏的程序员是express的作者TJ。

最近准备用node js重写这个网站,发现TJ的新作koa似乎已经到了很使用的阶段,花了两小时研究了下。

刚开始看得是一头雾水。为什么koa demo 里的yield的用法和mdn的说法完全不同,为什么yeild这么特殊,这玩意到底什么鬼。

慢慢的理清了思路,找到了对的思路,才明白了过来。

不得不说,直介绍是什么,不说干什么用的文章到底有什么用……

首先,ES 6里引入了generator的概念.

通过代星号的函数可以常见生成器(特殊类)。

  1. 生成器上,有一段业务代码,
  2. 可以通过生成器生成函数(实例化类),调用可以执行生成器中的业务代码。
  3. 生成器中的代码依然不能执行异步代码,遇到 yield会中断
  4. 本身这一切不怎么神奇,但TJ大神写了个神奇的库叫CO。CO库可以直接调用生成器,执行业务代码。业务代码的yield只要跟的参数是promise或者thunk包装的异步函数,就能在异步结束后在异步代码中继续执行下面的代码,甚至可以有返回值。
  5. 这样,配合特殊格式的异步函数,把yield在结构上当成了类似call方法的同步函数。整个业务代码可以和同步代码一样有极强的可读性。异步代码尽可能简化,可以用其他库打包。
  6. 最后,代码看着像函数化的同步代码,用着也像。
koa其实就是个基于CO重构的express。
 
其实每个做过Node js的程序员,或多或少的都会写过一些类似的流程控制代码。当然,无疑TJ是写的最好的,考虑的最多,用的最广泛。
 
我真是爱死了这个设计出生的程序员了。

关于co可以参考 http://web.jobbole.com/85901/

发布于
2016-11-17

开始使用visual studio code

这两天偶然用了下vs code。发现个方面的感觉都非常棒。体验很好。对比了一下作netbeans和atom发现不论速度/外观上都是目前最优秀的。决定花一段时间习惯下这个编辑器。

发布于
2016-09-06

phonegap/cordova解决android下viewport无效的问题

环境:linux debiantesting,cordova 6.0.0,android sdk 23

今天公司有需要,拿cordova封装一个app,结果安卓浏览器一跑一口老血喷出来了,viewport无效。

赶紧一顿搜索,装插件,依旧蛋疼。

只能老实怕代码。

总的来说,问题是需要调用android sdk的WebSettings的setUseWideViewPort和setLoadWithOverviewMode方法。

对代码连蒙带爬,大概整理出了头绪。

大部分相关代码都在platforms\android\CordovaLib\src\org\apache\cordove下。

 

  • 实际代码由src\io\cordova\hellocordova\MainActivity做入口,继承自CordovaActivity
  • 核心代码由CordovaActivity实现。CordovaActivity的appview指向了CordovaActivity。
  • CordovaWebView是接口类,具体的业务逻辑都在CordovaWebViewImpl下。
  • 这个类是虚拟的,调用CordovaWebViewEngine这个借口来实现渲染。
  • 而CordovaWebViewEngine也是一个虚拟类,具体的是由engine下的SystemWebViewEngine来实现的。
  • 而SystemWebViewEngine有个public属性webview,是继承自android系统webview的SystemWebView。
  • 具体的webview可以由CordovaWebView的getview,调用SystemWebViewEngine方法取得。

 

好在我现在写代码也不怕麻烦,爬一串还算轻松……

具体修改肯定是修改src\io\cordova\hellocordova\MainActivity。

代码如下

package io.cordova.hellocordova;

import android.os.Bundle;
import org.apache.cordova.*;


import android.webkit.WebView;

public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{

    super.onCreate(savedInstanceState);
    loadUrl(launchUrl);
    // Set by <content src="index.html" /> in config.xml

    view=(WebView) this.appView.getView();
    view.getSettings().setUseWideViewPort(true);
    view.getSettings().setLoadWithOverviewMode(true);
   //Add By jarlyyn.http://blog.jarlyyn.com
}
}

 

然后 cordova run android 一下,真机跑一下,为了让第一页也起效,把给location夹在了setTimeout 0里。收工。

话说我最讨厌的语言依次就是PHP,Javascropt,Java了。

现在居然越来越火,工作中碰到的越来越多,这是说明我没眼光么……

发布于
2016-02-23

解决react input框chrome无法输入中文的问题

之前使用input框,value设为模型的值,发现无法输入中文。

研究了下。通过非托管的输入框组建,外带初始值设置解决这个问题。

也就是说,

<input onChange={this.change} value={this.state.model.v}>

改为

<input onChange={this.change} defaultValue={this.state.model.v}>

IE下并没有这个问题。感觉是输入法和chrome之间的问题。但是同时在linux下和win下都有这个问题。只能通过别的方式绕开了。 

发布于
2015-08-16

在nodejs中使用vm

最近在做基于Nodejs的mud客户端。考虑到安全性问题,需要用到VM。

一开始没考虑透彻怎么使用vm来隔离代码。

参考了下sandbox的代码。终于i想通了。

说到底,先要构建一个content上下文。

然后把所有的接口,做一个闭包,加入content中。

 

比如,原先是api.method,那么现在应该这样:

content.method=function(){api.method.apply(api,arguments)}

要么你把整个函数都替换掉,要么拉倒。

不能把对象本身暴露给vm,只暴露封装过的。

这样应该没问题吧?js里没法把function闭包中的内容再反向去出来吧?

 

sandbox那样还需要另开一个chlidprocess,再通过stdin/stdout来沟通,似乎对我的应用太重了点。

作为一个本地程序,添加太多的processer似乎太不礼貌了

发布于
2015-04-21

cheerio.js的一个坑。

今天在用nodejs给客户从老网站上爬资料时,碰到一个巨坑。

所有的问题都被转意了,导致 我公司自己的程序截取前N个字符的部分和渣一样(其实这也能算我部分代码的BUG)。

爬遍谷歌,找到了解决方案:

在使用是禁用decodeEntities。

比如:

var $ = cheerio.load(body,{decodeEntities: false});

参考:

https://github.com/cheeriojs/cheerio/issues/496

发布于
2015-02-07

半夜不能写代码

越写越兴奋,强迫自己睡着都不行。

晚上睡觉想着nodejs的express,其实是connect,想着自己写的第三方代码,再想着promises

越来越觉得这些东西的奇妙,自己的代码需要进行不小的调整,才能更‘美观’,更优雅

赶紧开电脑,上github给自己开issus。

这下半夜怎么过啊……

发布于
2014-11-24

Js的bind真心是个好东西

重写了nodejs代码,发现之前的代码太恶心,用了bind后整个世界清净了。

bind的用法很简单。

func.bind(this对象+参数1+参数2);

返回一个新函数

比如

var newfunc=func.bind('a','b','c')

newfunc(d).

就会以'a'为this对象。'b','c','d'为参数访问func函数。

让js的函数的变量作用域变得极为可控。

类似与这样的代码

var func.prototype.bind=function (thisobj,arg1,arg2...)

{

  return function(){

    func.call(thisobj,arg1,arg2);

 }

}

发布于
2014-10-27

这不是GPL的时代,这是MIT的时代。

一直以来,GPL一直作为开源的代表,被人们广为了解。

在单机时代,GPL的确很的保证了开源软件的生命力和发展。

可随着网络时代的到来,免费时代的到来,GPL的生命力越来越低了。

免费,或者强制的公开代码已经不是那么的重要了。

开源更多的是为了让别人加入自己的阵营,成为事实上的标准。

看看现在各种火热的开源产品。

Android,jquery,nodejs。

基本都是mit协议,或者apache协议这种对商业友好的协议。

就连我现在自己丢代码开源,也从lgpl变成了mit了。

时代不同,开源的意义不同了。

是现在的时代太势利,还是以前的时代太狭义?

这永远只是一个只有时间有资格解答的问题。

发布于
2014-08-07