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前端集成解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。