Jscex无创痕切入JqueryUI
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 561
很多人可能会有个疑问,Jscex和其他类库共同使用或者语法混用时,会不会出现冲突或者异常?那么我们就来做个尝试吧。我们使用tab插件:<script>$(function(){$("

很多人可能会有个疑问,Jscex和其他类库共同使用或者语法混用时,会不会出现冲突或者异常?那么我们就来做个尝试吧。

我们使用tab插件:

      <script>  $(function () {  $("#tabs").tabs({ event: "mouseover" });  });  </script>  

效果如下:鼠标划过就可以切换tab.

Jscex是JavaScript Computation EXpressions的缩写,它为JavaScript语言提供了一个monadic扩展,能够显著提高一些常见场景下的编程体验。Jscex项目完全使用JavaScript编写,能够在任意支持ECMAScript 3的执行引擎里使用,包括各浏览器及服务器端JavaScript环境(例如 Node.js )。

目前Jscex主要包括以下几点功能:
JIT编译器:在运行时动态编译代码,主要用于开发环境。
AOT编译器:在执行前静态编译代码。静态编译后的代码可以脱离JIT编译器执行,因此主要用于生产环境。
异步编程库:基于Jscex生成的monadic代码,大大简化JavaScript下的异步编程难度。

异步编程的重要性不言而喻,对于JavaScript来说更是如此。JavaScript并没有提供任何能够阻塞代码执行过程的机制,任何一个“耗时”的操作都必须写成异步的模式。传统的异步操作会在完成时通过回调函数传回结果,我们可以在回调函数中进行下面的工作。

但这也是造成异步编程十分困难的主要原因。我们一直习惯于“线性”地编写逻辑,但是异步操作所带来的大量回调把我们的算法分解地支离破碎。我们不能用if来实现逻辑分支,也不能用while/for/do来实现循环。更不提异步操作之间的组合、错误处理以及取消操作了。

Jscex及它的异步编程库便是为了解决这些困难而诞生的。

后来,官网帮这个tab插件扩展了一个自动切换的功能,只需要这样写就行:

<script type="text/javascript">
       
$(function () {
          var t= $("#tabs").tabs();
          t.tabs("rotate", 3000, false);
        });
</script>

扩展的代码如下:

      $.extend($.ui.tabs.prototype, {          rotation: null,          rotate: function (ms, continuing) {              var self = this,              o = this.options;              var rotate = self._rotate || (self._rotate = function (e) {                  clearTimeout(self.rotation);                  self.rotation = setTimeout(function () {                      var t = o.selected;                      self.select(++t < self.anchors.length ? t : 0);                  }, ms);                    if (e) {                      e.stopPropagation();                  }              });                var stop = self._unrotate || (self._unrotate = !continuing              ? function (e) {                  if (e.clientX) { // in case of a true click                      self.rotate(null);                  }              }              : function (e) {                  t = o.selected;                  rotate();              });                // start rotation              if (ms) {                  this.element.bind("tabsshow", rotate);                  this.anchors.bind(o.event + ".tabs", stop);                  rotate();                  // stop rotation              } else {                  clearTimeout(self.rotation);                  this.element.unbind("tabsshow", rotate);                  this.anchors.unbind(o.event + ".tabs", stop);                  delete this._rotate;                  delete this._unrotate;              }                return this;          }      });    })(jQuery);

 

依然是那么费解的代码!在官方没有扩展之前,我们可以用Jscex介样子实现:

     <script type="text/javascript">          var swicthAsync = eval(Jscex.compile("async", function () {              var tabCount = $("#tabs ul li").length;              while (true) {                  for (var i = 0; i < tabCount; i++) {                      $await(Jscex.Async.sleep(2000));                      $('#tabs').tabs({ selected: i });                  }              }          }));          $(function () {              $("#tabs").tabs();              swicthAsync().start();          });  </script>  

 

可以看得出来,这样的话Jscex没有对JqueryUI做任何介入,Jscex只是外部控制的一层壳。这样无法对测试出Jscex是否能与冲突或者异常,那么,我们就来用Jscex重写官方的扩展方法吧!

      $.extend($.ui.tabs.prototype, {          rotation: null,          rotate: function (ms, continuing) {              var self = this,              o = this.options;              var swicthAsync = eval(Jscex.compile("async", function () {                  while (true) {                      for (var i = 0; i < self.anchors.length; i++) {                          $await(Jscex.Async.sleep(5000));                          self.select(i);                      }                  }              }));              swicthAsync().start();              return this;          }      });    })(jQuery);

 

运行效果如下,一切正常!但是continuing参数暂时没有起作用,该参数是决定用户在选中后是否继续循环下去,这个就留个大家自己去完善吧~~~~

Jscex是JavaScript Computation EXpressions的缩写,
它为JavaScript语言提供了一个monadic扩展,
能够显著提高一些常见场景下的编程体验。
Jscex项目完全使用JavaScript编写,能够在任意支持ECMAScript 3的执行引擎里使用,
包括各浏览器及服务器端JavaScript环境(例如 Node.js )。

目前Jscex主要包括以下几点功能:
JIT编译器:在运行时动态编译代码,主要用于开发环境。
AOT编译器:在执行前静态编译代码。静态编译后的代码可以脱离JIT编译器执行,因此主要用于生产环境。
异步编程库:基于Jscex生成的monadic代码,大大简化JavaScript下的异步编程难度。

异步编程的重要性不言而喻,对于JavaScript来说更是如此。JavaScript并没有提供任何能够阻塞代码执行过程的机制,任何一个“耗时”的操作都必须写成异步的模式。传统的异步操作会在完成时通过回调函数传回结果,我们可以在回调函数中进行下面的工作。

但这也是造成异步编程十分困难的主要原因。我们一直习惯于“线性”地编写逻辑,但是异步操作所带来的大量回调把我们的算法分解地支离破碎。我们不能用if来实现逻辑分支,也不能用while/for/do来实现循环。更不提异步操作之间的组合、错误处理以及取消操作了。

Jscex及它的异步编程库便是为了解决这些困难而诞生的。

最新的Jscex 库,请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

【更多javascript异步编程系列】

javascript异步编程系列【一】----用Jscex画圆

javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较

Jscex.config.codeGenerator = function (code) { return "false || " + code; }
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2