1分钟带你入门RequireJs并了解FastAdmin中JS是如何调用的
发布于 2018-08-25 22:22:57使用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老大帮我们调用了：
所以我们只需写好对应的js文件，Karson老大帮我们根据控制器名和方法名自动调用了对应的js文件和对应的js方法。
如何了解fastadmin中的requirejs
先看admin/view/common/script.html，你会发现项目的入口js就是require-backend.js
然后看require-backend.js，你会发现其中使用config配置了一些第三方模块。并在最后调用了当前控制器和方法对应的js
总结
- 自己写一个js，要使用define，并在function体中return
- 调用其他js，使用require(),并在function体中编写业务代码
- require-backend.js中根据当前控制器名和方法名自动帮我们调用了对应的js文件和其中的方法
PS:本帖只是带你简单入门requirejs，并了解fastadmin中是如何使用requirejs的，requirejs还有不少具体的配置细节需要大家自己阅读官方文档。
标签：jquery,function,require,bootstrap,js,FastAdmin,JS,hehe,RequireJs From： https://www.cnblogs.com/tomcat2022/p/16999691.html