写这篇文时以下非常有用的device api并未被所有浏览器（特别是mobile browser）实现，期待各种新版本的新实现。

需要用时，在 caniuse.com 查阅就知道当前这个api是否可用。

阅读全文

按着 mongodb官网 教程安装好后，练习一下CRUD（增加、读取、更新、删除）操作。

// 我把数据库保存在了 ~/nosql/mongodb下

第一步-启动mongodb：

$ cd nosql/mongodb/bin

$ sudo ./mongod

这样，mongodb就启动了，接着是创建数据库。进行简单的CRUD。

第二步-启动 mongo shell

$ ./mongo

第三步-创建数据库laispace

// $ help

// 显示已有的数据库

$ show dbs

// 切换数据库，这里用了新的数据库laispace，则自动创建

$ use laispace

// 注意这时候没有插入数据，但实际上已经创建了

第四步-向数据库中添加数据

// db即表示laispace数据库，先建立users文档并插入一个新用户

$ var newUser = { “name”: “赖小赖”, “email”: “example@gmail.com”};

$ db.users.insert(newUser);

// 继续插入

$ var anotherNewUser = { “name”: “小清”, “email”: “123456@gmail.com”};

$ db.users.insert(anotherNewUser);

第六步-更新数据

var xiaoqing = {

“name”: “小清”,
“email”: “abcd@laispace.com”,
“password”: “myLatestPassword”
};

$ db.users.update({“name”: “小清”}, xiaoqing);

$ db.users.findOne({“name”: “小清”});

第七步-删除数据

// 看看已有的数据

$ db.users.find();

$ db.users.find({“name”: “小清”});

// 删除 小清

$ db.users.remove({“name”: “小清”});

$ db.users.findOne({“name”: “小清”});

$ db.users.find();

// 删除全部

$ db.users.remove();
$ db.users.find()

第八步-继续学习

$ console.log(“待补充！”);

阅读全文

记录一些Modules的简单用法，方便快速查阅。

• DNS 解析模块

[javascript]
// 解析DNS
var dns = require(‘dns’);
var href = ‘www.laispace.com’;
var type = ‘A’;
// href 待解析的域名字符串, type 表示记录类型的字符串(A-地址解析/CNAME-别名解析/MX-邮件域名解析/SRV-服务记录等);
dns.resolve(href, type, function (err, result) {
if (err) {
throw err;
}
console.log(‘DNS解析结果是：’, result);
})
[/javascript]

解析结果：

除resolve()方法外，还有lookup()、resolve4()、resolve6()。resolveMx() 等其他方法见：DNS模块官方文档

阅读全文

1. 1. 发送消息
2. 2. 接受消息

HTML5一些特性不断在变化，一年前的语法跟现在的已经大有不同，像用来布局的 flex 属性也有新旧版本的语法了。

处理兼容性真是个蛋疼的事情 。

这里放一些闲时做的DEMO吧（含CSS3），测试在chrome下，主要目的是了解基本用法让自己一目了然，在项目需要的时候再加上兼容方案吧：）

• Flex 多栏响应式布局

1.设置父容器为 display 属性为 ‘flex’

2.设置子容器的 width、flex 和 order 属性

• CSS3 文字从上到下

直接使用 css3 中的属性 transform：

• XDM 跨文档消息传递（即跨域通信）

  发送消息

[javascript]

