fastadmin中调用js的方法


Posted in Javascript onMay 14, 2019

想要了解fastadmin中的js是怎么调用的,就应该先了解RequireJs。

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

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

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

 我们在写项目的时候肯定会用到一些js和js类库,那RequireJs是怎么引用的,下面来介绍一下,

引入第三方库:

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,首先得用模块化的方式编写我们的js,使用define定义一个模块:

define('modelname',['jquery','xxx'], function ($,xxx) {
 var hehe = {
  function1: function () {
  },
  function2: function () {
  },
  function3: function () {
  }
 };
 return hehe;
});

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

PS:下面看下Fastadmin里面的js运行原理

以category.js为例来,说明一下fastadmin里面js绑定事件的运行原理。

第一行,定义引用的组件

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
add: function () {
  Controller.api.bindevent();
},

这个代码,代表调用api对象的bindevent函数。函数定义如下:

bindevent: function () {
 $(document).on("change", "#c-type", function () {
  $("#c-pid option[data-type='all']").prop("selected", true);
  $("#c-pid option").removeClass("hide");
  $("#c-pid option[data-type!='" + $(this).val() + "'][data-type!='all']").addClass("hide");
  $("#c-pid").selectpicker("refresh");
 });    
 Form.api.bindevent($("form[role=form]"));
}

函数第一部分是绑定类别变动的事件。

第二部分是是绑定窗体时间。

绑定窗体的代码在/public/assets/js/require-form.js文件里面。

这里面定义了Form对象,在这里我们可以看到events事件。

里面包含validator,主要是做客户端验证。有了这个就等于自动绑定了form验证,验证规则自己定制。

selectpicker 主要用于select下拉选择。

此外还有selectpage、cxselect、citypicker、datetimepicker、plupload、faselect、fieldlist,此外可以自己定制。

总结

以上所述是小编给大家介绍的fastadmin中调用js的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
详解jenkins自动化部署vue
May 14 #Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 #Javascript
JavaScript如何实现元素全排列实例代码
May 14 #Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
php封装的smarty类完整实例
2016/10/19 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jqTransform美化表单
2015/10/10 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python装饰器知识点补充
2018/05/28 Python
python提取log文件内容并画出图表
2019/07/08 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Python实现微信表情包炸群功能
2021/01/28 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
模具专业推荐信
2013/10/30 职场文书
求职信模板怎么做
2014/01/26 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
商业门面租房协议书
2014/11/25 职场文书
防暑降温通知书
2015/04/27 职场文书
初中思想品德教学反思
2016/02/24 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python