模块化方法

传统引入资源方式

模块化简介

公共配置项

模块配置列表

应用示例

src同步调用

load异步调用

所谓模块化引入,即是把页面中需要外链的脚本(js)和样式(css),封装成组件化的规范,按需引入调用。模块化的引入方法,可以有效的控制公共路径和加载回调机制,加强前端组件版本规范的管理,提升页面初始化的效率,从而实现页面性能的最大优化。
模块化方法
传统引入资源方式

● 传统的引入js和css资源的方式是分别采用<script>标签和<link>标签。
● 这种方式不仅很难控制引入资源的公共路径,而且引入多项组件显得杂乱无序,只能依靠注释。
● 所有的资源引入都必须写在DOM元素中,页面初始化就加载了所有资源,复杂的页面性能堪忧。
● 每个页面都需要拷贝冗长的资源路径和标签,一旦改动,可谓牵一发而动全身。如下引入 datatable表格组件:

模块化简介

● Sweet UI中封装了一个十分轻量级的模块化方法wjRequire;
● 我们把页面中需要外链的脚本(js)和样式(css),封装成组件化的规范,按需引入调用。
● 模块化方法可以十分有效的控制公共路径。
● 模块化方法可以提供加载回调机制,代码有序执行。
● 我们提供了同步和异步引入资源两种方式。
● 加强了前端组件版本和规范的管理,提升页面初始化的效率和整体性能。

公共配置项

● 一般来讲,Sweet UI项目中会包含一个公共配置文件itemHead.js。
● 这个文件定义了公共的路径和一些其它配置。如下:

配置项(全局变量) 描述
itemName 项目名。如:/sweet
ajaxRoot ajax请求根目录,默认和项目名item相同。如:/sweet
folderName 根文件夹名。如:/sweet-ui
wjHost 服务器绝对路径+项目名。如:http://127.0.0.1:8000/sweet/
defaultTheme 默认主题。如:wj_theme4
wjRequire.src 同步引入资源
wjRequire.load 异步引入资源
模块配置列表

wjRequire模块化对象中整合了各项常用组件模块,引入十分简洁。

模块项目 描述
portletCreate portlet区域元素组件
tabCreate 选项卡组件
modalCreate 模态框组件
wdatePicker 日期组件
dataTables 表格组件
ejectTable 弹出(下拉)表格
formCreate 表单组件
validations 表单校验套件
pageWidget hot 页面生成组件
noticeWindow 系统通知列表
taskWindow 工作流
应用示例
src同步调用

wjRequire对象封装了一个src方法。
● 该方法是和document文档流同步的,只能在页面初始化的时候使用,且不支持回调。
wjRequire.src方法必须在一个独立的script标签里。如下:

wjRequire.src方法引入多项组件,可以传递一个数组。如下:

wjRequire.src方法可以传入一个Object类型的参数,引入自定义文件。如下:

load异步调用

wjRequire对象封装了一个load方法,参数与src方法一致。
● 该方法是异步载入资源,支持回调方法。
● 该方法既可以在页面初始化调用,也可以在js代码中动态调用。如下:

wjRequire.load方法也支持传入数组哦。如下: