Fastadmin中JS的調(diào)用方法原理講解
FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模塊化加載。
一、模板頂部引入meta.html
所有后臺的 html 模板在頂部會引入application\admin\view\common\meta.html,里面含有一個JS變量:
//這里名字叫require的變量,會被requireJs當(dāng)作是配置參數(shù)自動納入到requireJs.config中
var require = {
config: {$config|json\_encode} //$config是后臺渲染的整個系統(tǒng)的配置數(shù)據(jù),包含各種配置參數(shù),這樣模板頁就可以隨意調(diào)用后臺傳過來的數(shù)據(jù)
};
二、html模板底部會引入 js 模板
所有后臺的 html 模板在底部會引入 js 模板,application\admin\view\common\script.html
script.html 的內(nèi)容就是一行:
<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
發(fā)現(xiàn)項(xiàng)目的入口js就是require-backend.js
然后看require-backend.js,你會發(fā)現(xiàn)其中使用config配置了一些第三方模塊。
require(\['jquery', 'bootstrap'\], function ($, undefined) {
//初始配置
var Config = requirejs.s.contexts.\_.config.config;
//將Config渲染到全局
window.Config = Config;
// 配置語言包的路徑
var paths = {};
//語言文件的動態(tài)路徑配置
paths\['lang'\] = Config.moduleurl + '/ajax/lang?callback=define&controllername=' + Config.controllername + '&lang=' + Config.language + '&v=' + Config.site.version;
// 顯示指明backend的路徑,避免目錄沖突
paths\['backend/'\] = 'backend/';
//繼續(xù)加入到配置中
require.config({paths: paths});
// 初始化
$(function () {
require(['fast'], function (Fast) {
require(['backend', 'backend-init', 'addons'], function (Backend, undefined, Addons) {
//加載相應(yīng)模塊
if (Config.jsname) {//jsname的值就是'backend/'+后臺控制器的名稱
require([Config.jsname], function (Controller) {//require對應(yīng)的控制器Js進(jìn)來
if (Controller.hasOwnProperty(Config.actionname)) {//如果控制器Js里面存在對應(yīng)的方法
Controller[Config.actionname]();//執(zhí)行這個方法,完成前置的自動執(zhí)行,剩下的就交給相應(yīng)的控制器js了
} else {
if (Controller.hasOwnProperty("_empty")) {
Controller._empty();//這個empty方法是不存在對應(yīng)的方法時的默認(rèn)執(zhí)行方法
}
}
}, function (e) {
console.error(e);
// 這里可捕獲模塊加載的錯誤
});
}
});
});
});
});
四、控制器對應(yīng)JS模塊
并且自動引入當(dāng)前頁面所屬控制器對應(yīng)的 js 文件:
1.每個控制器都對應(yīng)一個JS模塊,控制器名稱和JS中模塊名稱是一一對應(yīng)的。
比如我們的控制器是application/admin/controller/Article.php,則我們JS中對應(yīng)的JS模塊是public/assets/js/backend/article.js。
2.每一個控制器請求的方法對應(yīng)JS模塊中一個方法。
比如控制器Article.php中的index方法,對應(yīng)的是JS的article模塊中的Controller.index方法,如果我們添加了自己的方法detail方法,則對應(yīng)Controller.detail方法。
一個 JS 標(biāo)準(zhǔn)控制器模塊的寫法如下:
define有三個參數(shù),第一個是模塊名(可以不寫,默認(rèn)與模塊名與文件名同名),第二個是當(dāng)前模塊依賴的其他模塊,第三個是一個function,模塊體,要求必須return一個數(shù)據(jù)。
RequireJS標(biāo)準(zhǔn)語法,意思是此模塊依賴'jquery', 'bootstrap', 'backend', 'table', 'form'幾個模塊,同時將它們加載為$, undefined, Backend, Table, Form這幾個對應(yīng),我們就可以放心大膽在其中使用這幾個對象了。
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格參數(shù)配置
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 () {
業(yè)務(wù)代碼.....
}
return Controller;
}
})
對于FA的各種全局變量依然是可以直接調(diào)用的,例如Fast.api.open ,Fast.api.ajax ;
到此這篇關(guān)于Fastadmin中JS的調(diào)用方法原理講解的文章就介紹到這了,更多相關(guān)Fastadmin中JS調(diào)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
易優(yōu)eyoucms數(shù)據(jù)表結(jié)構(gòu)和字段說明(數(shù)據(jù)字典)
EyouCms是基于TP5.0框架為核心開發(fā)的免費(fèi)開源的企業(yè)內(nèi)容管理系統(tǒng),易優(yōu)基本包含了一個常規(guī)企業(yè)網(wǎng)站需要的一切功能。這篇文章主要介紹了易優(yōu)eyoucms數(shù)據(jù)表結(jié)構(gòu)和字段說明(數(shù)據(jù)字典),需要的朋友可以參考下2023-04-04
fastadmin使用學(xué)習(xí)中的常見問題匯總
fastadmin是thinkPHP開發(fā)框架整合了很多插件和技術(shù),后臺的前端頁面使用Bootstrap,還有RequireJs??偟膩碚f,需要開發(fā)者前后端全棧技術(shù)程度較高,當(dāng)然也要看使用學(xué)習(xí)時間長短,畢竟熟能生巧。這篇文章主要介紹了fastadmin使用學(xué)習(xí)中的常見問題匯總2022-12-12
DownPlus 安全補(bǔ)丁 2008-12-12 附修改方法
DownPlus 安全補(bǔ)丁 2008-12-12 修正內(nèi)容: 修正query.asp的跨站腳本漏洞.2008-12-12
PHPWIND 5.3 運(yùn)行代碼 功能實(shí)現(xiàn)代碼
天架設(shè)了一個PHPWIND的論壇,想著要弄個運(yùn)行代碼的功能出來,不過我只懂點(diǎn)ASP,又沒接觸過PHP,想著看看有沒前人樹,咱乘下涼就是了。查了下,發(fā)現(xiàn)只有老版本的插件可以實(shí)現(xiàn)這個功能。2009-06-06
zblogphp使用GetArticleList、GetList函數(shù)調(diào)用熱門文章列表
ZBLOG?PHP文章的時候會用到最新文章、點(diǎn)擊數(shù)、評論數(shù)文章調(diào)用,在Zblog?php?1.7版本以前使用GetArticleList函數(shù),但之后,GetList函數(shù)增加where_custom、order_custom等多個重要參數(shù),從而可以輕易地調(diào)用熱門文章、熱評文章或隨機(jī)文章等列表了。2022-12-12

