* 類庫導出支持（完全脫離JSI環境）
    從JSI托管類庫中，選擇文件/對象集，導出為單一腳本文件，完全脫離JSI裝載環境。
    也就是說，屆時JSI不僅可以作為一個運行時的腳本管理框架，也可以當作一個部署時的腳本定制、打包工具。

    我是看Ext的定制工具后產生這個想法的，JSI的依賴定義API完全可以用作一個通用的腳本定制、打包工具的依賴描述語言。

* Ext集成（歡迎Ext用戶加入）
    集成Ext，一方面可以彌補JSI組件的缺乏。另一方面可以優化Ext的裝載延遲。
ext目前大小為：462,031字節，JSI2Alpha版的內核為35,140字節，不到Ext的十分之一（文件大小均在文本壓縮之前記數）。集成Ext后，用戶可以使用JSI導入函數，按需導入那些頁面上直接使用到的元素。

一些細節的想法：
    初步決定使用jquery為其基礎類庫（prototype不必擔心，JSI可以隔離腳本沖突，不會影響到prototype用戶）。
    裝載單元劃分的兩種想法：
    1.按照 http://extjs.com/download/build 中描述的定制模塊劃分（可能做些文件合并，避免零碎 件的裝載開銷）
    2.按照Ext內部包劃分（Ext 下載包的packages目錄下好像已經做了文件合并）

我個人還沒用過Ext，非常希望有Ext用戶合作。

大約兩年前私下編寫一個wiki時使用的代碼生成工具，最近想繼續這個wiki項目（http://sourceforge.net/projects/txdoc），也順便吧這個代碼生成工具整理出來。

PPT見：http://www.tkk7.com/jindw/archive/2007/06/30/127195.html

eclipse項目，文件太大，SF文件發布系統最近問題多多，只好分成三分上傳在javaeye blog：http://jindw.javaeye.com/blog/98436

其中，代碼生成工具及一些基礎類庫在web/WEB-INF/lib/xdoclet-xidea-plus.jar文件中（附源碼）

 

帶ID的函數表達式：

按照ECMA262定義,上面這段腳本等價于：

 

注意：fnid在with外是不可見的，但是IE沒有嚴格遵守ECMA規范(同樣的情況發生在catch語法上)。在IE上相當于：

在剛剛發布的JSA1beta上，還不能處理這個問題（新版本將這周內發布）。同時，鑒于這種語法在不同瀏覽器上表現不同，還是建議盡量避免使用（這點上，我個人還是更喜歡ie的方式）。

var語句：
太常用了，但是，沒有注意還是很容易出問題。
var 用來聲明全局或函數變量，但是，只是申明，重復申明也不能置空，范圍是函數或者全局空間，位置在函數或腳本頂端，與塊無關，這些與常用高級語言區別很大。

怪癖的代碼

 

常見錯誤有：

 

已經有一年多沒做java這塊了，今天翻出這個一年前寫的代碼生成工具，準備開放出來，或許對某些人還有點用處。

這個代碼生成器是基于xdoclet2的改進版。
  所做工作：
  * 生成Hibernate 映射文件及相應得spring的配置文件。
  * 生成Hibernate DAO 文件及命名查詢名稱常量（新）。
  * 生成Spring配置文件（支持事務申明）。
  * 生成xwork配置文件（增加多包及spring屬性支持）。
  * 驗證資源冗余及缺失。

先吧PPT放出來，如果有人（包括我自己）能用上再吧代碼整理一下，放出來。

ppt下載：
http://www.tkk7.com/Files/jindw/codegen.rar

裝飾引擎簡介：

系統默認的裝飾引擎為：org.xidea.decorator.DecoratorEngine。
JSI裝載后，將做如下操作：

1. 判斷有無裝飾器命名空間聲明（xmlns:d= "http://www.xidea.org/taglib/decorator"）
2. 若有，將在文檔裝載結束后，啟動裝飾引擎，初始化當前可用的裝飾提供者表。（裝飾提供者是一個JavaScript包，在注冊這種裝飾包時可同時指定他的別名，別名*表示默認包）
3. 遍歷當前文檔，凡是該命名空間的節點，都被看作需要裝飾的元素。若當前文檔存在裝飾元素，啟用遮罩（關機效果），頁面將不可操作（仍可查閱）。
4. 查找裝飾元素對應的裝飾類（通過tagName判斷類名），采用異步方式動態裝載這些裝飾器類（不會裝載到全局空間），并更新當前進度信息，同時設置裝飾器之間的關系（parent,children）。
5. 以深度遍歷的方式遍歷這些節點，注冊組件（以后可以通過$JSI.getComponent函數獲取裝飾器對象），依次執行他們的before操作，和decorate操作。
6. 完成裝飾，取消遮罩，頁面進入可用狀態。

