VEJIS 0.5 JavaScript 强类型编程新体验!

之前分别提到过Visual Studio 2012强大的JavaScript intellisense, 还有微软的新语言TypeScript. 测试完VS 2012 for Web增加的关于JS提示的新特性之后, 也说过要为此开发一个全新版本的VEJIS及其配套的提示文件, 现在终于算是基本搞定了. 而智能提示能够达到的程度我觉得完全可以媲美一些强类型的语言.

新版本的VEJIS相对0.4又有了不少提升, 重写了整个函数重载的代码, 使得扩展更加容易. 并且在0.4的option_(0.5改为opt_), params_的基础上进行完善. 有点小遗憾是重写的时候又把类模板忘记了, 所以后来发现要支持那东西也不简单, 可能会在下一次重写的时候实现. 不过类的话, 自从0.3开始变动就不怎么大了. 这次在0.5中则是添加了对接口(interface_)的支持, 并提供了两个新的创建特殊类型的函数nul_和delegate_.

模块(module_)部分的话, 主要是增加了对拆分一个模块到几个文件的支持, 并且丢掉了之前use_和module_连缀的写法, 以简化程序结构.

从自己写一些项目使用VEJIS 0.4的经验来看, 还是很惬意的. 以后我也会有一个更好的选择, 当然就是0.5了. 感兴趣的同学可以去VEJIS的网站看看. 现在只写了英文版, 空了之后会出中文.

http://vejis.org

TypeScript 小感

今天在一个Windows Phone的论坛看到微软出了个TypeScript, 瞬间想到高中时期自己构想的InviScript和Prever 2… 不过后来因为种种原因, InviScript只是停留在了构想上, 而Prever 2也在开发初期流产. 不过后来取代InviScript的, 则是VEJIS.

很高兴的是, 自己, 当然也一定是很多当时和我面临同样问题的人的设想, 最后被很好的实现. 其实Google也有一个叫Dart的语言, 不过与和InviScript的相似度赶TypeScript和InviScript的相似度就差太多了… 而且我个人也不喜欢Dart的语法, 感觉抛弃了很多JavaScript的精髓.

TypeScript和InviScript应该说都是JavaScript的超集, 并且相同的, 最终都会编译成JavaScript. 这也是我为什么取名为InviScript的原因. 意为INVIsible SCRIPT. 只在开发过程中存在.

不过同样高兴的是, 我选择了一个对于我个人而言, 更现实的实现, 即VEJIS. 虽然独立开发完InviScript也并非不可能, 但成本显然太过高昂…

VEJIS通过各种各样的函数, 从语法层面加强了JavaScript的功能, 提供了可以媲美甚至超过TypeScript的类/类型/模块工具, 当然因为VEJIS是运行时的脚本库, 代价就是一定的性能损耗. 这也限制了VEJIS的运用场景. 但就目前的实践经验来看, 在正确使用VEJIS的情况下, 这种影响是可以忽略不计的.

现在正在开发VEJIS 0.5, 重写了核心代码, 并提供了更多, 更具扩展性的功能. 甚至是delegate_, 虽然还没有决定是否会最终使用. 不论最终是中间语言形式的TypeScript更容易被接受, 还是运行时的VEJIS, 都一定程度反应了Web开发的趋势. 这点上, 我觉得Franky或许不会永远是对的. 😛

Adobe AIR实现支持代理的HTTP请求

也是因为那个采集项目的需要. 很失落地发现Adobe AIR的XMLHttpRequest也好, URLLoader也好, 都不支持设置代理, 一般似乎是用的系统设置. 于是自己实现了一个, 比较简单, 不支持HTTPS, 但是cookie什么的都是做到位了的. 有responseText和responseBody, 分别用于读取文本和字节文件, 如图片. 暂不支持压缩, 不过chunked是支持的.

代码已经传到github上了, 这里上一段实例, 当然, 只用到少数功能. 顺便这个是基于VEJIS, 如果不想或者不会用VEJIS可以自己稍作修改.

这里是VEJIS https://github.com/vilic/vejis
这里是这个HTTP请求 https://github.com/vilic/air-proxy-enabled-http-request-for-js

