Javascript遠端加載架構 - JFO Remote Framework 1.0

<a href="http://down.51cto.com/data/798909" target="_blank">下載下傳位址：http://down.51cto.com/data/798909</a>

主要用于遠端腳本嵌入，有的時候我們可能需要通過在某些應用中嵌入動态腳本以達到我們想要的資料加載或者一些程式控制，那麼JFOREMOTE可能會符合我們這個要求。

遵守MIT開源協定，最終版權歸屬jiuzhang song(Jimmy Song)以及41zone團隊，但是您可以進行修改和傳播。

這裡提供了兩個版本，jforemote-min.js和jforemote-noajax-min.js。前者擁有規範的ajax功能，其中包括了request和jsonp兩個方法，對于實際的應用中可能jsonp的用途會更大一些，因為常常要應對cross domain的情況，同時如果使用jsonp的方法，那麼就意味着隻能通過GET方式進行遠端傳輸。

<code>原始代碼如下：</code> <code>/**</code> <code>* JFO Remote Framework，Some question for email '[email protected]'</code> <code>* Declare: This framework of Javascript developed by 41zone team</code> <code>* License: MIT</code> <code>*/</code> <code>(function(j){window.console=window.console||{log:function(a){}};var h= ... )</code> <code>({}); //在這裡進行添加自己的要處理的邏輯</code> 第二步. 根據需求編寫自己的實際操作代碼片段。 <code>添加自己的邏輯後的代碼：</code> <code>//注意下面的代碼</code> <code>({</code> <code>ready:true,</code> <code>styles:['http://static.41zone.cc/jfo/css/jforemote.css','http://github.com/jfo/common/css/jfo.css'],</code> <code>scripts:['http://static.41zone.cc/jfo/js/jfo-min.js',</code> <code>{url:'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',conflict:'$',force:true}],</code> <code>begin:function(remote){console.log('Hello JFO, JFORemote begin to work, there is no any scripts and styles be loaded.');},</code> <code>success:function(remote){</code> <code>$(remote.div).html('HELLO JFO, JFO Remote Loaded! We can do something.');</code> <code>alert(remote.params.name+' = '+remote.query.name);</code> <code>remote.jsonp('http://dynamic.41zone.cc/jsonp.html?name=jfo',function(data){console.log('result = '+data.name);});</code> <code>}</code> <code>});</code>

通過上面的介紹您知道該如何使用jforemote架構，那麼下面主要介紹其中詳細的API功能。

[屬性] styles: 樣式數組，這裡需要指派為字元串的數組，并且這些字元串必須是有效的絕對URL網絡位址，比如, <code>['http://www.google.com/ga.css','http://41zone.cc/test.css']</code> [屬性] scripts: 腳本數組，這裡需要指派的同樣是字元串數組，也必須是有效的URL網絡位址，與styles不同的時，這裡我們同時也可以使用原子構造進行腳本位址的指定，這樣可以一定意義上避免沖突，比如， <code>['http://wwww.google.com/ga.js',{url:'http://jquery.com/jquery.js',conflict:'$',force:false}]</code> 正如我們所看到的的，這裡有這麼一段<code>{url:'http://jquery.com/jquery.js',conflict:'$',force:false}</code>對象代碼段，這是什麼含義呢？ <code>url</code>: 腳本位址 <code>conflict</code>: 可能發生沖突的變量名稱，比如這裡是jquery，那麼可能在引用的頁面中已經存在了jquery，那麼我們指定$為沖突變量 <code>force</code>: 預設為false，如果為true表示強制引入該腳本，如果為false，那麼就不會加載目前我們要引入的腳本。 [屬性] ready: 預設為false，如果為true則表示是否在目前頁面加載完畢之後再執行remote指令， [方法] begin(remote): 在開始執行remote調用之前觸發的回調方法，remote為jforemote對象，這裡的功能在下面會說到，您可以直接略這些直接進行檢視。 [方法] success(remote): remote調用執行完畢觸發的回調方法

[對象] remote: 其中的方法和常用參數如下 [屬性] remote.params: 腳本引入時的參數鍵值對。 <code>比如我們如此引入腳本&lt;script type="text/javascript" src="jforemote.js?name=jfo&amp;version=1.0"&gt;&lt;/script&gt;，那麼params的KEY-VALUE就是，{name:'jfo',version:'1.0'}</code> [屬性] remote.query: 頁面的查詢字段鍵值對。 <code>比如我們的引入頁的位址為http://41zone.cc/jfo.html?name=jfo&amp;version=1.0，那麼query的KEY-VALUE就是,{name:'jfo',version:'1.0'}</code> [屬性] remote.div: remote動态建構的容器根，屬于DOM對象 [方法] remote.doQuery(search): 将查詢的參數字元串建構成KEY-VALUE對象. <code>比如，remote.doQuery('name=jfo&amp;version=1.0')，傳回的KEY-VALUE就是，{name:'jfo',version:'1.0'}</code> [方法] remote.request(options): remote的ajax處理方式，其中參數構造形式如下 <code>url : ""</code> 請求位址 <code>method : "GET"</code> 請求方式，預設為GET，選項POST | GET <code>type : "text"</code> 傳回類型，預設為text，選項text | json | jsonp，當為jsonp時method設定無效 <code>cache : false</code> 是否允許緩存，預設為false <code>async : true</code> 是否允許異步，預設為true <code>params : {}</code> 參數清單，KEY-VALUE存儲方式 <code>success : function(data, xhr) {}</code> 請求成功時傳回的回調方法 <code>error : function(status, xhr) {}</code> 網絡異常或者請求失敗時傳回的回調方法 [方法] remote.jsonp(url,success): remote的jsonp處理方式，其中參數構造形式如下 <code>url : ''</code> 請求位址

本文轉自 sundunjam 51CTO部落格，原文連結：http://blog.51cto.com/sunspot/1203702，如需轉載請自行聯系原作者