FastAdmin引入自定义JS
FastAdmin引入自定义JS
1.模块化
一般我们引入js是这样:
1 | <script type="text/javascript" src="a.js"></script> |
RequireJs是模块化工具,每一个我们自己的js文件或者库都可以看成是一个模块,按需引入。
它是这样写的:
1 | <script data-main="js/main" src="js/require.js"></script> |
src是引入requrejs框架文件,data-main是我们自己的js的总入口。js/main
对应的js文件是js/main.js
(可自行命名)
引用第三方库
使用requre.config({})
配置模块,如:
1 | require.config({ |
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定义一个模块:
1 | define('modelname',['jquery','xxx'], function ($,xxx) { |
define有三个参数,第一个是模块名(可以不写,默认与模块名与文件名同名),第二个是当前模块依赖的其他模块,第三个是一个function,模块体,要求必须return一个数据。
在这里我们return了hehe这个对象,这个对象中定义了好几个function,不信你瞅瞅fastadmin里面的js是不是都是这样写的。
等价代码
1 | require jquery.php |
那么我们在其他地方就可以使用这个模块:
1 | require(['jquery', 'hehe'], function ($, hehe) { |
这段代码如果也用php的思维来理解,你可以看作是:
1 | require jquery.php; |
require-backend.js
总结
- 自定义js,要使用define,并在function体中return
- 调用其他js,使用require(),并在function体中编写业务代码
- require-backend.js中根据当前控制器名和方法名自动帮我们调用了对应的js文件和其中的方法
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 FadeAway Space!
评论