use_("http-request", function (hr) {
    var req = new hr.Request();

    //you can turn off cookies
    //req.cookieEnabled = false;
    //or turn off auto redirect
    //req.autoRedirect = false;

    req.proxy.host = "localhost";
    req.proxy.port = 1107;

    req.open("get", "http://www.vilic.info/blog/");

    //you can set request headers
    //req.setRequestHeader("Referer", "http://www.vilic.info/");

    req.send(function (req) {
        if (req.error) {
            alert(req.error);
            return;
        }

        alert(req.status);
        alert(req.responseText);
    });

    //if you use post, you'll also need to send the data
    //string and ByteArray are supported
    //req.send(data, callback);
});

又给Vejis添新东西了, 所以说有需求才有动力啊

再为腾讯的比赛写程序, 话说这个程序本身没什么难度, 就是普通的富JS页面的网页而已, 要比的有两点, 一个是主题, 一个是UI. 不过难度在我刚开始两天, 还有不到十天的时间. 虽然说貌似不用在那之前作出成品, 但半成品总得有吧.

后台选择的是PHP, 我最恨的一种脚本, 哪有什么语法, 纯粹就是堆砌! (PHPer莫生气)

那说下今天给vejis添加/改变的内容.

1. enum_ 用法如下:

var Option = enum_(“abc”, “def”, “ghi”);
//Option.abc instanceof Option == true

2. static_/public_/private_这个是针对类的, 例子如下:

var Class = class_(function (pub, pri) {
    this._(function () {
        //pub.test1 == “123”
        //pri.test2 == “321”
    });
}).static_(function () {
    this.public_(function () {
        this.test1 = “123”;
    });
    this.private_(function () {
        this.test2 = “321”;
    });
});

//Class.test1 == “123”
//Class.test2 == undefined

3. Typed Dictionary, 例子如下:

var dict = new (Dictionary(Object, Integer))();
var o1 = {}, o2 = {}, o3 = {};
dict.set(o1, 123);
dict.set(o2, 456);
//dict.get(o1) == 123
//dict.get(o2) == 456
//dict.exists(o3) == false

JavaScript 轻松实现强大的Cookies操作

刚刚群里有人问到JavaScript的Cookies操作, 于是想到之前也写过一个, 刚刚一搜, 是去年8月份的事情了… 不过功能还算不错, 而且使用方便, 于是整理一下, 献上:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title></title>
    <script src=”http://www.vilic.info/vejis/vejis.1.0.0.js” type=”text/javascript”></script>
    <script src=”http://www.vilic.info/vejis/cookies.1.0.0.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
        /*
        cookies[String name] 获取cookies集合中名为name的Cookie的值.
        cookies.clear() 清除所有Cookie, 并更新cookies集合, 无返回值.
        cookies.del(String name) 删除相应名称的Cookie, 并更新cookies集合, 无返回值.
        cookies.del(Array names) 批量删除相应名称的Cookie, 并更新cookies集合, 无返回值.
        cookies.get(String name) 更新cookies集合, 获取相应名称的Cookie的值, 返回值为String.
        cookies.refresh() 更新cookies集合, 无返回值.
        cookies.set(String name, String value) 设置相应名称的Cookie的值, 并更新cookies集合, 无返回值.
        cookies.set(String name, String value, Date date) 设置相应名称的Cookie的值与过期时间, 并更新cookies集合, 无返回值.
        cookies.set(Array names, Array values) 批量设置相应名称的Cookie的值, 并更新cookies集合, 无返回值.
        */

        if (cookies[“abc”] == undefined) {
            alert(“set cookie”);
            cookies.set(“abc”, “123”);
        }

        alert(cookies[“abc”]);
    </script>
</head>
<body>

</body>
</html>

相关文件:
http://www.vilic.info/vejis/vejis.1.0.0.js
http://www.vilic.info/vejis/cookies.1.0.0.js

JavaScript 实现函数重载及类的多构造函数

