`
jindw
  • 浏览: 508777 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
社区版块
存档分类
最新评论

云想衣裳花想容－－JSI组件模型介绍（一）

    博客分类：
  • JSI
JSI云计算HTML5D语言fckeditor 
阅读更多
JSI组件模型是一种用来装饰简单html元素的框架，使用简单的xml标记，标识其装饰行为，比如将一个普通的input装饰成一个日期输入控件，将一 个html ul标记装饰成菜单或树，将一个textarea装饰成一个代码语法高亮显示区域，或一个wysiwyg html编辑器。
JSI启动后将自动检查decorator标记，构建层次结构，自动做相关类的寻找、导入和装饰操作；实现零脚本代码的web富客户端编程。

代码示例：

  1. 日期选择器 (DatePicker):

    1. <d:datepicker>  
    2.   <input type="text" name="test2" />  
    3. </d:datepicker>  

  2. 编辑器示例 (Editor):

    1. <d:editor>  
    2.   <textarea name='editorText'>This is some <strong>sample text</strong>. You are using <a  
    3.     href="http://www.fckeditor.net/">FCKeditor</a>.</textarea>  
    4. </d:editor>  

  3. Spinner控件（Spinner 类似window时间日期管理中，年份调节的控件）:

    1. <d:spinner start='0' end='8' step='2'>  
    2.   <input type="text" name="test2" value='0' />  
    3. </d:spinner>  

  4. 客户端包含(Include):

    1. <d:include url='menu.xml' xslt="menu.xsl"></d:include>  

  5. 代码语法高亮显示控件(Code):

    1. <d:code language="js">  
    2.  <textarea>alert(‘Hello World’)</textarea>  
    3. </d:code>  

  6. 标签页控件(TabBox参照xul tabbox标签):

    1. <d:tabbox>  
    2.   <d:tabs>  
    3.     <d:tab>tab1</d:tab>  
    4.     <d:tab>tab2</d:tab>  
    5.     <d:tab>tab3</d:tab>  
    6.   </d:tabs>  
    7.   <d:tabpanels>  
    8.     <d:tabpanel>content1</d:tabpanel>  
    9.     <d:tabpanel>content2</d:tabpanel>  
    10.     <d:tabpanel>content3</d:tabpanel>  
    11.   </d:tabpanels>  
    12. </d:tabbox>  


  7. 综合示例:
来一个复杂一点的完整的例子,以日期选择控件的演示页面为例
页面上有: 标签页装饰器（TabBox….）、源代码高亮显示装饰器（Code）、日期选择装饰器（DatePicker）、包含装饰器（Include）：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4.   xmlns:d="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"  
  5.   lang="zh_CN">  
  6. <head>  
  7. <script src="../scripts/boot.js"></script>  
  8. <title>DatePicker 示例</title>  
  9. </head>  
  10. <body>  
  11. <h2>DatePicker 示例</h2>  
  12. <!-- 开始标签页装饰器 -->  
  13. <d:tabbox>  
  14.   <d:tabs>  
  15.     <d:tab>效果</d:tab>  
  16.     <d:tab>代码</d:tab>  
  17.   </d:tabs>  
  18.   <d:tabpanels>  
  19.     <d:tabpanel>  
  20.       <!-- 开始日期装饰器(内嵌式) -->  
  21.       <d:datepicker type='grid'>  
  22.         <input type="text" name="test1" />  
  23.       </d:datepicker>  
  24.       <!-- 开始日期装饰器(弹出式) -->  
  25.       <d:datepicker>  
  26.         <input type="text" name="test2" />  
  27.       </d:datepicker>  
  28.     </d:tabpanel>  
  29.     <d:tabpanel>  
  30.       <!-- 开始代码高亮显示 -->  
  31.       <d:code language="xml">  
  32.         <textarea>  
  33.       &lt;!-- 开始日期装饰器(内嵌式) --&gt;  
  34.       &lt;d:datepicker type='grid'&gt;  
  35.         &lt;input type="text" name="test1" /&gt;  
  36.       &lt;/d:datepicker&gt;  
  37.       &lt;!-- 开始日期装饰器(弹出式) --&gt;  
  38.       &lt;d:datepicker&gt;  
  39.         &lt;input type="text" name="test2" /&gt;  
  40.       &lt;/d:datepicker&gt;</textarea>  
  41.       </d:code>  
  42.     </d:tabpanel>  
  43.   </d:tabpanels>  
  44. </d:tabbox>  
  45. <select style="margin-left:120px"><option>弹出的datepicker 可覆盖IE select</option></select>  
  46. <hr />  
  47. <!-- 开始Include装饰器,包含装饰器菜单 -->  
  48. <d:include url='menu.xml' xslt="menu.xsl"></d:include>  
  49. </body>  
  50. </html>  


装饰结果：






云想衣裳花想容－－JSI组件模型介绍（二）已经发布，那里有装饰过程及其原理的介绍：
http://www.iteye.com/topic/71425


  • 大小: 108.9 KB
分享到：
| 海纳百川 有容乃大――采用JSI封装、集成 ...
评论
19 楼 winterwolf 2007-05-23  
hax 写道
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！


xforms的实现有formface 不过没有文档 可能要收费吧. 我一直没有实验成功
18 楼 jindw 2007-05-22  
hax 写道
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！


不错的建议，模仿已有的标准，可以降低学习成本。
现在的标签也都是模仿mozilla的xul的。

改改几个标签名，也是很简单的事情。
17 楼 hax 2007-05-22  
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！
16 楼 jindw 2007-05-21  
jianfeng008cn 写道
jindw 写道
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。


但是引用的js控件都很不小啊，虽可采百家之长，我看敢用的人还是。。
且每个js控件都需要学习成本啊，虽对lz很敬佩，话还是得说一下哦


不得不承认，JSI还不成熟。

复杂js控件的体积，是可能成为问题，但是目前来说，也没有更好的办法，用传统模式也是一样的。
只能期待浏览器的更新了，比如hax前面说的xhtml5。
15 楼 jianfeng008cn 2007-05-21  
jindw 写道
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。


但是引用的js控件都很不小啊，虽可采百家之长，我看敢用的人还是。。
且每个js控件都需要学习成本啊，虽对lz很敬佩，话还是得说一下哦
14 楼 啊赶 2007-05-21  
哟，lz 还听傲的嘛，

如果是你自己写的，我只有对你敬仰之情犹如滔滔江水。。。


补充一下，文档还需要加强
13 楼 jindw 2007-05-21  
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？
12 楼 hax 2007-05-21  
楼主有没有看过web application 1.0和wf2？这是比较好的努力方向。w3c正在进行标准化。
11 楼 jindw 2007-05-21  
啊赶 写道
问一下，这个是你自己写的还是参考别人的？



你去写一个，我来参考参考：）
10 楼 啊赶 2007-05-21  
问一下，这个是你自己写的还是参考别人的？

9 楼 jindw 2007-04-18  
bluepower 写道
jindw 写道
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。



建议写一个 Dom Query 引擎加快查找装饰元素的速度，可以参考一下 Ext 中的 DomQuery


谢谢你的建议，以后抽空看看。
框架的性能优化是一定会做的，无赖分身无术。还是先把欠缺的东西完善起来。

刚才做了一下装饰引擎的性能测试(通过new Date方式计算脚本运行时间)。

以新版javaeye主页为例（64,160字节，也算是大文件了），查找装饰元素需要的时间为：
IE: 0     毫秒。
FF: 50-70 毫秒。
8 楼 bluepower 2007-04-18  
jindw 写道
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。



建议写一个 Dom Query 引擎加快查找装饰元素的速度，可以参考一下 Ext 中的 DomQuery
7 楼 jindw 2007-04-18  
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。
6 楼 曹晓钢 2007-04-18  
几百毫秒也是不小的开销了....
5 楼 HexUzHoNG 2007-04-16  
和我们公司的js前台框架有点类似，不过感觉比你的稍直观些
拿那个TabBox为例，只要在页面加入

<div tt.impl=TabBanana 还有其它一些属性></div>
就实现了你例子中TabBox效果，和jsptaglib有些类似，呵呵
4 楼 cozone_柯中 2007-04-16  
说句心里话,佩服jindw的语言表述啊, 每个标题都不一样. jsi 我最看好的就是装饰模式了
3 楼 dogo 2007-04-16  
楼主牛人啊
2 楼 jindw 2007-04-16  
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。

我采用xml标记而非脚本语言，主要是考虑标记语言代码更简单，编写文档也比较方便

此外标记语言解析比较简单，比较适合可视化工具的开发。
1 楼 dennis_zane 2007-04-16  
非常酷的想法，只是采用xml做标记，性能上如何？我认为json是否是更好的选择？不过这个点子真的很不错，楼主的JS功力令人佩服。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    海尔液晶电源 0094001224B JSI-190419-050 JSI-220409-050原理图.pdf

    根据提供的信息，我们可以了解到这份文档是关于海尔液晶电视电源板（型号：0094001224B JSI-190419-050 JSI-220409-050）的原理图。这份原理图详细地展示了电源板的内部电路结构、元件布局及其连接方式等关键信息。...

    JSI-GAN:JSI-GAN的官方存储库（于AAAI 2020接受）

    这是JSI-GAN（AAAI2020）的官方存储库。 我们提供了培训和测试代码，以及经过训练的权重和用于JSI-GAN的数据集（train + test）。 如果您发现此存储库有用，请考虑引用我们的。 参考： Soo Ye Kim *，Jihyong Oh ...

    JSI-full-2.0

    【JSI-full-2.0】是一个基于JavaScript的项目，主要关注的是JavaScript这门编程语言。这个项目的全称可能指的是JavaScript Interface或JavaScript Integrated，但具体含义需要根据项目的文档来确定。从提供的文件...

    HDT-JSI01

    【HDT-JSI01】项目是一个以JavaScript为核心的开发实践，它可能是一个开源项目或者教程，因为通常在编程领域，这种命名格式常用于版本控制或学习资源。JavaScript是一种广泛使用的编程语言，尤其在网络开发中扮演着...

    using使用JSI为React Native提供快速简便的多线程-C/C++开发

    react-native-multithreading using使用JSI的React Native的快速简便的多线程处理。 安装npm install react-native-multithreading npx pod-i react-native-multithreading using使用JSI进行React Native的快速简便...

    eccl-jsi.github.io

    eccl-jsi.github.io

    jsi-modules:用jsi进行模块学习

    "jsi-modules"项目显然是一个专注于利用JSI进行模块化学习的资源集合。下面我们将深入探讨JSI的核心概念、其在模块化编程中的应用，以及如何通过"jsi-modules-master"这个压缩包来学习和实践JavaScript模块。 首先...

    海尔液晶电源背光板 0094001274E JSI-320411 原理图.pdf

    ### 海尔液晶电视电源背光板0094001274E JSI-320411原理图解析 #### 概述 本文将详细解析海尔液晶电视电源背光板0094001274E JSI-320411原理图中的关键元件及其功能、电路设计思路与工作原理，帮助读者更好地理解该...

    JSI, java脚本开发工具

    JSI框架提供一个无侵入的脚本库管理解决方案，和一个全面的前端开发调试、文档解析、模版编译、打包导出环境支持。 作为一个开发期间的脚本管理工具，让开发者在开发期间享受JSI带来的种种便捷，也可以作为一个运行...

    java推荐算法源码-jsi:Java空间索引

    jsi-examples 存储库。 简而言之，您需要像这样初始化 RTree： // Create and initialize an rtree SpatialIndex si = new RTree(); si.init(null); 然后添加一些矩形； 每个人都有一个ID。 final Rectangle[] rects...

    jsi-wikifier-api

    JSI Wikifier OpenAPI规范 JSI Wikifier ...链接文档： : SwaggerUI： ：//jsi-eubusinessgraph.github.io/jsi-wikifier-api/swagger-ui/ 看完整规格： JSON YAML 警告：仅当Travis CI完成部署后，以上所有链接才会更新

    轻量系统JS-UI框架子系统

    对于想要深入学习和使用轻量系统JS-UI框架子系统的开发者，可以从以下几个方面入手： - **官方文档**：阅读OpenHarmony官方提供的详细教程和API参考，了解框架的基本用法和最佳实践。 - **示例代码**：通过分析 ...

    react-native-multithreading:using使用JSI为React Native提供快速简便的多线程

    例如，像这样的存储库或SQLite JSI库可能要花费几毫秒来执行一个复杂的调用。 您不希望这样做时冻结整个React-JS线程，因为用户会感觉到明显的滞后或冻结。 那就是react-native-multithreading出现的地方。 您可以...

    jsish:Jsi是一个小型的C嵌入式javascript解释器，具有紧密编织的Web和DB支持

    Jsi是带有内置websocket-server，sqlite和C -extensibility的javascript -ish解释器。 | | | 快速开始下载适用于 / 的二进制文件： wget ...

    基于react-native的购物阅读APP

    总结来说，这个基于React-Native的购物阅读APP项目涵盖了前端开发、后端服务、数据库管理和移动应用架构等多个方面，对于想要深入学习React-Native及其生态系统的人来说，是一个极好的实战案例。通过研究这个项目，...

    react-native-quick-md5:快速C ++实现与MD5的JSI绑定，用于React Native

    通过React 5的MD5的JSI绑定，以极快的速度实现C ++实现。 确认它比在iPhone 11 Pro上使用快10倍，在Essential Phone上快8倍。 您可以在下查看基准测试。 安装 npm install react-native-quick-md5 用法 import { ...

    自定义三种方式进度条

    我们可以创建一个自定义View，重写`onDraw()`方法，在这里利用Canvas绘制一条水平或垂直的矩形条，然后根据进度值动态改变矩形填充的宽度或高度。通过设置颜色、边框宽度和样式，可以实现不同视觉效果的进度条。 第...

    正泰LQG-0.66型电流互感器.PDF

    正泰LQG-0.66型电流互感器PDF,

    react-native-vision-camera：see可以看到视野的Camera库

    文献资料安装npm i react-native-vision-cameranpx pod-install特征照片和视频拍摄可定制的设备（ ultra-wide-angle ， wide-angle ， telephoto和虚拟多镜头） 可定制的FPS 由JSI和Reanimated支持的JS Worklet帧...

    react-native boost 依赖 2019.zip

    React-Native Boost可能包括了对JSI（JavaScript Interface）的集成，这是一个原生API，使得JavaScript可以直接调用C++代码，减少了消息传递的开销。 现在，让我们详细讨论一下如何解决`react-native run-ios`的...

Magicbox
Global site tag (gtag.js) - Google Analytics