API文档
引入Nui.js后,Nui会被注册为一个全局对象,下面介绍一下对象的属性和方法:
load
加载入口模块
# 参数
参数名 |
参数类型 |
参数说明 |
id |
String |
模块id,后缀.js可以省略 |
callback |
Function |
模块加在完毕后(包括内部依赖)回调函数,该函数接收一个参数为模块返回值的引用 |
# 说明
当配合打包工具使用时,会在入口模块目录生成后缀为-min.js压缩文件;如果模块中使用imports加载了样式文件,会在入口模块目录同级style目录(不存在就创建)中生成-min.css压缩文件。
use
加载模块
# 参数
参数名 |
参数类型 |
参数说明 |
id |
String |
模块id,后缀.js可以省略 |
callback |
Function |
模块加在完毕后(包括内部依赖)回调函数,该函数接收一个参数为模块返回值的引用 |
# 说明
该方法功能和Nui.load相同,只不过在配合打包工具时不会生成合并压缩文件。
config
配置模块和目录别名,以及模块版本映射
# 参数
参数名 |
参数类型 |
参数说明 |
base |
String |
设置根目录,设置后将覆盖paths中的base |
paths |
Object |
设置目录别名,其中base用于设置根目录 |
alias |
Object |
设置模块别名,路径中可以通过“{目录别名}”简写路径 |
min |
Boolean |
默认为true,是否默认加载-min.js文件 |
maps |
Object |
设置版本映射,加载模块时会优先使用该配置中的版本号 |
skin |
String |
设置组件皮肤 |
# 栗子
Nui . config ( { |
paths : { |
base : 'http: |
url : '/portal/common/' |
} , |
maps : { |
'{url}/page' : '123456' |
} |
} ) |
|
Nui . load ( '{url}/page' , function ( page ) { |
|
} ) |
js
define
定义模块
Nui . define ( id ? , deps ? , fectory ) |
js
# 参数
参数名 |
参数类型 |
参数说明 |
id |
String |
模块id,一般不需要设置该值,在合并压缩后,会自动添加上 |
deps |
Array |
依赖模块 |
fectory |
任意类型 |
用于编写业务逻辑和返回接口 |
# 说明
一个模块就是一个js文件,一个js文件中只能使用一次Nui.define
当fectory为非函数时直接当作接口返回
|
Nui . define ( ['yinjiazeng' , 'liumengmei' ] ) |
|
|
Nui . define ( 'hello world!' ) |
|
|
Nui . define ( ['./a' , './b' ] , function ( a , b ) { |
console . log ( a[0 ] ) |
console . log ( b ) |
} ) |
js
|
Nui . define ( function ( ) { |
var init = function ( ) { |
console . log ( 'aaa' ) |
} |
|
return init |
} ) |
|
|
Nui . define ( function ( ) { |
var init = function ( ) { |
console . log ( 'bbb' ) |
} |
|
this . exports = init |
} ) |
|
|
Nui . define ( function ( ) { |
var init = function ( ) { |
console . log ( 'ccc' ) |
} |
|
this . exports = init |
|
return function ( ) { |
console . log ( 'hello world' ) |
} |
} ) |
|
|
Nui . define ( ['./a' , './b' , './c' ] , function ( a , b , c ) { |
a ( ) |
b ( ) |
c ( ) |
} ) |
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页面多一个按钮点击事件,其它功能都完全一样
|
Nui . define ( function ( ) { |
return { |
init : function ( ) { |
$ ( '#a' ) . click ( function ( ) { |
alert ( 'aaa' ) |
} ) |
} |
} |
} ) |
|
|
Nui . define ( function ( ) { |
return this . extend ( './a' , { |
event : function ( ) { |
$ ( '#b' ) . click ( function ( ) { |
alert ( 'bbb' ) |
} ) |
} |
} , [ |
method : 'init' , |
content : 'this.event()' |
] ) |
} ) |
|
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
过滤字符串两端空格
# 参数
参数名 |
参数类型 |
参数说明 |
string |
String |
被过滤的字符串 |
trimLeft
过滤字符串左侧空格
# 参数
参数名 |
参数类型 |
参数说明 |
string |
String |
被过滤的字符串 |
trimRight
过滤字符串右侧空格
# 参数
参数名 |
参数类型 |
参数说明 |
string |
String |
被过滤的字符串 |
type
判断对象数据类型
# 参数
参数名 |
参数类型 |
参数说明 |
object |
任意类型 |
被判断的变量 |
type |
String, Array |
小写类型字符串,当为数组时,匹配是否满足数组中任意一种类型 |
unique
去重
Nui . unique ( [1 , 2 , 1 , 3 ] ) |
Nui . unique ( [1 , 2 , 1 , 3 ] , true ) |
js
extend
扩展
noop
空函数
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)引用
# 说明
为了减小$(window)被重新包装的开销
doc
返回jQuery(document)引用
# 说明
为了减小$(document)被重新包装的开销