这个是之前一篇 (http://www.vilic.info/blog/archives/610) 的升级版, 添加了更强的对 “类” 的支持, 取消了Null类型, 顺便修正了一些bug.

脚本链接: http://www.vilic.info/vejis/vejis-mo.js

然后是用法:

/* 函数的用法 */

//创建一个函数并定义重载1
//这里也可以使用 var fn = _(); 创建空函数, 并在以后添加重载
var fn = _(function () {
    alert(“No arguments!”);
});

//重载2
fn._(String, function (str) {
    alert(“You got me a string: ” + str + “.”);
});

//重载3
fn._(String, Integer, function (str, n) {
    alert(“The string is: ” + str + “; and the integer is: ” + n + “.”);
});

fn();
fn(“test1”);
fn(“test2”, 123);

/* 类的用法 */
//定义一个类
var C = class_(function () {
    var x;

    //成员函数
    this.getX = _(function () {
        return x;
    });

    /* 也可无构造函数 */
    //构造函数重载1
    C._(Integer, function (i) {
        x = “Integer: ” + i;
    });

    //构造函数重载2
    C._(String, function (s) {
        x = “String: ” + s;
    });
});

//创建两个C的实例
var c1 = new C(“abc”);
var c2 = new C(123);

alert(c1.getX());
alert(c2.getX());

Vlight & Vejis 开发笔记 2010.8.18

Github https://github.com/vilic/vlight

同志们可能已经发现了, 现在有代码高亮了.

这个属于心血来潮, 突然想到写一个, 然后就写了一个, 不过后来兼容IE6还是费了点事. 最后在样式上也动用了JS. 不过顺道, 也进一步完善了Vejis (Vlight需要Vejis). 代码不多, 去掉注释的话只有80+行. 所以直接贴出来, 也顺道测试下.

/*
Vlight JS Code Highlight (Style from Visual Studio 2010)

Version 0.3
Vejis JavaScript Library 0.0.0.5 is needed.

By Vilic Vane
http://www.vilic.info/

©2010 Groinup Studio
All rights reserved.

Redistribution and use in source and binary forms,
with or without modification, are permitted provided
that the following conditions are met:
Redistributions of source code must retain the above
copyright notice, this list of conditions and the
following disclaimer.
Redistributions in binary form must reproduce the
above copyright notice, this list of conditions and
the following disclaimer in the documentation and/or
other materials provided with the distribution.
Neither the name of the Groinup Studio nor the names
of its contributors may be used to endorse or promote
products derived from this software without specific
prior written permission.
*/

vejis.ready(function () {
    var className = 'vlight', //自定义类名
        maxLineCount = 20, //最多同时显示的行数
        lineHeight = 16, //行高
        scrollBarWidth = 24, //预计滚动条宽度
        cssText = //CSS内容
        'div.vlight { position: relative; margin: 5px 0px; border: solid 1px #FFF3D0; line-height: ' + lineHeight + 'px; color: #000000; font-size: 12px; font-family: Courier New, monospace; white-space: nowrap; overflow: hidden; }' +
        'div.vlight div.vlight_top { height: 5px; background-color: #FFE8A6; font-size: 0px; }' +
        'div.vlight div.vlight_left { position: absolute; width: 65px; left: 0px; text-align: right; color: #2B91AF; overflow: hidden; }' +
        'div.vlight div.vlight_left div { position: relative; width: 40px; left: 0px; padding-right: 5px; border-left: solid 16px #F0F0F0; border-right: solid 4px #6CE26C; }' +
        'div.vlight div.vlight_main { position: relative; margin-left: 65px; padding-left: 5px; overflow-x: scroll; overflow-y: auto; }' +
        'div.vlight span.vlight_comm { color: #008000; }' +
        'div.vlight span.vlight_re { color: #000000; }' +
        'div.vlight span.vlight_str { color: #800000; }' +
        'div.vlight span.vlight_key { color: #0000FF; }';

    cssText = cssText.replace(/vlight/g, className); //替换类名
    vejis.html.createStyleSheet(cssText); //创建样式

    var eles = vejis.html.getElementsByClassName(className); //获取元素
    var spanl = '<span>',
        spanr = '</span>';

    //处理每一个类名符合的元素
    vejis.foreach(eles, function (ele) {
        var div = document.createElement('div');
        div.className = className;
        div.innerHTML =
        '<div></div>' +
        '<div></div>';

        var top = div.childNodes[0],
            left = div.childNodes[1];

        var main = document.createElement('div');
        main.className = className + '_main';

        var oText;
        if (ele.tagName == 'TEXTAREA') oText = ele.value; //如果是textarea则直接取value
        else if (ele.tagName == 'PRE') oText = ele.innerText || ele.innerHTML;
        else oText = ele.innerHTML.replace(/\r?\n/g, '').replace(/<p( [^>]*)?>([\s\S]*?)<\/p>/gi, '$2\r\n\r\n').replace(/<div( [^>]*)?>([\s\S]*?)<\/div>/gi, '$2\r\n').replace(/<([a-z]+)( [^>]*)?>([\s\S]*?)<\/\1>/gi, '$3').replace(/<br[^>]*>/gi, '\r\n').replace(/&nbsp;/g, ' ').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');

        var result = convert(oText); //转换文本到高亮的HTML
        main.innerHTML = result.html;
        div.appendChild(main);

        //创建行号
        var lines = ''
        for (var i = 1; i <= result.count; i++)
            lines += i + '<br />';
        left.innerHTML = '<div>' + lines + '</div>';

        //将原来的元素替换成代码高亮区域
        ele.parentNode.replaceChild(div, ele);

        //设置高宽
        left.style.height = main.style.height = lineHeight * (result.count > maxLineCount ? maxLineCount : result.count) + scrollBarWidth + 'px';
        left.childNodes[0].style.height = result.count * lineHeight + scrollBarWidth + 'px';

        //绑定事件
        vejis._event.add(window, 'resize', resize);
        vejis._event.add(main, 'scroll', scroll);

        resize(); //初始化

        function resize() {
            try {
                main.style.width = top.offsetWidth - left.offsetWidth - 5 + 'px';
            } catch (e) { }
        }

        function scroll() {
            left.childNodes[0].style.marginTop = -main.scrollTop + 'px';
        }
    });

    function convert(text) {
        var names = ['comm', 're', 'str', 'key']; //类名的后缀

        //全局正则表达式
        var globalRE = /((\/\*[\s\S]*?\*\/|\/\/.*)|('('|.*?([^\\]'|\\\\'))|"("|.*?([^\\]"|\\\\")))|\/(\/|.*?([^\\]\/|\\\\\/))[gim]{0,3}|([^\w]|^)(break|delete|function|return|typeof|case|do|if|switch|var|catch|else|in|this|void|continue|false|instanceof|throw|while|debugger|finally|new|true|with|default|for|null|try)(?=[^\w]|$))/g;
       
        //拆分开的正则表达式
        var res = [
            /^(\/\*[\s\S]*?\*\/|\/\/.*)$/,
            /^\/(\/|.*?([^\\]\/|\\\\\/))[gim]{0,3}$/,
            /^'('|.*?([^\\]'|\\\\'))|"("|.*?([^\\]"|\\\\"))$/,
            /(break|delete|function|return|typeof|case|do|if|switch|var|catch|else|in|this|void|continue|false|instanceof|throw|while|debugger|finally|new|true|with|default|for|null|try)$/
        ];

        text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); //符号处理

        //匹配
        text = text.replace(globalRE, function (s) {
            for (var i = 0; i < res.length; i++) {
                if (!res[i].test(s)) continue;
                var spanl2m = spanl + names[i] + spanm;

                s = s.replace(res[i], function (s) {
                    return spanl2m + s + spanr; //加标签
                });
                return s;
            }
        });

        var count = 1; //行数

        //字符处理
        text = text.replace(/\t/g, '    ').replace(/  /g, '&nbsp; ').replace(/  /g, ' &nbsp;').replace(/(\r?\n)+$/g, '').replace(/\r?\n/g, function () { count++; return '<br />'; });

        return { html: text, count: count };
    }
});

