FIS前端集成解决方案
FIS前端集成解决方案-文档结构
什么是FIS
部署FIS
FIS基本使用
模块定义
加载方式
调用Tangram 2.0
FIS开发实例
--附件下载--
什么是FIS
FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构,这能帮助工程师提高开发效率,沟通协作效率,快速实现需求并达到代码的最优化。 部署FIS
1.配置代理文件,在html页加上这样的语句
F._fileMap({ '/static/js/Test.js': ['/static/js/Test1.js', '/static/js/Test2.js'] });
F._fileMap的格式为:F._fileMap({'文件路径',['模块名称1','模块名称2','模块名称n']}); FIS基本使用
在FIS中,所有JavaScript文件都应该用模块的形式来书写,并且一个文件只包含一个模块。
F.module:
使用F.module来定义模块:
F.module(name, function(require, exports){
//bla bla
},deps); name:当前模块的唯一标识,为模块所在文件的访问路径。 fn:模块的main函数。 require:模块函数第一个参数名称为require, 用来访问其他模块提供的 API。 exports:exports 用来向外提供模块的 API. deps:deps是一个数组,表示当前模块的依赖列表。 加载方式
FIS JS框架通过Script DOM Element的方式来实现异步加载模块,这种方式适用于所有的浏览器,而且没有跨域的限制。
这种方式的缺点是不能保证各个脚本的执行顺序。如果需要加载多个有依赖关系的脚本,我们可以使用use或者require方法。 F.use:
通过 use 方法,可以在页面中加载任意模块:
F.use('tangram', function(baidu){
baidu.dom.ready(function(){
console.log('ready!');
});
}); 我们也可以use多个模块,
F.use(['a', 'b'], function(a, b){
//bla bla
}); require:
require方法只能在模块的定义中使用,
//模块a,模块的定义由工具自动生成
var t = require('tangram:base');
var ec = require('fis:event'); require请求模块的方式也是采用异步的方式,在模块的main函数执行之前,框架会采用异步的方式去请求所有require的模块,
当所有模块加载成功后才会执行这个模块的main函数,也就是当运行到 var t = require('tangram') 语句的时候 tangram 模块已经加载进来了。 调用Tangram 2.0 FIS开发平台内置tangram通用库,开发者不需要自己下载tangram即可使用。
可以通过F.use来使用tangram模块:
F.use('tangram', function(baidu){ }); 也可以在module内部通用require来使用tangram模块:
var baidu = require('tangram');
FIS开发实例
1.调用佚名函数
//F.module定义佚名函数:
F.module("/fis/static/js/fn.js", function (e, c) {
(function () {
alert('fis调用佚名函数');
})()
},[]);
//F.use调用佚名函数
F.use('/fis/static/js/fn.js'); 2.调用Object对象
//F.module定义:
F.module("/fis/static/js/obj.js", function (r, e) {
var obj = {
pro: 'obj成员属性',
fn: function () {
return 'obj成员函数';
}
};
return obj; //模块返回对象
}, []);
//F.use调用Object对象
F.use('/fis/static/js/obj.js',function (o) {
alert(o.pro);
alert(o.fn());
}, []); 3.调用prototype原型对象
//F.module定义prototype原型对象:
F.module("/fis/static/js/prototype.js", function (r, e) {
function fn(){}
fn.prototype = {
pro: 'fn成员属性',
fn: function () {
return 'fn成员函数';
}
}
return new fn(); //模块返回对象
}, []);
//F.use调用prototype原型对象
F.use('/fis/static/js/prototype.js', function (o) {
alert(o.pro);
alert(o.fn());
}, []); 4.调用多个模块
//F.use调用多个模块
F.use(['/fis/static/js/obj.js', '/fis/static/js/prototype.js'], function (a, b) {
alert(a.pro);
alert(b.fn());
},[]); 5.使用require请求模块
//F.module定义obj对象:
F.module("/fis/static/js/out-obj", function (r, e) {
var obj = {
pro: 'obj成员属性',
fn: function () {
return 'obj成员函数';
}
};
return obj;
});
//F.模块内容使用require请求模块
F.module("/fis/static/js/out.js", function (r, e) {
var t = r('/fis/static/js/out-obj'); //require('模块名称');必须预先定义好
return t;
}, []);
//F.use调用模块
F.use('/fis/static/js/out.js', function (o) {
alert(o.pro);
}, []) 6.使用F._fileMap配置多模块文件
//F.module定义多模块文件(/fis/static/js/map.js):
F.module("/fis/static/js/a.js", function (r, e) {
var obj = {
pro: 'map成员属性'
};
return obj;
}, []);
F.module("/fis/static/js/b.js", function (r, e) {
var obj = {
fn: function () {
return 'map成员函数';
}
};
return obj;
}, []); //F._fileMap配置调用模块
F._fileMap({ '/fis/static/js/map.js': ['/fis/static/js/a.js', '/fis/static/js/b.js'] }); //F.use调用多个模块
F.use(['/fis/static/js/a.js', '/fis/static/js/b.js'], function (a,b) {
alert(a.pro);
alert(b.fn());
}, []); //7.FIS与jQuery模块结合
需要修改jQuery代码
F.module("jQuery", function(require, exports){
(function(){
//jQuery code
})(exports);
},[]); //F._fileMap配置jQuery文件定义为jQuery模块
F._fileMap({ '/fis/static/js/jquery.fis.js': ['jQuery'] }); //F.use调用jQuery模块
F.use("jQuery", function (X) {
$(function () {
alert('call jQuery'); //Hello Text
})
}); 8.FIS与独立的jQuery对象结合jQuery代码不需要做任何修改
直接调用jQuery.js
<script src="/static/js/jquery.js" type="text/javascript"></script> //F.module定义模块:
F.module("/fis/static/js/jq.js", function (b, a) {
var c = (function (h) {
var f = function (m) {
return m;
};
var g = function (j) {
return j;
};
return {
n: f,
m: g
}
})(jQuery);
return c;
}, []); F.use调用模块
F.use("/fis/static/js/jq.js", function (o) {
alert(o.n('n'));
alert(o.m('m'));
});
FIS前端集成解决方案的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- 前段集成解决方案grunt+yeoman初步认识
1.什么是前段集成解决方案? 将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题.不足.缺陷和需求,所提出的一种解决问题的方案 2.yeoman 应用的架构,模型! 相当于一个生成 ...
- 【转】外部应用和drools-wb6.1集成解决方案
一.手把手教你集成外部应用和drools workbench6.1 1. 首先按照官方文档安装workbench ,我用的是最完整版的jbpm6-console的平台系统,里面既包含j ...
- Atitit easyui翻页组件与vue的集成解决方案attilax总结
Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...
- 推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架
ng-alain 是一个企业级中后台前端/设计解决方案脚手架,我们秉承 Ant Design 的设计价值观,目标也非常简单,希望在Angular上面开发企业后台更简单.更快速.随着『设计者』的不断反馈 ...
- 【转自IT虾米网:www.itxm.net】外部应用和drools-wb6.1集成解决方案
一.手把手教你集成外部应用和drools workbench6.1 1. 首先按照官方文档安装workbench ,我用的是最完整版的jbpm6-console的平台系统,里面既包含j ...
随机推荐
- Running Jenkins behind Nginx
original : https://wiki.jenkins-ci.org/display/JENKINS/Running+Jenkins+behind+Nginx In situations wh ...
- SQL Server 2008 安装教程
http://www.downcc.com/tech/4135.html 序列号:Developer: PTTFM-X467G-P7RH2-3Q6CG-4DMYB
- Git:常用命令(二)
查看提交历史 git log 撤消操作 任何时候,你都有可能需要撤消刚才所做的某些操作.接下来,我们会介绍一些基本的撤消操作相关的命令.请注意,有些操作并不总是可以撤消的,所以请务必谨慎小心,一旦失误 ...
- skb的两个函数pskb_copy和skb_copy
转自:http://blog.csdn.net/farmwang/article/details/54235252 skb的两个函数pskb_copy和skb_copy 前者仅仅是将sk_buff的结 ...
- 行尸走肉第八季/全集The Walking Dead迅雷下载
<行尸走肉第八季>将在10月22号回归播出, 将于5月1日起正式开始拍摄!目前剧组已开始招募客串演员和丧尸群演,第八季拍摄时长初步预计会持续到11月16日.而这三位已确认为<行尸走肉 ...
- 详细解读Volley(二)—— ImageRequest & Request简介
上篇文章我们讲到了如何用volley进行简单的网络请求,我们可以很容易的接受到string.JsonObjec类型的返回结果,之前的例子仅仅是一次请求,这里需要说明volley本身就是适合高并发的,所 ...
- ASP.NET MVC:WebPageBase.cs
ylbtech-funcation-Utility: ASP.NET MVC:WebPageBase.cs 充当表示 ASP.NET Razor 页的类的基类. 1.A,WebPageBase 抽象类 ...
- codeforce 192 div2解题报告
今天大家一起做的div2,怎么说呢,前三题有点坑,好多特判.... A. Cakeminator 题目的意思是说,让你吃掉cake,并且是一行或者一列下去,但是必须没有草莓的存在.这道题目,就是判断一 ...
- 如何确定HyperThreading是否在Linux上已开启?
命令如下: dmidecode -t processor | grep HTT 参考资料 ============= https://unix.stackexchange.com/questions/ ...
- Java奇淫巧技之Lombok
http://blog.csdn.net/ghsau/article/details/52334762