如何在FastAdmin中加载第三方JS插件或自己编写插件?

Karson 4月前 1576

FastAdmin基于RequireJS进行前端JS模块的管理,因此如果我们需要再引入第三方JS插件,则必按照RequireJS的规则进行载入。如果你还不了解什么是RequireJS,可以先简单了解下RequireJS,相关链接:http://www.ruanyifeng.com/blog/2012/11/require_js.html

加载第三方JS插件

如果需要在FastAdmin载入第三方插件,我们必须修改

前台 require-frontend.jsfrontend-init.js
后台 require-backend.jsbackend-init.js
对应的文件,定义插件的名称和依赖。
这里我们以huebee这个插件(https://github.com/metafizzy/huebee )为示例来引入

首先我们看huebee这个插件介绍可以通过bower install huebee --save进行一键安装,安装成功后我们可以在public/assets/libs/huebee找到下载的源代码。

通过简单阅读huebee这个插件的源代码的首尾部分可以看到它是支持直接使用RequireJS进行载入的。鉴别办法是看源代码首尾是否有如下相似代码:

  /* jshint strict: false */ /* globals define, module, window */
  if ( typeof define == 'function' && define.amd ) {
    // AMD - RequireJS
    define( 'ev-emitter/ev-emitter',factory );
  } else if ( typeof module == 'object' && module.exports ) {
    // CommonJS - Browserify, Webpack
    module.exports = factory();
  } else {
    // Browser globals
    global.EvEmitter = factory();
  }

如果采用AMD规则支持RequireJS,则我们可以直接使用require(['/public/assets/libs/huebee/huebee.pkgd.min'])这样进行使用,但是这种写法体验极差,而且产生目录问题。因此接下来我们在backend-init.js中添加如下代码进行定义:

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'huebee': '../libs/huebee/dist/huebee.pkgd.min',
        },
        shim: {
            'huebee': {
                deps: [
                    'jquery',
                    'css!../libs/huebee/dist/huebee.min.css'
                ],
            },
        }
    });
});

首尾两行是backend-init.js中自带的,重点是require.config这部分。
其中paths是定义huebee这个名称对应的路径。后续我们使用时则可以直接采用require(['huebee'])进行引入
下方的shim是依赖配置,我们定义huebee它的依赖为jquery和一个CSS文件。如果插件没有依赖,则可以不写此部分。

如果一个第三方插件没有采用AMD规范编写,则我们需要先定义它的特性后再进行使用,比如我们FastAdmin中使用的plupload上传插件(https://github.com/moxiecode/plupload ),则我们需要在定义它的特性和依赖,代码如下:

    require.config({
        paths: {
            'plupload': '../libs/plupload/js/plupload.min',
        },
        shim: {
            'plupload': {
                deps: [
                    deps: ['../libs/plupload/js/moxie.min'],
                    exports: "plupload"
                ],
            },
        }
    });

exports这个为输出的变量名,表示在模块外部调用时返回的值,比如

require(['plupload'], function(Up){
    //这里的Up的值就是plupload这个变量的值
});

加载自定义模块或插件

上面介绍了加载第三方插件的方法,如果我们需要编写自己的模块,然后使用RequireJS进行载入,那又该如何操作呢?
其实在FastAdmin中有大量的自定义模块,比如require-upload.jsrequire-form.jsaddons.js等等这些都是我们自定义的模块,自定义模块可以直接添加一个JS文件到/public/assets/js/目录下,比如我们添加一个test.js文件,然后它的内容是:

define(['plupload'], function(Up){
   var Obj = {
      name:"testname"
   };
   return Obj;
});

define表示定义,第一个参数表示依赖的插件。然后我们就可以在其它任何模块中调用这个test模块了,比如:

require(['test'], function(Test){
    //此时Test.name的值为:testname
    alert(Test.name);
});

自定义模块对于第三方插件一个比较大的区别,就是我们不需要require.config去定义插件名称或依赖,直接使用即可。

特别注意的是,如果我们修改了require-backend.jsbackend-init.js文件,在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件
最后于 4月前 被Karson编辑
感谢以下的小伙的赞赏支持
最新回复 (4)
  • Moyang 4月前
    感谢TA
    0 引用 2

    感谢分享,之前对require.js一无所知,用了框架后,大概明白它的原理,今天通过大佬分享的文章,对require.js有了更深的理解了。

  • 哼哼哈嗨 3月前
    感谢TA
    0 引用 3

    @Karson 老大,请问下,我的fast里面还没有backend-init.js,那么我是不是只能模仿require-backend.js中的方式进行引入?

    最后于 3月前 被哼哼哈嗨编辑
  • 千鸟 15天前
    感谢TA
    0 引用 4

    自定义模块对于第三方插件一个比较大的区别,就是我们不需要require.config去定义插件名称或依赖,直接使用即可。

    我测试发现自定义模块或插件不会自动加载

    最后于 15天前 被千鸟编辑
  • Jay_Jay 9天前
    感谢TA
    0 引用 5

    火钳刘明,留下脚印,顺便收藏

  • 未登录
    6
返回