Category Archives: 业界杂谈

nodejs-express初体验

2013 年 05 月 30 日 – 上午 8:59

上次文章提到，正在用nodejs做一个小项目，现在总算是做完了

学习/搞着玩是一回事，虽然两年前就开始接触nodejs，做实际要用到项目里是另一回事，经过两周的折腾，我这里不想夸，也不想踩，只想说一下我真实的感受，给准备用nodejs的朋友一点参考

整体来讲，nodejs+express的开发模式，感觉还可以，既不像前端大牛们说的一样好，也不像另一些人说的那样一无是处，下面针对几个关键点分别说一下

1. express

早就听人说过，express是个“优秀”的web框架，我这次的使用体验，却让我没有这种感觉。大概是用惯了cakephp那种规约编程/傻瓜化的web框架的缘故，我觉得一个框架最应该做的，就是让使用者不要过多感觉到框架的存在，以最简单的方式获取请求参数/调取model/lib/以及向view层传递显示，可以让人将所有的精力都投入到业务逻辑中～～要不我还用你框架干嘛？

对express，最别扭的一点，就是它的routes配置～～居然每一个请求的url都要去做配置，让我一下想到了java/spring mvc的那个xml～～懒婆娘的裹脚布也不过如此

另一个sb的地方，是它的logger～～本来不想重写日志类的，特别是access日志，服务器能自动记录最好，找了好久，才找到如何设置express 日志的格式，可是设置好以后，发现日志时间记录的不对，格式也不好看，一查原码才发现，logger里用的是date.toUTCString~~UTC啊，尼玛我看日志的时候，还得想着和实际时间差8小时。。。

最关键的一点是，express官方的api极其“简约”，很多东西不得不去翻框架原码才能发现一些“隐藏”的功能

最后，作为一个web框架，居然没有filter，虽然app.use可以部分实现filter的功能，但用起来还是感觉很不爽

2. npm

npm真TMD乱，很多好名字都被占了，占着茅坑不拉屎

比如thrift，装上以后发现根本不能用，版本太老，仔细一看，居然2年没维护了

再比如email，居然没看见在哪儿设置邮件服务器～～太TM扯淡了

3. 模板引擎

express默认的jade就不提了，稍微复杂点的页面，就会搞得一团糟

我用的是ejs，不好不坏，只能说“可用”。我比较喜欢view层代码，后端程序和前端html/js可以一目了然，所以我使用<%作为格式符，然后用jsp编辑器打开ejs文件～～哈哈，一目了然

ejs比较不好用的一点是对于变量的判断过于严格：如果试图输出没往view层传递的变量，页面居然会直接抛500错误～～太较真了吧，你当空串处理不久行了吗？

4. nodejs

不好意思，上面说了3点，大部分都是在踩，现在该说点好的了

js&node，本身还是一款很不错的组合，虽然异步编程需要一些时间来适应，但却给高并发和快速影响带了了天生支持；另外，js语法简单自由，也可以带来很高的开发效率

对于所谓的“前后端共用代码”，我倒是觉得不太有必要～～毕竟，前后端执行环境差异巨大，写这种“公用代码”的维护成本，还不如直接copy一份给前端用

最后，给自己留一个问题：下次你还会选nodejs吗？

以前写过一个简单的前端mvc框架，jLeaf，基本思路是模仿cake和spring来做的，node出来后，曾经想顺势再写一个后端框架，名字就叫jRoot，可惜因为工作忙，也因为人懒，没能实际做出来，看到express这么难用，真想现在就把jRoot做出来，可惜现在更忙了～～～希望后面能有时间把它搞出来，也希望node能有其它更好用的web框架出来

Tags express, Node.js, 框架 | Permalink | Comments (4)

Hello World 业界杂谈点点滴滴

php ci快速入门

2013 年 02 月 25 日 – 上午 11:08

久闻php ci的大名，一直没有机会使用，上周做个小项目，用到了这个框架，整体感觉很不错，这里跟大家分享一下ci的快速入门

ci文档入口：http://codeigniter.org.cn/user_guide/toc.html（中文！）

ci，即codeigniter，我用的版本是当前的最新版本2.1.3

使用ci，只要将apache或者nginx的发布目录指到codeigniter的顶级目录下就可以

下面，就按MVC的顺序来所说ci的使用

url

比如要访问/news/list的action，默认情况下，url需要这么来写：xxx.xxx.xxx/index.php/news/list~~多个index.php，很别扭

