注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

拥有自己的梦想,跟随心的召唤

平凡是福

 
 
 

日志

 
 

BC 平台对 RequireJS 模块的支持说明  

2015-06-30 15:06:22|  分类: bc |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
(bc 内部开发资料)
BC 平台从 2.8 版开始增加了对 RequireJS 模块的支持(现时使用 RequireJS 的2.1.7版)。原则上可以使用任何标准的 RequireJS 行为规则来编写任意模块,但需要通过在模块的窗口页面中配置 data-js 属性的值为数组形式,平台通过识别 data-js 配置的数组值,然后使用 ReqiureJS 来加载这些 js 模块。
如模块的页面 html 如下:(对应的 jQuery 对象假定为 $page
<div class='bc-page'
  data-js='["path/to/dep_module1.js", "path/to/dep_module2.js", "path/to/this_module.js"]'
  data-initMethod='init'
  data-option='{...}'>
  ...
</div>
data-js 的配置表明此模块(this_module)依赖于模块 dep_module1 和 dep_module2。平台在加载这个页面后,将解析出 data-js 的配置值,然后使用如下方式加载此模块相应的 js 文件和执行相应的初始化方法。
以下代码仅是为了展示平台的逻辑处理规则,实际代码会有所不同:(bc/libs/page.js)
var $page = ...;
var option = $page.data("option");
require(["path/to/dep_module1.js", "path/to/dep_module2.js", "path/to/this_module.js", function () {
  // 获取本模块
  var thisModule = arguments[arguments.length - 1];       // 最后一个js文件为本模块
  var scope, scopType;
  if (typeof thisModule === "function") {                 // 定义为函数、类时
    scope = new module($page, option, option.readonly); // 自动执行实例化
    scopType = "instance";
  } else if (typeof module === "object") {                // 定义为 literal object 时
    scope = thisModule;
    scopType = "module";
  }

  // 将实例或模块与 DOM 对象关联起来
  if(scope) $page.data("scope", scope).data("scopType", scopType);

  // 执行模块的初始化方法(如果有)
  var initMethod = $page.attr("data-initMethod");
  if(initMethod){
    if (typeof scope === "object") initMethod = scope[initMethod];
    if (typeof initMethod == "function") {
      if (scopType === "instance") {
        initMethod(cfg, cfg.readonly);              // 调用实例方法, this == scope
      } else if (scopType === "module") {
        initMethod.call($page, cfg, cfg.readonly);  // 调用模块方法, this == $page
      }
    } else {
      alert("undefined function: " + $page.attr("data-initMethod"));
    }
  }
});
注:一个使用 RequireJS 来编写视图、表单 JS 的完整参考代码见 bc/schedule/job/form.js、view.js。

参考:
阮一峰:Javascript 严格模式详解
  评论这张
 
阅读(359)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017