蓝色的华 » javascript

Hello lua

冥王星2011 — Thu, 23 Jun 2011 13:31:33 +0000

lua将作为下一门新语言学习。如果按照一年学习一门新语言的标准来说，我算超勤快的了。lua被发明的目的便是嵌入C或C++程序，给程序带来编译语言不及的灵活性。
google了一下lua，发现大部分都是做游戏开发的C++程序员的文章，看来不只是魔兽世界在用。

lua做嵌入的优势：
1 . 小，整个解释器不到200K
实际测试:
编译一个空的IOS项目 205K
嵌入Lua后的IOS项目 414K
2 . 运行速度快
实际测试:
做了三个测试程序，分别内嵌lua(静态链接)，javascript(动态链接JavascriptCore,链接库6.4M),python(动态链接python2.6,链接库2.0M)
三个程序都做相同的事情，初始化一个脚本运行环境，打印一个字符串，销毁
比如lua,其他JS和python类似，只不过调用的api不一样:

static int lua_printf(lua_State *L)
{
    const char *cmsg = luaL_checkstring(L, 1);
    printf("%s\n", cmsg);
    return 0;
}
 
static void eval_lua(NSString *code)
{
    lua_State *L;
    L = lua_open();
    luaopen_base(L);
    lua_register(L, "printf", lua_printf);
    luaL_loadstring(L, [code cStringUsingEncoding:NSUTF8StringEncoding]);
    lua_pcall(L, 0, LUA_MULTRET, 0);
    lua_close(L);
}
 
int main (int argc, const char * argv[])
{
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
 
    NSTimeInterval start = [NSDate timeIntervalSinceReferenceDate];
    eval_lua(@"printf(\"你好 lua\")");
    NSTimeInterval duration = [NSDate timeIntervalSinceReferenceDate] - start;
    printf("total time:%.5f\n", duration);
 
    [pool release];
    return 0;
}

PK结果

$ ls -lh *_test
-rwxr-xr-x  1 hualu  staff    10K  6 23 20:32 js_test
-rwxr-xr-x  1 hualu  staff   136K  6 23 20:37 lua_test
-rwxr-xr-x  1 hualu  staff   9.4K  6 23 20:32 py_test
$ ./lua_test
你好 lua
total time:0.00018
$ ./js_test
你好 Javascript
total time:0.00557
$ ./py_test
你好 Python
total time:0.01311

3. lua支持多线程，每个线程可以配置独立的解释器（没有亲测，道听途说)
4. 语法简单，其实这个可以算优点，比JS要简单易懂的多。。。

lua这么小巧的身躯太适合嵌入手机软件了。可以动态的从server上加载一些lua脚本来运行，免去劳烦用户更新软件的烦恼～.就目前所知，愤怒的小鸟是一个混合编程的好例子，关卡的设置均由lua控制。

其实已经有geek为前面三门语言做了Objc的Bridge，项目分别是:
对于lua有wax
对于js有jscocoa
对于python有PyObjc

而且他们的目的已经不是简单的嵌入Objectivc了，而是代替objc作为MAC或IOS应用的开发语言。。。当然我并不是很赞同这种偷懒的方法，脚本要适度使用。

最后，看的一些资料:
Lua 5.1 参考手册
 xcode中添加静态链接库
 lua和python谁更适用于嵌入MMORPG？

关于js的字符串编码

冥王星2011 — Thu, 21 Apr 2011 15:38:19 +0000

The String type is the set of all finite ordered sequences of zero or more 16-bit unsigned integer values (“elements”). The String type is generally used to represent textual data in a running ECMAScript program, in which case each element in the String is treated as a code unit value (see Clause 6). Each element is regarded as occupying a position within the sequence. These positions are indexed with nonnegative integers. The first element (if any) is at position 0, the next element (if any) at position 1, and so on. The length of a String is the number of elements (i.e., 16-bit values) within it. The empty String has length zero and therefore contains no elements.
When a String contains actual textual data, each element is considered to be a single UTF-16 code unit. Whether or not this is the actual storage format of a String, the characters within a String are numbered by their initial code unit element position as though they were represented using UTF-16. All operations on Strings (except as otherwise stated) treat them as sequences of undifferentiated 16-bit unsigned integers; they do not ensure the resulting String is in normalised form, nor do they ensure language-sensitive results.