// 获取内嵌框架
var iframeWindow = document.getElementById(‘myFrame’).contentWindow;
// 向内嵌框架发送消息
iframeWindow.postMessage(‘你好 赖小赖’, ‘http://laispace.com‘);

[/javascript]

接受消息

[javascript]
// message 事件是异步的
window.onmessage = function (event) {
// 确保消息源是已知域 event.origin
if (event.origin == ‘http://laispace.com‘) {
// 处理接收到的消息 event.data
console.log(event.data);
// 向消息源发送回执(event.source是消息源的window对象的代理)
event.source.postMessage(‘消息已收到’, ‘http://www.消息源.com‘);

}
};

[/javascript]

DEMO or 官方文档

使用HTML5制作移动应用，寒假前确定了方案《HTML5移动开发方案探索》，是时候开始实施了！

这是第一次做HTML5移动应用的开发，Google了不少发现坑不少，中文文档也不多，只得自己好好摸索多查官方文档了。

处女PhoneGap应用的笔记先贴在这里，项目完工再好好做个总结吧：）

阅读全文

nodejs真是太酷了！

使用 http.get() 抓取页面，然后使用 jsdom 来解析页面（简单配置+jquery语法），简单代码如下：

var http = require('http');
// 使用 jsdom 来解析html https://www.npmjs.org/package/jsdom
var jsdom = require('jsdom');
// 抓取 V2EX 最新话题
var url = 'http://www.v2ex.com';

// 获取一个页面
http.get(url, function(res) {
    var body = '';
    console.log('状态码：', res.statusCode);
    res.on('data', function(chunk) {
        console.log('数据传输中...');
        body += chunk;
    });
    res.on('end', function() {
        console.log('数据传输完成:');
        // 使用 jsdom 解析抓取到的html
        jsdom.env(
            body,
            'http://code.jquery.com/jquery.js',
            function(errors, window) {
                var $ = window.$;
                console.log('数据传输完成');
                var len = $('.cell.item').length;
                console.log('找到最新主题', len);
                for (var i = 0; i & lt; len; i++) {
                    var title = $('.cell.item').eq(i).find('.item_title a').html();
                    var link = url + $('.cell.item').eq(i).find('.item_title a').attr('href');
                    console.log(title + '(' + link + ')');
                }
            }
        );
    });
}).on('error', function(e) {
    console.log( & quot; 发生错误: & quot; + e.message);
});

阅读全文

今天学习了一个简单的CLI文件管理器的编写：

安装方法：

• 运行 $ node index.js后会列出当前文件夹下的文件或文件夹
• 选择文件，则显示这个文件内容
• 选择文件夹，则列出这个文件夹下的文件

Hello, 这是小赖的第一个nodejs命令行程序！

阅读全文

2013是移动互联爆发的一年，2014也肯定也是移动互联网的天下！

笨鸟先飞，小赖打算进入移动开发，先从HTML5移动应用开始，再连带学学IOS，希望2014会有更大的收获。

查阅资料后就开始！不过要做好被移动开发各种坑坑死的打算先 - -

三种开发方式的简单比较：

Native（原生）：

丰富的用户体验 平台指向性
久经考验的移动应用开发途径
Hybrid（混合）： 与应用类似的使用体验
利用设备自身功能 多平台支持能力
HTML 5：

更快的开发周期 跨平台运行
* 实时更新

Native开发方法在性能和设备访问方面很出色，但成本和更新方面有缺点。Web方法更新起来简单得多，成本较低，也更容易，但是目前功能有限，也无法获得使用Native API调用所能获得的那种出色的用户体验。Hybrid开发方法提供了折中方案：在许多情况下，它集两者之所长，如果开发者面向多种操作系统更是如此。

Hybrid是同时利用HTML 5与CSS3创建移动UI，同时又通过JavaScript代码实现与移动SDK之间的通信。

目前比较知名的hybrid框架有Phonegap：

PhoneGap为移动应用开发人员提供一套名为phonegap-3.0.0.js的JavaScript API。该JavaScript API会调用PhoneGap的特殊平台引擎/桥接机制，后者则反过来调用原生平台SDK以实现对设备的操作，例如访问联系人名单或者拨打电话等。

PhoneGap还提供一套与HTML 5、JavaScript以及CSS3在非Chrome浏览器（例如不提供用户界面的浏览器）中相绑定的创建系统。

.png)

phonegap提供了接口，使我们通过编写JS代码，调用原生的API。为了快速开发，一般还会搭配一个移动开发框架，常见的有jquery mobile、KendoUI Mobile、Sencha Touch等。

Jquery mobile 优点是比较容易上手，而且为了设计jQuery Mobile页面，提供了一套便捷的代码设计工具——也就是Codiqa。

缺点是应用的列表条目一旦达到五十到六十个，性能就会出现疲软（甚至直接导致移动浏览器崩溃）。在另一方面，Sencha Touch能够载入超过两百个条目，且不会引发任何性能问题。

KendoUI Mobile是一款基于MVVM的移动应用框架，附带图表及多款非常实用的移动工具，整体方案售价为699美元。即便它有非常好的表现，但比较昂贵，就暂且不考虑了。

Sencha Touch用极高的使用复杂性外加相当夸张的学习曲线换得无与伦比的性能表现。Sencha Touch属于MVC且完全采用JavaScript机制，但由于Sencha Touch最初只针对iOS平台，而后才添加了对Android、黑莓以及Windows Phone的支持能力，因此大家应该做好心理准备——其在各平台上的性能表现并不完全一致。

查阅资料后，小赖得出的方案是：使用Phonegap+jquery mobile 开发这个HTML5 Hybrid应用。

phonegap好在提供了跨平台的方案，坏在当应用复杂起来，性能是个问题；

jquery mobile 好在提供了一些UI，轻量且快速，坏在一旦DOM操作繁多，会造成性能问题。

Hybrid的优点在于用跨平台Web技术，开发应用程序的大部分代码，又可以在需要时直接访问Native API。

我的想法是，先按Hybrid的方案做出产品原型，然后再评估是否需要针对特定功能用NativeAPI来加强改善。

以上都是Ctrl C+V加自己的理解得出的初步方案，接着就需要去具体实践，得出自己真正的开发心得和新方案来了！

寒假继续加油！

参考链接：

【白皮书】HTML5、Native或Hybrid App开发全接触)