如果要去掉这个index.php，需要加上“.htaccess”来实现urlRewrite：

1
2
3

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

ci的controller位于application/controllers目录下，文件名和ation方法名需要遵循规约变成的规则

不多说了，还是直接写代码吧：

class News extends CI_Controller{
	function __construct(){
		parent::__construct();
	}
	// http://localhost/news/lists，如果要使用其他的url，需要到“application/config/routes.php”去配置路由
	public function lists($keyWords){
		//使用model，model()方法的第一个参数“news”对应application/models/news.php
		//第二个参数“News”对应下面如何引用这个model：$this->News，如果不设置这个参数，这是$this->news，及model的名字
		$this->load->model('news', 'News');
		$data['list1'] = $this->News->list_all();
		//使用library核心类
		$this->load->library('news_manager');
		$data['list2'] = $this->news_manager->search_news($keyWords);
		//使用view，向浏览器输出内容
		$this->load->view('header');
		$this->load->view('news/list', $data);
		$this->load->view('footer');
	}
	//
	public function view_news($id){
		$this->load->view('view_news', array(
			'title' => news->title,
			'content' => $news->content
		));
	}
}

如果要加载非默认数据源，需要到config/database.php里配置不同的数据源，比如现在除了default，又添加了一个叫做abc的数据源，我们如何调用哪个它哪？

//abc
$abc = $this->load->database('abc', true);
$this->load->model('abc_table1');
$thisi->abc_table1->db = $abc;
//default
$defaultdb = $this->load->database('default', true);
$this->load->model('news');
$this->news->db = $defaultdb;
//即通过“$this->load->database”建立数据源，然后通过$thisi->model->db=xxx为当前某个model的引用设置数据源

另一个要说的功能是：可以将controller文件放在子文件夹中，比如“application/controllers/shop/products.php”，调用它就需要“/index.php/shop/products/xxx”

上面的代码已经用到了模型的调用，这里所说模型的常用方法

增

class news extends CI_Model{
	function __construct(){
		parent::__construct();
	}
 
	function cretae($title, $content){
		$data = array(
			'title' => $title,
			'content' => $content,
			'create_time' => new time()
		);
		//INSERT INTO news (title, content, create_time) VALUES ('xxxx', 'xxxx', 'xxxx')
		$this->db->insert('news', $data); 
	}
}

删

//DELETE FROM mytable WHERE id = $id
$this->db->delete('news', array('id' => $id)); 
//等效
$this->db->where('id', $id);
$this->db->delete('news');

改

$data = array(
	'title' => $title,
	'content' => $content,
);
$this->db->where('id', $id);
//UPDATE news SET title = xxxx, content = xxx where id = $id
$this->db->update('news', $data);

查

//SELECT * FROM news
$query = $this->db->get('news');
//select * from news where id = $id limit $offset, $limit
$query = $this->db->get_where('news', array('id' => $id), $limit, $offset);
//直接取结果集
$list = $query->result();
//取结果集的数量
$count = $query->num_rows();
//此外，ci的查询还有丰富的方法，支持各种查询，诸如：where/or_where/where_in/or_where_in/like等等

打印sql

1	echo $this->db->last_query();

ci的view位于application/views/目录下，比如view_news.php，可以直接使用php代码书写

<html>
<head>
	<title><?php echo $title;?></title>
</head>
<body>
	<h1><?php echo $content;?></h1>
</body>
</html>

上面的title、content参数，可以通过下面的方式在controller中传递过来：

$this->load->view('view_news', array(
	'title' => $news->title,
	'content' => $news->content
));

———
参考：http://codeigniter.org.cn/user_guide/toc.html

———
蒋评：
先不论框架的易用性、性能等因素，相对于cakephp和thinkphp，ci最大的又是就是它的中文资料丰富，有完整的中文文档，甚至官网还提供中文视频教程：http://codeigniter.org.cn/tutorials，这些都大大降低了新手的入门难度[赞]

Tags ci, php | Permalink | Comment (0)

业界杂谈他山石

关于WebKit的几个问题

2013 年 02 月 17 日 – 上午 6:37

1. WebKit是什么？

WebKit是一个开源的Web浏览器引擎。
WebKit的HTML解析器和JavaScript解析器代码分别源自KDE的KHTML和KJS代码库。

2. 谁在使用WebKit？

“MacOS X系统的Safari、Dashboard、Mail和很多其他OS X程序”
这就是在说，WebKit是Safari背后的浏览器引擎。还需要补充的是，Apple在Safari里面使用了自己的Nitro JavaScript引擎（只用WebKit来渲染HTML）。

