第3.1.2章 WEB系统最佳实践 js控件之requirejs的使用
2016-11-07 13:39
621 查看
requirejs配置说明参考RequireJS进阶:配置文件的学习,requirejs官网
这里简单描述一下css的异步加载用到了下面的js。
require css
requirejs.config({ baseUrl:ctxResources+'/pages/modules', urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 // urlArgs:'v=2016122104', paths:{ jquery:["../../plugins/jquery/jquery"], jdirk:["../../plugins/jquery/jquery.jdirk.min"], bootstrap:["../../plugins/bootstrap/dist/js/bootstrap.min"], validate:["../../plugins/bootstrapvalidator/js/bootstrapValidator"], validate_zh:['../../plugins/bootstrapvalidator/js/language/zh_CN'], toastr:["../../plugins/toastr/toastr.min"], md5:["../../plugins/udf/md5"], layer:["../../plugins/layer/layer"], spin:["../../plugins/ladda-bootstrap/dist/spin.min"], ladda:["../../plugins/ladda-bootstrap/dist/ladda"], template:["../../plugins/artTemplate/template"], slimscroll:["../../plugins/slimscroll/jquery.slimscroll.min"], bootstrap_table:["../../plugins/bootstrap-table/dist/bootstrap-table"], bootstrap_table_zh:["../../plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min"], bootstrap_table_edit:["../../plugins/bootstrap-table/dist/extensions/editable/bootstrap-table-editable"], editable:['../../plugins/bootstrap-table/dist/extensions/editable/bootstrap-editable'], constant:["../../plugins/udf/constant"], touchspin:["../../plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.min"], util:["../../plugins/udf/util"], chosen:["../../plugins/chosen/chosen.jquery.min"], dzmcombo:["../../plugins/udf/dzmcombo"], datepicker:["../../plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min"], datepicker_zh:["../../plugins/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min"], global:["../../plugins/udf/global"], jasny:["../../plugins/jasny-bootstrap/js/jasny-bootstrap.min"], bootstrap_switch:["../../plugins/bootstrap-switch/js/bootstrap-switch.min"], bootstrap_suggest:["../../plugins/bootstrap-suggest-plugin/bootstrap-suggest.min"], bootstrap_table_json:["../../plugins/bootstrap-table/dist/extensions/json/bootstrap-table-json"], ztree:["../../plugins/ztree/js/jquery.ztree.all"], }, shim:{ jdirk:{deps: ["jquery"],exports: 'jdirk'}, bootstrap: {deps: ["jquery"],exports: 'bootstrap'}, validate: {deps: ["jquery"],exports: 'validate'}, validate_zh:{deps: ["jquery","validate"],exports: 'validate_zh'}, toastr: {deps: ["jquery","css!../../plugins/toastr/toastr.min.css"],exports: "toastr"}, md5: {exports: 'md5'}, layer:{deps:["jquery","css!./../../plugins/layer/skin/layer.css"],exports:'layer'}, ladda:{deps:["spin","css!../../plugins/ladda-bootstrap/dist/ladda-themeless.min.css"],exports:"ladda"}, template:{exports:"template"}, slimscroll:{deps:["jquery"],exports:"slimscroll"}, bootstrap_table:{deps:["jquery"],exports:"bootstrap_table"}, bootstrap_table_zh:{deps:["jquery","bootstrap_table","css!../../plugins/bootstrap-table/dist/bootstrap-table.min.css"],exports:"bootstrap_table_zh"}, touchspin:{deps:["jquery","css!./../../plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css"]}, chosen:{deps:["jquery","css!./../../plugins/chosen/chosen.min.css"]}, datepicker:{deps:["jquery",'css!./../../plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css'],exports:"datepicker"}, datepicker_zh:{deps:["jquery","datepicker"],exports:"datepicker_zh"}, jasny:{deps:["jquery","css!./../../plugins/jasny-bootstrap/css/jasny-bootstrap.min.css"],exports:"jasny"}, bootstrap_switch:{deps:["jquery","css!./../../plugins/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css"],exports:"bootstrap_switch"}, bootstrap_suggest:{deps:["jquery"],exports:"bootstrap_suggest"}, bootstrap_table_json:{deps:["bootstrap_table_zh"],exports:"bootstrap_table_json"}, editable:{deps:["jquery"],exports:"editable"}, bootstrap_table_edit:{deps:["bootstrap_table_zh","editable","css!./../../plugins/bootstrap-table/dist/extensions/editable/bootstrap-editable.css"],exports:"bootstrap_table_edit"}, ztree:{deps:["jquery","css!./../../plugins/ztree/css/metroStyle/metroStyle.css"],exports:"ztree"} }, map:{ '*':{ css:'../../plugins/requirejs/css' } } }); require(['jquery','bootstrap','global','layer']);
这里简单描述一下css的异步加载用到了下面的js。
require css
相关文章推荐
- 第3.1.3章 WEB系统最佳实践 js控件之bootstrap-datepicker的使用
- 第3.1.1章 WEB系统最佳实践 js控件之slimScroll的使用
- 第3.1.7章 WEB系统最佳实践 js控件之bootstrap switch
- 第3.1.4章 WEB系统最佳实践 js控件之bootstrap-suggest-plugin
- 第3.1.5章 WEB系统最佳实践 js控件之Ladda
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
- 第2.1.3章 WEB系统最佳实践Spring文件配置之spring-dao.xml
- 轻量级单点登录系统最佳实践(八)——5.3. 企业门户系统系统演示SSOLab.Portal.WebApp
- Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性
- 第2.1章 WEB系统最佳实践Spring文件配置
- 使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统
- 第2.3章 WEB系统最佳实践属性配置
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
- iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用,屏蔽WebView的可选菜单
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
- 第2.1.1章 WEB系统最佳实践Spring文件配置之spring-cache.xml
- 使用activex、NPAPI插件实现web系统截屏(IE,chrome,firefox截屏控件、web截屏)
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- 轻量级单点登录系统最佳实践(四)——第3章 Web-SSO通常实现方式
- 第2.1.4章 WEB系统最佳实践Spring文件配置之spring-hessian-server.xml