上周末Jscex项目介绍的幻灯片

2011-05-16 13:43 by 老赵, 5550 visits

上周末，在风景秀丽的浙江大学校园内，举行了NodeParty杭州站的活动。我在活动上结合Node.js项目对Jscex进行了简单介绍，包括其设计目的，设计原则，使用方式，高级模式，组成部分等等。在场的许多朋友也提出了不少问题，我也一一作了解答或是演示。总体感觉还算不错，毕竟是亲手编写的项目，对其各方面还是了然于胸的。在此发布演讲用的幻灯片，希望能给不在现场的同学带来一些帮助。

Jscex: Write Sexy JavaScript (中文)

View more presentations from jeffz

为了便于在国外社区推广，我也制作了英文版的幻灯片（事实上这是“原版”，中文版反而是会前临时决定翻译过来的），在此一并献上：

Jscex: Write Sexy JavaScript

View more presentations from jeffz

欢迎您使用Jscex，遇到什么问题也请及时与我联系。

GitHub（英文主站）：https://github.com/JeffreyZhao/jscex
SNDACode（中文站）：http://www.sndacode.com/projects/jscex

Categories: 前端表现, 项目扩展
Tags: Jscex, 异步任务, Node.js

本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名赵劼（包含链接），具体操作方式可参考此处。如您有任何疑问或者授权方面的协商，请给我留言。

Add your comment

43 条回复

183.26.225.*
链接
libinqq 2011-05-16 15:52:15

很精彩顶一个，顺便问下老赵问什么痛恨java。

202.38.70.*
链接
Belleve Invis 2011-05-16 16:47:43

你们为什么不去USTC！为什么！

admin
链接
老赵 2011-05-16 22:07:10

@Belleve Invis

因为听这名字像美国学校，怕怕的不敢去……

admin
链接
老赵 2011-05-16 22:14:31

@libinqq

生产力差，把高级程序员当普通程序员使，限制发挥。而且关键是……还很普及，很多人还不明白这点。

120.39.17.*
链接
王道中强流 2011-05-17 10:40:38

太强大了！！！！！

180.168.100.*
链接
suding 2011-05-19 11:23:54

欢迎老赵去USTC

220.249.157.*
链接
易语言论坛 2011-05-20 01:51:43

牛啊，可惜我不在杭州。不然一定去看看。

210.22.97.*
链接
avatasia 2011-05-23 10:12:32

赵哥，前几天没仔细看你的博客，今天才发现原来您就是05年我学.net ajax的启蒙老师啊，怎么现在去盛大了，您的"我的衣橱"现在怎么样了？

223.167.32.*
链接
忍让 2011-06-12 12:38:40

对JS不感兴趣

222.66.81.*
链接
cheney 2011-07-20 21:19:07

推荐老赵看看这个： http://hax.iteye.com/blog/1128269

admin
链接
老赵 2011-07-20 23:01:28

@cheney

第一时间就看过了，有什么建议没？

222.76.154.*
链接
xmchyabi 2011-08-02 17:49:11

