Show Framework

一个Web开发者 Zen(PHP, HTML, jQuery, ExtJS, JavaScript, CSS, NodeJS);

神坑:当你的全局变量遇上webkit的global

打开chrome的console,写

var status = 1 > 0;
console.log(status ? 'yes' : 'no');

自己看下结果,是yes

再写

var status = 0 > 1;
console.log(status ? 'yes' : 'no');

神奇的事情发生了,还是yes,莫非 0 > 1?

这样逆天的是我今天也遇到了,但是在firefox里没事的,能得到正确结果。

究其原因,发现:

typeof status; // "true" or "false"

status 变量被变成字符串类型了,这就解释了为啥一直yes

但是又不懂了,明明定义了一个boolean变量,为啥给变成string了呢

搜索了一番发现statuswindow已经定义过的一个全局变量,而且是string类型的,webkit在处理你的全局变量覆盖预定义的变量时,没有按照想当然的做法,而是造了一个坑,这是一个神坑啊

当然你项目里不用全局变量是永远遇不到这事的,今天瞎折腾做test的时候偶然发现这个问题…

Require Js 简介

RequireJS 是一个JavaScript文件和模块加载器。为浏览器做了优化,但是一样可以运行在Rhino和Node等JavaScript环境中。使用RequireJS这样的模块化脚本加载器,可以做到提升访问速度,改善代码质量。

兼容性:

  • IE 6+
  • Firefox 2+
  • Safari 3.2+
  • Chrome 3+
  • Opera 10+

使用find和wc命令统计代码行数

想统计一下自己项目上多少行js代码,用shell就可以搞定

1
wc -l `find . -name "*.js" | xargs`

这样就可以统计当前目录所有.js文件的代码行数和总计行数

1
2
3
4
5
   8 ./pv.js
   6 ./version.js
 166 ./viewport/FitViewport.js
 195 ./viewport/IndexViewport.js
   51172 total

注:如果压缩过的js只有一行,没有换行符,那么这个文件统计出来是0行

PhpStorm 6 发布了

PhpStorm我从1.0用到现在,版本更新速度也是跟Firefox一样越来越快了,是为了多赚钱升级费吗?

有一些新特性还是比较好的

  1. 增强了重构功能
  2. Code (Re)arranger,可以重新排序方法和属性
  3. 新的数据库编辑器,但是我不知道这个功能用的人多不多
  4. 增强了对压缩过的js的处理能力
  5. 集成了REST客户端
  6. Emmet
  7. 外观,还有支持 Retina MacBook 了

觉得国外服务器下载慢的,可以从我的百度网盘下载,很快http://pan.baidu.com/share/link?shareid=418062&uk=1057340614

只Mac版的

博客更新,投靠Octopress

厌倦了wordpress臃肿的后台,喜欢markdown的轻便实用,从此正式投靠octopress

原有链接全部可以使用,原wordpress后台放在那里不再更新了

博客好久没有更新了,今天再次起步,转移了一部分之前已经用markdown写的文章到新的博客上

使用本地历史功能做代码变更追踪

你会使用版本控制系统来追踪代码变更吗,例如Git, CVS, Mercurial, Subversion或者其他版本控制系统?如果你有使用,那么Local History可以扩展版本控制系统,如果你没使用,那么Local History功能可以帮助你跟踪代码的每一次变化。
编写,重构,编辑,测试,代码总是在变更。我打赌你肯定遇到过版本控制系统追踪不到的代码变更,因为你不可能总是频繁的提交。这时候记得Local History功能,它可以跟踪每次变更!

JavaScript实现五子棋

奋战了几个夜晚,终于实现了第一版纯JavaScript的五子棋AI程序
页面在这里http://ishowshao.com/javascript-gomoku/
现在子力比较弱,子力大概就是个纯业余选手

大概说一下我的实现方法:

首先我确定若干种模式,例如: 1,1,1,1,1 ,之后我为每种模式设定一个分数,比如刚才的1,1,1,1,1,棋盘上出现这种模式代表着胜利,那么应该给它设定一个非常高的分数

再举例:0,1,1,1,0 这是活三 0,1,0,1,1,0 跳活三 模式是有对称和非对称的,根据对称性,要把模式转换成8或4个方向,这样我就有了一个模式集合

接下来要做的事情就是模式匹配:

对棋盘上每个我可以下棋的坐标,假设摆放棋子在这里,根据全盘匹配上的模式的分数总和,来确定摆放棋子的位置。

当然策略上要有些最基本的判断比如对方如果有必须要防御的棋,自己是否下一步就能胜利之类的,要在算模式分数之前先判断出来

我的代码提交在google code上开源的,有需要的自己去拿,欢迎有兴趣的朋友一起讨论

google code页面貌似被墙了,fuck gfw

http://code.google.com/p/javascript-gomoku/ 请自备翻墙

新手如何学习ExtJS 4

本文地址http://www.showframework.com/2012/08/how-to-study-extjs/

最近运营ExtJS交流群的时候,感触颇深,我感觉作为一个老手,我有必要介绍一下如何学习这种基础性问题。

  • 新手如何学习ExtJS4?
  • 如何入门ExtJS4?
  • 如何快速学习ExtJS4?

1.仔细阅读新手教程

新手教程是指ExtJS官方文档中Guides那一系列文章,因为是英文的,新手阅读起来可能有障碍,为此我特意翻译了这一系列教程,根据使用频度我已经差不多把最常用到的教程翻译完了,后续还将继续翻译。
通读这一系列教程后,你会对ExtJS的基本使用方法有个框架性的了解,你会大体上知道如何实现常用功能。

现在我把所有已翻译的教程列举在此,记住,认真的读一定对你有帮助。

2.把官方文档中的所有Demo都浏览一遍

做这个事情是为了了解官方Demo中实现了哪些功能,当自己要做一个功能时,有例子照着做是最快的,浏览一遍就会对现有的Demo有个大概印象,当你没有头绪的时候你的大脑会在后台查找之前的印象的,仔细浏览一遍,没有错。

3.熟读API Docs(API文档)

最近遇到很多人问问题,把一段自己想当然写出来的代码贴上来问为什么不对,事实上你仔细查一下API文档就知道,你这种用法ExtJS根本就不支持,当然不对。
当你想让一个组件实现某功能时,不要先自己YY,养成习惯先去查api,看这个组件接收什么参数,有什么方法,有什么属性,提供什么事件。ExtJS的文档在各种类库中做的是相当完善,相当好的,这个宝库不挖掘,那真对不起文档的编写者(大部分是JS Doc自动生成的_)。
阅读文档对于学习任何东西都是个好方法,因为一个类库,除了开发者没有任何人天生就知道它有什么功能,都是必须通过一个文档来告诉其他人如何使用。
一定要养成读文档的习惯

4.适当的使用搜索引擎

为什么说是适当的呢?因为一遇到问题就马上搜索,就会把查文档的习惯丢掉,事实上,绝大部分google上网友提供的解决方案,都来自他们对文档的挖掘,所以还是应该更重视文档,因为网友有时候会误解文档,或者YY一些奇技淫巧。
使用搜索的好处是:通常可以较快速的解决一些无头绪的问题

========= 以上4点希望能对ExtJS新手提供一些基础性的帮助,如何学习也是一门学问,也最能体现一个人的素质,so,看着办吧