亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Fastadmin中JS的調(diào)用方法原理講解

 更新時(shí)間:2022年12月17日 17:28:11   投稿:yin  
FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模塊化加載。

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)用熱門文章列表

    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-12
  • 解決dotproject的兩個(gè)小bug的方法

    解決dotproject的兩個(gè)小bug的方法

    繼續(xù)深入使用dotproject,發(fā)現(xiàn)兩個(gè)小bug,國(guó)內(nèi)的論壇這些問(wèn)題是找不到了,只有到dotproject官方論壇去找找,問(wèn)題終獲解決。
    2008-11-11
  • zblogphp、Z-Blog PHP數(shù)據(jù)庫(kù)結(jié)構(gòu)及表中的字段詳細(xì)說(shuō)明

    zblogphp、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-03
  • PHPWIND 5.3 運(yùn)行代碼 功能實(shí)現(xiàn)代碼

    PHPWIND 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ù)字典)

    易優(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-04
  • fastAdmin表單驗(yàn)證validate的錯(cuò)誤提示信息,如何改變位置?

    fastAdmin表單驗(yàn)證validate的錯(cuò)誤提示信息,如何改變位置?

    fastAdmin表單驗(yàn)證validate的錯(cuò)誤提示,默認(rèn)是在右側(cè)的n-right,如果放在右側(cè)不太好看,想調(diào)整到其他位置,該怎么操作呢?
    2023-08-08
  • wordpress?12個(gè)數(shù)據(jù)表結(jié)構(gòu)和字段說(shuō)明

    wordpress?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-04
  • Fastadmin中JS的調(diào)用方法原理講解

    Fastadmin中JS的調(diào)用方法原理講解

    FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模塊化加載。
    2022-12-12
  • phpcms數(shù)據(jù)表結(jié)構(gòu)和字段詳細(xì)說(shuō)明

    phpcms數(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)題的解決方法

    解決dotproject中文名文件下載亂碼問(wèn)題的解決方法

    汗一個(gè),老解決問(wèn)題,這我快成dotproject的中文技術(shù)支持了……,沒法,問(wèn)題還需要解決。
    2008-11-11

最新評(píng)論