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

posted @ 2013-04-01 15:27 microsoftzhcn 阅读(584) 评论(0) 收藏举报

刷新页面返回顶部

sntetwt

FIS使用技巧

公告