首先讲一下,为什么要用require。
一般做网页,会引用多个js,例如:
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
这样加载的时候,浏览器会停止网页的渲染,js之间还有依赖关系,所以前后顺序必须保持一致,当依赖关系复杂了,代码很难维护。
require就是解决这个问题的, <script src="js/require.js" data-main="js/main"></script>,require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
定义一个模块的写法。
参考:city-picker.js
以系统自带的category.js为例,
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
这代表系统会先加载jquery,bootstrap,backend,table,form这几个模块,后面对应着引用模块时的名称。
bindevent这个函数一般用来绑定事件。
关于表单的事件,可以做require-form.js里面看到。
if ($(".datetimepicker", form).size() > 0) {
require(['bootstrap-datetimepicker'], function () {
var options = {
format: 'YYYY-MM-DD HH:mm:ss',
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-history',
clear: 'fa fa-trash',
close: 'fa fa-remove'
},
showTodayButton: true,
showClose: true
};
$('.datetimepicker', form).parent().css('position', 'relative');
$('.datetimepicker', form).datetimepicker(options);
});
}
一旦有文本框的样式,是
datetimepicker,那么动态加载日期选择模块。