Skip to content

Commit 2a7f567

Browse files
committed
Merge remote-tracking branch 'avalon.oniui/master'
Conflicts: fileuploader/avalon.fileuploader.js fileuploader/inputproxy.js layout/avalon.layout.doc.html
2 parents 6d80c4c + ea58f4c commit 2a7f567

File tree

397 files changed

+94313
-9684
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

397 files changed

+94313
-9684
lines changed

README.md

+96
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,102 @@ avalon.oniui
155155
license
156156
==========================
157157
MIT
158+
159+
如何打包
160+
==========================
161+
比如这是你们的业务页面
162+
```html
163+
<!DOCTYPE html>
164+
<html>
165+
<head>
166+
<title>TODO supply a title</title>
167+
<meta charset="UTF-8">
168+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
169+
<script src="require.js" data-main="main-built"></script>
170+
171+
</head>
172+
<body>
173+
<div ms-controller="demo">
174+
<input ms-widget="datepicker"/>
175+
</div>
176+
</body>
177+
</html>
178+
179+
```
180+
它依赖于require.js,data-main的值main-built是你们上线后的JS文件(这里去掉后缀名js)
181+
有main-built.js就有main.js
182+
main.js是你的入口文件,作用类似于C语言的main函数
183+
184+
你们到avalon项目将里面的[combo目录](https://github.com/RubyLouvre/avalon/tree/master/combo)搬到oniui目录下,里面有你们需要的各种工具
185+
比如我们的main.js是这样
186+
```javascript
187+
require([
188+
"avalon",
189+
"domReady!",
190+
"./tab/avalon.tab",
191+
"./pager/avalon.pager",
192+
"./datepicker/avalon.datepicker"
193+
], function (avalon) {
194+
avalon.log("domReady完成")
195+
var vm = avalon.define({$id: "demo"})
196+
avalon.scan(document.body, vm);
197+
//你们的业务代码
198+
})
199+
200+
```
201+
现在除了回调里面的代码是你们写的,其他都是oniui或avalon的文件,如果你们的同事又写一个业务代码,如
202+
```javascript
203+
//aaa.js
204+
require(["./dropdown/avalon.dropdown"], function(){
205+
//你们的业务代码
206+
})
207+
```
208+
那么上面的代码就变成
209+
```javascript
210+
require([
211+
"avalon",
212+
"domReady!",
213+
"./tab/avalon.tab",
214+
"./pager/avalon.pager",
215+
"./datepicker/avalon.datepicker"
216+
"./aaa"
217+
], function (avalon) {
218+
avalon.log("domReady完成")
219+
var vm = avalon.define({$id: "demo"})
220+
avalon.scan(document.body, vm);
221+
//你们的业务代码
222+
})
223+
224+
```
225+
显然,avalon是对应avalon.js,但由于我们是使用requirejs,那么我们就要用到[avalon.shim.js](https://github.com/RubyLouvre/avalon/tree/master/dist)(这个版本没有自带加载器)
226+
“domReady!”我们可以在combo文件夹下找到domReady.js,这是一个requirejs插件。avalon.tab又是什么呢,聪明的你们应该能
227+
猜到这应该是一个快捷方式,用于在某个地方对应我们的实际JS文件。
228+
229+
嗯,下面就是我们打包的重点,建议一个build.js
230+
```javascript
231+
({
232+
baseUrl: "./", //找到main.js文件的目录
233+
paths: {
234+
avalon: "./avalon.shim",
235+
text: "./combo/text", //由于分居两个目录,因此路径都需要处理一下
236+
css: "./combo/css",
237+
"css-builder": "./combo/css-builder",
238+
"normalize": "./combo/normalize",
239+
domReady: "./combo/domReady",
240+
},
241+
//optimize: "none",//如果要调试就不压缩
242+
name: "main", //如果从哪一个文件开始合并
243+
out: "./main-built.js" //确定要生成的文件路径及名字
244+
})
245+
246+
```
247+
然后将combo文件的require.js与r.js,然后命令行node r.js -o build.js,就生成main-built.js文件
248+
![image](https://cloud.githubusercontent.com/assets/190846/8647486/eb41a380-298a-11e5-9ed3-4c6b746ca0d4.png)
249+
250+
详细教程还是需要到[官网](http://avalonjs.github.io/#zh/engineering/loader.rjs.html)去看
251+
252+
253+
158254
如何为OniUI贡献一套新的皮肤
159255
==========================
160256
<b>chameleon</b>是OniUI的皮肤生成系统,基于sass的compass框架改写而成.

0 commit comments

Comments
 (0)