轻量级、稳定、可配置 HTML5 框架。
Mob 不依赖任何第三方框架,可以按照 AMD 和 CommonJS 模块化方式引入。当然你也可以通过直接引用下面链接的方式引入:
<script src="https://raw.githubusercontent.com/XScripter/Mob/master/build/js/mob.min.js"></script>定义模块。
Mob.Module.define('mo/forTest1', function(require, exports, module) {
// 可以使用 exports ,导出单个方法
exports.add = function(a, b) {
return a + b;
};
});
Mob.Module.define('mo/forTest2', function(require, exports, module) {
var helpers = {};
helpers.sayHi = function() {
return 'hi';
};
// 可以使用 module.exports ,导出对象
module.exports = helpers;
});
引入模块。
在模块外引入某个模块。
// 在模块外引入
Mob.Module.define('mo/here', function(require, exports, module) {
exports.print = function() {
return '-';
};
});
var here = Mob.Module.require('mo/here');
here.print();
在某个模块内部引入其他已定义的模块。
Mob.Module.define('mo/forTest2', function(require, exports, module) {
// 直接通过 require 引入
var here = require('mo/here');
var helpers = {};
helpers.doublePrint = function() {
return here.print() + here.print();
};
module.exports = helpers;
});
删除模块。
Mob.Module.remove('mo/forTest2');
查询模块
var moduleMap = Mob.Module.map();
使用默认方式(将日志打印到控制台)打印日志。
// 日志信息会关联到 window.console
Mob.Logger.useDefaults();
// 同样可以配置
Mob.Logger.useDefaults({
logLevel: Logger.WARN,
formatter: function (messages, context) {
messages.unshift('[Application]');
if (context.name) {
messages.unshift('[' + context.name + ']');
}
}
});
打印 log 信息。
Mob.log('第一个 log 信息'); // 等价于 Mob.Logger.log
Mob.Logger.log('第一个 log 信息');
打印调试信息。
Mob.debug('第一个 debug 信息'); // 等价于 Mob.Logger.debug
Mob.Logger.debug('第一个 debug 信息');
打印提示信息。
Mob.info('第一个 info 信息'); // 等价于 Mob.Logger.info
Mob.Logger.info('第一个 info 信息');
打印警告信息。
Mob.warn('第一个 warn 信息'); // 等价于 Mob.Logger.warn
Mob.Logger.warn('第一个 warn 信息');
打印错误信息。
Mob.error('第一个 error 信息'); // 等价于 Mob.Logger.error
Mob.Logger.error('第一个 error 信息');
当需要统计一段代码的执行时间时,可以使用 Mob.time
方法与 Mob.timeEnd
方法,其中 Mob.time
方法用于标记开始时间, Mob.timeEnd
方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。
Mob.time('登录系统'); // 等价于 Mob.Logger.time
Mob.Logger.time('退出系统');
Mob.timeEnd('登录系统'); // 等价于 Mob.Logger.timeEnd
Mob.Logger.timeEnd('退出系统');
// 登录系统: 5420.593ms
// 退出系统: 5620.593ms
设置日志打印级别,分为DEBUG
INFO
TIME
WARN
ERROR
OFF
。
// 不打印任何日志信息
Mob.Logger.setLevel(Mob.Logger.OFF);
Mob.Logger
提供了 Named Loggers
用于为不同模块设置相应的配置。
// 为 ModuleA 实例化一个日志打印对象 moduleALogger
var moduleALogger = Mob.Logger.get('ModuleA');
moduleALogger.info('FizzWozz starting up');
// 单独为 moduleALogger 设置日志打印级别,不影响其它日志打印对象
moduleALogger.setLevel(Mob.Logger.WARN);
// 同样也可以直接使用下面方式打印日志
Mob.Logger.get('ModuleA').warn('打印警告日志');
需要注意的是 Mob.Logger.setLevel()
同样也会作用于所有 Named Logger
实例,所以一般你可以使用下面的方式配置日志打印级别:
var loggerA = Mob.Logger.get('LoggerA');
var loggerB = Mob.Logger.get('LoggerB');
Mob.Logger.setLevel(Mob.Logger.WARN);
Mob.Logger.get('LoggerB').setLevel(Mob.Logger.DEBUG);
自定义日志信息处理方式。
Mob.Logger.setHandler(function (messages, context) {
// 发送自定义日志信息到服务端,用于分析
Mob.HTTP.post('/logs', {
message: messages[0],
evel: context.level
});
});
给模板添加帮助函数,可以直接在 <% … %> 调用帮助函数。
Mob.Template.registerHelpers({
add: function(a, b) {
return a + b;
},
subview: function(subviewName) {
return "<div data-subview='" + subviewName + "'></div>";
}
});
var s = '<%=add(a, b)%>';
var data = {
a: 1,
b: 4
};
Mob.Template.compile(s)(data); // 5
var s1 = '<%=subview("test")%>';
Mob.Template.compile(s1)(); // <div data-subview=\'test\'></div>
模板函数可以使用 <%= … %> 插入变量, 也可以用 <% … %> 执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候,可以传递一个含有与模板对应属性的 data 对象。
var compiled = Mob.Template.compile('hello: <%= name %>');
compiled({name: 'moe'}); // "hello: moe"
var compiled1 = Mob.Template.compile('<b><%- value %></b>');
compiled1({value: 'script'}); //"<b>script</b>"
同样也可以在 JavaScript 代码中使用 print . 有时候这会比使用 <%= ... %> 更方便。
var compiled = Mob.Template.compile('<% print("Hello " + epithet); %>');
compiled({epithet: 'stooge'});
=> "Hello stooge"
更改模板设置。
Mob.Template.config({
interpolate: /\{\{(.+?)\}\}/g
});
var compiled = Mob.Template.compile('Hello {{ name }}!');
compiled({name: 'Mustache'}); // "Hello Mustache!"