Google官方说明：Chromium使用WebKit做为渲染引擎。与其打造Chromium特有的实现方式，我们更希望去尽可能多的去为使用WebKit核心的浏览器做贡献。

这是说Chrome也在使用Nitro JS引擎？不，Chrome有他自己的V8 JavaScript引擎。简单的说，Chrome也使用WebKit，但是它也实现了自己的JavaScript处理方式。V8同时还是驱动Node.js的JavaScript引擎。

Opera会使用Chromium实现的WebKit，也会使用V8引擎。这就是说虽然Opera在宣称自己使用WebKit，但事实上它使用WebKit和Safari与其他浏览器使用的WebKit并不完全一样。如果你想客观了解现状，这是必须清楚的概念。

3. 现在WebKit究竟有多少分支？

所以我们知道现在WebKit正在驱动，或者将会驱动3个主流浏览器。但是WebKit还有多少其他类型的实现？
确实还有很多很多WebKit的变种，特别是在移动领域。他们都是WebKit的分支。

4. 这些WebKit的分支有多少差别？

有一种假设：因为这些浏览器都在使用WebKit，所以他们也会以同样的方式去支持相同的特性。
对于很多基本的特性来说，确实是这样。但是对于很多小众特性，就未必如此了。

举例来说，当Chrome开始支持游戏手柄API的时候，Safari不但还没开始支持，而且以后也不太可能支持。另一个例子是WebGL。做为在Chrome已经支持了很久的特性之一，Safari却才刚刚看到了曙光（而且还是在开发者选项里）。当然，这些还都是比较出名的例子。还有很多试验性的例子潜伏在大众的视野之下。

甚至很多基础的、日常的功能，在不同的代码分支下都有所不同。PPK完整的总结了这些WebKit的差异。

5. WebKit的逐步普及，对web开发有什么影响？

如果一个浏览器迁移到了WebKit，那是不是意味着（在编写代码的时候）可以少测试一个浏览器了？
不。每个浏览器都有它自己的怪异模式、性能差异、设计，和功能。所以每个浏览器都要测试。

当一个功能加入到WebKit的时候，是不是意味着在其他浏览器里就可以使用这功能了？
当然不是。比如游戏手柄API的例子。Paul Irish强调了这样一个事实：WebKit浏览器们可以挑选究竟把哪些API放入他们的版本。比如Chrome选择支持游戏手柄API。很多API在WebKit的层面就已经被实现了，但是WebKit项目书允许关闭这些功能。（编者注：Paul Irish是Google Chrome的员工，他曾在jQuery团队工作两年。）

如果所有的浏览器都使用相同的引擎，这对程序员来说意味着什么？
随着时间的流逝，他们会意识到尽管同是WebKit，也会有很多不同的东西。

6. 新特性如何加入到WebKit中，谁又来负责审核？

现在有许多公司正在为WebKit项目贡献自己的力量。

WebKit项目提交和审查页面提到只能有老的代码提交员和审核员才能提名新的新的代码提交员与审核员。这比较合理。然而，无论WebKit项目决定让谁参与进来，最终都还是要让Apple来做审核：
当有人被WebKit代码提交员成功提名后，Apple会处理发送代码提交员协议，在签署协议之后，Apple会继续开通SVN账户。

对于这一点并没有什么隐秘的动机，但这确实在告诉大家，WebKit和很多开源项目一样，并不是真正分散和民主的。权利是且必须是集中的——只有这样才能保证能做出决定，并且把事情做成。

7. 如何评价WebKit？

允许我们强调一下，WebKit是好的。它有开放的流程和强大的贡献者。我们只是想澄清一个当下被广泛接受的错误概念——一个WebKit等于所有WebKit，还有——如果所有浏览器都选择WebKit，那么对开发者来说，工作会变得更轻松。
我的意思是说，与众多独立的浏览器引擎会为市场带来多样性一样，WebKit在这一点来说，同样会表现的很棒。

—————

转自：http://www.infoq.com/cn/news/2013/02/webkit-history-and-now

Tags WebKit, 浏览器 | Permalink | Comment (0)

Hello World 业界杂谈

巧用setTimeout提高UI响应速度

2013 年 01 月 15 日 – 上午 10:45

