JsLover

1、Mobile HTML,CSS,and JavasScript

url:  http://www.slideshare.net/franksvalli/mobile-html-css-and-javascript

2、Mobile Web & HTML5 Performance Optimization

url: http://www.slideshare.net/firt/mobile-web-html5-performance-optimization

3、HTML5, CSS3, and other fancy buzzwords

url: http://www.slideshare.net/batmoo/html5-css3-and-other-fancy-buzzwords

针对momo触屏版的需要，写了一个精简版js框架，专用于支持html5选择器的项目，如momo 手机web触屏版。

接口规则与jquery保持一致，用过jquery的看了下面的DEMO一定觉得很熟悉。目前仅分享基础框架，只有240行代码，包括：ajax操作(get,post,getJSON,ajax)、最基本的dom(show,hide,hasClass,addClass,removeClass,replaceWith,remove…)操作等。当然和jquery一样，您可以随便通过 extend方法去无限扩展框架，打造适合自己的JS组件或者框架。

目前版本：v0.02
最后更新时间：2011-11-22
大小：15K，压缩后5K，gzip后3K

框架DEMO：http://jslover.com/wp-content/uploads/2011/11/motouch/demo.htm

源码：http://jslover.com/wp-content/uploads/2011/11/motouch/moTouch.js

//demo示例
(function ($) {
    //ajax get方法
    $.get('json_test.js', { r: Math.random() }, function (data) { alert(data) });

    // 支持任意扩展
    $.extend({
        alert: function (val) {
            alert(val);
        }
    });
    // 支持任意扩展
    $.fn.extend({
        newFunc: function () {
            alert('newFunc');
            return this;
        }
    });

    $.alert('这是扩展的方法');
    $('body').newFunc();

    // 获取对象
    var $div = $('div');
    //对象个数
    alert($div.length);
    //添加样式
    $div.addClass('class1');
    //替换节点
    $('img').replaceWith('不显示图片');
})(moTouch);

说到html5缓存，很自然就想到manifest,为了提高3g momo的体验，我们也特意尝试了这个，甚至做到了完全离线使用WEB页，像客户端一样，离线查询通讯录等。

不过，使用manifest的过程中，遇到了一个没法解决的问题：文件更新。理想状态，可以通过修改.manifest文件达到通知版本更新的效果，不过现实很不乐观，测试结果，在iphone的safari及pc chrome浏览器中，基本正常，修改.manifest文件后强制刷新两次页面就达到更新缓存文件的效果，至于为什么是2次，不想去纠结，至少它真能更新了。

在FF中，只能通过”工具-选项-脱机数据“删除缓存来达到更新效果，至于为什么更新.manifest起不到作用？我猜想.manifest文件也被缓存了吧，总之，FF上想用文件缓存又想随时通过代码更新，想都别想了。同样，在android机子（我用g6测试）上也是类似状况，甚至更恶劣，几乎快抓狂了。

查询了所有网上资源，几乎都是千篇一律，异想天开的理想主义，最全的一篇大概是这样：http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html。痛恨那些胡乱转载的门户，鄙视那些不经测试就贴代码的2B青年，特别指出，通过iframe页设置manifest的方式是不可取的，不知道那篇文章的作者是怎么测试的，总之目前版的浏览器是不支持这样缓存的。

——总之，为了兼容，我必须放弃manifest————————————–

于是，放弃“离线应用”，转向文件缓存，这样就容易多了，最终，决定将所有文件读取下来后通过localStorage对象以key-value形式存储，然后再通过eval执行脚本。

原理很简单，代码贴在后面，要注意的一点还是更新机制。

我设计的更新机制很简单：localStorage对象中存储最后更新的版本号，每次页面刷新时候与服务端的版本号变量进行比对，不等就更新，否则继续使用，当然在UI中也提供了手动更新的方法，确保随时对版本文件可控。

——-经常多平台测试，完全正常，随时可以更新———————————–

参考代码：这段代码挂在页面底部

//当前脚本版本号
var script_server_version = '0.3';
//待请求脚本队列
var script_list = ['/lib/lib.js', '/script/index.js', '/script/template.js'];

(function () {
    //异步获取文件
    function ajaxGet(url, callback) {
        var request = new XMLHttpRequest();
        if (!request) { return; }
        request.open("GET", url, true);
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                callback(request.responseText);
            }
        };
        request.send(null);
    }

    //临时变量
    var scriptCache = '';
    var index = 0;
    //循环加载
    function getScript() {
        ajaxGet(script_list[index] + '?v=' + script_server_version, function (data) {
            scriptCache += data;
            if (++index < script_list.length) {
                getScript();
            } else {
                //存入缓存
                localStorage['script_cache'] = scriptCache;
                //存入当前版本号
                localStorage['script_version'] = script_server_version || 0;
                setTimeout(function () {
                    //执行脚本
                    eval(scriptCache);
                }, 100);
            }
        });
    }
    //直接输出脚本
    function writeScript() {
        for (var i = 0; i < script_list.length; i++) {
            document.write('..输出脚本，被过滤了，各位自己实现..');
        }
    }
    //开始请求脚本
    try {
        //支持缓存
        if ('localStorage' in window) {
            //服务器保存的脚本版本，通过页面直接输出变量
            var version_server = script_server_version || 0;
            //本地版本号
            var version_local = localStorage['script_version'] || -1;
            //如果版本号不一致，或者不存在缓存
            if (version_server != version_local || !localStorage['script_cache']) {
                getScript();
            } else {
                //执行脚本
                setTimeout(function () {
                    eval(localStorage['script_cache']);
                }, 100);
            }
        } else {
            writeScript();
        }
    } catch (ee) {
        writeScript();
    }
})();

问题环境：

1、iphone的safari浏览器，有个特点，在屏保或者最小化浏览器后，会自己暂停所有浏览器进程。

2、通过js接入rabbitmq进行长轮询，原理是保持一个永不间断的http请求，因为上面的问题，导致在最小化浏览器时候这个http请求会被暂停，导致服务端超时，造成了长轮询被迫中断。

解决方案：

1、改用websocket或者其它方式连接mq(不在本次讨论范围);

2、轮询，监听mq状态。

想实现状态监听就必须找到相关的接口，rabbitmq的js组件，找不到官方维护文档，没有api文档，没有注释，只好debug打log。最终找到了两个重要接口：

打开连接后会返回通道对象，这个对象有一个.alive 的属性，用于检测状态。

另外，有一个公共方法 .close()，用于关闭连接。