前置知识
在FastAdmin框架学习-后台加载流程理解
中已经说到后台的前端文件加载流程，即访问一个功能控制器时，默认会使用default.html文件作为view的布局模板。而在default.html中又有{include file="common/script" /}语句去加载前端的js文件，common/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文件，它会判断当前是否配置了CDN缓存，或者是否处在调试模式，如果是正式环境，前端的核心js会以压缩的方式加载，极大提高访问速度和运行效率。
Require-backend.js解析
require.config配置解析
urlArgs
RequireJS获取资源时附加在URL后面的额外的query参数，FastAdmin中是用于开发时清除缓存，其中site.version是在后台配置的网站版本。packages
从CommonJS包(package)中加载模块。FastAdmin中是moment模块，用于时间操作。include
在打包压缩的时候会把模块合并到require-backend.min.js文件当中去。FastAdmin中打包压缩的命令是php think min -m all -r all具体查看文档一键压缩打包。paths
用于给模块配置路径，或者给本地模块起一个精炼的别名，其中可以看到从bower包管理中加载的js文件，这些文件就是在最初开发时使用bower install命令下载的文件。shim
shim配置是把不符合AMD规范的包转化为requireJs可以使用的包。map
在FastAdmin中，map的使用和path是一样的，就是加载了css模块。waitSeconds
在放弃加载一个脚本之前等待的秒数。设为0禁用等待超时。默认为7秒。
源码分析
'bootstrap': ['jquery'],这一行的配置实际上是一个简写，表示bootstrap加载时会依赖jquery。
'bootstrap-table': {
deps: [
'bootstrap',
// 'css!../libs/bootstrap-table/dist/bootstrap-table.min.css'
],
exports: '$.fn.bootstrapTable'
},
exports表示将包赋值到某个变量上。
baseUrl
基础资源路径
require-backend源码部分解读
var Config = requirejs.s.contexts._.config.config;
这一行表示定义Config变量，其值来自admin/view/common/meta.html其中有
var require = {
config: {$config|json_encode}
};
而$config变量来自common/controller/Backend.php，其中有
// 配置信息
$config = [
'site' => array_intersect_key($site, array_flip(['name', 'indexurl', 'cdnurl', 'version', 'timezone', 'languages'])),
'upload' => $upload,
'modulename' => $modulename,
'controllername' => $controllername,
'actionname' => $actionname,
'jsname' => 'backend/' . str_replace('.', '/', $controllername),
'moduleurl' => rtrim(url("/{$modulename}", '', false), '/'),
'language' => $lang,
'fastadmin' => Config::get('fastadmin'),
'referer' => Session::get("referer")
];
加载模块
if (Config.jsname) {
require([Config.jsname], function (Controller) {
if (Controller.hasOwnProperty(Config.actionname)) {
Controller[Config.actionname]();
} else {
if (Controller.hasOwnProperty("_empty")) {
Controller._empty();
}
}
}, function (e) {
console.error(e);
// 这里可捕获模块加载的错误
});
}
这里的代码的大致意思是，从路由中获取当前的action名，通过action名去获取到要加载的相应js文件，同时调用相应控制器方法，比如当访问/admin/index/时就会调用index方法。
require-backend源码
require.config({
urlArgs: "v=" + requirejs.s.contexts._.config.config.site.version,
packages: [{
name: 'moment',
location: '../libs/moment',
main: 'moment'
}
],
//在打包压缩时将会把include中的模块合并到主文件中
include: ['css', 'layer', 'toastr', 'fast', 'backend', 'backend-init', 'table', 'form', 'dragsort', 'drag', 'drop', 'addtabs', 'selectpage'],
paths: {
'lang': "empty:",
'form': 'require-form',
'table': 'require-table',
'upload': 'require-upload',
'validator': 'require-validator',
'drag': 'jquery.drag.min',
'drop': 'jquery.drop.min',
'echarts': 'echarts.min',
'echarts-theme': 'echarts-theme',
'adminlte': 'adminlte',
'bootstrap-table-commonsearch': 'bootstrap-table-commonsearch',
'bootstrap-table-template': 'bootstrap-table-template',
//
// 以下的包从bower的libs目录加载
'jquery': '../libs/jquery/dist/jquery.min',
'bootstrap': '../libs/bootstrap/dist/js/bootstrap.min',
'bootstrap-datetimepicker': '../libs/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
'bootstrap-daterangepicker': '../libs/bootstrap-daterangepicker/daterangepicker',
'bootstrap-select': '../libs/bootstrap-select/dist/js/bootstrap-select.min',
'bootstrap-select-lang': '../libs/bootstrap-select/dist/js/i18n/defaults-zh_CN',
'bootstrap-table': '../libs/bootstrap-table/dist/bootstrap-table.min',
'bootstrap-table-export': '../libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.min',
'bootstrap-table-mobile': '../libs/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile',
'bootstrap-table-lang': '../libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN',
'bootstrap-table-jumpto': '../libs/bootstrap-table/dist/extensions/page-jumpto/bootstrap-table-jumpto',
'bootstrap-slider': '../libs/bootstrap-slider/bootstrap-slider',
'tableexport': '../libs/tableExport.jquery.plugin/tableExport.min',
'dragsort': '../libs/fastadmin-dragsort/jquery.dragsort',
'sortable': '../libs/Sortable/Sortable.min',
'addtabs': '../libs/fastadmin-addtabs/jquery.addtabs',
'slimscroll': '../libs/jquery-slimscroll/jquery.slimscroll',
'validator-core': '../libs/nice-validator/dist/jquery.validator',
'validator-lang': '../libs/nice-validator/dist/local/zh-CN',
'plupload': '../libs/plupload/js/plupload.min',
'toastr': '../libs/toastr/toastr',
'jstree': '../libs/jstree/dist/jstree.min',
'layer': '../libs/fastadmin-layer/dist/layer',
'cookie': '../libs/jquery.cookie/jquery.cookie',
'cxselect': '../libs/fastadmin-cxselect/js/jquery.cxselect',
'template': '../libs/art-template/dist/template-native',
'selectpage': '../libs/fastadmin-selectpage/selectpage',
'citypicker': '../libs/fastadmin-citypicker/dist/js/city-picker.min',
'citypicker-data': '../libs/fastadmin-citypicker/dist/js/city-picker.data',
},
// shim依赖配置
shim: {
'addons': ['backend'],
'bootstrap': ['jquery'],
'bootstrap-table': {
deps: [
'bootstrap',
// 'css!../libs/bootstrap-table/dist/bootstrap-table.min.css'
],
exports: '$.fn.bootstrapTable'
},
'bootstrap-table-lang': {
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-export': {
deps: ['bootstrap-table', 'tableexport'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-mobile': {
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-advancedsearch': {
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-commonsearch': {
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-template': {
deps: ['bootstrap-table', 'template'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-jumpto': {
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'tableexport': {
deps: ['jquery'],
exports: '$.fn.extend'
},
'slimscroll': {
deps: ['jquery'],
exports: '$.fn.extend'
},
'adminlte': {
deps: ['bootstrap', 'slimscroll'],
exports: '$.AdminLTE'
},
'bootstrap-datetimepicker': [
'moment/locale/zh-cn',
// 'css!../libs/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css',
],
// 'bootstrap-select': ['css!../libs/bootstrap-select/dist/css/bootstrap-select.min.css',],
'bootstrap-select-lang': ['bootstrap-select'],
// 'toastr': ['css!../libs/toastr/toastr.min.css'],
'jstree': ['css!../libs/jstree/dist/themes/default/style.css',],
'plupload': {
deps: ['../libs/plupload/js/moxie.min'],
exports: "plupload"
},
// 'layer': ['css!../libs/fastadmin-layer/dist/theme/default/layer.css'],
// 'validator-core': ['css!../libs/nice-validator/dist/jquery.validator.css'],
'validator-lang': ['validator-core'],
// 'selectpage': ['css!../libs/fastadmin-selectpage/selectpage.css'],
'citypicker': ['citypicker-data', 'css!../libs/fastadmin-citypicker/dist/css/city-picker.css']
},
baseUrl: requirejs.s.contexts._.config.config.site.cdnurl + '/assets/js/', //资源基础路径
map: {
'*': {
'css': '../libs/require-css/css.min'
}
},
waitSeconds: 30,
charset: 'utf-8' // 文件编码
});
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;
// 避免目录冲突
paths['backend/'] = 'backend/';
require.config({paths: paths});
// 初始化
$(function () {
require(['fast'], function (Fast) {
require(['backend', 'backend-init', 'addons'], function (Backend, undefined, Addons) {
//加载相应模块
if (Config.jsname) {
require([Config.jsname], function (Controller) {
if (Controller.hasOwnProperty(Config.actionname)) {
Controller[Config.actionname]();
} else {
if (Controller.hasOwnProperty("_empty")) {
Controller._empty();
}
}
}, function (e) {
console.error(e);
// 这里可捕获模块加载的错误
});
}
});
});
});
});