专题：跨平台移动web中间件PhoneGap开发入门)

phoneGap可行性分析) 这个写得非常棒

开发者眼中的PhoneGap体验)

四大Hybrid App移动开发平台对比)

Phonegap3.0特性)

手机应用开发平台选择资料汇总)

如何选择AppCan与PhoneGap跨平台开发框架)

Phonegap VS AppCan)

参考实例：

Phonegap官方实例)

如何使用 jQuery Mobile 与 PhoneGap 来开发移动应用)

HTML5开发实战之网易微博)

手机搜狐-移动Web单页应用开发实践)

腾讯广告平台产品团队谈PhoneGap使用)

前几天接触了WebSocket，感觉到了socket通信的强大，见《HTML5-WebSocket API 学习》。

小赖决定自己动手写一个基于nodejs+express+socket.io的聊天室应用，用来做node入门的小项目吧。

项目地址戳这里。

今天实现的部分是：

• 客户端与服务器通信

• 多个客户端同时通信

• 保存聊天记录和在线用户

安装方法：

1. 下载到本地，安装需要的模块：$ npm install
2. 打开服务器：$ node app.js
3. 打开多个浏览器页面，分别输入昵称
4. 可以开始聊天啦！
   这算是我试水学习node的第一个项目，代码托管到github上，慢慢捣鼓出一些东西来！

NODE核心自带的STDIO模块，就是类似浏览器端的console.*()系列方法，可像浏览器端调试代码一样，简单对代码进行调试：

输出普通信息：

console.log() 在控制台输出信息，可用来记录一个函数是否执行、函数执行时某些变量的值

输出错误信息：

console.error() 输出错误信息，常配合try catch语句使用

判断代码块的性能：

console.time(‘mytime’)和console.timeEnd(‘mytime’)会输出代码块执行的时间

设置断点：

debugger; 遇到这句断点时，代码都会中止执行，按play可继续代码执行

安装node-inspector调试器

$ npm install -g node-inspector
使用node-inspector 对nodejs代码进行调试,需要环境：webkit内核浏览器

[javascript]
// file t6.js
var foo = function(){
var a = 3, b = 5;
var bar = function(){
var b = 7, c = 11;
a += b + c;
}
bar();
}
foo();

[/javascript]

阅读全文