FIS前端集成解决方案
FIS前端集成解决方案-文档结构什么是FIS部署FISFIS基本使用模块定义加载方式调用Tangram 2.0FIS开发实例
--附件下载--
什么是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.0FIS开发平台内置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前端集成解决方案相关推荐
- 前端集成解决方案(webpack、gulp)
一.什么是前端集成解决方案 FIS(Front-end Integrated Solution)是专为解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题的工具框架. 二 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) 参考文章: (1)构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) (2)https: ...
- 前端集成解决方案(转)
前端集成解决方案(webpack.gulp):https://blog.csdn.net/linyeban/article/details/54319048
- element ui 二级菜单_基于avue和element-ui集成解决方案avue-cli
avue-cli是一款基于avue和element-ui完全开源.免费的企业后端产品前端集成解决方案,采用最新的前端技术栈,已经准备好了大部分的项目准备工作,你可以快速进行二次开发 功能 全局错误日志 ...
- fis pure开发php,GitHub - fex-team/fis-pure: 基于FIS的纯前端模块化解决方案
fis-pure 基于FIS的纯前端模块化解决方案pure. 建议刚接触这个方案的同学直接使用 FIS3 而非 pure,FIS3可以更轻松的实现 pure 的功能. pure是基于FIS二次封装能力 ...
- 基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
- 前端集成方案——理论(一)
集成方案在项目中的地位? 书面解释 前端集成方案指的是将前端开发领域中所有的技术元素集中到一起,对常见问题提供一套解决方案. 为什么要有集成方案? 前端达到一定规模后,一些孤立的技术元素(模块化.打包 ...
- 后台集成解决方案 avue
简介 avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),它基于 Vue.js 和 element.它使用了最新的前端技术栈,权限验证,第三方网站嵌套等功能,很多功能还在开发 ...
- 致远SPM之协同供应链集成解决方案
卷首语 致远SPM协同供应链集成助力企业构建数字化协同管理中台,打造互联网模式下的智慧供应链协同新应用. 协同供应链集成应用概述 协同供应链集成利用协同中台管理,将移动化与流程化能力渗透到供应链的业务 ...
最新文章
- 线阵相机和面阵相机的区别及应用
- html dom 高级,DOM 高级工程师不完全指南
- springboot获取原生js请求_springboot跳转原生html
- Qt Creator指定运行设置
- corosync+openais+pacemaker+web
- 数字图像处理--图像二阶导数的本质
- Codeforces Round #470 Div. 1
- VS使用scanf函数报错解决方法
- 视频编解码(四):编辑器驱动移植步骤(VE)
- Atitit 网络协议概论 艾提拉著作 目录 1. 有的模型分七层,有的分四层。我觉得	1 1.1. 三、链接层 确定了0和1的分组方式	1 1.2. 网络层(ip mac转换层	3 1.3. 传输
- c++ windows下读取大文件(内存映射)
- oauth2基本概念
- 快捷方式全部变成LNK文件修复方法
- Java mail outlook发邮件提示升级TLS1.2
- RDT 协议 (可靠数据传输协议)
- 贝壳找房《2018城市居住报告》:新一线租房量持续攀升
- YTU 2451: 股市风云
- 苹果AR/VR设备或定价2000美元 或命名Apple Vision
- 2022年上半年,产品经理的55条心得总结!
- 度度熊与邪恶大魔王 百度之星
热门文章
- Java8 stream filter map
- WPF入门(四)-线形区域Path内容填充之填充图(ImageBrush)
- Jzoj4845 寻找
- Laravel 实践之路: 数据库迁移与数据填充
- 为备考二级C语言做的代码练习---辅导资料《C语言经典编程282例》--(1)
- wpf 客户端【JDAgent桌面助手】开发详解(四) popup控件的win8.0的bug
- 开发ProxyServer的时候如何在一台PC上调试
- 第15章-输入/输出 --- 理解Java的IO流
- Transport (VMDB) error -44: Message
- 可以让你玩儿光剑的程序,vc实现方法和代码