返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Fastadmin中JS的调用方法原理讲解
  • 437
分享到

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

FastAdminRequireJS 2022-12-17 18:12:25 437人浏览 薄情痞子
摘要

目录一、模板顶部引入meta.html二、html模板底部会引入 js 模板三、js入口require-backend.js四、控制器对应JS模块FastAdmin的前端部分使用或涉

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&amp;controllername=' + Config.controllername + '&amp;lang=' + Config.language + '&amp;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调用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Fastadmin中JS的调用方法原理讲解

本文链接: https://lsjlt.com/news/175168.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Fastadmin中JS的调用方法原理讲解
    目录一、模板顶部引入meta.html二、html模板底部会引入 js 模板三、js入口require-backend.js四、控制器对应JS模块FastAdmin的前端部分使用或涉...
    99+
    2022-12-17
    FastAdmin RequireJS
  • JS中的回调函数(callback)讲解
    目录1.什么是回调函数(callback)呢?2.回调函数有哪些特点?3.回调函数中this的指向问题4.为什么要用到回调函数?5.回调函数和异步操作的关系是什么?回调函数是异步么?...
    99+
    2022-12-14
    js 回调函数 js 回调函数callback 回调函数callback
  • JS调用PHP和PHP调用JS的方法
    JS调用PHP和PHP调用JS的方法 1、JS方式调用PHP文件并取得PHP中的值 举一个简单的例子来说明: 如在页面test_json1中用下面这句调用: alert(jstext); 在test_json2.php中有这样一段PH...
    99+
    2023-09-21
    php javascript 开发语言
  • redux工作原理讲解及使用方法
    目录1. redux 是什么?2.redux的原理3. 如何使用 redux?(1).安装redux,创建redux文件夹,建立store.js(2).建立reducers.js(3...
    99+
    2024-04-02
  • PHP中调用JS方法的实现方法
    PHP是一种广泛应用于网站开发的服务器端脚本语言,而JS(JavaScript)则是一种用于网页交互的客户端脚本语言。在开发网站时,我们有时需要在PHP代码中调用JS方法来实现一些特定...
    99+
    2024-03-04
    php调用js php js互动 php前端交互
  • 介绍JS异步的执行原理和回调方法
    本篇内容介绍了“介绍JS异步的执行原理和回调方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、JS异步的执行原理  我们知道JavaSc...
    99+
    2023-06-07
  • 如何在js中调用php的方法
    JavaScript与PHP是两种不同的编程语言,前者运行在浏览器中,而后者则运行在服务器端。尽管两种语言的运行环境不同,但是它们可以通过特定的方式来进行交互。在本文中,我们将会介绍如何在JavaScript中调用PHP方法。一、使用AJA...
    99+
    2023-05-22
  • 如何使用js的闭包原理做对象封装及调用方法
    这篇文章主要为大家展示了“如何使用js的闭包原理做对象封装及调用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用js的闭包原理做对象封装及调用方法”这...
    99+
    2024-04-02
  • php如何调用类的方法?步骤讲解
    php如何调用类的方法?下面本篇文章就来给大家介绍一下调用类的方法需要的步骤,希望对大家有所帮助!在 PHP 中,调用类的方法需要以下几个步骤。1. 定义类在 PHP 中,首先需要定义类,类是一个包含属性和方法的模板,用于实例化对象。以下是...
    99+
    2023-05-14
    php
  • 怎么在html中调用js方法
    这篇文章给大家介绍怎么在html中调用js方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。2、可扩展性:超...
    99+
    2023-06-14
  • Android WebView使用方法详解 附js交互调用方法
    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性。 先说...
    99+
    2022-06-06
    调用 方法 webview js Android
  • vue如何引用外部JS并调用JS文件中的方法
    这篇“vue如何引用外部JS并调用JS文件中的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何引用外部JS并调用...
    99+
    2023-07-05
  • vue引用外部JS并调用JS文件中的方法实例
    目录VUE项目中引入JS文件的几种方法1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export...
    99+
    2023-02-27
    vue引用外部js文件 vuecli引入外部js
  • Android与JS相互调用的方法
    目录Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数。下面是JS同Android的通信,JS调用Android的函数方法。Andro...
    99+
    2024-04-02
  • C#调用js库的方法小结
    目录前言安装ClearScript引入js文件创建V8ScriptEngine对象通过js引擎加载js文件C#调用js方法实现经纬度坐标纠偏C#调用js方法判断经纬度点位是否在多边形...
    99+
    2023-05-14
    C#调用js
  • php直接调用js的方法名
    PHP作为一种非常流行的后端语言,被广泛用于构建各种类型的网站和应用程序。与此同时,JavaScript作为一种前端语言,被广泛用于交互式 Web 界面的开发。在许多情况下,开发人员需要通过PHP直接调用 JavaScript函数。在本篇文...
    99+
    2023-05-14
    php
  • vue 调用外部js里的方法
    Vue是一个非常流行的JavaScript框架,广泛应用于Web应用程序的开发中。Vue框架提供了许多方便的功能,使得我们开发Web应用程序的过程变得非常简单。然而,在使用Vue框架开发应用程序的过程中,我们有时需要调用外部JS文件中的方法...
    99+
    2023-05-14
  • HashMap原理及put方法与get方法的调用过程
    HashMap的原理 HashMap的数据结构为数组+链表,以key,value的形式存值,通过调用put与get方法来存值与取值。 它内部维护了一个Entry数组,得到key的h...
    99+
    2024-04-02
  • 理解Android中Activity的方法回调
    为什么需要方法回调? 方法回调是功能定义和功能分离的一种手段,是一种松耦合的设计思想。在JAVA中回调是通过接口来实现的。作为一种系统架构,必须要有自己的运行环境,并且要提供用...
    99+
    2022-06-06
    方法 回调 activity Android
  • Android中 webView调用JS出错的解决办法
    问题     webView调用JS出错。 代码如下:     class TestJS {  &nb...
    99+
    2022-06-06
    webview js Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作