Fastadmin中JS的调用方法原理讲解

 更新时间: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

所有后台的 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调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • zblogphp使用GetArticleList、GetList函数调用热门文章列表

    zblogphp使用GetArticleList、GetList函数调用热门文章列表

    ZBLOG PHP文章的时候会用到最新文章、点击数、评论数文章调用,在Zblog php 1.7版本以前使用GetArticleList函数,但之后,GetList函数增加where_custom、order_custom等多个重要参数,从而可以轻易地调用热门文章、热评文章或随机文章等列表了。
    2022-12-12
  • 解决dotproject的两个小bug的方法

    解决dotproject的两个小bug的方法

    继续深入使用dotproject,发现两个小bug,国内的论坛这些问题是找不到了,只有到dotproject官方论坛去找找,问题终获解决。
    2008-11-11
  • zblogphp、Z-Blog PHP数据库结构及表中的字段详细说明

    zblogphp、Z-Blog PHP数据库结构及表中的字段详细说明

    如果你是一位开发者,你一定知道Zblog-PHP。它是一款非常流行的开源博客系统,许多人使用它来创建自己的博客。在使用Zblog-PHP的过程中,你可能会遇到一些数据库字段,这些字段可能会导致一些困惑。因此,在本文中,我们将详细解释Zblog-PHP数据库字段的含义和作用。
    2023-03-03
  • PHPWIND 5.3 运行代码 功能实现代码

    PHPWIND 5.3 运行代码 功能实现代码

    天架设了一个PHPWIND的论坛,想着要弄个运行代码的功能出来,不过我只懂点ASP,又没接触过PHP,想着看看有没前人树,咱乘下凉就是了。查了下,发现只有老版本的插件可以实现这个功能。
    2009-06-06
  • 易优eyoucms数据表结构和字段说明(数据字典)

    易优eyoucms数据表结构和字段说明(数据字典)

    EyouCms是基于TP5.0框架为核心开发的免费开源的企业内容管理系统,易优基本包含了一个常规企业网站需要的一切功能。这篇文章主要介绍了易优eyoucms数据表结构和字段说明(数据字典),需要的朋友可以参考下
    2023-04-04
  • fastAdmin表单验证validate的错误提示信息,如何改变位置?

    fastAdmin表单验证validate的错误提示信息,如何改变位置?

    fastAdmin表单验证validate的错误提示,默认是在右侧的n-right,如果放在右侧不太好看,想调整到其他位置,该怎么操作呢?
    2023-08-08
  • wordpress 12个数据表结构和字段说明

    wordpress 12个数据表结构和字段说明

    WordPress安装的时候数据库会有12个默认的数据表,每张表的数据都包含了 WordPress 不同的功能。看看这些表的结构,你能很容易的了解网站不同的部分都是存在哪里的。这篇文章主要介绍了wordpress 12个数据表结构和字段说明,需要的朋友可以参考下
    2023-04-04
  • Fastadmin中JS的调用方法原理讲解

    Fastadmin中JS的调用方法原理讲解

    FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS。其中RequireJS主要是用于JS的模块化加载。
    2022-12-12
  • phpcms数据表结构和字段详细说明

    phpcms数据表结构和字段详细说明

    PHPCMS V9可以轻松承载百万级的访问数据,最大的功臣就是PHPCMS良好的数据库结构。学习一下PHPCMS的数据库结构。数据表的默认表前缀是V9_ ,表前缀的主要作用是数据库中有不同系统的数据表存在时,可以用表前缀来区分出来。
    2023-04-04
  • 解决dotproject中文名文件下载乱码问题的解决方法

    解决dotproject中文名文件下载乱码问题的解决方法

    汗一个,老解决问题,这我快成dotproject的中文技术支持了……,没法,问题还需要解决。
    2008-11-11

最新评论