-
Notifications
You must be signed in to change notification settings - Fork 10
Expand file tree
/
Copy pathdocument.html
More file actions
executable file
·522 lines (475 loc) · 26.8 KB
/
document.html
File metadata and controls
executable file
·522 lines (475 loc) · 26.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>Open JQuery Components Library - 项目说明文档 - suches</title>
<style>
body{
margin: 20px 20px;
font: 14px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif!important;
}
.cclear{zoom:1;}
.cclear:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
.xwrap{
}
#treeBox{
position: fixed;
top: 0px;
}
.xleft{
overflow: auto;
float: left;
margin-right: 40px;
min-width: 240px;
width: auto!important;
width: 240px;
}
.xright{
text-align: left;
width: auto;
margin-left: 240px;
}
dt {
font-weight: bold;
margin: 10px 0;
}
dd {
word-wrap: break-word;
word-break: break-all;
}
xmp, code {
display: block;
}
code{
margin: 5px 5px 5px 40px;
}
ol > li{
margin: 5px auto;
}
</style>
<link href='comps/Panel/res/default/style.css' rel='stylesheet' />
<link href='comps/Tips/res/default/style.css' rel='stylesheet' />
<link href='comps/Tree/res/default/style.css' rel='stylesheet' />
<script src="./lib.js"></script>
<script src="./config.js"></script>
<script>
JC.debug = true;
requirejs( [ 'JC.Tree' ], function(){
var treeData = {
data:
{
"1":[
["111","项目愿景"]
,["222","文档和资源链接"]
,["333","如何获取最新发布版本"]
,["444","如何使用"]
,["555","组件库结构说明"]
,["666","面向开发者的结构说明"]
,["351","编码规范和注释规范"]
,["888","如何协作开发"]
,["999","如何发布资源"]
,["777","开发需求"]
,["151","沟通讨论"]
,["251","开发者名单"]
]
}
, root: ["1",'JC Project 项目说明文档']
};
var _tree = new JC.Tree( $('#treeBox'), treeData );
_tree.on('change', function( _evt ){
var _p = $(this);
JC.log( 'tree click:', _p.html(), _p.attr('dataid'), _p.attr('dataname') );
});
_tree.on('RenderLabel', function( _data ){
var _p = $(this);
_p.html( printf('<a href="#part_{0}">{1}</a>', _data[0], _data[1] ) );
});
_tree.init();
_tree.open();
if( /jc2.openjavascript.org/.test( location.href ) ){
$('p.js_jcSiteLink').hide();
}
});
</script>
</head>
<body>
<div class='xwrap cclear'>
<div class='xleft'>
<div id='treeBox'></div>
</div>
<div class='xright'>
<dl>
<dt><a name='part_1'><h1>Open JQuery Components Library</h1></a></dt>
<dd>
<dl>
<dt><h2><a name='part_111'></a>项目愿景</h2></dt>
<dd>
本项目的目标是建立一套 <b>易于使用、功能齐全、编码规范、接口规范</b> 的 jquery 组件库
</dd>
</dl>
<dl>
<dt><h2><a name='part_222'></a>文档和资源链接</h2></dt>
<dd>
<p><label>项目主页(git):</label> <a href="https://github.com/openjavascript/jquerycomps" target="_blank">https://github.com/openjavascript/jquerycomps</a></p>
<p class="js_jcSiteLink" style="display:none"><label>演示网站:</label> <a href="http://jc2.openjavascript.org/" target="_blank">http://jc2.openjavascript.org/</a></p>
<!--<p class="js_jcDocLink"><label>项目文档:</label> <a href="http://jc2.openjavascript.org/document.html" target="_blank">http://jc2.openjavascript.org/document.html</a></p>-->
<p><label>API文档:</label> <a href="http://jc2.openjavascript.org/docs_api/index.html" target="_blank">http://jc2.openjavascript.org/docs_api/index.html</a></p>
<p><label>API文档(本地):</label> <a href="docs_api/index.html" target="_blank">docs_api/index.html</a></p>
<!--
<p><label>演示网站(内网):</label> <a href="http://360.75team.com/~qiushaowei/jcjs/" target="_blank">http://360.75team.com/~qiushaowei/jcjs/</a></p>
<p><label>项目文档(内网):</label> <a href="http://360.75team.com/~qiushaowei/jcjs/document.html" target="_blank">http://360.75team.com/~qiushaowei/jcjs/document.html</a></p>
<p><label>API文档(内网):</label> <a href="http://360.75team.com/~qiushaowei/jcjs/docs_api/index.html" target="_blank">http://360.75team.com/~qiushaowei/jcjs/docs_api/index.html</a></p>
<p><label>SVN地址(内网):</label> <a href="https://portal.src.corp.qihoo.net/svn/AppDevFe/trunk/jquery" target="_blank">https://portal.src.corp.qihoo.net/svn/AppDevFe/trunk/jquery</a> </p>
-->
</dd>
</dl>
<dl>
<dt><h2><a name='part_333'></a>如何获取最新发布版本</h2></dt>
<dd>
<ol>
<li>
<label>使用 git 客户端获取:</label>
<code>git clone https://github.com/openjavascript/jquerycomps.git</code>
<b>如果发现 https clone 比较慢的话, 可以尝试一下 http</b>
<code>git clone http://github.com/openjavascript/jquerycomps</code>
</li>
<li>
<label>下载最新 zip 包:</label>
<code><a href="https://github.com/openjavascript/jquerycomps/archive/master.zip" target="_blank">https://github.com/openjavascript/jquerycomps/archive/master.zip</a></code>
</li>
<!--
<li>
<label>使用 svn 客户端获取(<b>内网</b>):</label>
<code>svn co https://portal.src.corp.qihoo.net/svn/AppDevFe/trunk/jquery</code>
</li>
-->
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_444'></a>如何使用</h2></dt>
<dd>
<ol>
<li>
<dl>
<dt>加载 jquery 1.9.1 && JC 资源管理器</dt>
<dd><xmp>
<script src="./lib.js"></script>
<script src="./config.js"></script>
<script>
//声明组件库所在路径, 这个属性组件库加载时会自动识别， 如无特殊需求不需要显式声明
//JC.PATH = '/jcjs/';
JC.debug = true; //是否显示调试信息
requirejs( [ 'JC.Calendar', 'JC.Valid', 'JC.Panel' ], function(){ //导入常用组件
//在这里可以开始使用导入的组件
});
</script>
</xmp>
</dd>
</dl>
</li>
<li>
<dl>
<dt>JC.use 资源管理器的使用</dt>
<dd>
<p><label>本地演示:</label> <a href="_demo" target="_blank">_demo</a></p>
<p><label>公网演示:</label> <a href="http://jc2.openjavascript.org/_demo" target="_blank">http://jc2.openjavascript.org/_demo</a></p>
<p><label>内网演示:</label> <a href="http://360.75team.com/~qiushaowei/jcjs/_demo" target="_blank">http://360.75team.com/~qiushaowei/jcjs/_demo</a></p>
</dd>
</dl>
</li>
<li>
<dl>
<dt>组件的使用请查看 API 文档</dt>
<dd>
<p><label>本地文档:</label> <a href="docs_api/index.html" target="_blank">docs_api/index.html</a></p>
<p><label>公网文档:</label> <a href="http://jc2.openjavascript.org/docs_api/index.html" target="_blank">http://jc2.openjavascript.org/docs_api/index.html</a></p>
<p><label>内网文档:</label> <a href="http://360.75team.com/~qiushaowei/jcjs/docs_api/index.html" target="_blank">http://360.75team.com/~qiushaowei/jcjs/docs_api/index.html</a></p>
</dd>
</dl>
</li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_555'></a>组件库结构说明</h2></dt>
<dd>
<pre>
library root //组件库所在目录
├── document.html //本说明文档
├── lib.js //lib.js = jquery.js + common.js + JC.js
├── jquery.js //jquery 1.9.1
├── common.js //一些通用函数，组件中用到的函数如果出现在多个地方，可以考虑转移到这里
├── JC.js //JC 资源控制器
├── _demo //JC 资源控制器 使用例子
├── docs_api //JC 组件库 API 文档
├── comps //comps 目录存放由JC Project开发人员开发的jquery组件
│ ├── Calendar //日历组件
│ ├── Form //表单常用功能组件
│ ├── LunarCalendar //农历日历组件
│ ├── Panel //弹框组件( JC.Panel, JC.alert, JC.confirm, JC.Dialog, JC.Dialog.alert, JC.Dialog.config );
│ ├── Tab //Tab组件
│ ├── ExampleClass //测试组件, 新建组件时，直接拷贝这个目录变更一个名字
│ ├── Tips //Tips组件
│ ├── Tree //树菜单组件
│ └── Valid //表单验证组件
├── plugins //这个目录存放一些常用的第三方脚本
│ ├── base64.js
│ ├── jquery.form.js
│ ├── json2.js
│ ├── md5.js
│ ├── rate
│ └── swfobject.js
├── widgets //这个目录存放一些HTML小部件
│ └── IframeUpload
└── tools //这个目录存放一些有用的工具
├── generate_api_docs.sh //生成API文档shell
├── node_remove_View_Model.js //nodejs API 文档过滤脚本
└── php //PHP 工具，列目录用
</pre>
</dd>
</dl>
<dl>
<dt><h2><a name='part_666'></a>面向开发者的结构说明</h2></dt>
<dd>
<p>源码托管使用 git, 项目主页: <a target="_blank" href="https://github.com/openjavascript/jquerycomps">https://github.com/openjavascript/jquerycomps</a></p>
<h3>目前 git 上面有三个主要分支:</h3>
<ol>
<li>master 分支，这是主分支，发布新组件都应该提交到 master分支,
<br /><a target="_blank" href="https://github.com/openjavascript/jquerycomps">https://github.com/openjavascript/jquerycomps</a></li>
<li>master_compressed 分支， 这个分支与master分支的内容保持一致，唯一不同之处就是这个分支的所有源码都是经过压缩的,
<br /><a target="_blank" href="https://github.com/openjavascript/jquerycomps/tree/compressed">https://github.com/openjavascript/jquerycomps/tree/compressed</a></li>
<li>dev 分支， 这个分支是 qiushaowei的开发分支，dev 分支开发完的组件都会提交到 master 分支
<br /><a target="_blank" href="https://github.com/openjavascript/jquerycomps/tree/dev">https://github.com/openjavascript/jquerycomps/tree/dev</a></li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_351'></a>编码规范和注释规范</h2></dt>
<dd>
<ol>
<li>
<label>javascript 编码规范 以 dojo 为准:</label>
<p><a target="_blank" href="http://dojotoolkit.org/reference-guide/1.9/developer/styleguide.html">http://dojotoolkit.org/reference-guide/1.9/developer/styleguide.html</a></p>
</li>
<li>
<label>javascript 注释规范以 YUIDoc 为准:</label>
<p><a target="_blank" href="http://yui.github.io/yuidoc/syntax/index.html">http://yui.github.io/yuidoc/syntax/index.html</a></p>
<p><b>写注释时请务必按照YUIDoc规范书写, API文档是从注释里直接生成的~</b></p>
</li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_888'></a>如何协作开发</h2></dt>
<dd>
<ol>
<li>
你需要注册一个 github 的帐户, 到这里注册: <a target="_blank" href="https://github.com/">https://github.com/</a>
</li>
<li>
下载对应操作系统的 git 客户端
<ol>
<li>
<h3>windows 系统</h3>
<p>推荐使用: TortoiseGit <a href="https://code.google.com/p/tortoisegit/">https://code.google.com/p/tortoisegit/</a> </p>
<p>或者到 github 官网下载官方客户端</p>
</li>
<li>
<h3>其他操作系统</h3>
<p>不用windows的同学自己会知道怎么弄的~</p>
</li>
</ol>
</li>
<li>
<p>从开发人员列表中找到 <a href="#qiushaowei">qiushaowei</a> 的联系方式~ 告知你的github用户名</p>
<p>然后 <a href="#qiushaowei">qiushaowei</a> 会把你加入到开发人员列表中</p>
<p>在没有加入到开发人员名单之前, 你可以 clone 项目, 但是没有提交更改的权限</p>
</li>
<li>
<dl>
<dt>建立属于你自己的开发分支进行开发</dt>
<dd>
<ol>
<li>
<label>命令行方式建立分支:</label>
<br /><a target="_blank" href="https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches">https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches</a>
</li>
<li>
<label>TortoiseGit建立分支:</label>
<br /><a target="_blank" href="http://joelabrahamsson.com/remote-branches-with-tortoisegit/">http://joelabrahamsson.com/remote-branches-with-tortoisegit/</a>
</li>
</ol>
<p>
<b>注意:</b> 你建立的分支应该是 master 的一个 copy, 不是 dev 的 copy
</p>
</dd>
</dl>
</li>
<li>
<h3>关于开发分类: 组件(comps), jquery 插件(plugins), 小部件(widgets)</h3>
<ol>
<li>
<dl>
<dt>如何开发组件(comps)</dt>
<dd><pre>
什么是组件?
组件在JC项目里是指那些需要 使用 new 关键字初始化的 应用.
组件应该存放在那个目录?
目前组件的存放目录规划位于 libpath/comps 目录
组件的基础结构?
每个组件都有自己的独立文件夹, 并且脚本名称大小写与文件夹保持一致
开始开发组件
请查看 libpath/comps/ExampleClass 目录, 这是个示例组件,
开发组件时可以直接copy ExampleClass 组件然后改一下文件和内容命名
Library/comsp/ExampleClass 示例组件
├── _demo 效果演示
│ ├── index.php 列目录资源的PHP
│ └── simple_demo.html 演示默认例子
├── index.php 列目录资源的PHP
├── res 资源目录, 这个目录规划是可以各种themes, 每个 themes有自己对象的目录
│ └── default 默认 themes
│ ├── style.css
│ └── style.html
└── ExampleClass.js 组件的js脚本, 命名应该与组件目录大小写保持一致
</pre>
</dd>
</dl>
</li>
<li>
<dl>
<dt>如何开发jquery插件(plugins)</dt>
<dd><pre>
什么是jquery插件?
jquery插件在JC项目里是指那些 扩展 jquery 对象的应用
jquery插件应该存放在那个目录?
目前jquery插件的存放目录规划位于 libpath/plugins
jquery插件的基础结构?
jquery 插件可以是独立的一个脚本, 或者是带有自己的文件夹
example:
libpath/plugins/json2.js
libpath/plugins/rate/rate.js
jquery插件的开发规范请见官方文档:
<a target="_blank" href="http://learn.jquery.com/plugins/basic-plugin-creation/">http://learn.jquery.com/plugins/basic-plugin-creation/</a>
</pre>
</dd>
</dl>
</li>
<li>
<dl>
<dt>如何开发小部件(widgets)</dt>
<dd><pre>
什么是小部件?
小部件在JC项目里是指那些不是 jquery组件 也不是 jquery插件的应用
比如目前小部件里的 IframeUpload
BaiduEditor, FCKEditor, swfupload 也可以归类到 小部件里
那到底什么是小部件?
简单的说法就是用 javascript写的小工具, 但不限于 javascript小工具~
也可以是其他语言写的小工具~ 比如 as, java~
小部件应该存放在那个目录?
目前小部件的存放目录规划位于 libpath/widgets
</pre>
</dd>
</dl>
</li>
</ol>
</li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_999'></a>如何发布资源</h2></dt>
<dd>
<h3>当你写了一个组件想发布的时候应该怎么办?</h3>
<ol>
<li>
为了保证项目的质量, 要发布组件的时候请对组件进行一次全面的review, 测试一下各种应用场景看看有没有不可预知的bug~
<br />通常测试的场景越多总会发现各种奇怪的bug~
</li>
<li>
注释也是必不可少的~
<br />目前 API 文档是使用 YUIDoc 从注释里生成的
<br />所以<b>注释务必写详细点</b>
</li>
<li>
在你自己的专属分支里生成 API 文档, 看看文档效果是否符合预期
<p>生成文档需要的运行环境: nodejs, yuidocjs(nodejs plugin)</p>
<ol>
<li>
<dl>
<dt>linux 系统</dt>
<dd><pre>
cd libpath/tools
sh generate_api_docs.sh
</pre></dd>
</dl>
</li>
<li>
<dl>
<dt>windows 系统</dt>
<dd><pre>
cd libpath/tools
generate_api_docs.sh
</pre></dd>
</dl>
</li>
<li>
生成文档的默认识别路径是 libpath/*
<p>生成后的文档存放在 libpath/docs_api</p>
</li>
</ol>
</li>
<li><pre>
确保一切无误后, 把要发布的组件 copy到master分支里
当前的开发分支不是master分支, 怎么 copy到master分支里?
最简单的方法就是用 git clone 获取一个新的 master分支
如果你已经获取过一个 master分支, 记得先 git pull origin master 更新一下 master分支
然后在master分支里运行一下 文档生成脚本~
再次检查一下文档和代码是否正常
没有问题当然就是提交更改了~
</pre></li>
</ol>
<h3>注意: 开发组件的时候应该在自己的专属分支里进行, 发布的时候再单独合并到 master 主干</h3>
</dd>
</dl>
<dl>
<dt><h2><a name='part_777'></a>开发需求</h2></dt>
<dd>
<ol>
<li>
<label>开发需求:</label>
<a target="_blank" href="./tools/开发需求.txt">./tools/开发需求.txt</a>
</li>
<li>
<label>内网需求链接:</label>
<a target="_blank" href="http://add.corp.qihoo.net/pages/viewpage.action?pageId=8036850">http://add.corp.qihoo.net/pages/viewpage.action?pageId=8036850</a>
</li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_151'></a>沟通讨论</h2></dt>
<dd>
<ol>
<li><label>飞信群:</label> <b>81514206</b> </li>
<li><label>QQ群:</label> <b>67024282</b> </li>
<li><label>问题反馈邮箱:</label> jc#openjavascript.org</li>
</ol>
</dd>
</dl>
<dl>
<dt><h2><a name='part_251'></a>开发者名单</h2></dt>
<dd>
<ol>
<li><a name="qiushaowei"></a><label>qiushaowei:</label> 908202921(qq), 133382778(飞信), suches#btbtd.org, <a href='http://btbtd.org' target='_blank'>http://btbtd.org</a> </li>
<li><a name="windy"></a><label>windy:</label> 神秘小王子~ </li>
</ol>
</dd>
</dl>
</dd>
</dl>
</div>
</div>
<[email protected] @20130718-->
</body>
</html>