按照ECMA标准，无论引擎底层如何实现，js的字符串看起来都应该是UTF-16编码的字符串，并且每个字符串单元代表一个UTF-16的双字节
例如:
>”中”.length
1
(不知道这是啥特殊字符，发到wordpress有问题，直接贴图，那我是怎么输进去的呢，后面说转义符）
“中”编码成UTF-16为一个双字节0x4E2D,所以长度为１
长的像口的字符编码成UTF-16占４字节 0xD950 0xDF21,占用两个双字节，长度为２
(下面用”口”代替这个特殊字符)
>”口”[0]
“”
>”口”.charCodeAt(0).toString(16)
“d950″
所以字符串的长度显然是占用双字节的个数，而非我以前想当然认为的实际字符的个数。。。

\udddd形式的转义同样用来表示一个双字节，而非字符本身，”口”用转义符来表示的话:

最后我要的结论是：

对于像objective　c里unichar一样的UTF-16编码格式的字符串可以通过@“\\u04x”直接得到json转义串～

PPJ回忆录

冥王星2011 — Sun, 16 Jan 2011 09:27:11 +0000

个人以为:学一门脚本很容易，但是学几门就是一个痛苦的事，因为我经常把他们搞混。。

于是我下决心写一个能够帮我理清楚的文档，我命之为《PPJ回忆录》,从周5写到今天，精疲力尽，剩下OO和正则部分没写，我决定先歇会~

毫不客气的说，对于同时学里面任意两门语言的同学，这个文档都会对你有帮助。

———–
post by gmail~

一段用于辅助gettxt翻译的vim配置

冥王星2011 — Wed, 20 Oct 2010 03:38:48 +0000

看图吧，用得到的话会觉的简直太爽了，^_^
使用方法：
打开需要标记的文件，输入命令 :GettextMarkStart,开启辅助
选择需要翻译的文本

按_出来提示菜单，选择完成标记

配置：http://code-of-emptyhua.googlecode.com/svn/trunk/vim/addgettextmark.vim

———–
post by gmail~

相对完美的设计思路~

冥王星2011 — Wed, 21 Jul 2010 16:27:31 +0000

有没有可能写一套代码适应以下三种情况:
1. 客户端没有开启javascript，或者使用ucweb一类的弱智浏览器访问时，功能没有影响
2. 客户端开启了javascript，每个页面都有单独加载的js,但是禁用ajax,只帮助用户交互
3. 客户端开启了javascript，为了提高载入速度，尽量使所有操作用ajax完成

略有所得: http://www.blogo2.com
源代码: http://code-of-emptyhua.googlecode.com/svn/trunk/blogo2

没有禁用js的时候，页面切换，表单提交（注册和登录没有用）尽量的使用ajax，而且部分操作会使用弹层(登录后的管理),禁用js之后，则所有操作换成普通表单提交在页面之间跳来跳去。。

还有一个功能没有开启，就是可以选择不用ajax，但是独立开的页面js依然有效。

有兴趣的同学可以check源代码，这种模式的实现:
1. 开发的时候禁用ajax，单个页面开发，而且要求禁用js时业务可以走通，页面内的js和css统一由模板引入。
2. 对需要开启ajax的链接增加hook，例如data-ajax=”dialog:{}”,则表明在开启ajax模式后，点击这个链接需要弹窗
3. ajax模式下只需要对单个页面更换特有的模板，动态加载需要的js和css即可。

这种设计的特点:
1. 尽量一个人包前后端。。
2. json不潮了，ajax返回html代码，优点是js不用套页面了，缺点是流量大

over，虽然没有完美的代码，但是我尽量~

———–
post by gmail~

js中简单实现数据和ui绑定

冥王星2011 — Tue, 18 May 2010 09:27:44 +0000

很简单的例子

//计数加一
count ++
//更新ui
jQuery('#count').text(count);

相信几乎所有前端工程师都会写过上面这样的代码，更新数据，然后更新ui，行云流水般的。然而也是相当一部分内测bug的起源，数据删除了，ui里的计数没有变，或者ui变了，数据里确没有删除。而在逻辑复杂的应用里，更是很难保证不出这种低级错误。

其实我们可以通过自定义事件，这样重写

this.data_bind('count', 'change', function(count)
{
    //更新计数
    jQuery('#count').text(count);
});
....
 
this.data_bind('count', 'change', function(count)
{
    //刷新分页
    refresh_pager(count);
});
 
this.set_data('count', this.get_data('count') + 1);

上次D2上听金大为讲模板技术，当时感觉耳目一新，最近边写边考虑这些新思想，其实使用现有的自定义事件要简单的多，而且灵活性，适用性更好。

用过flex的同学看完这篇文章肯定会说：靠，你们写js的还真是原始社会。。

js业务框架中对ajax的再次包装

冥王星2011 — Mon, 10 May 2010 08:30:20 +0000

一个简单的load动作，如果简单用任何一个js框架实现

startloding();
new ajax({
    url : 'test.php',
    compete : function()
    {
         stoploading()
    },
    success : function(data)
    {
        try
        {
            var obj = json_decode(data);
        }
        catch(e)
        {
            //服务异常，未返回json造成异常
            error('服务器异常');
            return;
        }
 
        //正常的业务逻辑错误
        if ( json['code'] !== 0 )
        {
            error(json['desc']);
            return;
        }
 
        ...
    },
    error : function()
    {
        //网络请求失败造成异常
        error('网络异常');
    }
});

而一个业务框架对ajax再次包装，成为一个action

new action({
    action : 'load',
    action_name : '加载',
    url : 'test.php'
});
 
api.add_action('load_start', startloading);
api.add_action('load_complete', stoploading);
//这里的成功不是ajax成功，而是判定json['code']之后action真正的成功，这就要求所有action需要有统一的成功判定标准，和json包装格式
api.add_action('load_success', function(msg, data){  .... });
//这里没有添加异常处理，因为没有特殊需要，所以action会执行默认的错误处理，可能是一个弹窗

不仅仅是节省了代码，后者有更好的可读性，load动作本身也具有了更好的重用性

具体的框架代码已经在用，还不是很完美，待贴～

wordpress api的js实现版本

冥王星2011 — Fri, 09 Apr 2010 16:43:32 +0000

上次提到的一个想法的实现版本,正在应用到偶开发的项目当中~
比wordpress的action和filter增加两个特性

能够添加一个只运行一次的action或者filter
可以通过返回{end:true}这种特殊对象来结束一个action或者filter

这两个特性在web开发里灰常有用

<html>
<script>
//2010.4.10 第一版
(function(ns)
{
    var filters = {};
    var max_priority = 10;
    var default_priority = 10;
 
    var array_include = function(a, v)
    {
        for ( var i = 0, j = a.length; i < j; i ++ )
        {
            if ( a[i] == v ) return true;
        }
        return false;
    };
 
    var to_array = function(a)
    {
        var rt = [];
        for ( var i = 0, j = a.length; i < j; i ++ )
        {
           rt.push(a[i]); 
        }
        return rt;
    };
 
    function _set(func, tag, priority, key, value)
    {
        func['__filter_' + tag + '_' + priority + '_' + key] = value; 
    }
 
    function _get(func, tag, priority, key)
    {
        return func['__filter_' + tag + '_' + priority + '_' + key]; 
    }
 
    ns.add_filter = ns.add_action = function(tag, func, priority, run_once) 
    {
        run_once = run_once === undefined ? false : run_once;
        priority = priority || default_priority; 
        if ( !filters[tag] ) filters[tag] = {};   
        if ( !filters[tag][priority] ) filters[tag][priority] = [];
        if ( !array_include(filters[tag][priority], func) )
        {
            filters[tag][priority].push(func);
        }
 
        _set(func, tag, priority, 'run_once', run_once);
    };
 
    ns.add_once_filter = ns.add_once_action = function(tag, func, priority)
    {
        ns.add_filter(tag, func, priority, true);
    };
 
    function filter_or_action(ac, tag, value)
    {
        if (!filters[tag]) return value;
        if ( ac == 'action' )
        {
            var args = to_array(arguments);
            args.shift();
            args.shift();
        }
        var _cfs = filters[tag];
        var i = 1, func; 
        var rt = value;
        while ( i <= max_priority )
        {
            if ( !_cfs[i] || _cfs[i].length === 0 ) 
            {
                i ++;
                continue;
            }
 
            for ( var j = 0, length = _cfs[i].length; j < length; j ++ )
            {
                func = _cfs[i][j];
 
                if ( ac == 'action' )
                {
                    rt = func.apply(null, args);
                }
                else
                {
                    rt = func.call(null, rt);
                }
 
                if ( _get(func, tag, i, 'run_once') ) 
                {
                    _cfs[i].splice(j, 1);
                    j --;
                    length --;
                }
                if ( rt && rt['end'] ) return rt['value'] || null;
            }
 
            i ++;
        }
        return rt;
    };
 
    ns.apply_filters = function(tag, value)
    {
        return filter_or_action('fitler', tag, value)
    };
 
    ns.do_action = function(tag)
    {
        var args = to_array(arguments);
        filter_or_action.apply(null, ['action'].concat(args));
    };
})(window)
 
function log(str)
{
    document.write('' + str + '
');
}
 
//普通的filter
add_filter('status', function(text)
{
    return text.replace(/orz/g, '超人');
});
log(apply_filters('status', 'orzorz'));
//再添加一个filter
add_filter('status', function(text)
{
    return text.replace('超人', '动感');
});
log(apply_filters('status', 'orzorz'));
 
//添加一个优先级较高的filter,并通过返回包含end字段的对象结束过滤器
add_filter('status', function(text)
{
    return {end:true, value:text};
}, 5);
log(apply_filters('status', 'orzorz'));
 
//但是下面这个优先级较高的会执行
add_filter('status', function(text)
{
    return text + '管不着我';
}, 1);
log(apply_filters('status', 'orzorz'));
 
log('-----------------------------');
log('action测试');
log('-----------------------------');
 
//下面是action
add_action('ac_success', function(a, b, c)
{
    log('返回数据:' +  a + b + c); 
});
 
//添加一个只会执行一次的action回调
add_once_action('ac_success', function(a, b, c)
{
    log('我只会执行一次的');
});
 
add_action('ac_success', function(a, b, c)
{
    log('俺的优先级比较高');
}, 5);
 
log('----------第一次执行----------------');
do_action('ac_success', '1', '2', '3');
 
log('----------第二次执行----------------');
do_action('ac_success', '4', '5', '6');
 
add_action('ac_success', function(a, b, c)
{
    log('全部屏蔽');
    return {end:true}; 
}, 1);
 
log('----------第三次执行----------------');
do_action('ac_success', '1', '2', '3');
script>
html>

例举js中组装类的好处

冥王星2011 — Thu, 01 Apr 2010 14:42:22 +0000

先举个简单的组装的例子

//纸
var paper = new Paper();
//处理下
enable_fire_destory(paper);
//ok,可以燃烧了..
paper.fire();
//猪
var pig = new Pig();
enable_fire_destory(pig);
//不管怎么着,也能着了
pig.fire();

这种组装方式用于给毫不相关的对象快速添加一些通用的方法, 用法得当将节省大量代码~

这里举个实际开发中的例子,下面的代码肯定是我们平时经常写的,用于防止一次ajax请求没有完毕就请求第二次

obj = {
....
is_loading : false,
load_sth : function(callback)
{
    if ( this.is_loading ) return;
    this.is_loading = true;
    new Ajax({
        url : 'xxx.php',
        onComplete : function()
            This.is_loading = false;
        }});
    });
},
....
};