Vejis主要改进是在事件处理上(没有完全测试过, 所以可能还有大量bug), 琐碎的就不说了, 上代码:

var _event = this._event = new function () {
    var objects = [];
    var holders = [];

    this.add = _(Object, String, Function, function (obj, name, callback) {
        name = name.toLowerCase();

        var index = array.indexOf(objects, obj),
            subHolder;

        if (index < 0) {
            index = objects.length;
            objects.push(obj);
            var holder = {};
            holders.push(holder);
            createListener(holder);
        }
        else {
            var holder = holders[index];
            subHolder = holder[name];
            if (subHolder) {
                if (array.exists(subHolder, callback)) return false;
                subHolder.push(callback);
            }
            else createListener(holder);
        }

        return true;

        function createListener(holder) {
            var subHolder = holder[name] = [callback];
            subHolder.handler = handler;
            if (obj.addEventListener) obj.addEventListener(name, handler, false);
            else if (obj.attachEvent) obj.attachEvent('on' + name, handler);
        }

        function handler(ev) {
            var e = window.event || ev;
            onEvent(e, obj, name);
        }
    });

    this.remove = _(Object, String, Function, function (obj, name, callback) {
        name = name.toLowerCase();
        var index = array.indexOf(objects, obj);
        if (index < 0) return false;
        else {
            var holder = holders[index],
                subHolder;
            if (holder && (subHolder = holder[name])) {
                var idx = array.indexOf(subHolder, callback);
                if (idx < 0) return false;
                else {
                    array.removeByIndex(subHolder, idx);
                    if (!subHolder.length) {
                        var handler = subHolder.handler;
                        if (obj.removeEventListener) obj.removeEventListener(name, handler);
                        else if (obj.detachEvent) obj.detachEvent('on' + name, handler);
                        delete holder[name];
                        if (object.isEmpty(holder)) {
                            array.remove(holders, index);
                            array.remove(objects, index);
                        }
                    }
                    return true;
                }
            }
            return false;
        }
    });

    function onEvent(e, obj, name) {
        var index = array.indexOf(objects, obj);
        var callbacks = holders[index][name];

        foreach(callbacks, function (callback) {
            callback(e);
        });
    }
} ();

