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

简介:


下载地址: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 'jimmy.song@aliyun.com'

* 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 'jimmy.song@aliyun.com'

* 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="jforemote.js?name=jfo&version=1.0"></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











本文转自 sundunjam 51CTO博客,原文链接:http://blog.51cto.com/sunspot/1203702,如需转载请自行联系原作者
目录
相关文章
|
29天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
3月前
|
JavaScript 前端开发 Java
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
|
3月前
|
前端开发 JavaScript 开发者
什么是 Angular 框架中的 Zone.js
什么是 Angular 框架中的 Zone.js
27 0
|
4月前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
39 1
|
11天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
15天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
20天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
|
1月前
|
前端开发 JavaScript 机器人
详解《基于 javascript 的流程图编辑框架LogicFlow
详解《基于 javascript 的流程图编辑框架LogicFlow
44 0
|
1月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
24 0
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架