dev static

JS & CSS

JS组件化

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

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

只有 widget 目录下的资源进行了组件化封装，可以在 js 中通过 require 和 require.async 调用。其他目录下的资源除非进行了组件化的封装，不然是无法用这两个函数进行调用的。

mod.js 前端组件化框架

mod.js 是一套的前端模块加载解决方案。与传统的模块加载相比，ModJS会根据产品实际使用场景，自动选择一种相应的方案，使最终的实现非常轻量简洁。

作为 FIS-PLUS 前端组件化框架，mod.js 和 AMD (require.js) 或者 CMD (seajs) 等都是互斥的，无法同时在同一个项目中使用。

我们可以到 https://github.com/fex-team/mod 下载最新版本的 mod.js

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

组件化封装

modjs使用 define 来定义一个模块（类似 nodeJS 中的 module）：

/**
 * @param {String} id 唯一标识
 * @param {Function} factory  factory提供了3个参数，require, exports, module ，用于模块的引用和导出。
 */
 
define (id, factory)

• Example

  define('module/id', function (require, exports, module) {
      exports.run = function() {
          //....
      };
  });

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

在编译处理过程中会对 widget JS文件进行组件化 define 封装，如；

如果不是 widget 目录下的资源也想让工具自动封装，请查询文档 roadmap.path isMod 属性。

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

• 自动封装的 ID

  自动封装的 ID 是根据源码路径计算的，id = <namespace>:<file.subpath>

  // namespace = 'common'
  
  proj/widget/a.js
  // id = 'common:widget/a.js'
  
  proj/widget/foo/foo.js
  // id = 'common:widget/foo/foo.js'
  

组件化调用

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

require (id)

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

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

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

require.async (names, callback)

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

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

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

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

• 了解更多 mod.js

其他JS

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

模板组件静态资源

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

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

CSS组件化

在前端开发中，CSS资源占了很大一部分比例，在FIS中，我们将CSS资源分为组件和非组件类。CSS组件会绑定到同名JS组件、模板组件上，进行加载管理，用户不需要关心加载方式；非组件类CSS资源通过link标签、require插件方式进行加载。

在 模块根目录/widget 目录下的CSS资源，皆为组件。在模板组件中以及JS组件中对应同名的CSS组件会自动与模板组件、JS组件添加依赖关系，进行加载管理，用户不需要显示进行调用加载。

其他CSS

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

模板组件静态资源

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

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

Less资源

在FIS中默认配置了对less资源处理插件，less文件编译处理后变为css文件。