Template mb-kao

1,001 views
950 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,001
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Template mb-kao

  1. 1. 三个简单的⼯工具
  2. 2. 框架
  3. 3.
  4. 4. ⼯工具
  5. 5. 或者。。。 ⼯工具
  6. 6. Template.js another template https://github.com/xwcoder/template
  7. 7. 基于John Resig的 micro-templating •去掉⾃自动缓存 •指令<%@ h:{helpername} %> •辅助函数注册
  8. 8. • 语法 : 类jsp语法 • <% logic %> • <%= 输出 %>
  9. 9. • 主要API: • var render = new Template( ‘<% .. %>’ ) • render.compile() : 编译 • render.render( <Object>data ) : 使⽤用数据⽣生成html
  10. 10. • 增强功能 • render.registHelper() • Template.registHelper() : 全局辅助函数
  11. 11. • 内置辅助函数 <%@ h:helper %> • helper.trim() • helper.timeFormt( t,‘mm:ss’ ) • helper.dateFormat( d, ‘yy-mm-dd’ ) • helper.truncate/truncateCN : 字符串截取 • helper.numberGroup( s, n, splitChar ) 分隔字符串 • helper.numberGroup(‘1234567’, 3,‘,’ ) //1,234,567 • helper.escapeXSS( s ) XSS处理
  12. 12. ⼀一个简单的消息总线 sub/pub 模式 mb.js https://github.com/xwcoder/messagebus
  13. 13. “ Countless stand-alone PubSub libraries exist for the browser. ”
  14. 14. mb(mb.js), it’s another one
  15. 15. • 主要API • var mb = new Message() 构造函数 • var sid = mb.subscribe(topic, handler, scope, data, config) • mb.unsubscribe( sid ) 取消某次订阅 • mb.publish(topic, msg) 在某个主题发布消息 • mb.wait(topics, handler, scope, data, config)。等待多个消息都到达才执 ⾏行handler
  16. 16. • var sid = mb.subscribe(topic, handler, scope, data, config) • sid : 订阅标识,⽤用于unsubscribe • topic <string> : core.login • handler <function> : 回调函数 • scope <object || null || undefined > : handler执⾏行时的作⽤用域,默认this • data <any> 传递数据给handler • config <object> • cache 是否⽀支持后订阅, 默认false。为true时可以收到已经发布 的消息 • execTime : 收到消息次数
  17. 17. • mb.wait(topics, handler, scope, data, config) • topics <[string]> 主题数组 • config • 不⽀支持execTime
  18. 18. • 订阅 topics • '.'作为分隔符的字符串,⽀支持*和'**'作为通配符 • *通配⼀一级且仅通配⼀一级⺫⽬目录 • **通配0或N级⺫⽬目录 • eg : com.*.xwcoder、 com.github.*、 *.github.xwcoder都匹配 com.github.xwcoder • eg : **、 com.**、 匹配com.github.xwcoder
  19. 19. • 订阅模块与登录模块 独⽴立且各⾃自异步加载 • 订阅模块需要知道是 否登录的状态 • setInterval ? //sad • mb.subscribe( ‘core,login’, ... , {cache:true} ) • mb.subscribe( ‘core,logout’, ... , {cache:true} ) • cache:true
  20. 20. •wait
  21. 21. • handler
  22. 22. sub/pub(nodeJS) promise(jquery)
  23. 23. kao.js ⼀一个简单的js⽂文件加载和依赖管理⽅方案 https://github.com/xwcoder/kao
  24. 24. 依赖mb(mb.js)
  25. 25. • 引⼊入kao.js • <script src=”kao.js” data-xx=””></script> • data-corelib : 设置corelib • data-baseurl : 设置路径前缀 • data-main : 启动⽂文件。⾃自动加载 • data-main-needcore : 指定data-main是否依赖corelib • data-debug : debug模式 • 配置kao.setConfig( <object> config ) • coreLib • baseUrl
  26. 26. • kao.add() : 配置模块 • kao.add(name, 'js/jNav.js'); • kao.add(name, {path:'js/g.js', requires:[], charset : '', type : js});
  27. 27. • kao([false], module[,function], ...) 加载模块 • 有依赖时串⾏行加载 • 内置coreLib, 默认其他模块依赖coreLib, 使⽤用kao( false, module, ... ) 取 消依赖 • kao(function(){}); • kao(false, function(){}); • kao('jq_plugin/g.js', function(){}); • kao('mod1', function(){}); • kao('mod1', 'mod2', function(){}); • kao({path : 'js/g.js', requires : [], charset:'utf-8'}, function(){}); • kao('mod1', 'js/g.js', 'mod2', {path : 'js/gNav.js', requires : []}, function(){}); • kao(false, 'mod1', 'js/g.js', 'mod2', {path : 'js/gNav.js', requires : []}); • kao('mod3', function(){});
  28. 28. • debug模式 • 开启⽅方式 • ⽅方式⼀一: kao.DEBUG = true; • ⽅方式⼆二: <script src="kao.js" data-debug="true"></script> • ⾮非debug模式会删除掉加载的script节点 • debug模式默认打开到src⽂文件的请求转换,可通过配置进⾏行精确控制
  29. 29. • 配置debug参数 kao.setDebugConfig • convert: url转换为对src⽂文件的请求, 默认值为'all', 转换函数为converFn • 'all' : 所有url转换为对src<源⽂文件>的请求 • RegExp : 所有匹配此正则的url进⾏行转换 • function : ⾃自定义函数,参数为原始url,返回值为true进⾏行转换, false不转换 • false : 不进⾏行转换 • convertFn : 转换函数 • convertExclude: array,直接跳过不转换的url,数组项可以是以下值: • string : 直接与url做相等匹配 • RegExp : url配置此正则则不转换 • function : ⾃自定义函数, 参数为原始url,返回值为true不进⾏行转换, false进⾏行转换 (convertExclude优先级⾼高于convert)
  30. 30. • logger模块 • kao.logger • kao.logger.group() • kao.logger.groupEnd() • kao.logger.log() • kao.logger.info() • kao.logger.error() • 在debug模式下开启 • 在浏览器提供console的情况下,使⽤用console • 浏览器未提供console的情况下,提供⼀一个可拖动的弹窗输出debug信息 • 通过kao.logger.setStyle() 控制弹窗样式 (原计划想做拖拽放⼤大/缩⼩小,太 重了)
  31. 31. • logger模块
  32. 32. Thank you!

×