js

在前端开发中，JS资源占了很大一部分比例，在FIS-PC中，我们将JS资源分为组件和非组件类。组件类JS资源可以通过前端组件化框架进行资源加载，同时会进行组件化包装。非组件类JS资源，用户可以通过同步script标签加载方式或通过require插件方式加载。

##widget

在 模块根目录/widget/ 下的JS资源皆为组件化资源，可以通过require和require.async进行调用，则在编译处理过程中会进行组件化封装。

###前端组件化框架

modjs是FIS-PC解决方案中的前端组件化框架，完全遵循AMD规范，主要用于模块管理和加载。用户可以通过install命令进行安装

fis-pc install modjs

同时在开发中需要使用modjs,则需要通过模板插件语法html进行注册。

###组件化封装

modjs使用define来定义一个模块：

define (id, factory)

在平常开发中，我们只需写factory中的代码即可，无需手动定义模块。发布工具会自动将模块代码嵌入factory的闭包里。

factory提供了3个参数：require, exports, module ，用于模块的引用和导出。

在编译处理过程中会对JS文件进行组件化define包装处理:

• JS源码：

//common/widget/menu/menu.js
var $ = require('common:widget/jquery/jquery.js');

exports.init = function() {
    $('.menu-ui ul li a').click(function(event) {
        var self = this;
        $('.menu-ui ul li a.active').removeClass('active');
        $(self).addClass('active');
        event.preventDefault();
    });
};

• 编译后代码：

define('common:widget/menu/menu.js', function(require, exports, module){
    var $ = require('common:widget/jquery/jquery.js');
    exports.init = function() {
        $('.menu-ui ul li a').click(function(event) {
            var self = this;
            $('.menu-ui ul li a.active').removeClass('active');
            $(self).addClass('active');
            event.preventDefault();
        });
    };
});

###组件化调用

• modJS的发布工具会保证你的程序在使用之前，所有依赖的模块都已加载。因此当我们需要一个模块时，只需提供一个模块名即可获取：

require (id)

//id可为相对路径，或FIS-PC中组件调用路径 模块名:文件所在widget中路径
require("common:widget/ui/a/a.js")

因为所需的模块都已预先加载，因此require可以立即返回该模块。

• 考虑到有些模块无需在启动时载入，因此modJS提供了可以在运行时异步加载模块的接口：

require.async (names, callback)

names可以是一个id，或者是数组形式的id列表。

当所有都加载都完成时，callback被调用，names对应的模块实例将依次传入。

使用require.async获取的模块不会被发布工具安排在预加载中，因此在完成回调之前require将会抛出模块未定义错误。

//id可为相对路径，或FIS-PC中组件调用路径 模块名:文件所在widget中路径
require.async(["common:widget/menu/menu.js"],function(menu){
      menu.init()
})

##其他

在非widget目录下的JS资源，皆为非组件化资源。用户可以通过script标签、require插件等方式进行调用.

###页面模板静态资源

对应页面模板的同名静态资源，FIS-PC会在页面自动进行加载，用户不需要在页面中声明加载。

tpl ：模板根目录/page/页面名.tpl
js ：模板根目录/static/页面名/页面名.js
css ：模板根目录/static/页面名/页面名.css

###模板组件静态资源

与模板组件同名的静态资源，FIS-PC会自动添加依赖关系，同时会对JS、CSS进行同步加载。

tpl ：模板根目录/widget/widgetName/页面名widgetName.tpl
js ：模板根目录/widget/widgetName/widgetName.js
css ：模板根目录/widget/widgetName/widgetName.css

##语言能力

FIS-PC前端开发提供三种语言能力，针对JS开发就可以变得非常易用，代码可维护性瞬间提高很多：

• 在js中定位资源
• 在js中嵌入资源
• 在js中声明依赖