JAVA高级面试进阶训练营视频教程

admin

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'));
});