裝飾器規范簡介：

裝飾器指的是所有擁有decorate成員方法的類。一般來說，可將一組裝飾器歸為同一個包中（太復雜的裝飾器，可將具體邏輯放置在其他包中），能后在配置文件中定義裝飾包。
scripts/config.js   $JSI.addDecoratorProvider("org.xidea.decorator","xidea","*");

裝飾器類包含兩個方法before、docorate分別在遍歷前（子節點未裝飾）和遍歷后（子節點裝飾完成）調用。

同時，裝飾引擎遍歷時還將注入如下三個屬性：

1. parent：父裝飾器
2. children：子裝飾器集合
3. attributes：裝飾器屬性集對象（只有一個成員函數：get(attrName)  ）

JSI現有裝飾器集合簡介

目前JSI2最高版本2.0預覽版 (2007-04-16)包含如下裝飾器：

1. DatePicker
   日期選擇控件，參照xul datepicker標簽，支持彈出方式(默認值 type='pop')，和內嵌式(type='grid')
2. Editor
   編輯器控件，參照xul editor標簽
3. Spinner
   Spinner控件（window時間日期管理中，年份調節的控件），參照backbase 的 Spinner標簽
4. TabBox、Tabs、Tab、TabPanels、TabPanel
   TabBox(標簽頁)控件，參照xul tabbox標簽
5.  Code
   代碼語法高亮顯示控件，參照SyntaxHighlighter的顯示風格
6. Include
   片斷包含標簽，支持xpath選取文檔片斷，支持xslt轉換
   

這些裝飾器的演示見：
http://www.xidea.org/project/jsi/decorator/index.html

目前JSI自帶的裝飾器不夠豐富，而且都還是初級階段，不夠完善。現在發布的這些裝飾器，主要是為了演示JSI的工作方式，編碼風格，希望能吸引第三方團隊、公司在這個基礎上開發出自己的更加實用的裝飾器集合。

JSI及其裝飾引擎采用LGPL協議。可以商業應用，當能，更希望能開源。

目前就我一人之力，開發一套完整的裝飾器，尚需時日，這次將這個半成品拿出來演示，主要是為了展示一下jsd的風格，希望能吸引其他開發者，共同參與這個工程，有興趣豐富JS自帶I裝飾器集合的網友，請msn與我聯系：jindw◎xidea。org JSI組件模型是一種用來裝飾簡單html元素的框架，使用簡單的xml標記，標識其裝飾行為，比如將一個普通的input裝飾成一個日期輸入控件，將一 個html ul標記裝飾成菜單或樹，將一個textarea裝飾成一個代碼語法高亮顯示區域，或一個wysiwyg html編輯器。
JSI啟動后將自動檢查decorator標記，構建層次結構，自動做相關類的尋找、導入和裝飾操作；實現零腳本代碼的web富客戶端編程。

代碼示例：

1. 日期選擇器 (DatePicker):
   
   
    <d:datepicker>  
     <input type="text" name="test2" />  
   </d:datepicker>   
   
   
2. 編輯器示例 (Editor):
   
   
    <d:editor>  
     <textarea name='editorText'>This is some <strong>sample text</strong>. You are using <a  
       href="http://www.fckeditor.net/">FCKeditor</a>.</textarea>  
   </d:editor>   
   
   
3. Spinner控件（Spinner 類似window時間日期管理中，年份調節的控件）:
   
    <d:spinner start='0' end='8' step='2'>  
     <input type="text" name="test2" value='0' />  
   </d:spinner>   
   
   
4. 客戶端包含(Include):
   
    <d:include url='menu.xml' xslt="menu.xsl"></d:include>    
   
   
5. 代碼語法高亮顯示控件(Code):
   
    <d:code language="js">  
    <textarea>alert(‘Hello World’)</textarea>  
   </d:code>   
   
   
6. 標簽頁控件(TabBox參照xul tabbox標簽):
   
   
    <d:tabbox>  
     <d:tabs>  
       <d:tab>tab1</d:tab>  
       <d:tab>tab2</d:tab>  
       <d:tab>tab3</d:tab>  
     </d:tabs>  
     <d:tabpanels>  
       <d:tabpanel>content1</d:tabpanel>  
       <d:tabpanel>content2</d:tabpanel>  
       <d:tabpanel>content3</d:tabpanel>  
     </d:tabpanels>  
   </d:tabbox>   
   
   
   
7. 綜合示例:

來一個復雜一點的完整的例子,以日期選擇控件的演示頁面為例
頁面上有: 標簽頁裝飾器（TabBox….）、源代碼高亮顯示裝飾器（Code）、日期選擇裝飾器（DatePicker）、包含裝飾器（Include）

