API文档

引入Nui.js后,Nui会被注册为一个全局对象,下面介绍一下对象的属性和方法:

load

加载入口模块

Nui.load(id, callback?)
js

# 参数

参数名 参数类型 参数说明
id String 模块id,后缀.js可以省略
callback Function 模块加在完毕后(包括内部依赖)回调函数,该函数接收一个参数为模块返回值的引用

# 说明

当配合打包工具使用时,会在入口模块目录生成后缀为-min.js压缩文件;如果模块中使用imports加载了样式文件,会在入口模块目录同级style目录(不存在就创建)中生成-min.css压缩文件。

use

加载模块

Nui.use(id, callback?)
js

# 参数

参数名 参数类型 参数说明
id String 模块id,后缀.js可以省略
callback Function 模块加在完毕后(包括内部依赖)回调函数,该函数接收一个参数为模块返回值的引用

# 说明

该方法功能和Nui.load相同,只不过在配合打包工具时不会生成合并压缩文件。

config

配置模块和目录别名,以及模块版本映射

Nui.config(obj)
js

# 参数

参数名 参数类型 参数说明
base String 设置根目录,设置后将覆盖paths中的base
paths Object 设置目录别名,其中base用于设置根目录
alias Object 设置模块别名,路径中可以通过“{目录别名}”简写路径
min Boolean 默认为true,是否默认加载-min.js文件
maps Object 设置版本映射,加载模块时会优先使用该配置中的版本号
skin String 设置组件皮肤

# 栗子

Nui.config({
paths:{
base:'http://rs.axnfw.com/'
url:'/portal/common/'
},
maps:{
'{url}/page':'123456'
}
})
Nui.load('{url}/page', function(page){
//实际请求地址为:http://rs.axnfw.com/portal/common/page-min.js?v=123456
})
js

define

定义模块

Nui.define(id?, deps?, fectory)
js

# 参数

参数名 参数类型 参数说明
id String 模块id,一般不需要设置该值,在合并压缩后,会自动添加上
deps Array 依赖模块
fectory 任意类型 用于编写业务逻辑和返回接口

# 说明

一个模块就是一个js文件,一个js文件中只能使用一次Nui.define

当fectory为非函数时直接当作接口返回

//a.js
Nui.define(['yinjiazeng', 'liumengmei'])
//b.js
Nui.define('hello world!')
//c.js
Nui.define(['./a', './b'], function(a, b){
console.log(a[0]) //yinjiazeng
console.log(b) //hello world!
})
js

fectory内部提供一个属性 exports 以及四个方法 require / imports / renders / extend通过this访问,在使用时变量名不可变。

//a.js
Nui.define( function(){
var init = function(){
console.log('aaa')
}
return init
})
//b.js
Nui.define( function(){
var init = function(){
console.log('bbb')
}
this.exports = init
})
//c.js
Nui.define( function(){
var init = function(){
console.log('ccc')
}
this.exports = init
return function(){
console.log('hello world')
}
})
//d.js
Nui.define(['./a', './b', './c'], function(a, b, c){
a() //aaa
b() //bbb
c() //hello world
})
js

exports

导出接口,也可直接使用return导出接口,return会覆盖exports。

Nui.define(function(){
this.exports.a = function(){
}
this.exports.b = function(){
}
//...
return {
a:function(){
},
b:....
}
})
js

require

导入js模块

Nui.define(function(){
var mod = this.require(id)
})
js

# 参数

参数名 参数类型 参数说明
id String 模块id,文件后缀.js可省略
all Boolean 是否返回模块全部数据

imports

导入css/less模块

Nui.define(function(){
this.imports(id)
})
js

# 参数

参数名 参数类型 参数说明
id String 模块id,文件后缀.css可省略

renders

可以直接在js中写html模版,不需要做字符串拼接处理

Nui.define(function(){
this.renders({template})
})
js

# 参数

参数名 参数类型 参数说明
tpl String html模版字符串

# 说明

该方法需要配合打包工具使用,会自动转换为字符串拼接方式

访问外部变量时,格式必须为\'+ 变量名 +\'

Nui.define(function(){
var data = 'haha';
var tpl = this.renders({
<div>
<p>hello world</p>
<p>\' + data + \'</p>
</div>
})
})
转换后
Nui.define(function(){
var data = 'haha';
var tpl = this.renders(
'<div>'+
'<p>hello world</p>'+
'<p>' + data + '</p>'+
'</div>'
)
})
js

extend

模块继承

Nui.define(function(){
this.extend(module, members?, inserts?)
})
js

# 参数

参数名 参数类型 参数说明
module String 被继承模块id
Object 被继承模块引用
members 任意类型 对继承模块新增或修改成员
inserts Boolean 当module为数组时,是否将members插入到module末尾
Array 在继承模块方法末尾插入代码块,[{method:'方法名', 'content':'代码块'}, ...]

# 栗子

有2个页面a和b,b页面比a页面多一个按钮点击事件,其它功能都完全一样

//a.js
Nui.define(function(){
return {
init:function(){
$('#a').click(function(){
alert('aaa')
})
}
}
})
//b.js
Nui.define(function(){
return this.extend('./a', {
event:function(){
$('#b').click(function(){
alert('bbb')
})
}
}, [
method:'init',
content:'this.event()'
])
})
//b.js的代码实际上被转换为:
Nui.define(function(){
return {
init:function(){
$('#a').click(function(){
alert('aaa')
})
this.event()
},
event:function(){
$('#b').click(function(){
alert('bbb')
})
}
}
})
js

each

遍历数组或者对象

Nui.each(object, callback)
js

# 参数

参数名 参数类型 参数说明
object Array, Object 被遍历的对象
callback Function 遍历回调函数,接收2个参数,第一个为value,第二个为key;若回调函数return false,则跳出循环

trim

过滤字符串两端空格

Nui.trim(string)
js

# 参数

参数名 参数类型 参数说明
string String 被过滤的字符串

trimLeft

过滤字符串左侧空格

Nui.trimLeft(string)
js

# 参数

参数名 参数类型 参数说明
string String 被过滤的字符串

trimRight

过滤字符串右侧空格

Nui.trimRight(string)
js

# 参数

参数名 参数类型 参数说明
string String 被过滤的字符串

type

判断对象数据类型

Nui.type(object, type)
js

# 参数

参数名 参数类型 参数说明
object 任意类型 被判断的变量
type String, Array 小写类型字符串,当为数组时,匹配是否满足数组中任意一种类型

unique

去重

Nui.unique([1,2,1,3]) //1,2,3
Nui.unique([1,2,1,3], true) //3,2,1
js

extend

扩展

Nui.extend({a:1}, {b:1}) //{a:1,b:2}
js

noop

空函数

Nui.noop //fucntion(){}
js

browser

检测浏览器内核以及版本号

Nui.browser.version
Nui.browser.msie
Nui.browser.webkit
Nui.browser.safari
Nui.browser.mozilla
js

# 说明

jQuery1.9+移除了$.browser

bsie

检测是否是IE6/7

Nui.browser.bsie6
Nui.browser.bsie7
js

win

返回jQuery(window)引用

Nui.win
js

# 说明

为了减小$(window)被重新包装的开销

doc

返回jQuery(document)引用

Nui.doc
js

# 说明

为了减小$(document)被重新包装的开销