Fastadmin中JS的調(diào)用方法原理講解
FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模塊化加載。
一、模板頂部引入meta.html
所有后臺(tái)的 html 模板在頂部會(huì)引入application\admin\view\common\meta.html,里面含有一個(gè)JS變量:
//這里名字叫require的變量,會(huì)被requireJs當(dāng)作是配置參數(shù)自動(dòng)納入到requireJs.config中 var require = { config: {$config|json\_encode} //$config是后臺(tái)渲染的整個(gè)系統(tǒng)的配置數(shù)據(jù),包含各種配置參數(shù),這樣模板頁(yè)就可以隨意調(diào)用后臺(tái)傳過(guò)來(lái)的數(shù)據(jù) };
二、html模板底部會(huì)引入 js 模板
所有后臺(tái)的 html 模板在底部會(huì)引入 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,你會(huì)發(fā)現(xiàn)其中使用config配置了一些第三方模塊。
require(\['jquery', 'bootstrap'\], function ($, undefined) { //初始配置 var Config = requirejs.s.contexts.\_.config.config; //將Config渲染到全局 window.Config = Config; // 配置語(yǔ)言包的路徑 var paths = {}; //語(yǔ)言文件的動(dòng)態(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/'+后臺(tái)控制器的名稱 require([Config.jsname], function (Controller) {//require對(duì)應(yīng)的控制器Js進(jìn)來(lái) if (Controller.hasOwnProperty(Config.actionname)) {//如果控制器Js里面存在對(duì)應(yīng)的方法 Controller[Config.actionname]();//執(zhí)行這個(gè)方法,完成前置的自動(dòng)執(zhí)行,剩下的就交給相應(yīng)的控制器js了 } else { if (Controller.hasOwnProperty("_empty")) { Controller._empty();//這個(gè)empty方法是不存在對(duì)應(yīng)的方法時(shí)的默認(rèn)執(zhí)行方法 } } }, function (e) { console.error(e); // 這里可捕獲模塊加載的錯(cuò)誤 }); } }); }); }); });
四、控制器對(duì)應(yīng)JS模塊
并且自動(dòng)引入當(dāng)前頁(yè)面所屬控制器對(duì)應(yīng)的 js 文件:
1.每個(gè)控制器都對(duì)應(yīng)一個(gè)JS模塊,控制器名稱和JS中模塊名稱是一一對(duì)應(yīng)的。
比如我們的控制器是application/admin/controller/Article.php
,則我們JS中對(duì)應(yīng)的JS模塊是public/assets/js/backend/article.js
。
2.每一個(gè)控制器請(qǐng)求的方法對(duì)應(yīng)JS模塊中一個(gè)方法。
比如控制器Article.php
中的index
方法,對(duì)應(yīng)的是JS的article模塊中的Controller.index
方法,如果我們添加了自己的方法detail
方法,則對(duì)應(yīng)Controller.detail
方法。
一個(gè) JS 標(biāo)準(zhǔn)控制器模塊的寫法如下:
define有三個(gè)參數(shù),第一個(gè)是模塊名(可以不寫,默認(rèn)與模塊名與文件名同名),第二個(gè)是當(dāng)前模塊依賴的其他模塊,第三個(gè)是一個(gè)function,模塊體,要求必須return一個(gè)數(shù)據(jù)。
RequireJS
標(biāo)準(zhǔn)語(yǔ)法,意思是此模塊依賴'jquery', 'bootstrap', 'backend', 'table', 'form'
幾個(gè)模塊,同時(shí)將它們加載為$, undefined, Backend, Table, Form
這幾個(gè)對(duì)應(yīng),我們就可以放心大膽在其中使用這幾個(gè)對(duì)象了。
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; } })
對(duì)于FA的各種全局變量依然是可以直接調(diào)用的,例如Fast.api.open ,Fast.api.ajax ;
到此這篇關(guān)于Fastadmin中JS的調(diào)用方法原理講解的文章就介紹到這了,更多相關(guān)Fastadmin中JS調(diào)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
zblogphp使用GetArticleList、GetList函數(shù)調(diào)用熱門文章列表
ZBLOG?PHP文章的時(shí)候會(huì)用到最新文章、點(diǎn)擊數(shù)、評(píng)論數(shù)文章調(diào)用,在Zblog?php?1.7版本以前使用GetArticleList函數(shù),但之后,GetList函數(shù)增加where_custom、order_custom等多個(gè)重要參數(shù),從而可以輕易地調(diào)用熱門文章、熱評(píng)文章或隨機(jī)文章等列表了。2022-12-12zblogphp、Z-Blog PHP數(shù)據(jù)庫(kù)結(jié)構(gòu)及表中的字段詳細(xì)說(shuō)明
如果你是一位開發(fā)者,你一定知道Zblog-PHP。它是一款非常流行的開源博客系統(tǒng),許多人使用它來(lái)創(chuàng)建自己的博客。在使用Zblog-PHP的過(guò)程中,你可能會(huì)遇到一些數(shù)據(jù)庫(kù)字段,這些字段可能會(huì)導(dǎo)致一些困惑。因此,在本文中,我們將詳細(xì)解釋Zblog-PHP數(shù)據(jù)庫(kù)字段的含義和作用。2023-03-03PHPWIND 5.3 運(yùn)行代碼 功能實(shí)現(xiàn)代碼
天架設(shè)了一個(gè)PHPWIND的論壇,想著要弄個(gè)運(yùn)行代碼的功能出來(lái),不過(guò)我只懂點(diǎn)ASP,又沒接觸過(guò)PHP,想著看看有沒前人樹,咱乘下涼就是了。查了下,發(fā)現(xiàn)只有老版本的插件可以實(shí)現(xiàn)這個(gè)功能。2009-06-06易優(yōu)eyoucms數(shù)據(jù)表結(jié)構(gòu)和字段說(shuō)明(數(shù)據(jù)字典)
EyouCms是基于TP5.0框架為核心開發(fā)的免費(fèi)開源的企業(yè)內(nèi)容管理系統(tǒng),易優(yōu)基本包含了一個(gè)常規(guī)企業(yè)網(wǎng)站需要的一切功能。這篇文章主要介紹了易優(yōu)eyoucms數(shù)據(jù)表結(jié)構(gòu)和字段說(shuō)明(數(shù)據(jù)字典),需要的朋友可以參考下2023-04-04fastAdmin表單驗(yàn)證validate的錯(cuò)誤提示信息,如何改變位置?
fastAdmin表單驗(yàn)證validate的錯(cuò)誤提示,默認(rèn)是在右側(cè)的n-right,如果放在右側(cè)不太好看,想調(diào)整到其他位置,該怎么操作呢?2023-08-08wordpress?12個(gè)數(shù)據(jù)表結(jié)構(gòu)和字段說(shuō)明
WordPress安裝的時(shí)候數(shù)據(jù)庫(kù)會(huì)有12個(gè)默認(rèn)的數(shù)據(jù)表,每張表的數(shù)據(jù)都包含了?WordPress?不同的功能??纯催@些表的結(jié)構(gòu),你能很容易的了解網(wǎng)站不同的部分都是存在哪里的。這篇文章主要介紹了wordpress?12個(gè)數(shù)據(jù)表結(jié)構(gòu)和字段說(shuō)明,需要的朋友可以參考下2023-04-04phpcms數(shù)據(jù)表結(jié)構(gòu)和字段詳細(xì)說(shuō)明
PHPCMS?V9可以輕松承載百萬(wàn)級(jí)的訪問(wèn)數(shù)據(jù),最大的功臣就是PHPCMS良好的數(shù)據(jù)庫(kù)結(jié)構(gòu)。學(xué)習(xí)一下PHPCMS的數(shù)據(jù)庫(kù)結(jié)構(gòu)。數(shù)據(jù)表的默認(rèn)表前綴是V9_?,表前綴的主要作用是數(shù)據(jù)庫(kù)中有不同系統(tǒng)的數(shù)據(jù)表存在時(shí),可以用表前綴來(lái)區(qū)分出來(lái)。2023-04-04解決dotproject中文名文件下載亂碼問(wèn)題的解決方法
汗一個(gè),老解決問(wèn)題,這我快成dotproject的中文技術(shù)支持了……,沒法,問(wèn)題還需要解決。2008-11-11