1分钟带你入门RequireJs并了解FastAdmin中JS是如何调用的

君君要上天 3月前 3320

使用fastadmin,前端方面第一个难点就是requirejs,这是一个强大却鲜为人知(对于后端开发人员来说)的框架。

在fastadmin交流群混了一段时间,发现不少小白总在问一些很基础的问题,本人实在看不下去了,于是今天用1分钟时间带大家入门requirejs,以后也将陆续写一些基础的扫盲贴,帮助小白开发者快速上手fastadmin。

模块化

一般我们引入js是这样:

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>

RequireJs是模块化工具,每一个我们自己的js文件或者库都可以看成是一个模块,按需引入。

它是这样写的:

<script data-main="js/main" src="js/require.js"></script>

src是引入requrejs框架文件,data-main是我们自己的js的总入口。js/main对应的js文件是js/main.js(可自行命名)

不信你可以看看fa中admin/view/common/script.html里面是不是这样写的。

然后浏览器就会加载require.js,而requirejs会帮我们自动加载main.js。

那我们我们怎么再引入别的js文件?比如自己写的js和第三方js,如jquery

如何使用自定义js或第三方js

引用第三方库

使用requre.config({}) 配置模块,如:

require.config({
    paths: {
        'lang': "empty:",
        'form': 'require-form',
        'table': 'require-table',
        'upload': 'require-upload',
        'validator': 'require-validator',
        'drag': 'jquery.drag.min',
        'drop': 'jquery.drop.min',
        'echarts': 'echarts.min',
        'echarts-theme': 'echarts-theme',
        'jquery': '../libs/jquery/dist/jquery.min',
     
    },
    // shim依赖配置
    shim: {
        'addons': ['backend'],
        'bootstrap': ['jquery'],
        'bootstrap-table': {
            deps: [
                'bootstrap',
//                'css!../libs/bootstrap-table/dist/bootstrap-table.min.css'
            ],
            exports: '$.fn.bootstrapTable'
        },
        'bootstrap-table-lang': {
            deps: ['bootstrap-table'],
            exports: '$.fn.bootstrapTable.defaults'
        },
      
    },
    map: {
        '*': {
            'css': '../libs/require-css/css.min'
        }
    },
    waitSeconds: 30,
    charset: 'utf-8' // 文件编码
});

config中paths用来配置支持AMD规范的库和js文件,shim是用来配不支持AMD规范的js。配好之后,假设现在要使用jquery和bootstrap,只要用require方法:

require(['jquery', 'bootstrap'], function ($, undefined) {
    //该function将在引入jquery和bootstrap完成之后执行。
});

引用自己写的js

在fastadmin中,我们并没有使用config配置我们自己写的js,如后台某个类增改查方法所在的js文件,是不是很好奇是怎么被调用到的?

前面说了requirejs是模块化工具,要使用我们自己定义的js,首先得用模块化的方式编写我们的js,使用define定义一个模块:

define('modelname',['jquery','xxx'], function ($,xxx) {

    var hehe = {
        function1: function () {
            
        },
        function2: function () {
            
        },
        function3: function () {
            
        }
    };
    return hehe;
});

define有三个参数,第一个是模块名(可以不写,默认与模块名与文件名同名),第二个是当前模块依赖的其他模块,第三个是一个function,模块体,要求必须return一个数据。

在这里我们return了hehe这个对象,这个对象中定义了好几个function,不信你瞅瞅fastadmin里面的js是不是都是这样写的。

上面这段代码如果用php来理解,可以看作是:

require jquery.php
require xxx.php

class hehe{
    public function function1(){

    }
    public function function2(){

    }
}

那么我们在其他地方就可以使用这个模块:

require(['jquery', 'hehe'], function ($, hehe) {
    //调用hehe模块提供的方法
    hehe.function1();
    hehe.function2();
    hehe.function3();
});

这段代码如果也用php的思维来理解,你可以看作是:

require jquery.php;
reuqire hehe.php

hehe.function1();
hehe.function2();
hehe.function3();

这时候一定有人有疑问,在开发fastadmin的时候,我们并没有进行调用形如hehe.function1();的方法,那么我们的index,add,edit等页面对应的js代码是如何被执行的?

请大家看require-backend.js文件,Karson老大帮我们调用了:

image.png

