Javascript远程加载框架 - JFO Remote Framework 1.0

转自:https://github.com/41zone/jfo/wiki/JFOREMOTE-%E7%9A%84-API

下载地址：http://down.51cto.com/data/798909

JFO Remote Framework version 1.0

用途：

主要用于远程脚本嵌入，有的时候我们可能需要通过在某些应用中嵌入动态脚本以达到我们想要的数据加载或者一些程序控制，那么JFOREMOTE可能会符合我们这个要求。

下载：

请复制这个链接，根据您的需要下载所需的版本。https://github.com/41zone/jfo/tree/master/jforemote

版权：

遵守MIT开源协议，最终版权归属jiuzhang song(Jimmy Song)以及41zone团队，但是您可以进行修改和传播。

版本：

这里提供了两个版本，jforemote-min.js和jforemote-noajax-min.js。前者拥有规范的ajax功能，其中包括了request和jsonp两个方法，对于实际的应用中可能jsonp的用途会更大一些，因为常常要应对cross domain的情况，同时如果使用jsonp的方法，那么就意味着只能通过GET方式进行远程传输。

使用：

第一步. 首先要将jforemote导入到自己的项目中，实质上就是复制一份代码，比如我们使用jforemte-min.js，那么我们需要复制一下这个代码，这里您可以参考jforemote-demo.js这里面的代码，同时比对jforemote的原始代码就明白其中的含义，并且就知道如何操作了。 这里是链接，https://github.com/41zone/jfo/blob/master/jforemote/1.0/jforemote-demo.js

原始代码如下：

/**

* JFO Remote Framework，Some question for email '[email protected]'

* Declare: This framework of Javascript developed by 41zone team

* License: MIT

*/

(function(j){window.console=window.console||{log:function(a){}};var h= ... )

({}); //在这里进行添加自己的要处理的逻辑

第二步. 根据需求编写自己的实际操作代码片段。

添加自己的逻辑后的代码：

/**

* JFO Remote Framework，Some question for email '[email protected]'

* Declare: This framework of Javascript developed by 41zone team

* License: MIT

*/

(function(j){window.console=window.console||{log:function(a){}};var h= ... )

//注意下面的代码

({

ready:true,

styles:['http://static.41zone.cc/jfo/css/jforemote.css','http://github.com/jfo/common/css/jfo.css'],

scripts:['http://static.41zone.cc/jfo/js/jfo-min.js',

{url:'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',conflict:'$',force:true}],

begin:function(remote){console.log('Hello JFO, JFORemote begin to work, there is no any scripts and styles be loaded.');},

success:function(remote){

$(remote.div).html('HELLO JFO, JFO Remote Loaded! We can do something.');

alert(remote.params.name+' = '+remote.query.name);

remote.jsonp('http://dynamic.41zone.cc/jsonp.html?name=jfo',function(data){console.log('result = '+data.name);});

}

});

API：

通过上面的介绍您知道该如何使用jforemote框架，那么下面主要介绍其中详细的API功能。

[属性] styles: 样式数组，这里需要赋值为字符串的数组，并且这些字符串必须是有效的绝对URL网络地址，比如,

['http://www.google.com/ga.css','http://41zone.cc/test.css']

[属性] scripts: 脚本数组，这里需要赋值的同样是字符串数组，也必须是有效的URL网络地址，与styles不同的时，这里我们同时也可以使用原子构造进行脚本地址的指定，这样可以一定意义上避免冲突，比如，

['http://wwww.google.com/ga.js',{url:'http://jquery.com/jquery.js',conflict:'$',force:false}]

正如我们所看到的的，这里有这么一段{url:'http://jquery.com/jquery.js',conflict:'$',force:false}对象代码段，这是什么含义呢？

url: 脚本地址

conflict: 可能发生冲突的变量名称，比如这里是jquery，那么可能在引用的页面中已经存在了jquery，那么我们指定$为冲突变量

force: 默认为false，如果为true表示强制引入该脚本，如果为false，那么就不会加载当前我们要引入的脚本。

[属性] ready: 默认为false，如果为true则表示是否在当前页面加载完毕之后再执行remote命令，

[方法] begin(remote): 在开始执行remote调用之前触发的回调方法，remote为jforemote对象，这里的功能在下面会说到，您可以直接略这些直接进行查看。

[方法] success(remote): remote调用执行完毕触发的回调方法

Remote Object:

[对象] remote: 其中的方法和常用参数如下

[属性] remote.params: 脚本引入时的参数键值对。

比如我们如此引入脚本<script type="text/javascript" src=\'#\'" /script>，那么params的KEY-VALUE就是，{name:'jfo',version:'1.0'}

[属性] remote.query: 页面的查询字段键值对。

比如我们的引入页的地址为http://41zone.cc/jfo.html?name=jfo&version=1.0，那么query的KEY-VALUE就是,{name:'jfo',version:'1.0'}

[属性] remote.div: remote动态构建的容器根，属于DOM对象

[方法] remote.doQuery(search): 将查询的参数字符串构建成KEY-VALUE对象.

比如，remote.doQuery('name=jfo&version=1.0')，返回的KEY-VALUE就是，{name:'jfo',version:'1.0'}

[方法] remote.request(options): remote的ajax处理方式，其中参数构造形式如下

url : "" 请求地址

method : "GET" 请求方式，默认为GET，选项POST | GET

type : "text" 返回类型，默认为text，选项text | json | jsonp，当为jsonp时method设置无效

cache : false 是否允许缓存，默认为false

async : true 是否允许异步，默认为true

params : {} 参数列表，KEY-VALUE存储方式

success : function(data, xhr) {} 请求成功时返回的回调方法

error : function(status, xhr) {} 网络异常或者请求失败时返回的回调方法

[方法] remote.jsonp(url,success): remote的jsonp处理方式，其中参数构造形式如下

url : '' 请求地址

success : function(data, xhr) {} 请求成功时返回的回调方法

下载地址：http://down.51cto.com/data/798909