Vejis 开发笔记 2010.8.17

Version: 0.0.0.4

昨天做的东西比较多, 有大致有cookie的操作, 简单的get和post, json.

cookie的操作目前有1个集合, 5种方法共8次重载. (vejis的重载是我的大爱啊!) 简单操作的例子.

vejis.use(vejis, true); //使用vejis命名空间.

cookies.set(‘name’, ‘Vilic’); //添加名称为name的cookie, 值为’Vilic’.
cookies.set([‘age’, ‘sex’], [’17’, ‘male’]); //批量添加.

alert(cookies[‘name’]);

cookies.del(‘name’); //删除名称为name的cookie.

alert(cookies[‘name’]);

然后是xmlhttp, 做得比较简单, 够我用就好了:

vejis.use(vejis, true);

var data = new xmlhttp.Data();
data.title = ‘This is a test!’;
data.content = ‘Hello, I\’m Vilic!’;

var callback = _(Boolean, String, Number, function (done, text, status) {
    alert(‘Done:\n’ + done + ‘\nText:\n’ + text + ‘\nStatus:\n’ + status);
});

var xhr = xmlhttp.post(‘sample.ashx’, data, callback);

最后是json, 这个我只做了post带callback的, 因为一般不会用get来传递json.

vejis.use(vejis, true);

var callback = _(Boolean, Object, Number, function (done, value, status) {
    alert(JSON.stringify(value));
});

var obj = { name: ‘Vilic’, age: 18, hobbies: [‘Physics’, ‘JavaScript’, ‘Drawing’] };

json.post(‘sample.ashx’, ‘json’, obj, callback);

现在文件已经有500多行了, 虽然与一些专业的框架还相距甚远. 呵呵, 比不得. 顺便昨天七夕, 我跟代码从早到晚都在一起…

Vejis 开发笔记 2010.8.16

Version: 0.0.0.3

再次改进了重载算法. 然后开始各种杂项的开发, 比如string, array命名空间. 其中部分有enhance方法, 用于加强相应的原型.

之前创建可重载的函数时, 是通过函数内部创建之后return的. 但是一直想使用类似new的方法. 今天也算巩固了下之前很久听说过的一个知识:

function Test() {
    return fn;
    function fn() {
        alert(‘Test OK!’);
    }
}

var test = new Test();
test();

你认为上面的代码能弹出 “Test OK!” 吗? 答案是可以的. 但是这个时候, test instanceof Text == false. 也就是说, test此时并非Test的实例, 而是一个function(){}.

在vejis里, 虽然我最终用类似的方法实现了new Method的操作, 但得到的方法也并非Method的实例:

vejis.use(vejis, true); //使用vejis命名空间, 并且覆盖已有的方法和属性.

var test = new Method(); //创建一个可重载的方法.
test.overload(function(){ //添加一个无参数的重载.
    alert(‘Test’);
});

test(); //执行test方法.
alert(test instanceof Method); //结果是false;

另外还有包含了JSON2.js文件, 准备起床之后实现简单的AJAX函数, 我看着JQuery的, 头晕啊. 太有跳跃性了. 没打算做得它那么全, 满足我日常使用即可.

Vejis 开发笔记 2010.8.15

Version: 0.0.0.2

更改了函数重载的实现, 将原来的字符串变成了类, 扩展性更强. 见下面的MyClass.

vejis.use(vejis, true);

var test = _();

test._(Integer, function (n) {
    alert(‘Integer: ‘ + n);
});

test._(MyClass, function (obj) {
    obj.alert();
});

var obj = new MyClass();
test(18);
test(obj);

function MyClass() {
    this.alert = function () {
        alert(‘It\’s a new Class!’);
    };
}