REBUILD FrontJS 使用 ~~v2.4

FrontJS 是 RB 的前端页面控制引擎,可使用 JS 语言开发,简单易用。您可以通过 FrontJS 对页面添加一些额外的功能(操作),而无需修改 RB 的核心代码,以此保持后续版本的升级和安全补丁可用。

基本使用

进入管理中心 - FrontJS 开始使用。

  1. 点击 [添加] 按钮添加新的 FrontJS 代码或 [保存]
  2. FrontJS 代码所应用到的路径,例如输入 /list 那么仅在访问页面(路径)包含 /list 时才会加载。如需匹配所有页面,可以输入 * 号,但请注意,在以下页面中 FrontJS 会被过滤,包括:
    • 管理中心(所有页面)
    • 用户登录、注册、找回密码页
    • 外部页面,包括外部表单、文件分享等
  3. 代码编辑区,可以编写任何合法的 JS 代码。由于 RB 内置了强大的编译器,因此您可以编写 ES5/ES6 和 JSX 代码,FrontJS 会自动完成 ES5 转码,保证浏览器兼容性。同时您还可以调用 RB 系统所使用的框架,如 jQuery、React 等,详情 参见此处
  4. [全屏] 编辑或 [格式化] 代码
  5. 已有 FrontJS 代码,点击可加载编辑

RB 对 FrontJS 代码未设置任何限制或沙箱机制,需您自行保证代码安全性

FrontJS-API

FrontJS-API 要解决的核心问题是增加易用性和持续可升级,是对前端操作的接口封装。

场景举例:在客户视图页增加一个按钮(点击跳转到百度以便查询客户相关资讯)。在没有使用 FrontJS-API 的情况下,我们需要:

  1. 确定按钮在页面中的位置(通过元素 classid 定位)
  2. 利用 jQuery 或 React 代码将其动态插入到指定页面位置

这会面临几个问题:

  1. 过于原始且不易用
  2. 无法在合适的时机添加
  3. RB 的代码可能会在个后续版本中优化修改(如 classid 名称不同了),此时您添加功能就会失效
  4. 与移动端(H5)不兼容,需额外编写

而通过 FrontJS-API 我们可以直接这样操作:

FrontJS.View.onOpen(() => {
  FrontJS.View
    .addButton({ text: 'text', type: 'danger', icon: 'search', onClick: () => alert('Clicked!') })
})

上述代码不仅简洁,且无需担心 RB 后续升级导致的功能失效问题。

? FrontJS-API 预计将在下一版本发布

该文档内容对您是否有帮助?没有
如有任何疑问,请与我们的 社区QQ 群 联系
Updated 8/25/2021, 11:24:50 PM