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