裝飾結果：

云想衣裳花想容－－JSI組件模型介紹（二）已經發布，那里有裝飾過程及其原理的介紹：
http://www.javaeye.com/topic/71425

眾所周知， Scriptaculous所依賴的Prototype庫與jQuery存在沖突。所以同時使用比較困難。

JSI針對每一個裝載的腳本都有完全獨立的執行上下文。所以這個問題能在JSI上徹底解決。

下面的例子，我們將在同一個頁面上同時使用Scriptaculous和 jQuery 類庫。證實一下JSI隔離沖突功能。

示例頁面（hello-jquery-aculo.html）：

<html> 
<head> 
<title>Hello jQuery And Scriptaculous</title> 
<!-- 加入引導腳本 --> 
<script src="../scripts/boot.js"></script> 
<script> 
//導入jQuery  
$import("org.jquery.$"); 
//導入Scriptaculous  
$import("us.aculo.script.Effect");  
 
  
$(document).ready(function(){ 
  //使用jQuery添加一段問候語 
  $("<p id='helloBox' style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>Hello jQuery And Scriptaculous</p>")       .appendTo('body');  
  $('#helloBox').ready(function(){  
    //使用Scriptaculous高亮顯示一下剛才添加的內容  
    new Effect.Highlight('helloBox');  
  }).click(function(){  
    //當用戶單擊該內容后使用jQuery實現漸出  
    $('#helloBox').fadeOut();  
  });  
 });  
</script>  
</head>    
<body>    
<p>文檔裝載后，jQuery將在后面添加一段問候語；并使用Scriptaculous高亮顯示（Highlight）；在鼠標點擊后在使用jQuery漸出（fadeOut）。</p>  
</body>  
</html>  

Java的成功，離不開它那個龐大的類庫，不單是sun的類庫，很多細節的實現都取自第三方（如xml解析采用Apache的實現）。

JSI暫時不大算編寫豐富的公共API，但是我們可以集成其他成熟的類庫，同時隔離他們的依賴，隔離各個腳本的執行上下文，消除命名沖突的危險。

這里我們詳細介紹一個復雜一點的實例：類似Windows XP文件瀏覽器左側的滑動折疊面板(任務菜單)效果。

我們先集成Scriptaculous Effect類庫，并且在這個基礎上按我個人的習慣對一個面板折疊效果做一個簡單的封裝，展示框架的類庫封裝功能。

1。集成Scriptaculous類庫：

這里我們不做過多介紹，詳細情況請參考集成實戰；我們發布的版本中已經把Scriptaculous放置于us.aculo.script包中，您可以把這些作為系統內置的類庫使用。

2。編寫我們的折疊面板函數（example/effect.js）：

3。編寫包定義腳本（example/__$package.js）：

4。在網頁上運用上面的類庫：

onclick="slidePanel('menu_block1')"這個事件函數將在我們點擊面板標題時觸發，能后會調用Scriptaculous Effect的具體實現去實現我們需要的滑動折疊功能。

 

壁立千仞 無欲則剛――控制依賴

java可以隨意的使用第三方類庫，可是JavaScript卻沒那么幸運，隨著類庫的豐富，煩雜的依賴關系和可能的命名沖突將使得類庫的發展越來越困難。程序的易用性也將大打折扣。

命名沖突的危險無形的增加你大腦的負擔；隨著使用的類庫的增加，暴露的依賴也將隨之增加，這是復雜度陡增的極大禍根，將使得系統越來越復雜，越來越難以控制。潛在的問題越來越多，防不勝防。

JSI的出現，可以解決上述問題，我們建議類庫的開發者將自己類庫的依賴終結在自己手中，避免依賴擴散，以提高類庫的易用性。

同樣使用上面的例子，假如我們想拋開JSI，實現同樣的功能，那我們的頁面代碼將是（類庫代碼不用改動）：


這個例子的html代碼明顯比上面的復雜了，一堆堆的script標簽，而且還是有序的；還出現在頁面上，重構起來也極其麻煩。

可以看出，JSI的加入可以讓類庫更加易用，html代碼更為簡潔，最終用戶已經不必關心所用類庫的依賴了。

JSI中每一個腳本有一個單獨的執行上下文。各個腳本頂部變量你可以隨便使用，不必擔心不同腳本中的命名沖突，不會污染全局變量空間，這種方式可以用于解 決某些類庫間變量沖突的問題（如jQuery和Prototype的$函數）。我們甚至可以做到同一個頁面上間接加載同一種類庫的兩個不同版本，不相互影 響。

