FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模块化加载。
一、模板顶部引入meta.html
所有后台的 html 模板在顶部会引入application\admin\view\common\meta.html，里面含有一个JS变量:
//这里名字叫require的变量,会被requireJs当作是配置参数自动纳入到requireJs.config中
var require = {
config: {$config|json\_encode} //$config是后台渲染的整个系统的配置数据,包含各种配置参数,这样模板页就可以随意调用后台传过来的数据
};
二、html模板底部会引入 js 模板
所有后台的 html 模板在底部会引入 js 模板，application\admin\view\common\script.html
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>
三、js入口require-backend.js
发现项目的入口js就是require-backend.js
然后看require-backend.js，你会发现其中使用config配置了一些第三方模块。
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 文件:
1.每个控制器都对应一个JS模块，控制器名称和JS中模块名称是一一对应的。
比如我们的控制器是application/admin/controller/Article.php，则我们JS中对应的JS模块是public/assets/js/backend/article.js。
2.每一个控制器请求的方法对应JS模块中一个方法。
比如控制器Article.php中的index方法，对应的是JS的article模块中的Controller.index方法，如果我们添加了自己的方法detail方法，则对应Controller.detail方法。
一个 JS 标准控制器模块的写法如下：
define有三个参数，第一个是模块名（可以不写，默认与模块名与文件名同名），第二个是当前模块依赖的其他模块，第三个是一个function，模块体，要求必须return一个数据。
RequireJS标准语法，意思是此模块依赖'jquery', 'bootstrap', 'backend', 'table', 'form'几个模块，同时将它们加载为$, undefined, Backend, Table, Form这几个对应，我们就可以放心大胆在其中使用这几个对象了。
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 ;
到此这篇关于Fastadmin中JS的调用方法原理讲解的文章就介绍到这了,更多相关Fastadmin中JS调用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
