FastAdmin中RequireJs是如何调用的

简介: FastAdmin中RequireJs是如何调用的

模块化


  1. Fastadmin中的js文件是通过RequireJs模块化工具来引入和调用的,每个控制器都对应一个js模块,控制器名称和js中模块名称是一一对应的 。
  2. 因此要引入JS文件,需要在index.html页面使用script标签引入require.js框架文件,并指定data-main属性为自己的JS的总入口文件。然后浏览器就会加载require.js,而requirejs会帮我们自动加载main.js。
1. <!-- data-main是script标签里的一个属性,用来指定require.js加载的第一个js文件,也就是总入口文件。这个属性可以让require.js知道项目的根路径,也可以在这个文件中定义需要加载的其他模块和回调函数;表示require.js会先加载/public/assets/js/my.js文件,并把/public/assets/js/作为根路径。 -->
2. <script src="/public/assets/js/require.js" data-main="/public/assets/js/backend/auth/admin"></script>

项目的入口js就是require-backend.js

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


  • 引用第三方库
  1. 然后在my.js文件中配置各个模块的路径和依赖关系,并使用require函数加载需要的模块
1. require.config({      //:调用RequireJS的配置方法,用于设置模块加载器的相关参数。
2. baseUrl: "/public/assets/js/",      //设置模块的基准路径,用于加载模块的资源文件。
3. paths: {      //设置模块的路径别名,用于在模块中引用其他模块的时候使用。
4. 'jquery': 'jquery.min',      //将jquery模块设置为jquery.min文件。
5. 'bootstrap': 'bootstrap.min',  //将bootstrap模块设置为bootstrap.min文件。
6. 'backend': 'backend'      //将backend模块设置为backend文件。
7.     },
8. shim: {  //设置非AMD规范的模块和依赖关系之间的转换关系。
9. 'bootstrap': ['jquery']  //将bootstrap模块和jquery模块之间建立依赖关系,表示在加载bootstrap模块之前需要先加载jquery模块。
10.     },
11.     charset: 'utf-8' // 文件编码
12. });
13. require(['jquery', 'bootstrap', 'backend'], function ($, undefined, Backend) {
14.     回调函数
15. function hello() {
16. console.log('一天吃十斤水蜜桃!');
17.     }
18. hello()
19. });
  1. AMD (Asynchronous Module Definition) 是一种 JavaScript 模块化规范,它要求模块必须按照一定的格式编写,包括使用 define 函数定义模块、使用 require 函数引入模块等。而有些库或插件并不符合 AMD 规范,它们可能是以全局变量的形式暴露出来的,或者是依赖于其他全局变量。在这种情况下,我们需要使用 RequireJS 提供的 shim 配置选项来表示模块之间的依赖关系
  2. config中paths用来配置支持AMD规范的库和js文件,shim是用来配不支持AMD规范的js。配好之后,假设现在要使用jquery和bootstrap,只要用require方法:
1. require(['jquery', 'bootstrap'], function ($, undefined) {
2. //该function将在引入jquery和bootstrap完成之后执行。
3. });
  • 引用自己写的js
  • 在fastadmin中,我们并没有使用config配置我们自己写的js,如后台某个类增改查方法所在的js文件,是不是很好奇是怎么被调用到的?
  • 前面说了requirejs是模块化工具,要使用我们自己定义的js,首先得用模块化的方式编写我们的js,使用define定义一个模块:
1. //define有三个参数,第一个是模块名(可以不写,默认与模块名与文件名同名),第二个是当前模块依赖的其他模块,第三个是一个function,模块体,要求必须return一个数据
2. define('modelname',['jquery','xxx'], function ($,xxx) {
3. 
4. var Controller = {
5. index: function () {
6. 
7.         },
8. add: function () {
9. 
10.         },
11. edit: function () {
12. 
13.         }
14.     };
15. return Controller;
16. });
  • 那么index,add,edit等页面对应的js代码是如何被执行的?查看require-backend.js文件

  • 其中,require() 函数用于加载模块,第一个参数是一个数组,用于指定要加载的模块的名称或路径;第二个参数是一个回调函数,在指定的模块都加载完成后执行,将加载的模块作为参数传递给回调函数。在加载模块的过程中,如果出现错误,则会执行第三个参数指定的回调函数,可以在该回调函数中进行错误处理。
  • 初始化这段代码主要是异步加载 fast 模块,将其作为回调函数 Fast 的参数。
  • 在 fast 模块加载完成后,异步加载 backend、backend-init 和 addons 模块,将它们作为回调函数 Backend、undefined 和 Addons 的参数。
  • 判断 Config.jsname 是否存在,如果存在则异步加载指定模块(Config.jsname)并执行其中的指定函数(Config.actionname),如果模块中存在该函数,则执行该函数,否则执行模块中的 _empty() 函数。如果加载模块出错,则会在控制台输出错误信息。
  • 如果 Config.jsname 不存在,则不执行任何操作。
  • 通过Ajax无刷新技术与控制器进行数据交互

通过Ajax无刷新技术与控制器进行数据交互


  • fastadmin中的js文件可以通过Ajax无刷新技术与控制器进行数据交互,也可以通过Fast.api.open方法打开一个新窗口并传递参数给控制器
1. //在js文件中定义一个Ajax请求
2. $.ajax({
3. url: "index.php/admin/index/test", //请求的控制器地址
4. type: "post", //请求的方式
5. data: {name: "张三", age: 18}, //请求的参数
6. dataType: "json", //返回的数据类型
7. success: function (data) { //请求成功的回调函数
8. console.log(data); //打印返回的数据
9.     },
10. error: function (xhr) { //请求失败的回调函数
11. console.log(xhr); //打印错误信息
12.     }
13. });
14. //在控制器中接收参数并返回数据
15. public function test()
16. {
17.     $name = $this->request->post('name'); //获取name参数
18.     $age = $this->request->post('age'); //获取age参数
19. return json(['status' => 'success', 'message' => 'Hello, ' . $name . ', you are ' . $age . ' years old.']); //返回json格式的数据
20. }
  • 通过Fast.api.open方法打开一个新窗口并传递参数给控制器
1. //在js文件中定义一个Fast.api.open方法,打开一个新窗口,并传递id参数给控制器
2. Fast.api.open("index.php/admin/index/detail?id=" + row.id, "详情");
3. //在控制器中接收参数并渲染视图
4. public function detail()
5. {
6.     $id = $this->request->get('id'); //获取id参数
7.     $row = Db::name('user')->where('id', $id)->find(); //根据id查询用户信息
8. if (!$row) {
9.         $this->error(__('No Results were found'));
10.     }
11.     $this->view->assign("row", $row); //将用户信息分配给视图变量row 
12. return $this->view->fetch(); //渲染视图detail.html,并显示用户信息 
13. }
相关文章
|
3月前
|
移动开发 JavaScript 应用服务中间件
Taro——H5项目如何修改静态文件入口
这里我们说两种情况,一种是在静态资源引入的时候加入前缀,另一种是真正的将静态资源输出到指定的目录下。
81 2
|
3月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
3月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
46 1
|
6月前
|
JavaScript
fastadmin js里获取后端传的参数
fastadmin js里获取后端传的参数
145 0
|
中间件
一文带你弄懂nest.js文件上传
一文带你弄懂nest.js文件上传
|
JavaScript 安全 前端开发
JS禁止查看网页源代码的简单实现方法
JS禁止查看网页源代码的简单实现方法
782 0
|
JavaScript 索引
js中数组多种方法总结(很全哦)
js中数组多种方法总结(很全哦)
|
自然语言处理 JavaScript 前端开发
JS中的依赖注入 — 在测试中未使用过的最佳工具
让我来为大家介绍在测试中最好的朋友。
JS中的依赖注入 — 在测试中未使用过的最佳工具
|
存储 Serverless 数据库
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
339 0
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
|
JavaScript 前端开发 数据安全/隐私保护
JavaScript外部调用Js(自己理解加参考百度)
是重点 通过HTML的script标签加载JavaScript文件 一般非关键的js文件都是放在网页底部即,标签前面 其他的比较重要的放在中 qwe.js文件内容 function sayScript() { alert("士大夫"); } sayScript(); JavaScript文件外部加载的好处: 避免使用 避免使用CDATA。
1309 0