FA的JS调用机制说明 · Fastadmin和Thinkphp5.0.24详解

1:FA 使用 RequireJs 作为前端 JS 调度框架; 2:参考文档: 按顺序读完 4 篇文章,目标:了解 JS 的匿名函数,立即执行函数的概念,这是 JS 模块化的理论基础; AMD 规范的详情,AMD 是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义" 和 requirejs 的用法,与非 AMD 模式写的 js 的应用; [Javascript 模块化编程（一）：模块的写法](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) [Javascript 模块化编程（二）：AMD 规范](http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html) [Javascript 模块化编程（三）：require.js 的用法](http://www.ruanyifeng.com/blog/2012/11/require_js.html) [1 分钟带你入门 RequireJs 并了解 FastAdmin 中 JS 是如何调用的](https://ask.fastadmin.net/article/6505.html) [require.js 官网](https://requirejs.org/) 3:FA 的 JS 调用流程说明: * 所有后台的 html 模板在顶部会引入application\admin\view\common\meta.html 里面含有一个JS变量: ``` //这里名字叫require的变量,会被requireJs当作是配置参数自动纳入到requireJs.config中 var require = { config: {$config|json\_encode} //$config是后台渲染的整个系统的配置数据,包含各种配置参数,这样模板页就可以随意调用后台传过来的数据 }; ``` * 所有后台的 html 模板在底部会引入 js 模板 application\admin\view\common\script.html ```  {include file="common/script" /} ``` script.html 的内容就是一行: `<script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-backend{$Think.config.app_debug?'':'.min'}.js?v={$site.version|htmlentities}"></script>` * 在 require-backend.js 中:配置好 requirejs,并且自动引入当前页面所属控制器对应的 js 文件: ``` require(\['jquery', 'bootstrap'\], function ($, undefined) { //初始配置 var Config = requirejs.s.contexts.\_.config.config; //将Config渲染到全局 window.Config = Config; // 配置语言包的路径 var paths = {}; //语言文件的动态路径配置 paths\['lang'\] = Config.moduleurl + '/ajax/lang?callback=define&controllername=' + Config.controllername + '&lang=' + Config.language + '&v=' + Config.site.version; // 显示指明backend的路径,避免目录冲突 paths\['backend/'\] = 'backend/'; //继续加入到配置中 require.config({paths: paths}); // 初始化 $(function () { require(['fast'], function (Fast) { require(['backend', 'backend-init', 'addons'], function (Backend, undefined, Addons) { //加载相应模块 if (Config.jsname) {//jsname的值就是'backend/'+后台控制器的名称 require([Config.jsname], function (Controller) {//require对应的控制器Js进来 if (Controller.hasOwnProperty(Config.actionname)) {//如果控制器Js里面存在对应的方法 Controller[Config.actionname]();//执行这个方法,完成前置的自动执行,剩下的就交给相应的控制器js了 } else { if (Controller.hasOwnProperty("_empty")) { Controller._empty();//这个empty方法是不存在对应的方法时的默认执行方法 } } }, function (e) { console.error(e); // 这里可捕获模块加载的错误 }); } }); }); }); }); ``` 每个控制器都对应一个 JS 模块，控制器名称和 JS 中模块名称是一一对应的。比如我们的控制器是 `application/admin/controller/Article.php`，则我们 JS 中对应的 JS 模块是 `public/assets/js/backend/article.js` 如果我们的控制器是 `application/admin/controller/Member/Teacher.php`，则我们 JS 中对应的 JS 模块是 `public/assets/js/backend/member/teacher.js` 一个 JS 标准控制器模块的写法如下： ``` define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'category/index', add_url: 'category/add', edit_url: 'category/edit', del_url: 'category/del', multi_url: 'category/multi', dragsort_url: '', table: 'category', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, escape: false, pk: 'id', sortName: 'weigh', pagination: false, commonSearch: false, columns: [ [ {checkbox: true}, {field: 'id', title: __('Id')}, {field: 'type', title: __('Type')}, {field: 'name', title: __('Name'), align: 'left'}, {field: 'nickname', title: __('Nickname')}, {field: 'flag', title: __('Flag'), operate: false, formatter: Table.api.formatter.flag}, {field: 'image', title: __('Image'), operate: false, formatter: Table.api.formatter.image}, {field: 'weigh', title: __('Weigh')}, {field: 'status', title: __('Status'), operate: false, formatter: Table.api.formatter.status}, {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate} ] ] }); // 为表格绑定事件 Table.api.bindevent(table); }, ``` 如果完全不需要引入任何模块,就可以写成 ``` define(function () { var Controller = { index: function () { 业务代码..... } return Controller; } }) ``` 对于FA的各种全局变量依然是可以直接调用的,例如Fast.api.open ,Fast.api.ajax ;