JS 模块

主题结构

Admui 具有高度模块化的 JavaScript。

/src/themes/(主题名)/(布局名)/js/
    └── site.js (布局模块&初始化函数)

/src/themes/(主题名)/global/js/
    ├── components/ (源文件)
    ├── configs/ (基本配置信息)
    ├── plugins/ (插件)
    └── components.js (组件，通过components文件夹组合而成)

网站初始化

使用 $.site 对象来设置主题功能；如：菜单栏，栅格菜单，工具条，工具提示和组件等。

在 /src/themes/(主题名)/(布局名)/js/site.js 文件中我们对网站进行了初始化操作，您不需要再重新进行初始化操作。在该文件中也提供了 $.app 对象，设置一些公用的方法，以便在各个页面中调用。

全局配置

使用$.configs 对象可以配置一些常用变量在其他地方使用。

$.configs.set(name, options)配置变量，代码如下：

$.configs.set('site', {
    fontFamily: "Noto Sans, sans-serif",
    ...
});

$.configs.get(name[, options.name]) 获取变量，代码如下：

var fontFamily = $.configs.get('site', 'fontFamily');
console.info(fontFamily); // 输出：'Noto Sans, sans-serif'

$.configs.extend(name[, options]) 扩展变量对象，代码如下：

var font = $.configs.extend('site',{
    fontSize: '18px',
    color: '#f60',
    ...
});

我们也在 global/configs/site-configs.js 文件中通过 $.configs.colors = {"red": {"100": "#ffeaea"}} 配置了一些颜色信息，可以通过 $.color(name[,level]) 方法使用。如下：

var color = $.color('red', 100);
console.info(color); // 输出：'#ffeaea'

组件注册

使用$.components 对象可以进行组件注册，您可以合理的组织您使用到的第三方插件。

注册

用法： $.components.register(name, {object})

$.components.register(name, {
    mode: 'init',
    defauts:{},
    init: function(){
        // doSomething();
    },
    api: function(){
        // doSomethsing();
    }
});

参数：

name 组件名称

{object} 参数

• mode: 组件注册的模式。有以下三种：
  • default: 使用在 global/js/core.js 中定义的默认初始化函数。
  • api: 在 document 中新加入元素时，不需要重新初始化的组件方法定义为 api 方法。
  • init: 在 document 中新加入元素时，需要重新初始化的组件方法定义为 init 方法。
• defaults: 组件需要的参数。
• init | api: 组件的初始化方法。

raty 组件 注册示例：

• 您需要在/src/themes/global/components/中增加该组件。并且，在/build/configuration/config.json中的components对象中添加属性，便于gulp构建。如下：

"components": {
    "raty": true
}

如果您是build后用于生产环境的版本可直接加入到/public/themes/global/components/中和/public/themes/global/compontents.js中。

$.components.register("rating", {
    mode: "init",
    defaults: {
        targetKeep: true,
        icon: "font",
        starType: "i",
        starOff: "icon wb-star",
        starOn: "icon wb-star orange-600",
        cancelOff: "icon wb-minus-circle",
        cancelOn: "icon wb-minus-circle orange-600",
        starHalf: "icon wb-star-half orange-500",
        cancelHint: '取消评分',
        hints: ['很差', '差', '一般', '好', '非常好']
    },
    init: function (context) {
        if (!$.fn.raty) return;

        var defaults = this.defaults;

        $('[data-plugin="rating"]', context).each(function () {
            var $this = $(this),
                options = $.extend(true, {}, defaults, $this.data());

            if (options.hints) options.hints = options.hints.split(',');

            $this.raty(options);
        });
    }
});

调用方式

Data API方式 data-plugin="{plugin name}"

同BootStrap的Data API语法一样，在元素上添加 data-plugin="{plugin name}" 和 [data-{options}] ，组件就会被初始化。

如下（页面加载完成后，评分插件就可以正常运行了。）：

// 引用插件相关文件
<link rel="stylesheet" href="assets/vendor/raty/jquery.raty.css">
<script src="assets/vendor/raty/jquery.raty.js"></script>

// 引用组件注册文件
<script src="assets/js/components/raty.js"></script>

// 使用组件的DOM节点
<div class="rating" data-score="4" data-plugin="rating"></div>

手动调用 $.components.init(ref[,name][,context])

• 参数：

ref (Boolean): 如果是 true ，则初始化 init && api 方法；如果是 false ，只会运行 init 方法。
name: 组件名称。
context: 作为待查找的 DOM 元素集、文档或 jQuery 对象。

• 用法：

$.components.init('rating');

我们也可以通过上下文指定该组件的第二个参数。当我们通过ajax加载DOM这将会非常有用：

$.components.init('rating', '#admui-pageContent');

• 详细：

在document 中新加入元素时，使用手动调用方式。

• 注意：

如果您需要在整个项目中使用手动调用方式，则需要删除 (layout)/js/site.js 中关于 $.components 的调用。

默认配置

我们在组件注册时定义了配置选项对象，您可以根据具体的使用情况修改它。当您不使用我们的组件方案，又希望使用我们定义的配置选项时，可以通过如下方法获取配置：

var defaults = $.components.getDefaults('{compontentName}');

如果您也需要加入自己的配置项，可以使用 $.po(name[,object]) 方法：

var defaults = $.po('{componentName}', {
    name: 'Admui',
    ...
})

如果您不需要我们的组件的解决方案，您也可以将其删除。