Vejis – VILIC's Blog (Legacy)

February 1, 2014

Thoughts after Developing WordsBaking

Several months ago I started my own project called WordsBaking, which is a tool developed for helping students or learners like me to remember new English words. Considering the time and resources I have, I finally decided to use HTML/CCS/JS technologies so that it could be easier to have the versions for the three major mobile platforms.

But there would certainly be some subsequent issues. In last post, I wrote something about performance, gestures and preventing tap highlight. And in this post, I am gonna write some notes about browser bugs.

First of all, I like IE 10 Mobile quite much, comparing to original Android browser. But unfortunately, it still gets some weird bugs.

1. Scrolling issue with CSS3 transform.

I spent a lot of time locating this issue, as scrolling should be one of the most basic features, which in other word should be stable enough. It is a list of which the parent node has the style “overflow” with value “auto”. And the pseudo element “:active” of the list items has a transform with transition: translateX, so that when finger is on the item, it moves a little bit rightwards. Then the problem came, you can’t scroll the list down directly. If you want to do so, you’ll have to scroll up a little first. And, after you scroll to the bottom, you can even continue scrolling up (though the scrolling becomes no longer smooth).

So I have to change the transform to some older ways, like margin, padding, etc.

2. Scrolling issue with phone:WebBrowser control.

Ohh, again scrolling. To use pointer series of events built in IE, I have set -ms-touch-action to none under html selector. So that the page won’t move around or dance with your fingers. It works well until you get some elements with style “overflow: auto;” (or “scroll” I guess). After a list is scrolled to the top or bottom, if you put away and back your finger and continue scrolling, the whole page starts a bouncing effect. Luckily, this only happens in a phone:WebBrowser control. But unfortunately, I am using that control to wrap up my app.

I guess there should be a solution but I really haven’t found it.

Okay, so these are issues with the front end. On back end, I chose NodeJS as I am more confident with my JS skill. But it really took me quite a lot time to start due to the poor documentation. I am not familiar with back end and everyone knows I write front end all the time. I can’t say it would be a challenge to write the back-end stuffs I’ve done these days, but it was a great chance to learn new things.

The main problem I have is lack of database related experience, I don’t know how the db engine works in the box, so I don’t know how would my structures and logic perform. T-T

But back to NodeJS, I am quite missing my VEJIS, which helps JSers coding without looking for online documentations. Oh dear you know how it feels when you press the “.” but there is no accurate auto completion and hints? It might not be that helpful after one is extremely familiar with a framework, but before that, it helps a lot. And one more thing, we are never be that familiar with every new code line we write…

A thousand words are reserved here…

So, I am very excited as WordsBaking for WP is almost ready for beta, after months. I always believe the power of a team, but when a team is not available, I also believe my own skills. Thanks my CTO (Chief Track Officer) for Tracking my developing progress btw, or I wouldn’t be able to finish the beta version. 🙂

October 16, 2012

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

May 28, 2011

又给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

March 30, 2011

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>

March 13, 2011

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());

August 19, 2010

Vlight 开发笔记 2010.8.19

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

昨天主要是添加了HTML代码高亮和CSS代码高亮, 并且自动识别HTML/CSS/JS. 同时也能高亮HTML中嵌套的CSS和JS. 有些判断并不是很严谨, 但是多数情况下是适用的. 下面分别是HTML/CSS/JS代码示例.

HTML代码:

<!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>
    <!-- HTML Code -->
    <title>Vlight Demo</title>
    <style type="text/css">
        /* CSS Code */
        body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }
        #test_div { height: 40px; }
        .test { background-color: #FFFFFF; }
    </style>
    <script src="vejis.js" type="text/javascript"></script>
    <script src="vlight.js" type="text/javascript"></script>
    <script type="text/javascript">
        /* JavaScript Code */
        vejis.use(vejis, true); //use vejis namespace
        _event.add(window, 'resize', resize); //add an event

        function resize() {
            var width = document.body.offsetWidth;
            alert(width);
        }
    </script>
</head>
<body>
    <h1>Vlight Demo</h1>
    <div id="test_div">
        <a href="http://www.vilic.info/" title="VILIC's Blog">VILIC's Blog</a>
        <img alt="" src="http://www.vilic.info/xxx.jpg" />
        <div></div>
    </div>
</body>
</html>

独立的CSS代码:

/* CSS Code */
body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }
#test_div { height: 40px; }
.test { background-color: #FFFFFF; }

独立的JavaScript代码:

/* JavaScript Code */
vejis.use(vejis, true); //use vejis namespace
_event.add(window, 'resize', resize); //add an event

function resize() {
    var width = document.body.offsetWidth;
    alert(width);
}

var multilineStr = "abc\
def\
ghi";

August 16, 2010

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的, 头晕啊. 太有跳跃性了. 没打算做得它那么全, 满足我日常使用即可.

August 15, 2010

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!’);
    };
}

August 14, 2010

Vejis 开发笔记 2010.8.14

Version: 0.0.0.1

选择的是BSD协议. 现在有接近200行了. 主要功能是createFunction. 下面来一段演示的代码:

vejis.use(vejis, true);

var test = createFunction();

test._(‘string’, function (name) {
alert(‘name: ‘ + name);
});

test._(‘int’, function (age) {
alert(‘age: ‘ + age);
});

呵呵, 看出来了吧, 函数重载. 不过在这个简单的例子上, 你可能觉得有点多余, 看看这个, 这个是vejis里的一个函数, 有4个重载:

var argsCountError = this.argsCountError = createFunction();

argsCountError._(‘integer’, function (count) {
   if (arguments.callee._caller.arguments.length != count)
      error(‘The method needs ‘ + count + ‘ argument’ + (count > 1 ? ‘s.’ : ‘.’));
});

argsCountError._(‘integer, integer’, function (least, most) {
   if (least >= most) error(‘”least” must be smaller than “most”‘);
   var count = arguments.callee._caller.arguments.length;
   if (count < least) error(‘The method needs at least ‘ + least + ‘ argument’ + (least > 1 ? ‘s.’ : ‘.’));
   if (count > most) error(‘The method needs at most ‘ + most + ‘ argument’ + (most > 1 ? ‘s.’ : ‘.’));
});

argsCountError._(‘null, integer’, function (least, most) {
   arguments = arguments.callee._caller.arguments;
   least = 0;
   argsCountError(least, most);
});

argsCountError._(‘integer, null’, function (least, most) {
   arguments = arguments.callee._caller.arguments;
   most = 25;
   argsCountError(least, most);
});

目前为止, 变量类型支持string, number, number:integer, boolean, object, object:array, object:null, function, 考虑到不同人的习惯, integer和boolean分别可以简写作int和bool. 个人觉得在函数重载很多, 而调用次数不多(其实只要不是大数量的枚举, 遍历什么的, 都不算多)时, 这个功能是非常实用的.

另外vejis.use(namespace, overwrite)也是个比较实用的东西, 虽然目前功能还非常简单, 但以后会慢慢增强.

其他的很弱, 也没什么特色了. 慢慢来.