关于javascript的性能问题，争议最多的就是它的单线程：UI渲染与更新数据跑在一个线程里，如果碰上比较耗时的数据运算或者DOM操作，UI就会很卡，特别是对IE6、7这些古董级的东西，这个问题会特别明显。
这里不想分辨单线程到底是优点还是缺点，只想所说如何通过setTimeout规避这种问题。
比如本博客上面红色的导航条(嘿嘿，换了皮肤，这个还没加)，当滚动条向下滚动时，通过修改css的position值，菜单条会变成悬浮在页面顶端的，在页面滚动过程中，js会不断检查当前滚动条的位置，直到导航条回到初始位置时，再将其定位回该位置。
由于要不停的访问DOM，取得滚动条的高度，这段代码在IE6、IE7里是很卡的，以至于刚开始的时候，我在这段逻辑的开头加了浏览器类型的判断，如果是IE，干脆不再执行这段代码~~~直到加入了下面这段优化以后

var scroolTime = null;
$(window).bind('scroll.top', function(){
  scroolTime &amp;&amp; clearTimeout(scroolTime);
  scroolTime = setTimeout(scroolFun, 0);
});
var scroolFun = function(){
  //.....检查页面高度、设置菜单条css的逻辑
}

上面这段代码的核心就是“setTimeout(xxxx, 0);”，咋一看，定时为0不是等于没定时嘛，其实不然，即使定位为0，setTimeout也不会立即执行定时的function，而是在当前线程空闲时才会执行，也就是说，随着滚动条的滚动，js逻辑会等喜面的代码跑完，且ui渲染完了以后再去调用 scroolFun。而“clearTimeout(scroolTime)”会保证定时队列里只有一个待执行的scroolFun

再比如，以前做的的一个需求，在js内上有一个几十到上千条的数组，数组内保存的通讯录的实体，页面上要求可以对通讯录做搜索。如果照正常的逻辑，需要将整个数组跑一遍循环，再将符合条件的结果集显示到页面上。特别是在做搜索的时候，需要支持随着用户输入的时时搜索，这种情况下，如果数组长度过千，即便是chrome这样的高端浏览器，页面操作仍然不回很流畅。
这是又到了setTimeout派上用场的时候了：每次对数组搜索时，只搜索10到100条不等的一段，搜索完这一段即将满足条件的结果显示到页面上，然后setTimeout(‘分段搜索function(start, length)’, 0)，等待线程空闲以后，再继续搜索下一段。
然后在用户修改搜索关键字时，记得要将上面的定时clearTimeout掉。
具体每次的搜索长度，可以根据浏览器不同来定义，不如IE6，每次只能搜索10条，而chrome每次搜索几百条。
—————-

Tags javascript | Permalink | Comment (1)

Hello World 业界杂谈

eclipse设置空格代替tab

2013 年 01 月 05 日 – 上午 9:04

随着node.js的流行，js的书写方式正在悄然发生变化。
node.js里异步编程的大量使用，回调越来越多，缩进也就越来越多，以前，习惯了tab/四个格的缩进，现在发现这种缩进方式对代码越多影响越来越大：缩进太多，内层的代码要靠拖动水平滚动条才能看到；另外，tab键在各个IDE里显示的空格个数是不同的，2~8个不等。
所以，就准备修改自己js的书写习惯：用两个空格代替tab。
但是，如果真的手敲空格又缺失太麻烦，还好大部分IDE都会提供使用空格代替tab的的功能，即敲tab后，实际产生的是另个空格。
下面介绍一下eclipse的设置方式，如下图，首先打开eclipse的“偏好设置”，找到图中所示的选项：

在Formatter找到“Active profile”，不要直接修改系统默认的profile，点下面的New，新建一个，然后打开，如下图所示：

在第一个选项卡里找到General settings -> tab policy，右侧的下拉改为“Spaces only”，下面的两个“size”都改成2，保存推出即可
———

Tags eclipse, javascript | Permalink | Comments (3)

一	二	三	四	五	六	日
« 四
			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

昆仑的山头

Category Archives: 业界杂谈

nodejs-express初体验

php ci快速入门

关于WebKit的几个问题

巧用setTimeout提高UI响应速度

eclipse设置空格代替tab

分门别类

时间线

链接表

七嘴八舌

近期发布

发布日历

昆仑的山头

Category Archives: 业界杂谈

nodejs-express初体验

php ci快速入门

关于WebKit的几个问题

巧用setTimeout提高UI响应速度

eclipse设置空格代替tab

五花八门

分门别类

时间线

链接表

七嘴八舌

近期发布

发布日历