使用组装的方法改写

//组装函数
function enable_single_thread_ajax(obj)
{
    extend(obj, {
        _is_ajax_ing : false,
        is_ajax_ing : function()
        {
            return this._is_ajax_ing;
        },
        ajax : function(params)
        {
            if (this.is_ajax_ing()) return;
            var This = this;
            this._is_ajax_ing = true;
 
            var _tmp_func = function(){};
 
            //为了保持ajax的参数不变,要做点小牺牲
            if (params['onComplete'])
            {
                _tmp_func = params['onComplete'];
            }
 
            params['onComplete'] = function()
            {
                This._is_ajax_ing = false; 
                _tmp_func.apply(this, arguments);
            };
 
            return Ajax(params);
        }
    });
}
 
//还是那个对象 
obj = { 
load_sth : function()
{
    //打完收工了~
    this.ajax({
        url : 'xxx.php'
    });
}   
};
//给对象扩充方法
enable_single_thread_ajax(obj);

还可以直接扩展原型,达到扩充类的目的~,以前写过一篇自定义事件的文章,也是用的这种方法 : 简单实现js里的自定义事件

今天特地翻开没怎么看的,里面定义这种扩展方式为”掺元类”,感觉这么翻译不是特好理解…

一种字符串代替数组的场合

冥王星2011 — Thu, 25 Feb 2010 09:22:57 +0000

曾经耍过一些小聪明,而且是相当然的,有人问我你做过验证吗,….木有,然后也觉得自己很不靠普

下面是验证以前做一个选择器的时候用到的方法,主要是为了加速判断是否已选的操作

<html>
<script>
function ctime(func)
{
    var s = new Date().getTime();
    func();
    return new Date().getTime() - s;
}
var time;
time = ctime(function()
{
    var i = 0;
    astr = [];
    while (i < 10000)
    {
        astr.push('fasdfasdf');         
        i ++;
    }
});
document.write(time + '
');
 
time = ctime(function()
{
    var i = 0;
    sstr = '';
    while (i < 10000)
    {
        sstr = sstr + 'fasdfasdf';         
        i ++;
    }
});
document.write(time + '
');
 
function is_include(arr, v)
{
    for ( var i = 0, j = arr.length; i < j; i ++ )
    {
        if (arr[i] == v) return true;
    }
    return false;
}
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (is_include(astr, '12321423')) break;         
        i ++;
    }
});
document.write(time + '
');
 
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (sstr.indexOf('12321423') !== -1) break;         
        i ++;
    }
});
document.write(time + '
');
script>
html>

运行结果
ie6:

ie8:

ff3.6: