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前端集成解决方案的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. 前段集成解决方案grunt+yeoman初步认识

    1.什么是前段集成解决方案? 将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题.不足.缺陷和需求,所提出的一种解决问题的方案 2.yeoman 应用的架构,模型!  相当于一个生成 ...

  6. 【转】外部应用和drools-wb6.1集成解决方案

    一.手把手教你集成外部应用和drools workbench6.1 1.         首先按照官方文档安装workbench ,我用的是最完整版的jbpm6-console的平台系统,里面既包含j ...

  7. Atitit easyui翻页组件与vue的集成解决方案attilax总结

    Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...

  8. 推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架

    ng-alain 是一个企业级中后台前端/设计解决方案脚手架,我们秉承 Ant Design 的设计价值观,目标也非常简单,希望在Angular上面开发企业后台更简单.更快速.随着『设计者』的不断反馈 ...

  9. 【转自IT虾米网:www.itxm.net】外部应用和drools-wb6.1集成解决方案

    一.手把手教你集成外部应用和drools workbench6.1 1.         首先按照官方文档安装workbench ,我用的是最完整版的jbpm6-console的平台系统,里面既包含j ...

随机推荐

  1. 在ASP.NET MVC中实现区域或城市选择

    每次在"万达影城"网上购票总会用到左上角选择城市的功能.如下: 今天就在ASP.NET MVC中实现一下.我想最好的方式应该是写一个插件,但自己在这方面的功力尚欠缺,如果大家在这方 ...

  2. dispatch_group_async 使用详解

    dispatch_group_async可以实现监听一组任务是否完成,完成后得到通知执行其他的操作.这个方法很有用,比如你执行三个下载任务,当三个任务都下载完成后你才通知界面说完成的了.下面是一段例子 ...

  3. HTML5+Java(Spring下) 拍照上传图片

    使用支持html5的浏览器,找个有摄像头,再建一个文件接收base64字串的图片然后保存就哦了 <html> <head runat="ReYo-Server"& ...

  4. clojure中符号symbols 和变量vars的正确理解

    原地址  http://stackoverflow.com/questions/11662084/why-does-clojure-distinguish-between-symbols-and-va ...

  5. mysql查询字段时实现左右补零

    右补0:select RPAD(id,8,'0') as pad from tmp; 左补0:select LPAD(id,8,'0') as pad from tmp;

  6. Java中IO的简单举例

    package com.kale.io; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStr ...

  7. [转]mysql 一个表两列的值交换

    FROM : http://bbs.csdn.net/topics/380025779 mysql> select * from test1 +------+-------+-------+ | ...

  8. 关于XSHM(Cross-Site History Manipulation)

    http://blog.chinaunix.net/uid-27070210-id-3255407.html 乍一看,好像和以前 css history hack 差不多,其实原理还是不一样的.浏览器 ...

  9. eclipse.ini 内存设置

    Ubuntu 系统下,Eclipse 配置文件: vi ~/eclipse/eclipse.ini -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:Max ...

  10. CSS-background-position百分比

    关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出 ...