WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
模块规范

wui 的模块是基于 wui.js 内部实现的异步模块加载方式,它并不遵循于AMD(没有为什么,毕竟任性呀!),而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后,成为 wui 最核心的模块加载引擎。

开门见山,还是直接说使用比较妥当。wui的模块加载采用核心的 wui.use(mods, callback)方法,当你的JS需要用到wui模块的时候,我们更推荐你采用预先加载,因为这样可以避免到处写wui.use的麻烦。你应该在最外层如此定义:

/*
  Demo.js
  使用 wui 的 form 和 upload 模块
*/
wui.use(['form', 'upload'], function(){  //如果只加载一个模块,可以不填数组。如:wui.use('form')
  var form = wui.form //获取form模块
  ,upload = wui.upload; //获取upload模块
  
  //监听提交按钮
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});

如果你有强迫症,你对网站的性能有极致的要求,你并不想预先加载所需要的模块,而是在触发一个动作的时候,才去加载模块,那么,这是允许的。你不用在你的JS最外层去包裹一个大大的 wui.use,你只需要:

/*
  Demo.js
  按需加载一个wui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个wui模块
button.addEventListener('click', function(){
  wui.use('wtpl', function(wtpl){ //温馨提示:多次调用use并不会重复加载wtpl.js,wui内部有做模块cache处理。
    var html = wtpl('').render({});
    console.log(html);
  });
});

注意:如果你的 JS 中需要大量用到模块,我们并不推荐你采用这种加载方式,因为这意味着你要写很多 wui.use(),代码可维护性不高。建议还是采用:预先加载。即一个JS文件中,写一个use即可。

wui 的模块接口会绑定在 wui 对象下,内部由 wui.define() 方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete wui.{模块名}。调用模块可通过 wui.use 方法来实现,然后再通过 wui 对象获得模块接口。如:

wui.use(['layer', 'wpage', 'wdate'], function(){
  var layer = wui.layer //获得layer模块
  ,wpage = wui.wpage //获得wpage模块
  ,wdate = wui.wdate; //获得wdate模块

  //使用模块
});

我们推荐你将所有的业务代码都写在一个大的 use 回调中,而不是将模块接口暴露给全局,比如下面的方式我们是极不推荐的:

//强烈不推荐下面的做法
var wpage, wdate;
wui.use(['wpage', 'wdate'], function(){
  wpage = wui.wpage;
  wdate = wui.wdate;
});

你之所以想使用上面的错误方式,是想其它地方使用不在执行一次 wui.use?但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行,你的全局对象将获取不到模块接口,因此这样用不仅不符合规范,还存在报错风险。建议在你的 js 文件中,在最外层写一个 wui.use 来加载所依赖的模块,并将业务代码写在回调中,见:预先加载

wui 官方提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识wui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个wui模块吧:

第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入wui目录)

第二步:编写test.js 如下:

/**
  扩展一个test模块
**/

wui.define(function(exports){ //提示:模块也可以依赖其它模块,如:wui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };

  //输出test接口
  exports('mymod', obj);
});

第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了

//config的设置是全局的
wui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});

//你也可以忽略 base 设定的根目录,直接在 extend 指定路径
wui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
})

//使用拓展模块
wui.use(['mymod', 'mod1'], function(){
  var mymod = wui.mymod
  ,mod1 = wui.mod1
  ,mod2 = wui.mod2;

  mymod.hello('World!'); //弹出 Hello World!
});

大体上来说,wui 的模块定义很类似 Require.js 和 Sea.js,但跟他们又有着明显的不同,譬如在接口输出等地方。

其实关于模块的核心,就是 wui.js 的两个底层方法:一个用于定义模块的 wui.define(),一个加载模块的 wui.use()。

© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile