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 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
电子专业推荐信范文
2013/11/18 职场文书
个人银行贷款担保书
2014/04/01 职场文书
2014年防汛工作总结
2014/12/08 职场文书
工伤调解协议书
2016/03/21 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Golang 入门 之url 包
2022/05/04 Golang
Moment的feature导致线上bug解决分析
2022/09/23 Javascript