使用JSI后，很多細節我們可以在包中封裝掉，不需要告訴類庫使用者太多。大大增加類庫的易用性。同時，類庫封裝的支持可以讓我們在第三方庫的基礎上輕松的按自己的喜好編寫自己的類庫，同時避免依賴擴散造成的復雜度增加。

使用JSIntegration唯一多出的負擔就是編寫包定義文件，不過想想這種定義文件可是一勞永逸的（以后就不需要每次導入腳本的時候都小心翼翼的判 斷那個腳本先導入那個后導入，有那些間接使用到的類庫需要導入，等等），而且有了包結構后對于代碼組織、重用，以及文檔的編寫閱讀，都將非常有利。

何謂安需裝載？

安需裝載可分如下三種模式：

• 即時同步按需裝載（阻塞，JSI、JSVM、dojo）。
  最簡單的按需裝載實現，通過XMLHttpRequest同步裝載腳本文件實現。問題是，瀏覽器使用這種方式同步獲取資源時將導致瀏覽器阻塞：停止響應用戶事件、停止頁面重畫操作。所以，雖然編程最為簡單，但是用戶體驗最差。
  
• 異步按需裝載（無阻塞，JSI2.0+）。
  異步導入，不必多做解釋，用戶體驗好，但是因為其異步特征，處理起來比較麻煩。
• 延遲同步按需裝載（無阻塞，JSI2.0+）。
  JSI通過動態預裝載功能實現的一種同步獲取資源的方法，雖然也是同步，但沒有阻塞，可以算時兼顧易用性和用戶體驗的機決方按。缺點時有一定延遲，當前腳本標簽中不可用。
  

使用方法（JSI示例）

以一個代碼語法著色程序為例：
類庫位置：example/codedecorator/code.js
頁面位置：example/xxx.html

• 即時同步按需裝載
  
  $import("example.codedecorator.Code");
  
  var code1 = new Code();
  code1.id = "libCode";
  code1.decorate(); 
  
  
• 異步按需裝載
  
  $import("example.codedecorator.Code",function(Code){
   var code1 = new Code();
   code1.id = "libCode";
   code1.decorate();
  }) 
  
  
• 延遲同步按需裝載（無阻塞，JSI2.0+）。
  
  <script>"../scripts/boot.js"></script>
  <script>
  $import("example.codedecorator.Code",true);
  </script>
  
  <script>
  var code1 = new Code();
  code1.id = "libCode";
  code1.decorate();
  </script>
  
  

示例說明：

在線測試

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code.html

參考：

JSI 導入函數： function $import(path, callbackOrLazyLoad, target )

這個問題算是個老問題了。
所以，標題加上一個再字。

我主要說一下模擬這個事件時候容易出現的問題。

對于FF，Opera9，原生DOMContentLoad支持，就不說了，最頭疼的是IE。
我最初考慮這個問題的時候，想到的是document的readyState屬性。
偷窺一下Dojo的源碼，發現它也是基于這個屬性去做的，那時，我基本就認準了這個方法。
于是再后來JSI1和JSI2早期的預覽版本中，都是基于這個屬性做的，后來，有個朋友向我反應，說JSI的裝飾引擎在IE上啟動比FF慢很多，我當時就猜測，是否是這個DOMContentLoad的問題。

經過測試，發現，確實，readyState必須等待圖片裝載完成之后才能置為complete。
于是到網上搜索一下其他辦法，最終 Dean Edwards的blog上描述的一個基于script defer屬性的解決辦法勝出：http://dean.edwards.name/weblog/category/dom/onload/
不過，使用document.write打印一段腳本，我真的不喜歡：（

在評論里面我們可以看到一些其他的建議，有人認為 readyState == 'complete' 加 readyState==‘interactive’這個狀態可以準確模擬DOMContentLoad。我開始簡單測試一下，貌似可行，但是后來發現 readyState==‘interactive’可能受alert等函數影響，就是說，一般情況下，readyState== ‘interactive’時，dom是裝載完了的，但是，當你文檔裝載過程中，調用了alert函數，那么，readyState將提前置為 ‘interactive’。

總之，目前來說，我知道的，只有兩個辦法可以真正實現IE上模擬DOMContentLoad

1.htc ondocumentready（需要額外的HTC文件）
2.script defer(必須使用document.write打印一段腳本標記,jquery目前采用的方式)

最常見的一個錯誤：

document.readyState(Dojo目前（0.4.1）采用的方式)

再說一下JSI的DOMContentLoad實現的使用接口。

js.html.EventUtil.addDOMReadyListener(<Function>listener ,<boolean>runAnyCase )

第二個參數用于確保listener 在任何時候都會被調用（FF DOMContentLoad事件如果在事件發生之后設置listener是無效的）