所以我们只需写好对应的js文件,Karson老大帮我们根据控制器名和方法名自动调用了对应的js文件和对应的js方法。

如何了解fastadmin中的requirejs

先看admin/view/common/script.html,你会发现项目的入口js就是require-backend.js

然后看require-backend.js,你会发现其中使用config配置了一些第三方模块。并在最后调用了当前控制器和方法对应的js

image.png

总结

  1. 自己写一个js,要使用define,并在function体中return
  2. 调用其他js,使用require(),并在function体中编写业务代码
  3. require-backend.js中根据当前控制器名和方法名自动帮我们调用了对应的js文件和其中的方法

PS:本帖只是带你简单入门requirejs,并了解fastadmin中是如何使用requirejs的,requirejs还有不少具体的配置细节需要大家自己阅读官方文档。

最后于 3月前 被君君要上天编辑
感谢以下的小伙的赞赏支持
最新回复 (39)
  • yeff 3月前
    感谢TA
    0 引用 2

    高手,通读了2遍,没看懂,收藏了!

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 3
    yeff 高手,通读了2遍,没看懂,收藏了!

    我去。感觉白写了。

  • F4NNIU 打赏 3月前
    感谢TA
    0 引用 4
    君君要上天 我去。感觉白写了。

    没白写,我看懂了,感谢分享。

  • miajeay 3月前
    感谢TA
    0 引用 5

    厉害,高高手

  • 武之大大侠 3月前
    感谢TA
    0 引用 6

    学到了一些自己没有理解到的东西。
    特意注册账号来表示感谢,哈哈

  • 相思雨 3月前
    感谢TA
    0 引用 7

    增、删、改的js文件在哪里,如果需要修改是自己重新写还是怎么样

  • 张尧嵩 3月前
    感谢TA
    0 引用 8

    写的很棒 感觉一下子豁然开朗

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 9
    张尧嵩 写的很棒 感觉一下子豁然开朗

    有人说没看懂。我还以为我写的不清楚

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 10
    武之大大侠 学到了一些自己没有理解到的东西。 特意注册账号来表示感谢,哈哈

    谢谢支持。

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 11
    相思雨 增、删、改的js文件在哪里,如果需要修改是自己重新写还是怎么样

    在表格的代码require-table.js中,包含了查和删除的代码。增和改用的是form,在require-form.js中。建议你看看“开发示例”这个插件,再读读require-table.js和require-form.js的源码

  • yangliu 3月前
    感谢TA
    0 引用 12

    看着写的挺牛逼的,确实没看懂。来点简单的demo 更好

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 13
    yangliu 看着写的挺牛逼的,确实没看懂。来点简单的demo 更好

    不能光看我写的,建议参照着fastadmin的equire-table.js和require-form.js看

  • F4NNIU 打赏 3月前
    感谢TA
    0 引用 14

    感谢分享,已经打赏。

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 15
    F4NNIU 感谢分享,已经打赏。

    grin

  • ahua 3月前
    感谢TA
    0 引用 16

    感谢分享,已经打赏grinning

  • 飞得更高 3月前
    感谢TA
    0 引用 17

    留个记号

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 18

    这么好的贴不能沉了。

  • Yan 3月前
    感谢TA
    0 引用 19

    用php来做解释,一下明白了很多。谢谢楼主分享

    这里也请教一个问题,如果楼主有时间帮我分析一下,当我们在添加或者编辑的时候,他会弹出来一个窗口,这个窗口中的下拉数据或者表单数据,肯定是调用了数据库的。

    我的问题是,这个调用数据库的方法,是不是在require-backend.js中?

    调用数据库文件之后,是通过bootstrap.table进行动态赋值的吗?

    谢谢

    最后于 3月前 被Yan编辑
  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 20

    编辑框表单数据都是直接服务端edit()方法中用模板渲染的,没有用ajax。bootstraptable的列表页用的,和编辑框没有半点关系。

  • Yan 3月前
    感谢TA
    0 引用 21

    谢谢您的回复以及在我另一个疑问帖子的回复。

    我还是有不太明白需要梳理的地方 可能比较菜 还请赐教 如下图所示:
    A【已解决】,这个是用{:__('Category_id')}来调用的,后面还有类似的调用{:__('Week')}等,请教下这个函数,就是公共助手函数里面的thinkLang::get('category_id')吗?这个我改了下————这个函数,确认了的确是thinkLang::get('category_id');
    B,感觉这部分代码,模板里面的代码层级结构和最终页面中打开查看的代码结构不一样,应该是被JS处理过了,请问是哪个JS做的这个工作?
    C,这里调用了Category表的所有type='test'的name值,如果我想让他调用Category表的type为任意值比如article,default等的name值,该去找哪个函数;

    说的有些啰嗦 不知有没有讲明白 smile

    谢谢

    QQ截图20180901173843.jpg
    QQ截图20180901173642.jpg

    最后于 3月前 被Yan编辑
  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 22
    Yan 谢谢您的回复以及在我另一个疑问帖子的回复。 我还是有不太明白需要梳理的地方 可能比较菜 还请赐教 如下图所示: A【已解决】,这个是用{:__('Category_id')}来调用的,后面还有 ...

    B问题:这个input有个class是selectpage,selectpage是一个组件,下拉单选和多选的功能就是这个组件实现的。这个组件有对页面进行一定的修改,所以你在浏览器看到的和源码中不一样。
    image.png

    C问题:
    image.png

  • Yan 3月前
    感谢TA
    0 引用 23
    君君要上天 B问题:这个input有个class是selectpage,selectpage是一个组件,下拉单选和多选的功能就是这个组件实现的。这个组件有对页面进行一定的修改,所以你在浏览器看到的和源码中不一样。 ...

    君君要上天, 谢谢君君帮我捋清知识的盲点,以后还请多指教。
    这个{"custom[type]":"test"},这个test应该算是个参数吧,请问如果传递两个值,该怎么写?{"custom[type]":"default,test"}比如这样,我还试了其他几种写法,都不生效,请问是哪个函数或者文件处理这个参数?

    谢谢

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 24
    Yan 君君要上天, 谢谢君君帮我捋清知识的盲点,以后还请多指教。 这个{"custom[type]":"test"},这个test应该算是个参数吧,请问如果传递两个 ...

    你可以看下服务端是怎么处理这个参数的。

  • Yan 3月前
    感谢TA
    0 引用 25
    君君要上天 你可以看下服务端是怎么处理这个参数的。

    找到了 谢谢君君带我上天 grinning

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 26

  • Emma 3月前
    感谢TA
    0 引用 27

    我有个上传多图的页面 要在回显的图片下面删除旁边添加一个功能按钮 如果添加到require-upload.js 里 页面所有带上传的功能都会有这个按钮 我需要复制一个require-upload.js 再里面更改 可是我不知道如何在这个需要的页面单独调用 这个页面叫editchapter.html
    editchapter: function () {

            require(['require-uploads'], function(RequireUploads){ });
            Controller.api.bindevent();
        },

    这样调用不管用 希望回复

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 28

    require-backend.js已经用config给require-upload配置了别名叫upload:
    深度截图_选择区域_20180904111826.png
    所以:

    define(['upload'], function(RequireUploads){ });
            Controller.api.bindevent();
        },
    最后于 3月前 被君君要上天编辑
  • beking00700 3月前
    感谢TA
    0 引用 29

    学习了,豁然开朗

  • 君君要上天 楼主 3月前
    感谢TA
    0 引用 30

  • Moran丶佳哥 3月前
    感谢TA
    0 引用 31

    顶,慢慢看,慢慢学了只能。

  • F4NNIU 打赏 3月前
    感谢TA
    0 引用 32

    已经设置为精华,感谢 @君君要上天

  • 2月前
    感谢TA
    0 引用 33

    很有用,看了之后思路更加清晰了。

  • 吃猫的鱼 13天前
    感谢TA
    0 引用 34
    君君要上天 我去。感觉白写了。

    感觉只要写出怎么做,如何做能加载上就可以了
    看了好几遍,还是搞不懂的

  • Kernel 12天前
    感谢TA
    0 引用 35

    和之前用的 seajs 思路基本一致,楼主用 PHP 来解释更通俗移动,很赞!thumbsup

  • F4NNIU 打赏 12天前
    感谢TA
    0 引用 36

    这么好的帖子,怎么就我一个人打赏呢?

  • l715715 5天前
    感谢TA
    0 引用 37

    1

  • likeni 5天前
    感谢TA
    0 引用 38

    哈哈哈哈哈哈哈哈,看不懂

  • 未登录
    41
返回