-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
822 lines (760 loc) · 43 KB
/
index.html
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
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width">
<title>WeFramework</title>
<link rel="icon" href="img/battery.ico" />
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/xcode.css">
<script type="text/javascript" src="https://we.sdoprofile.com/common/js/release/loader.min.js"></script>
</head>
<body>
<div class="sidebar interface">
<a class="toc_title" href="">We Framework</a>
<ul class="toc_section">
<li>» <a target="_blank" href="https://we.sdoprofile.com/common/js/test">内部文档</a></li>
<li>» <a target="_blank" href="https://webenergy.github.io/introduction/">宣传页面</a></li>
<li>» <a target="_blank" href="https://github.com/webenergy/webenergy.github.io">Github地址</a></li>
</ul>
<a class="toc_title" href="#introduction">简介</a>
<a class="toc_title" href="#interface">接口描述</a>
<ul class="toc_section">
<li>- <a href="#$we.require">$we.require</a></li>
<li>- <a href="#$we.preload">$we.preload</a></li>
<li>- <a href="#$we.biz.use">$we.biz.use</a></li>
<li>- <a href="#$we.biz.announce">$we.biz.announce</a></li>
<li>- <a href="#$we.requireCss">$we.requireCss</a></li>
</ul>
<a class="toc_title" href="#module">模块说明</a>
<ul class="toc_section">
<li>- <a href="#Module-core">核心方法类模块</a></li>
<li>- <a href="#Module-widget">组件类模块</a></li>
<li>- <a href="#Module-process">业务流程模块</a></li>
<li>- <a href="#Module-coderunner">CodeRunner</a></li>
<li>- <a href="#Module-rsa">RSA加密模块</a></li>
<li>- <a href="#Module-dialog">对话框模块</a></li>
<li>- <a href="#Module-form">表单类模块</a></li>
<li>- <a href="#Module-datepicker">日期选择器模块</a></li>
<li>- <a href="#Module-pwdstrength">密码强度校验模块</a></li>
</ul>
<a class="toc_title" href="#array">Array</a>
<ul class="toc_section">
<li>- <a href="#Array-rand">rand 生成随机数组</a></li>
</ul>
<a class="toc_title" href="#cookie">Cookie</a>
<ul class="toc_section">
<li>- <a href="#Cookie-set">$.cookie 设置cookie</a></li>
<li>- <a href="#Cookie-remove">$.removeCookie 删除cookie</a></li>
</ul>
<a class="toc_title" href="#dom">Dom</a>
<ul class="toc_section">
<li>- <a href="#Dom-getEvent">getEvent 获取事件对象</a></li>
<li>- <a href="#Dom-getTarget">getTarget 获取对象</a></li>
<li>- <a href="#Dom-scrollTo">scrollTo 滚动至</a></li>
<li>- <a href="#Dom-imageLoaded">imageLoaded 等待图片加载</a></li>
</ul>
<a class="toc_title" href="#object">Object</a>
<ul class="toc_section">
<li>- <a href="#Object-merge">merge 合并对象</a></li>
<li>- <a href="#Object-getValue">getValue 根据路径获取对象</a></li>
</ul>
<a class="toc_title" href="#string">String</a>
<ul class="toc_section">
<li>- <a href="#String-getInt">getInt 获取字符串当中的数字</a></li>
<li>- <a href="#String-addStrNum">addStrNum 增涨字符串中的数字</a></li>
<li>- <a href="#String-maskString">maskString 掩码</a></li>
<li>- <a href="#String-replaceTmpl">replaceTmpl 替换模版</a></li>
<li>- <a href="#String-getHash">getHash 获取Hash</a></li>
<li>- <a href="#String-setHash">setHash 设置Hash</a></li>
<li>- <a href="#String-getQueryString">getQueryString 获取Query请求</a></li>
<li>- <a href="#String-getQueryByName">getQueryByName 根据名称获取Query</a></li>
<li>- <a href="#String-getQueryByIndex">getQueryByIndex 根据Index获取Query</a></li>
<li>- <a href="#String-validIdCard">validIdCard 验证身份证合法性</a></li>
</ul>
<a class="toc_title" href="#utils">Utils</a>
<ul class="toc_section">
<li>- <a href="#Utils-initNameSpace">initNameSpace 初始化命名空间</a></li>
<li>- <a href="#Utils-request">request Http请求</a></li>
<li>- <a href="#Utils-exec">exec 运行一段代码</a></li>
<li>- <a href="#Utils-setValue">setValue 设置一个对象的值</a></li>
<li>- <a href="#Utils-addStyleSheet">addStyleSheet 添加一个StyleSheet</a></li>
<li>- <a href="#Utils-getFormElements">getFormElements 获取表单元素</a></li>
<li>- <a href="#Utils-validForm">validForm 验证表单</a></li>
</ul>
<a class="toc_title" href="#widget">Widget 组件类</a>
<ul class="toc_section">
<li>- <a href="#Widget-intro">组件简介</a></li>
<li>- <a href="#Widget-reg">组件注册</a></li>
<li>- <a href="#Widget-add">组件使用</a></li>
<li>- <a href="#Widget-node">组件节点管理</a></li>
<li>- <a href="#Widget-interfaces">组件接口</a></li>
<li>- <a href="#Widget-events">组件事件处理</a></li>
<li>- <a href="#Widget-notifies">组件通知处理</a></li>
<li>- <a href="#Widget-extend">组件的继承</a></li>
</ul>
<a class="toc_title" href="#business">Process 业务流程组件</a>
<ul class="toc_section">
<li>- <a href="#Business-bind_mobile">绑定手机</a></li>
<li>- <a href="#Business-change_account_phone">修改手机</a></li>
<li>- <a href="#Business-unbind_mobile">解绑手机</a></li>
<li>- <a href="#Business-bind_account_to_mobile_group">绑定账号到手机群</a></li>
<li>- <a href="#Business-change_group_phone">修改手机群号码</a></li>
<li>- <a href="#Business-unbind_account_from_mobile_group">从手机群中解绑账号</a></li>
<li>- <a href="#Business-bind_email">绑定邮箱</a></li>
<li>- <a href="#Business-change_email">修改邮箱</a></li>
<li>- <a href="#Business-modify_password">修改密码</a></li>
<li>- <a href="#Business-modify_password_by_phone">通过手机修改密码</a></li>
<li>- <a href="#Business-account_transfer">快速划账</a></li>
<li>- <a href="#Business-real_name_auth">实名认证</a></li>
</ul>
<a class="toc_title" href="#whoisusing">谁正在使用</a>
<ul class="toc_section">
<li>- <a href="#Whoisusing-splus">splus.sdo.com</a></li>
<li>- <a href="#Whoisusing-idplus">idplus.sdo.com</a></li>
<li>- <a href="#Whoisusing-sj">sj.sdo.com</a></li>
</ul>
<a class="toc_title" href="#faq">F.A.Q.</a>
<ul class="toc_section">
<li>- <a href="#Faq-why">为什么使用We Framework？</a></li>
<li>- <a href="#Faq-module">什么是模块加载？</a></li>
<li>- <a href="#Faq-extend">如何扩展We Framework？</a></li>
<li>- <a href="#Faq-debug">如何debug？</a></li>
</ul>
<a class="toc_title" href="#changelog">更新日志</a>
<br />
</div>
<div class="container">
<h2 class="page_title"><img src="img/energy.png" />We Framework</h2>
<p>We Framework是盛大在线Web产品部在开发各种业务流程时所采用的一套前端框架解决方案。
以一个Loader为核心，自动获取当前最新的代码版本，并且根据业务的需求加载对应的代码。
实现以最简单的方式接入，并且无需后续维护。
</p>
<p>同时，通过Loader，您可以调用我们的框架中提供的任意功能，从强大的js组件、动画库，到丰富多彩的插件，
到盛大在线的各种业务功能（比如盛大用户的绑定手机功能）。
只需要非常简短的引用和极低成本的学习，就可以享受上述的所有功能！
</p>
<p>由于项目本身涉及公司业务，并未开源全部代码。但是如果有任何 <strong>BUG</strong> 或者任何 <strong>想跟我们讨论的</strong>，
可以直接在 <a href="https://github.com/webenergy/webenergy.github.io/issues" target="_blank">Github Issues页面</a> 发布issue，我们非常乐于得到您的任何回馈。
</p>
<h2 class="con_title" id="introduction">简介</h2>
<p>引用We Framework只有一个文件:</p>
<pre><code class="html"><html>
<head>
<!--<script src="https://somewhere/jquery.js"></script>-->
<script type="text/javascript"
src="https://we.sdoprofile.com/common/js/release/loader.min.js" ></script>
</head>
...</code></pre>
<p><b class="header">关于依赖</b><br />We Framework依赖于jQuery，而我们的Loader会做如下判断：</p>
<ul>
<li>如果在调用Loader之前已经有jQuery被加载，那么Loader会直接使用这个jQuery</li>
<li>如果在调用Loader之前并无jQuery，Loader会自动加载一个自己CDN下的jQuery</li>
</ul>
<p class="important"><strong>**</strong> 如果您是第一次查看此文档，并且在考虑是否要使用We Framework，您可以移步 <a href="#whoisusing">谁正在使用</a>
来查看正在使用的网站以及他们的使用状况。
</p>
<p class="important"><strong>**</strong> 如果您只想使用盛大在线业务流组件，请移步至 <a href="#business">业务流程组件</a>，从中选择您需要使用的组件。</p>
<p><strong>注意：</strong>此文档有很多例子可以 <strong>直接被运行</strong>，点击代码右上角的运行按钮即可。</p>
<pre class="runnable">
<code class="javascript">alert("按我运行");</code></pre>
<h2 class="con_title" id="interface">接口描述</h2>
<p id="$we.require"><b class="header">$we.require</b><code>$we.require(module, [callback])</code><br />
引用一个或多个模块，<code>module</code> 为模块名称（字符串）或者模块名称的数组，callback的传参是每个引用的模块返回值。
</p>
<pre>
<code class="javascript">$we.require(["module.a", "module.b"], function(a, b) {
var modA = a; // a为模块A的返回值
var instanceB = b(); // b为模块B的返回值
});</code></pre>
<pre class="runnable">
<code class="javascript">var original_arr = [1,2,3,4,5,6,7,8,9,10];
$we.require("core/array", function(arr_module) {
// arr_module是core/array模块的返回
// arr_module.rand 是生成随机数组的方法
alert(arr_module.rand(original_arr));
});</code></pre>
<p id="$we.preload"><b class="header">$we.preload</b><code>$we.preload(module)</code><br />
预加载一个或多个模块，<code>module</code> 为模块名称（字符串）或者模块名称的数组。
由于有些页面希望在用户操作之前，现将可能要加载的模块预先加载，那么可以使用这个函数来预加载模块。
</p>
<p id="$we.biz.use"><b class="header">$we.biz.use</b><code>$we.biz.use(name, [data], [callback], [config])</code><br />
使用一个业务流程（例如绑定手机）：<br />
<code>name</code> 为业务名称，<br />
<code>data</code> 为业务相关数据，如sdid等，没有可填写 <code>{}</code>，<br />
<code>callback</code> 为流程成功之后的回调函数，<br />
<code>config</code> 为该业务流程的具体表现层配置，比如流程浮层的宽度、流程名称等<br />
</p>
<pre class="runnable">
<code class="javascript">$we.biz.use("bind_mobile", {}, function() {
alert("绑定成功了！");
}, {
// width: 600,
// prev: false,
// next: "下一步",
// end: "完成",
// title: "手机绑定"
});</code></pre>
<p class="important">具体业务流程的名称和使用请参见：<a href="#business">业务流程组件</a></p>
<p><strong>注意：</strong>出于安全考虑，如果您想使用业务流程功能，请向我们申请权限，默认情况下，我们并不允许在任意站点使用该功能。
请联系 <a href="mailto:[email protected]">章光达</a> 或者 <a href="mailto:[email protected]">张子航</a>。
</p>
<p id="$we.biz.announce"><b class="header">$we.biz.announce</b><code>$we.biz.announce(name)</code><br />
预加载一个业务流程模块，<code>name</code> 为业务流程名称。
由于有些页面希望在用户操作之前，现将可能要加载的模块预先加载，那么可以使用这个函数来预加载模块。
</p>
<p id="$we.requireCss"><b class="header">$we.requireCss</b><code>$we.requireCss(url)</code><br />
加载一个css文件，<code>url</code> 为css的地址。
</p>
<pre>
<code class="javascript">$we.requireCss("https://some/css/files");</code></pre>
<h2 class="con_title" id="module">模块说明</h2>
<p id="Module-core"><b class="header">核心方法类模块</b><br />
除了jQuery的核心方法，We Framework也拥有自己的一些核心方法：
</p>
<ul>
<li><a href="#array">Array 数组方法</a></li>
<li><a href="#cookie">Cookie Cookie方法</a></li>
<li><a href="#dom">Dom Dom方法</a></li>
<li><a href="#object">Object 对象方法</a></li>
<li><a href="#string">String 字符方法</a></li>
<li><a href="#utils">Utils 工具方法</a></li>
</ul>
<p><strong>注：</strong> 使用核心方法需要 <code>require</code> <code>"core"</code> 模块，也即：</p>
<pre>
<code class="javascript">$we.require("core", function() {
// 这里是调用核心方法的代码
});</code></pre>
<p id="Module-widget"><b class="header">组件类模块</b><code>$we.widget.reg, $we.widget.add</code><br />
组件是We Framework的一个核心模块，其目的是将各种固定的公共，业务类需求沉淀下来，形成组件。
统一管理其HTML，事件响应，以及组件之间的相互调用和继承关系。
组件模块本身是一个Widget类，每个新注册的组件都是该Widget类的继承，可以继承这个类的各种基础函数和性质。
<br />详细的组件说明请参考： <a href="#widget">组件类模块</a></p>
<p id="Module-process"><b class="header">业务流程模块</b><code>$we.biz.use(name, [data], [callback], [config])</code><br />
业务流程模块是基于SDO繁杂的业务流程需求而定制的模块。
该模块将各种业务流程打散成步骤，将各种步骤实现成为一个组件，而设计每一个流程则是将各个不同的组件（步骤）串联起来。
同时，通过内置的<code>beforeAction</code>条件的判断来实现流程的分支，跳跃。
<br />详细的业务流程请参考：<a href="#business">业务流程组件</a>
</p>
<p id="Module-coderunner"><b class="header">CodeRunner</b><code>$we.require("component/coderunner")</code><br />
CodeRunner模块是在业务开发过程中，为了方便代码的调试和测试而形成的文档生成类模块。<br />
通过极其简单的规则，就可以自动将页面转成需要的文档。文档支持：
</p>
<ul>
<li>支持三种语言的语法高亮: JavaScript,HTML,CSS</li>
<li>支持自动生成页面目录结构</li>
<li>支持编辑代码</li>
<li>支持运行代码，在编辑状态下，按 <code>CTRL+R</code> 或者 <code>CMD+R</code> 运行当前代码
<dl>
<dd>> JavaScript的运行是直接在当前环境下运行编辑器中的代码</dd>
<dd>> HTML的运行会在代码下方添加一个div，并将编辑器中的代码添加到该div里</dd>
<dd>> CSS的运行会在页面中直接添加一个style</dd>
</dl>
</li>
<li>支持页面打开后自动运行编辑器中的代码</li>
<li>支持 <code>ALT+1</code>, <code>ALT+2</code> 跳转到对应的编辑器内并且聚焦</li>
<li>支持整理代码</li>
<li>在编辑状态，按 <code>CTRL+S</code> 或者 <code>CMD+S</code> 可以直接保存代码到本地（需要对应的PHP脚本）</li>
</ul>
<p><b>使用方法：</b><br />
通过 <code>$we.require</code> 引入CodeRunner模块：
</p>
<pre>
<code class="javascript">$we.require("component/coderunner");</code></pre>
<p>每个部分/模块由一个 <code>textarea</code> 包起来，一切配置通过设置该 <code>textarea</code> 的属性来完成。
其中，需要对该 <code>textarea</code> 加上一个属性 <code>attr="coderunner"</code>。<br />
其它属性还包括：<br />
<code>class</code>: 该模块的语言，可选有: <code>html</code>,<code>javascript</code>,<code>css</code>，默认 <code>javascript</code><br />
<code>title</code>: 该模块的标题<br />
<code>autorun</code>: 该模块是否需要自动运行<br />
例如：
</p>
<pre>
<code class="html"><textarea title="这个是标题" attr="coderunner"
class="javascript" autorun="true">alert(1);</textarea></code></pre>
<p class="important">可以参考 <a target="_blank" href="https://we.sdoprofile.com/common/js/test/component/coderunner.html">CodeRunner</a> 页面查看具体使用情况</p>
<p id="Module-rsa"><b class="header">RSA加密模块</b><code>$we.rsa.encrypt(str)</code><br />
JavaScript处理RSA加密：
</p>
<pre class="runnable">
<code class="javascript">$we.require("component/rsa", function() {
$we.rsa.publicKey =
"C99F5B2FA7880E5224BCA8B6E6EAAF03CF0AE7CC74D881B2C532C0346B743911";
$we.rsa.maxDigit = 131;
$we.rsa.encryptExp = "10001";
var plaintext = "Hello!";
alert($we.rsa.encrypt(plaintext));
});</code></pre>
<p id="Module-dialog"><b class="header">对话框模块</b><code>$we.widget.add("Dialog", [config])</code><br />
WE 框架拥有固定的对话框样式，允许用户根据配置自行渲染一个对话框：
</p>
<pre class="runnable">
<code class="javascript">$we.require("component/dialog", function() {
var dialog = $we.widget.add("Dialog", {
width: 500,
mask: true,
title: "标题",
subTitle: "副标题",
close: true,
content: '<div style="text-align:center;line-height:50px;">'
+ '<h2>这是We Framework！</h2><p>你会爱上它的！</p></div>'
});
dialog.open();
});</code></pre>
<p>事实上，我们也有一些已经预定制的对话框，Alert和Confirm：</p>
<pre class="runnable">
<code class="javascript">$we.require("component/dialog", function() {
$we.comp.alert("欢迎使用We Framework！！！");
});</code></pre>
<pre class="runnable">
<code class="javascript">$we.require("component/dialog", function() {
$we.comp.confirm("你热爱中国么？", function() {
alert("好样的！");
}, function() {
alert("额，这是你的自由...");
});
});</code></pre>
<p id="Module-form"><b class="header">表单类模块</b><code>$we.widget.add("Form", element, [config])</code><br />
针对Form表单，We Framework有一套统一的解决方案。<br />
<!-- TODO -->
<strong>TODO</strong>
</p>
<p id="Module-datepicker"><b class="header">日期选择器模块</b><code>$we.comp.datepicker.on(id)</code><br />
这里使用了外站的一个日期选择器，可以通过简单的接口调用给input框添加日期选择功能。
例如：<br />
请在此输入日期： <input id="dp-input" placeholder="这里输入日期" type="text" /> 注：此 <code>input</code> 框的 <code>id</code> 为 <code>dp-input</code><br />
请执行下面代码之后，再点击 <code>input</code> 框查看效果。
</p>
<pre class="runnable">
<code class="javascript">$we.require("component/datepicker", function() {
// 以下为默认选项
// var d = new Date();
// $we.comp.datepicker.setOption({
// skin: "whyGreen",
// dateFmt: "yyyy-MM-dd",
// maxDate: [d.getFullYear(), (d.getMonth()+1), d.getDate()].join("-"),
// lang: "zh-cn"
// });
$we.comp.datepicker.on("dp-input");
});</code></pre>
<p id="Module-pwdstrength"><b class="header">密码强度校验模块</b><code>$we.pwdStrength(pwd, [username])</code><br />
在设置密码或者修改密码的时候，前端需要对密码的强度进行校验。<br />
<code>pwd</code> 需要校验的密码<br />
<code>username</code> 该用户的用户名<br />
</p>
<pre class="runnable">
<code class="javascript">$we.require(["business/pwd_strength", "component/dialog"], function() {
var pwd = prompt("请输入您的密码：");
if (pwd) {
var result = $we.pwdStrength(pwd, "weframework");
var popMsg = "Result<br /> level|errno|msg:<br />"
+ [result.level, result.errno, result.msg].join("|");
$we.comp.alert(popMsg);
}
});</code></pre>
<h2 class="con_title" id="array">Array</h2>
<p id="Array-rand"><b class="header">rand</b><code>$we.array.rand(arr, [len])</code><br />
根据给定的数组和数位生成随机数组。<br />
<code>arr</code> 数组<br />
<code>len</code> 取出数组的前几位<br />
</p>
<h2 class="con_title" id="cookie">Cookie</h2>
<p id="Cookie-set"><b class="header">设置Cookie</b><code>$.cookie(key, value, [options])</code><br />
设置页面Cookie。<code>options</code> 可设置这些选项：<code>expires</code>, <code>path</code>, <code>domain</code>, <code>secure</code>
</p>
<p id="Cookie-remove"><b class="header">删除Cookie</b><code>$.removecookie(key, [options])</code><br />
删除页面Cookie。<code>options</code> 可设置这些选项：<code>expires</code>, <code>path</code>, <code>domain</code>, <code>secure</code>
</p>
<h2 class="con_title" id="dom">Dom</h2>
<p id="Dom-getEvent"><b class="header">getEvent</b><code>$we.dom.getEvent()</code><br />
通过此方法，可以获取当前执行函数的 <code>event</code> 对象，比如：
</p>
<pre>
<code class="html"><a href="javascript:void(0);" onclick="we_test()">按钮</a></code></pre>
<p>
如果在函数 <code>we_test()</code> 中需要获取 <code>event</code> 对象，可以使用这个方法。
</p>
<a style="text-decoration:none;" class="btn" href="javascript:void(0);" onclick="we_test()">请先运行下面的javascript再点我</a>
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
window.we_test = function() {
alert($we.dom.getEvent());
};
});</code></pre>
<p id="Dom-getTarget"><b class="header">getTarget</b><code>$we.dom.getTarget(event)</code><br />
与上面的函数相关，但是获取的不是对象不再是 <code>event</code> 对象，而是触发 <code>click</code> 动作的 <code>element</code>。
这里我们复用上一个方法的按钮，请运行一下代码再试点击按钮。
</p>
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
window.we_test = function() {
var target = $we.dom.getTarget();
$(target).addClass("btn-primary");
};
});</code></pre>
<p id="Dom-scrollTo"><b class="header">scrollTo</b><code>$we.dom.scrollTo(to, [time], [callback])</code><br />
滑动页面到某个区域。
</p>
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
$we.dom.scrollTo(0, 300);
setTimeout(function() {
$we.dom.scrollTo("#Dom-scrollTo");
}, 1000);
});</code></pre>
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
$we.dom.scrollTo("#dom", 1000);
});</code></pre>
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
$we.dom.scrollTo($("#object"), 400, function() {
setTimeout(function() {
$we.dom.scrollTo("#Dom-scrollTo");
}, 1000);
});
});</code></pre>
<p id="Dom-imageLoaded"><b class="header">imageLoaded</b><code>$we.dom.imageLoaded(element, callback)</code><br />
监测某个节点下的图片加载，等待加载完毕后调用回调函数。
</p>
<h2 class="con_title" id="object">Object</h2>
<p id="Object-merge"><b class="header">merge</b><code>$we.object.merge(destination, source, [bCover])</code><br />
将 <code>source</code> 对象的属性合并到 <code>destination</code> 中。对于属性重名的情况，如果 <code>bCover</code> 为
<code>true</code>，那么 <code>source</code> 对象的属性将会覆盖 <code>destination</code> 的已有属性。
<code>bCover</code> 默认为 <code>true</code>。
</p>
<pre> $we.object.merge({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}</pre>
<p id="Object-getValue"><b class="header">getValue</b><code>$we.object.getValue(object, path)</code><br />
从一个对象中，依据路径取出对应的属性。
例如：
</p>
<pre> $we.object.getValue({we:{joe:{ali:"Hi",ck:"Im"}}}, "we.joe.ck")
=> "Im"
$we.object.getValue({we:{joe:{ali:"Hi",ck:"Im"}}}, "we.jj")
=> undefined</pre>
<h2 class="con_title" id="string">String</h2>
<p id="String-getInt"><b class="header">getInt</b><code>$we.string.getInt(str)</code><br />
从一个字符串中获取里面的第一组数字
</p>
<pre> $we.string.getInt("这里有23个苹果")
=> 23
$we.string.getInt("这里有23个苹果和40个梨子")
=> 23</pre>
<p id="String-addStrNum"><b class="header">addStrNum</b><code>$we.string.addStrNum(target, num)</code><br />
将一个字符串内的数字增加一定数字
</p>
<pre> $we.string.addStrNum("这里有23个苹果", 1)
=> "这里有24个苹果"
$we.string.addStrNum("这里有23个苹果", -4)
=> "这里有19个苹果"</pre>
<p id="String-maskString"><b class="header">maskString</b><code>$we.string.maskString(str, [symbol])</code><br />
给字符串打上掩码。
</p>
<pre> $we.string.maskString("13752632812")
=> "137*****812"
$we.string.maskString("[email protected]", "#")
=> "al###[email protected]"</pre>
<p id="String-replaceTmpl"><b class="header">replaceTmpl</b><code>$we.string.replaceTmpl(str, conf)</code><br />
字符串模板替换，模板字符使用 <code>$</code> 包起来，参见这个例子：
</p>
<pre> $we.string.replaceTmpl("这个是$name$模板", {name: "We Framework"})
=> "这个是We Framework模板"</pre>
<p id="String-getHash"><b class="header">getHash</b><code>$we.string.getHash()</code><br />
获取页面地址的Hash。
</p>
<pre class="runnable">
<code class="javascript">alert($we.string.getHash());</code></pre>
<p id="String-setHash"><b class="header">setHash</b><code>$we.string.setHash(str)</code><br />
设置页面地址的Hash
</p>
<pre class="runnable">
<code class="javascript">$we.string.setHash("#String-setHash");</code></pre>
<p id="String-getQueryString"><b class="header">getQueryString</b><code>$we.string.getQueryString([str])</code><br />
获取Str的Query数组，<code>str</code> 不传则取当前页面地址
</p>
<pre class="runnable">
<code class="javascript">alert($we.string.getQueryString("https://abc.de?a=1&b=2"));</code></pre>
<p id="String-getQueryByName"><b class="header">getQueryByName</b><code>$we.string.getQueryByName(name, [str])</code><br />
通过 <code>name</code> 获取Str的Query，<code>str</code> 不传则取当前页面地址
</p>
<pre class="runnable">
<code class="javascript">alert($we.string.getQueryByName("a","https://abc.de?a=1&b=2"));</code></pre>
<p id="String-getQueryByIndex"><b class="header">getQueryByIndex</b><code>$we.string.getQueryByIndex(index, [str])</code><br />
通过 <code>index</code> 获取Str的Query，<code>str</code> 不传则取当前页面地址
</p>
<pre class="runnable">
<code class="javascript">alert($we.string.getQueryByIndex(1,"https://abc.de?a=1&b=2"));</code></pre>
<p id="String-validIdCard"><b class="header">validIdCard</b><code>$we.string.validIdCard(str)</code><br />
验证身份证的合法性。
</p>
<pre class="runnable">
<code class="javascript">var card = prompt("请输入身份证号码：");
if (card) {
if ($we.string.validIdCard(card)) {
alert("该身份证号码合法！");
} else {
alert("该身份证号码不合法！");
}
}</code></pre>
<h2 class="con_title" id="utils">Utils</h2>
<p id="Utils-initNameSpace"><b class="header">initNameSpace</b><code>$we.utils.initNameSpace(router, root)</code><br />
初始化命名空间
</p>
<pre> $we.utils.initNameSpace("a.b.c")
=> a = {b: {c: {}}}</pre>
<p id="Utils-request"><b class="header">request</b><code>$we.utils.request(url, data, success, fail, [method], [isJsonp])</code><br />
经过封装的HTTP请求方法，对于HTTP的返回结构有一定要求：<br />
<code>{"errno":0, "msg":"", "data":[1,2]}</code> <br />
<code>url</code> 请求的URL<br />
<code>data</code> 请求的具体数据<br />
<code>success</code> 请求成功的回调函数，请求成功要求返回结构合法，且 <code>errno</code> 为 <code>0</code><br />
<code>fail</code> 请求失败的回调函数，包括超时，返回结构不合法，<code>errno</code> 不为 <code>0</code><br />
<code>method</code> POST/GET<br />
<code>isJsonp</code> 是否为JSONP请求<br />
</p>
<p id="Utils-exec"><b class="header">exec</b><code>$we.utils.exec(code, [bTranslate])</code><br />
执行一段 <code>JavaScript</code> 代码，与 <code>eval</code> 函数的区别在于，该代码的执行域是当前的 <code>window</code>。
也就是，通过 <code>$we.utils.exec</code> 执行的代码中的变量，会在当前页面中得到保存。
<code>bTranslate</code> 表示是否需要对 <code><</code>, <code>></code>, <code>&</code> 进行转译。
</p>
<pre class="runnable">
<code class="javascript">$we.utils.exec("var we_exec_test_trans = 'A &amp; &lt;B&gt;';", true);
$we.utils.exec("var we_exec_test_untrans = 'A &amp; &lt;B&gt;';");
alert(we_exec_test_trans + "\n" + we_exec_test_untrans);</code></pre>
<p id="Utils-setValue"><b class="header">setValue</b><code>$we.utils.setValue(target, value)</code><br />
给对象设置默认值，如果对象已经存在，则返回对象本身的值，否则，返回 <code>value</code>
</p>
<pre> $we.utils.setValue(undefined, 1);
=> 1
$we.utils.setValue("", 1);
=> ""</pre>
<p id="Utils-addStyleSheet"><b class="header">addStyleSheet</b><code>$we.utils.addStyleSheet(string, [document])</code><br />
给制定的 <code>document</code> 添加一个 <code>styleSheet</code>。
</p>
<pre class="runnable">
<code class="javascript">$we.utils.addStyleSheet("#Utils-addStyleSheet {color: red;}")</code></pre>
<p id="Utils-getFormElements"><b class="header">getFormElements</b><code>$we.utils.getFormElements(element)</code><br />
获取指定元素的表单元素，表单元素包括：input(text,checkbox,radio) select,textarea
<strong>TODO</strong>
</p>
<pre class="runnable"><code class="javascript">var formList = $we.utils.getFormElements('#form');</code></pre>
<p id="Utils-validForm"><b class="header">validForm</b><code>$we.utils.validForm(element)</code><br />
<!-- TODO -->
<strong>TODO</strong>
</p>
<h2 class="con_title" id="widget">组件类</h2>
<p id="Widget-intro"><b class="header">组件简介</b><br />
组件是We Framework的一个特殊类，用来统一管理一个功能，或者一个模块的HTML，
事件响应，以及组件之间的相互调用和继承关系。
</p>
<p id="Widget-reg"><b class="header">组件注册</b><code>$we.widget.reg(name, option)</code><br />
通过 <code>$we.widget.reg</code> 方法可以注册组件，比如：
</p>
<pre class="runnable">
<code class="javascript">$we.widget.reg("we_framework_test", {
init: function() {}, // init 为该组件的 constructor
run: function() {} // run 为该组件 constructor之后会被自动调用的函数，可不实现
});</code></pre>
<p id="Widget-add"><b class="header">组件使用</b><code>$we.widget.add(name, [params], [params], ...)</code><br />
实际调用一个组件的方式很简单：
</p>
<pre class="runnable">
<code class="javascript">$we.widget.add("we_framework_test");</code></pre>
<p id="Widget-node"><b class="header">组件节点管理</b><br />
<code>node</code> 在组件的函数中调用 <code>this.node</code> 可以获取组件中的内置节点。
节点的声明方式一般为在 HTML 中嵌入这样的代码： <code><a href="" attr="inner:btn"></a></code><br />
</p>
<p id="Widget-interfaces"><b class="header">组件接口</b><br />
<code>interfaces</code> 组件在注册的时候，可以声明这个对象，<code>interfaces</code> 的每个属性为一个函数，作为组件被调用时的接口函数。比如： <br />
<code>interfaces: { show: function() { } }</code>
</p>
<p id="Widget-events"><b class="header">组件事件处理</b><br />
<code>events</code> 每个组件对其所管理的节点，HTML绑定事件，比如 <code><a href="javascript:void(0);" attr="click:speak"></a></code><br />这个时候就需要在注册组件的时候声明：<br /><code>events: { speak: function() { } }</code>
</p>
<p id="Widget-notifies"><b class="header">组件通知处理</b><br />
TODO
</p>
<p id="Widget-extend"><b class="header">组件的继承</b><br />
TODO
</p>
<h2 class="con_title" id="business">业务流程组件</h2>
<p>在页面中引用了 We Framework 的 Loader 之后，即可直接调用业务流程的所有方法。
除此之外，我们还提供 <code>iframe</code> 版本的业务流程组件：<br />
</p>
<pre>
<code class="html"><script src="https://we.sdoprofile.com/common/js/release/loader.min.js">
</script>
<script type="text/javascript">$we.biz.use("name")</script>
<!-- 或者使用 iframe -->
<iframe src="https://safe.sdo.com/iframe/process?
name=xx&theme=xx&width=xx&need_title=xx"></iframe>
</code></pre>
<pre></pre>
<p>
<b>JavaScript</b> 方式的引用的说明，还可以参考 <a href="#$we.biz.use">$we.biz.use</a><br />
<b>iframe</b> 方式中：<br />
<code>name</code> 表示组件的名称，将在下面逐一介绍<br />
<code>theme</code> 表示组件选用的主题，目前有两个选择: <code>red</code>， <code>blue</code><br />
<code>width</code> 表示组件的总体宽度<br />
<code>need_title</code> 表示组件是否需要标题区域，可选 <code>0</code> 或者 <code>1</code><br />
<code>backurl</code> 组件成功之后的回调地址 <br />
</p>
<p id="Business-bind_mobile"><b class="header">绑定手机</b><code>$we.biz.use("bind_mobile", data, callback)</code><br />
<code>bind_mobile</code> 盛大在线绑定手机服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>bind_mobile</b>
</p>
<p id="Business-change_account_phone"><b class="header">修改手机</b><code>$we.biz.use("change_account_phone", data, callback)</code><br />
<code>change_account_phone</code> 盛大在线修改某账号的安全手机服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>change_account_phone</b>
</p>
<p id="Business-unbind_mobile"><b class="header">解绑手机</b><code>$we.biz.use("unbind_mobile", data, callback)</code><br />
<code>unbind_mobile</code> 盛大在线解绑安全手机服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>unbind_mobile</b>
</p>
<p id="Business-bind_account_to_mobile_group"><b class="header">绑定账号到手机群</b><code>$we.biz.use("bind_account_to_mobile_group", data, callback)</code><br />
<code>bind_account_to_mobile_group</code> 盛大在线手机账号管理体系绑定账号服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>bind_account_to_mobile_group</b>
</p>
<p id="Business-change_group_phone"><b class="header">修改手机群号码</b><code>$we.biz.use("change_group_phone", data, callback)</code><br />
<code>change_group_phone</code> 盛大在线手机账号管理体系修改手机群手机服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>change_group_phone</b>
</p>
<p id="Business-unbind_account_from_mobile_group"><b class="header">从手机群中解绑账号</b><code>$we.biz.use("unbind_account_from_mobile_group", data, callback)</code><br />
<code>unbind_account_from_mobile_group</code> 盛大在线手机账号管理体系解绑账号服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>unbind_account_from_mobile_group</b>
</p>
<p id="Business-bind_email"><b class="header">绑定邮箱</b><code>$we.biz.use("bind_email", data, callback)</code><br />
<code>bind_email</code> 盛大在线绑定邮箱服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>bind_email</b>
</p>
<p id="Business-change_email"><b class="header">修改邮箱</b><code>$we.biz.use("change_email", data, callback)</code><br />
<code>change_email</code> 盛大在线更换绑定邮箱服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>change_email</b>
</p>
<p id="Business-modify_password"><b class="header">修改密码</b><code>$we.biz.use("modify_password", data, callback)</code><br />
<code>modify_password</code> 盛大在线修改密码服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>modify_password</b>
</p>
<p id="Business-modify_password_by_phone"><b class="header">通过手机修改密码</b><code>$we.biz.use("modify_password_by_phone", data, callback)</code><br />
<code>modify_password_by_phone</code> 盛大在线通过绑定手机修改密码服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>modify_password_by_phone</b>
</p>
<p id="Business-account_transfer"><b class="header">快速划账</b><code>$we.biz.use("account_transfer", data, callback)</code><br />
<code>account_transfer</code> 盛大在线快速划账服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>account_transfer</b>
</p>
<p id="Business-real_name_auth"><b class="header">实名认证</b><code>$we.biz.use("real_name_auth", data, callback)</code><br />
<code>real_name_auth</code> 盛大在线实名认证服务。包含用户安全卡，密宝验证，以及风控策略。<br />
相对的 <code>iframe</code> 地址为： <br />
https://safe.sdo.com/iframe/process?name=<b>real_name_auth</b>
</p>
<h2 class="con_title" id="whoisusing">谁正在使用</h2>
<p id="Whoisusing-splus"><b class="header">splus.sdo.com</b><br />
盛大在线用户账户中心，集成了账户的信息，安全等模块。
</p>
<div class="image_present">
<a target="_blank" href="https://splus.sdo.com">
<img src="img/splus.png" width="500">
</a>
</div>
<p id="Whoisusing-idplus"><b class="header">idplus.sdo.com</b><br />
盛大在线手机账号管理页面，集成了该手机群下所有的账号的信息以及相关管理功能。
</p>
<div class="image_present">
<a target="_blank" href="https://idplus.sdo.com">
<img src="img/idplus.png" width="500">
</a>
</div>
<p id="Whoisusing-sj"><b class="header">sj.sdo.com</b><br />
盛大在线安全手机相关管理。
</p>
<div class="image_present">
<a target="_blank" href="https://sj.sdo.com">
<img src="img/sj.png" width="500">
</a>
</div>
<h2 class="con_title" id="faq">F.A.Q.</h2>
<p id="Faq-why"><b class="header">为什么使用We Framework？</b><br />
We Framework与 <code>jQuery</code>, <code>zepto</code> 等库完美兼容。
整体理念清晰，极易上手。
并且We Framework采用独创的 Loader+Module 技术，实现如下功能：
</p>
<ul>
<li>调用方不关心框架版本升级等问题，只需要引用 Loader 文件，即可轻松使用框架内任何资源。</li>
<li>Loader 文件本身非常小，并通过成熟的 <code>requirejs</code> 框架实现模块加载，使得只有需要使用的代码才会被加载，极大的节约了网络开销并且提升了响应速度。</li>
<li>对于希望优先加载一部分资源的需求，同样有 <code>$we.biz.announce</code> 等接口保证代码在最开始已经被加载。</li>
</ul>
<p>
We Framework其中提供了各种基础的函数服务，并且在不断的扩充中，用户只需要通过 <code>$we.require</code> 将相应模块加载进来，即可使用最新，最全的基础函数服务。极大的减少了用户的维护成本和开发成本。
</p>
<p>
框架还提供与盛大在线紧紧相关联的各种业务服务，对于希望使用这些业务服务的用户，最大成本的节约了开发成本。
只需要一两行代码，便可以完美引入。
</p>
<p id="Faq-module"><b class="header">什么是模块加载？</b><br />
模块加载即根据初始定义的不同模块极其依赖关系，按照依赖顺序加载不同的模块的一种代码引入方式。
对于前端 JavaScript 来说，当代码量达到一定数量，并且实际应用场景只会使用到总代码中的一小部分的情况。
模块加载则显得尤为重要，下图是根据依赖关系来顺序加载模块的示意图：<br />
<img width="550" src="img/module-loading1.png" />
</p>
<p id="Faq-extend"><b class="header">如何扩展We Framework？</b><br />
We Framework的扩展方式非常简单。
如果您需要开发新的 组件，那么只需要 <code>$we.require("core", function() {})</code> 之后，
在其函数内进行组件的具体开发即可。如果有其它的依赖，则在 <code>require</code> 的依赖中注明相关依赖即可。
比如：
</p>
<pre>
<code class="javascript">$we.require(["core", "component/dialog"], function() {
$we.widget.reg("new_dialog", {
init: function(config) {
this.extend("Dialog", config);
},
...
});
});</code></pre>
<p id="Faq-debug"><b class="header">如何debug？</b><br />
考虑到线上压缩代码难以调试，We Framework还提供一个简单的解决方案。在页面设置 <code>cookie</code>，
使得原本请求的压缩版本的代码，转而请求非压缩的代码。甚至，可以将请求的环境转移到 We Framework的开发环境。
这里，我们以使用 We Framework 自带的 <code>Cookie</code> 设置方式来做示范。
</p>
<pre>
<code class="javascript">$.cookie("_we_debug", 1); // 使用非压缩代码
$.cookie("_we_force_dev", 1); // 使用开发环境的代码
</code></pre>
<h2 class="con_title" id="changelog">更新日志</h2>
<p><b class="header">1.0.2</b> — <small><i>2013年1月15日</i></small><br />
引入新的代码压缩方式，使得请求更加轻松。Fix Bugs。并且发布该文档。
</p>
<p><b class="header">1.0.1</b> — <small><i>2012年12月25日</i></small><br />
We Framework引入 Loader 和 Module，对原有的函数进行大幅整理。
引入了许多新的函数和方法。
</p>
<p><b class="header">1.0.0</b> — <small><i>2012年10月12日</i></small><br />
最初版本的 We Framework发布，初始版本不支持 Loader 和 Module，所有文件打成两个包，
引用地址为：<br />
https://we.sdoprofile.com/common/css/compressed/we-1.0.0.min.css
https://we.sdoprofile.com/common/js/compressed/we-1.0.0.min.js
</p>
<br />
<br />
<p class="image_present">
<a target="_blank" href="https://www.sdo.com"><img src="img/sdologo.jpg" /></a>
</p>
</div>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>