有个问题，在eval(Jscex.compile("async", function () { 这里面运行的代码，如果有脚本有错误，浏览器怎么都不提示了

admin
链接
老赵 2011-08-03 09:49:48

@xmchyabi

什么叫做“脚本有错误”，能给个简单的代码吗？

220.231.61.*
链接
Lockman 2011-09-23 12:09:12

这是一个 nice idea，但是用了一种很“过渡”的方式来实现。

事实上不客气的说，Jscex 是用一种“新的丑陋语法”去遮盖了“旧的丑陋语法”。我不认为这会成为一个广为接受的 solution。这个项目会受到关注，但是真正会去应用它的，可能不会太多。

实现同样的目的，重新扩展 Javascript 语法，让人们以新的方式来开发，就好象 coffeescript 那样，也许倒是值得尝试的方向。

依然抱着 Library 的大腿，真是太沉重了。毕竟这是 Language 本身的问题，却要求我们不停的用 Library 去解决，真的很操蛋——大家都想省省心，少学点东西。可是 Library 更费力！ Library 实现的是在功能层次的扩展。对于语义表达层次上的根深蒂固的问题，会比较困难。

我表示对 Jscex 持悲观态度，不过我相信这个创意本身会激发其他的人去寻找更好的解决办法，而这或许会是 Jscex 最有价值的地方。

admin
链接
老赵 2011-09-28 10:06:44

@Lockman

其实我只是设法可以让更多人接受它，所以保留JS语法。否则扩展JavaScript显然更直接，但是浏览器和Node.JS都不容易接受（至少我这么认为）。相关语言改进其实有Mozilla这种组织在搞。

CoffeeScript是个奇迹。

119.97.215.*
链接
xiaoc 2011-12-01 17:50:41

初学者关注一下sexy的$await~ mark~

119.145.40.*
链接
bob 2011-12-14 11:22:01

老赵在github上下了代码在 samples\async\quick-start.html 文件中的console.log(current);后面加了一句alert(current);

结果在FF,Chrome , Opera下面都可以正常的弹出alert . 但IE8下则没有报错也没有反应. 请问是因为Jscex不支持IE么?

admin
链接
老赵 2011-12-14 13:32:58

@bob

是个浏览器Jscex就支持，我有机会试试看到底是什么原因，估计不是缺少JSON就是缺少console.log……

119.145.40.*
链接
bob 2011-12-14 19:29:41

抱歉, 低级错误. 已经OK了

admin
链接
老赵 2011-12-14 22:52:52

@bob

现在发生错误也不会“无声无息”了，会打印出警告信息。

119.145.40.*
链接
bob 2011-12-15 10:07:00

老赵,能不能抽空在原始版本外再提供一个压缩版本的. 这样可以压缩jscex体积.

虽说有了源码可以自己压,但一来不是人人都会压,二来用起来没有官方压的放心.

admin
链接
老赵 2011-12-15 16:16:39

@bob

压了啊，只不过JIT没压而已，因为JIT模块是不会发布的。

119.145.40.*
链接
bob 2011-12-15 18:16:45
- ~~jscex-async.min.js~~
- ~~jscex-async-powerpack.min.js~~
- ~~jscex-builderbase.min.js~~
- uglifyjs-parser.js
- jscex-jit.js
- json2.js
在一个demo用到了以上几个代码. 前三个压缩了.后三个没找到对应的压缩版.

admin
链接
老赵 2011-12-15 21:26:58

@bob

json2已经删掉了，其他两个都是JIT编译器，不会发布的。

119.145.40.*
链接
bob 2011-12-16 15:52:41
不太明白.

我是新手, 要跑通demo以下三个必不可少,少了例子就运行不了了.
- uglifyjs-parser.js
- jscex-jit.js
- json2.js (IE需要)
难道不用这三个也可以运行quick_start.html么

admin
链接
老赵 2011-12-17 17:02:23

@bob

代码更新过了，简化了使用方式，你可以重新获取下Jscex的代码。

至于发布至生产环境之类的，其实就是AOT或者叫预编译。我还没写中文文档。

59.57.137.*

链接

xmchyabi 2012-03-16 09:58:06

博主的这个jscex项目很不错，目前已使用在我的mobile web中，一个是应用在调用wcf上

代码类似：

jService.articleSearch = eval(Jscex.compile("async", function (data) {
    var results = $await($.ajaxJscex({
        url: "Article/Search"
       ,type: "POST"
       ,data: data
    }));
    return results;
}))

另外一个主要应用是用在查询web sqldb上：

jDatabase.select = function (executeSql, parameter) {
    return Jscex.Async.Task.create(function (t) {
        EMADB.transaction(function (tx) {
            tx.executeSql(executeSql, parameter, function (tx, results) {
                t.complete("success", results);
            }, function (tx, error) {
                t.complete("failure", error);
            });
        });
    });
}

另外，有时候故意要让代码暂停一下，使用到

$await(Jscex.Async.sleep(1000));

减少了很多代码，也减少了BUG，非常好用，感谢！

请教个问题，我引用的脚本文件数量有点多

jscex.js
jscex-parser.js
jscex-jit.js
jscex-builderbase.js
jscex-async.js
jscex-async-powerpack.js

不知道哪些可以移除掉，新版本是否有合并之类的？

59.57.137.*
链接
xmchyabi 2012-03-16 10:05:20

另外，刚才在github上看到一句 “自2012年起，每月1号将为Jscex拨款1024元人民币，用于鼓励个人对Jscex的研究及使用”

呵，我只使用不研究，这个怎么领取呀？哈哈

admin
链接
老赵 2012-03-18 14:56:31

@xmchyabi

不知道哪些可以移除掉，新版本是否有合并之类的？

现在有个async-bundle.js，在bin目录里，可以一用。

呵，我只使用不研究，这个怎么领取呀？哈哈

如果你在实际项目里使用的话，直接跟我联系就行了，呵呵。

链接
madxzb 2012-03-21 15:15:09

@老赵

我在项目中使用jscex，发现一个问题，调用$await(Jscex.Async.sleep(1000)); 时，会导致原先的动态gif图片停止，一直至整个函数执行完成，才会恢复动态。例子程序：http://ftptest.qwolf.com/Publish/HTMLPage1.htm

loading图片会停止转动一段时间，求解。

admin
链接
老赵 2012-03-21 17:12:11
@madxzb

是死循环让页面停住了而已：
```
while (true) {
    if (new Date().getTime() - start > n) {
        break;
    }
}
```
Async.sleep只是setTimeout而已，不会有什么特别的地方的。

链接
madxzb 2012-03-21 17:46:41
@老赵

一开始我也是这么认为，但是后来在手机上测试后，发觉并不是。
```
var firstLoadAsync=eval(Jscex.compile("async", function (token,contenttype) {
    //初始化代码--此时图片还是转的

    $await(Jscex.Async.sleep(500));

    //逻辑操作代码--这段时间图片是不转的
}));
```
直至firstLoadAsync运行完成，图片才会继续转动。

逻辑操作代码，只是用ajax去网络接口取数据而已，在用电脑或者wifi的情况下，逻辑操作代码运行的时间很短，所以看不出什么问题。但是用GPRS的话，有时ajax取数据会很慢，这时就可以看到图片没有转动了。这个问题，搞了很久也不知道是为什么，只好来请教一下。

admin
链接
老赵 2012-03-21 19:09:40

@madxzb

我在浏览器上没发现暂停的情况。肯定跟Async.sleep无关，因为它其实就是setTimeout，说不定就是某手机浏览器就会在setTimeout或AJAX操作的时候停止响应。

59.57.140.*
链接
xmchyabi 2012-03-28 11:09:16

@老赵

是的，jscex已经应用于我们的商业项目里了

使用它可以减少很多代码量，且让代码更直观更易维护

现在也推荐给同事们使用。

59.57.140.*
链接
xmchyabi 2012-03-28 11:24:26
```
self.btnDownloadNewClick = function () {
    if (confirm("Download project planner ?")) {
        var task = eval(Jscex.compile("async", function () {
            $await(downloadProjectPlanner());
            $await(getProjectPlanner());
        }));
        task.().start();
    }
};
```
我们的应用是要支持离线(offline)的，所以几乎所有的业务都是要在js端处理。

没jscex真不行。

上面有朋友说的那个loading会在$await(Jscex.Async.sleep(500));后就无法转动我也是在手机中使用类似的功能，但仍然会在转。

admin
链接
老赵 2012-03-28 22:45:28

@xmchyabi

太好了太好了，能给点具体信息吗？比如是什么样的项目，有链接可以看看吗？

59.57.141.*
链接
xmchyabi 2012-04-07 12:50:54

@老赵

sorry,没来得及回复

原先是一个android&windows mobile应用，现在把它改成web形式的具体信息可以参考

http://evatic.com/evatic-mobile

项目不大，但里面的业务处理较多,经常调用wcf,及查询本地数据库.

我们的Beta版本,没有用到jscex，里面的很多脚本方法都要执行回调(callback) 这样子代码就得写的很多,代码测试时也很不直观,也会产生很多潜在的bug.

后来发现jscex后,就用在现在的RC版本里,全部改过来算是花了不少时间，但现在代码量少了很多, 对于移动终端来说，流量就是钱呀，

最重要的是bug也少了很多.因为同步的原因，我写代码就可以参考原先windows mobile(c#),按顺序写下来，开发速度变快,测试也方便,可以按意愿$await,总之用它太爽了.

14.151.137.*

链接

木木勇 2012-04-07 14:00:52

var wait = function(callback,time) {
    var prmRt = new Promise();
    setTimeout(function(){
        prmRt.success(callback());
    },time);
    return prmRt;
};

var compare = function(x, y) {
    var callback = function() {
        return x - y;
    };

    var prmRt = wait(callback,20);
    return prmRt;
};

var swap = function(a,i,j) {

    var callback = function() {
        var t = a[x];
        a[x] = a[y];
        a[y] = t;
    };

    var prmRt = wait(callback,20);
    return prmRt;
};

var bubbleSort = function (array) {
    for ( var x = 0; x < array.length; x++) {
        for ( var y = 0; y < array.length - x; y++) {

            compare(array[y], array[y+1]).then(function(c){
                if(c > 0) {
                    swap(array, y, y+1);
                }
            });
        }
    }
}

赵哥,别搞那么复杂,我封装的Promise秒杀你,顺便说一句:Promise类不到150行

admin
链接
老赵 2012-04-07 18:14:38

@木木勇

真好玩，你的Promise还能在循环里用？你跑过你写的这段代码不？

admin
链接
老赵 2012-04-09 11:08:51

@xmchyabi

多谢支持！

58.62.85.*

链接

木木勇 2012-04-26 18:47:35

上次我发错了,看错了,这次来真的

var P = require("Promise").P;

var compare = function(x,y) {
    var t = this;
    var p = P.New();

    setTimeout(function () {
        p.Return(x-y);
    },100);

    return p;
};
var swap = function (a,x,y) {

    var t = this;
    var p = P.New();

    setTimeout(function () {
        var t = a[x];
        a[x] = a[y];
        a[y] = t;
        console.log(a);
        p.Return();
    },100);

    return p;

};
var bubbleSort = function (array) {

    return P.For(0,array.length,function (x) {
        return P.For(0,array.length-x,function (y) {
            var p = P.New();
            compare(array[y],array[y+1]).then(function (r) {
                if(r>0) {
                    swap(array,y,y+1).then(function () {
                        p.Return();
                    });
                } else {
                    p.Return();
                }
            });
            return p;
        });
    });

};

var arr = [1,4,3,5,3,5,4,1,3,7,7,9,8,0];

bubbleSort(arr).then(function (r) {

    console.log(arr);

});

这段代码我绝对跑过N次了,最终得出的结果是:

[ 0, 1, 1, 3, 3, 3, 4, 4, 5, 5, 7, 7, 8, 9 ]

我的这个不用编译,这是我最得意的地方----虽然稍微不那么优美,

如果我的这个有什么问题,我还真希望你能说服我!!

admin
链接
老赵 2012-04-28 11:58:44
@木木勇

Jscex又不是随便拍脑袋想出来的，你这种方式有很多人尝试过，你应该先去了解下之前有哪些人做过什么样的努力。其实说到底你就是把Jscex编译后的代码手写了出来，顺便再丧失各种灵活性，变成只针对这个案例了而已。

比如说，你的for现在做的只能是这种形式：
```
for (var i = 0; i < 10; i++) { ... }
```
这里10必须是常数，i的步长还必须是1，这不是for的语义，而是一种情况而已，例如这种你怎么表达：
```
var j = 100;
for (var i = 0; i < j; i += 2) {
    j--;
    console.log(i + ", " + j);
}
```
你会发现，你需要把i < j以及i += 2写成两个function，然后你需要把while啊try...catch也一并这么实现了，还需要处理循环中的break，continue以及return噢。这时候我会告诉你，你其实就是已经实现了jscex-builderbase和jscex-async里面的各种辅助函数。

接着，我给你一段同步的JS逻辑要转换成异步的，于是就会出现各种function嵌套。你就会发现代码写起来会显得很麻烦，此时你就会想要一个自动转换器，等你做完了就会发现你等于写了个Jscex编译器。

35.215.141.*
链接
zoroseo2020 2023-03-28 11:43:31

宫崎骏在他的电影里说:"我始终相信,在这个世界上,一定有另一个自己,在做着我不敢做的事,在过着我不敢过的生活。"其实我们每个人都是另一个自己,只要我们愿意,就每有我们不敢做的事,没有我们过不上的生活。幸运飞艇走势图、福彩双色球走势图、幸运时时彩走势图

老赵点滴 - 追求编程之美 先做人，再做技术人员，最后做程序员。打造国内最好的.NET技术博客。