FIS使用技巧
一、单模块文件-自执行()
1、每个文件必须要以模块的形式定义,模块标识与文件所在目录一定要对应。如:以下为/static/js目录,文件名为fn.js,模块名称为/static/js/fn.js
F.module("/static/js/fn.js", function (e, c) { (function () { alert('hello'); })() }, []);
2、调用标识与模块标识一定要对应,如果浆文件不在同一文件时,加载资源文件的同时调用模块标识。
F.use('/static/js/fn.js');
F.module("mo", function (r, e) { var T = { H: 'Hello' }; return T;//模块返回T对象 }, []); F.use("mo", function (X) { alert(X.H); }, []);
官方定义--------
F.module:
使用F.module来定义模块:
F.module(name, function(require, exports){//bla bla },deps);
name:当前模块的唯一标识,为模块所在文件的访问路径。
fn:模块的main函数。
require:模块函数第一个参数名称为require, 用来访问其他模块提供的 API。
exports:exports 用来向外提供模块的 API. (1、向外提供接口,2、返回一个对象)
deps:deps是一个数组,表示当前模块的依赖列表
二、多模块文件
1、一个文件下面声明多个模块,这里要配置文件F_File。
Test.js文件下的模块为:
F.module("/static/js/Test1.js", function (require, exports) { document.write("in Test3.js"); var T = {H:'Hello'}; exports.T3 = T; //向外暴露 }, []); F.module("/static/js/Test2.js", function (require, exports) { document.write("in Test4.js"); var T = {}; exports.T4 = T; //向外暴露 }, []);
2、配置代理文件,在html页加上这样的语句
F._fileMap({ '/static/js/Test.js': ['/static/js/Test1.js', '/static/js/Test2.js'] });
F._fileMap的格式为:F._fileMap({'文件路径',['模块名称1','模块名称2','模块名称n']});
3、方法调用
F.use("/static/js/Test1.js", function (X) { alert(X.T3.H);//Hello });
F.use格式为:F.use("模块名称",function(o){});
F.module("mo", function (r, e) { var fn = function (msg) { alert(msg) }; var T = { H: 'Hello' }; e.O = T; e.Fn = fn; }, []); F.use("mo", function (X) { alert(X.O.H); X.Fn('world'); }, []);
三、FIS与jquery模块结合
需要修改代码 F.module("jquery", function(require, exports){ (function(){ //jquery code })(exports); },[]);
实例:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>fis-jquery</title> <script src="/static/js/base_fis.js" type="text/javascript"></script> <script type="text/javascript"> F._fileMap({ '/static/js/fis.jquery-1.9.0.min.js': ['jquery'] }); </script> </head> <body> <script type="text/javascript"> F.use("jquery", function (X) { $(function(){ alert($("#txt").val()); //Hello Text }) }); </script> <input id="txt" type="text" value="Hello Text" /> </body> </html>
三、FIS与独立的jquery结合-jquery代码不需要做任何修改
实例:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>fis-jquery</title> <script src="/static/js/fis.js" type="text/javascript"></script> <script src="/static/js/jquery-1.9.0.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> F.module("mo", function (r, e) { var T; (function () { T = { obj: $("#txt").val() }; })(); return T; }, []); </script> <input id="txt" value="Hello world" type="text" /> <script type="text/javascript"> F.use("mo", function (X) { alert(X.obj); }, []); </script> </body> </html>
返加多个对象(对象直接量),以下为技巧开发,并不是示例
F.module("/static/ns.js", function (b, a) { var c = (function (h, i) { var e = function (m) { }; var g = function (j) { e(j) }; return { o1: f, o2: g } })(jQuery); a = c; return a }, []); $(function () { F.use('/static/ns.js', function (ns) { ns.o1(); ns.o2(); }); });
"唯有高屋建瓴,方可水到渠成"