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，如需转载请自行联系原作者