PageRenderTime 42ms CodeModel.GetById 14ms RepoModel.GetById 1ms app.codeStats 0ms

/1.4/docs/html/guideline/faq.html

https://github.com/yiminghe/kissyteam.github.com
HTML | 191 lines | 168 code | 17 blank | 6 comment | 0 complexity | 0733d77f253121b9eafddb11141b1824 MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <title>KISSY - A Powerful JavaScript Framework</title>
    6. 

  6.     <meta name="viewport"
    7. 

  7.       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    8. 

  8.     <link rel="stylesheet" href="/1.4/source/guideline/templates/assets/??bootstrap.css,normalize.css,kissy.css,prettify.css,forkit.css">
    9. 

  9.     <script src="/1.4/source/guideline/templates/assets/??jquery.min.js,script.js"></script>
    10. 

  10.     <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" type="text/javascript" data-config="{combine:true}"></script>
    11. 

  11.     <script src="/1.4/source/guideline/api/assets/highlight.pack.js"></script>
    12. 

  12.     <link href="/1.4/source/guideline/api/assets/tomorrow-night-bright.css" rel=stylesheet />
    13. 

  13.     <link rel="shortcut icon" href="http://a.tbcdn.cn/s/kissy/favicon.ico">
    14. 

  14. </head>
    15. 

  15. 

  16. <body class="">
    17. 

  17.     <nav id="sidebar">
    18. 

  18.     <header>
    19. 

  19. 		<a href="/">
    20. 

  20. 			<!--img src="http://gtms04.alicdn.com/tps/i4/T1ceiPFbpcXXcljp_h-200-89.png"-->
    21. 

  21. 			<!--img src="templates/assets/img/logo_6.png"-->
    22. 

  22. 			<!--img src="http://gtms04.alicdn.com/tps/i4/T14oa2FcNcXXaOySEh-180-104.png" alt="" /-->
    23. 

  23. 			<!--img src="http://gtms01.alicdn.com/tps/i1/T1Amq1FaXgXXbXVSUh-180-127.png" alt="" /-->
    24. 

  24. 			<!--img src="http://gtms02.alicdn.com/tps/i2/T1N0jTXXXjXXay7Rri-175-78.png" alt="" /-->
    25. 

  25. 			<img src="http://gtms01.alicdn.com/tps/i1/T1MVbxFoRcXXchhRni-175-68.png" alt="" />
    26. 

  26. 		</a>
    27. 

  27. 	</header>
    28. 

  28.     <ul>
    29. 

  29.       <li class="nav-divider"><a href="/"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-home.png">首页</a></li>
    30. 

  30.       <li><a href="https://github.com/kissyteam/kissy"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-github.png">GitHub</a></li>
    31. 

  31.       <li><a href="https://waffle.io/kissyteam/kissy"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-getting-started.png">RoadMap</a></li>
    32. 

  32.       <li class="nav-divider"><a href="/1.4/docs/html/guideline/why-kissy.html"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-why.png">Why KISSY?</a></li>
    33. 

  33.       <li><a href="/1.4/docs/html/guideline/get-started.html"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-getting-started.png">1.4.x 指导手册</a></li>
    34. 

  34.       <li class="nav-sub"><a href="/1.4/docs/html/guideline/module-map.html">核心模块列表</a></li>
    35. 

  35.       <li class="nav-sub"><a href="/1.4/docs/html/guideline/kmd.html">KISSY 模块规范 (KMD)</a></li>
    36. 

  36.       <!-- <li class="nav-sub"><a href="/1.4/docs/html/guideline/config.html">模块自由定制工具</a></li> -->
    37. 

  37.       <li class="nav-sub"><a href="/1.4/docs/html/guideline/gbs.html">浏览器兼容基准(GBS)</a></li>
    38. 

  38.       <li class="nav-sub"><a href="http://cyj.me/jquery-kissy-rosetta/">jQuery KISSY 对比手册</a></li>
    39. 

  39.       <li class="nav-sub"><a href="http://gallery.kissyui.com/guide">KISSY 组件开发规范</a></li>
    40. 

  40.       <li class="nav-sub nav-divider"><a href="https://github.com/kissyteam/kissy/releases">历史版本</a></li>
    41. 

  41.       <li><a href="/1.4/docs/html/tutorials/"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-getting-started.png">1.4.x 教程文档</a></li>
    42. 

  42.       <li><a href="/1.4/docs/html/demo/"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-getting-started.png">1.4.x demo 示例</a></li>
    43. 

  43.       <li><a href="/1.4/docs/html/guideline/get-started.html"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-getting-started.png">1.4.x 指导手册</a></li>
    44. 

  44. 	  <li><a href="/1.4/docs/html/api/"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-documentation.png">1.4.x API Doc</a></li>
    45. 

  45. 	  <li class="nav-sub"><a href="/index-1.3.html">v1.3</a></li>
    46. 

  46. 	  <li class="nav-sub"><a href="/index-1.2.html">v1.2</a></li>
    47. 

  47. 	  <li class="nav-sub nav-divider"><a href="/index-1.1.6.html">v1.1.6</a></li>
    48. 

  48.       <li><a href="http://gallery.kissyui.com/kds/1.0/demo/index.html">社区 Demo</a></li>
    49. 

  49.       <li><a href="http://blog.kissyui.com">KISSY Blog</a></li>
    50. 

  50.       <li class="nav-divider"><a href="http://gallery.kissyui.com">KISSY Gallery</a></li>
    51. 

  51.       <li><a href="/1.4/docs/html/guideline/tools.html">KISSY 项目构建工具</a></li>
    52. 

  52.       <li class="nav-sub"><a href="/1.4/docs/html/guideline/kmc.html">KS Module Compiler</a></li>
    53. 

  53.       <li class="nav-sub"><a href="http://def.taobao.net/?doc/#def-xcake">KISSY XCake(内网)</a></li>
    54. 

  54.       <li class="nav-sub nav-divider"><a href="/1.4/docs/html/guideline/clam.html">Clam</a></li>
    55. 

  55.       <li><a href="/1.4/docs/html/guideline/third-party-lib.html">第三方代码库</a></li>
    56. 

  56.       <li class="nav-sub"><a href="https://github.com/lorrylockie/tpap/wiki">面向第三方安全的 KISSY</a></li>
    57. 

  57.       <li class="nav-sub"><a href="http://www.builive.com/demo/index.php">BUI</a></li>
    58. 

  58.       <li class="nav-sub nav-divider"><a href="http://work.tmall.net/muidoc/build/">MUI(内网)</a></li>
    59. 

  59.       <li><a href="https://github.com/kissyteam/kissy/blob/master/CONTRIBUTING.md">为 KISSY Core 贡献代码</a></li>
    60. 

  60.       <li class="nav-sub"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">HTML/CSS编码规范</a></li>
    61. 

  61.       <li class="nav-sub nav-divider"><a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/google-js-style.html">JavaScript 编码规范</a></li>
    62. 

  62. 	  <li><a href="/1.4/docs/html/guideline/upgrade.html"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-documentation.png">1.3.x->1.4.0 升级指南</a></li>
    63. 

  63. 	  <li><a href="/1.4/docs/html/guideline/faq.html"><img src="/1.4/docs/html/guideline/templates/assets/img/icon-faqs.png">FAQ</a></li>
    64. 

  64.       
    65. 

  65.     </ul>
    66. 

  66.   </nav>
    67. 

  67. 

  68.   <div id="content">
    69. 

  69.     <article>
    70. 

  70.       
    71. 

  71. 

  72. 	<h1>FAQ</h1>
    73. 

  73. <h3>Q:DOM 和 Node 有什么区别？</h3>
    74. 

  74. <p>Dom 是面向原生节点的第一层封装，主要是处理浏览器兼容和功能差异，Node 是对节点的第二层封装，主要是整合节点的功能并提供标准的API。</p>
    75. 

  75. <pre><code>var btn = KISSY.DOM.get(&#39;#btn&#39;);// 得到原生节点
    76. 

  76. var btn = KISSY.Node.one(&#39;#btn&#39;);// 得到包装后的节点</code></pre>
    77. 

  77. <h3>Q:<code>*-min.js</code>和<code>*.js</code>的区别</h3>
    78. 

  78. <p><code>*-min.js</code>是对应js的压缩版本，开发阶段引用<code>*.js</code>方便调试，发布到线上引用<code>*-min.js</code>减少文件体积。通常在URL中带入参数<code>?ks-debug</code>开打开KISSY的debug模式。<code>*-min.js</code>一般不需要手动生成，需要用工具来生成。</p>
    79. 

  79. <h3>Q:<code>rich-base</code>和<code>base</code>模块我应该用哪个？</h3>
    80. 

  80. <p>在1.4.0以及后续版本中，<code>rich-base</code>模块已经不存在，只有<code>base</code>模块，这里的base模块包含RichBase的功能，在1.3.0及以前版本中，需要引用<code>rich-base</code>来加载<code>富组件模板</code>。1.3.x 及以前版本推荐直接使用<code>rich-base</code>，1.4.0及后续版本，只需使用base即可。</p>
    81. 

  81. <h3>Q:KISSY 载入没有通过<code>add</code>注册的模块时不执行回调，如何解决？</h3>
    82. 

  82. <p>比如:</p>
    83. 

  83. <pre><code>// a.js
    84. 

  84. var a = 1;</code></pre>
    85. 

  85. <p>主程序use这个&quot;模块&quot;:</p>
    86. 

  86. <pre><code>KISSY.use(&#39;a&#39;,function(){
    87. 

  87.     // 不执行回调    
    88. 

  88. });</code></pre>
    89. 

  89. <p><code>KISSY.use</code>只有一层含义：&quot;执行已经注册过的模块并触发回调&quot;。执行的过程中会探测模块是否已经加载，这里的加载外部模块是正常逻辑，不是独立的一个功能。因此，通过KISSY加载外部“模块”时（外部模块不是<a href="kmd.html">kmd</a>格式），会认为不存在名为a的模块，因此不会执行回调。这样作的好处是依赖关系始终很清晰、不会混淆文件模块和非文件模块。坏处就是<code>KISSY.use</code>只能用于满足kmd规范的模块。KISSY 的设计遵循“约定高于配置“，用易于理解的约定代替一语双关的函数用法的多态。</p>
    90. 

  90. <p><code>YUI().use()</code>具有两层含义：&quot;加载外部模块并触发回调&quot;、&quot;执行模块逻辑并触发回调&quot;。因此<code>YUI().use()</code>可以加载非格式化的外部模块。这样作的好处是API统一，坏处是需要根据代码上下文搞清楚<code>use()</code>到底承担哪种角色。</p>
    91. 

  91. <p>KISSY 载入外部&quot;文件模块&quot;时，推荐使用<code>KISSY.getScript()</code>。</p>
    92. 

  92. <h3>Q:如果<code>requires</code>的模块过多，回调参数需要和模块列表一一对应，有没有更简单的办法？</h3>
    93. 

  93. <p>经常看到这种代码：</p>
    94. 

  94. <pre><code>// requires 的模块太多，一不小心就和 function() 里的回调不对应了
    95. 

  95. KISSY.add(function(S,A,B,C,D,E,F,G){
    96. 

  96.     // Your code...
    97. 

  97. },{requires:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;]});</code></pre>
    98. 

  98. <p>有没有办法不用去肉眼找模块和变量的对应关系？有方法，KISSY 1.4.1 提供了<code>require</code></p>
    99. 

  99. <pre><code>KISSY.add(function(S, require){
    100. 

  100.     var A = require(&#39;a&#39;);
    101. 

  101.     var B = require(&#39;b&#39;);
    102. 

  102.     var C = require(&#39;c&#39;);
    103. 

  103.     // Your code...
    104. 

  104. });</code></pre>
    105. 

  105. <h3>Q:淘宝 CDN 的 Combo 功能很酷，我可以自己部署吗？</h3>
    106. 

  106. <p>淘宝 CDN 基于 Nginx，CDN Combo 是 Nginx 的一个模块，项目开源，参照这里：<a href="https://github.com/alibaba/nginx-http-concat">HTTP Concatenation module for Nginx</a></p>
    107. 

  107. 

  108. 

  109. <div id="disqus_thread"></div>
    110. 

  110. <script>
    111. 

  111.     if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    112. 

  112.     /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    113. 

  113.     var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname
    114. 

  114. 

  115.     // The following are highly recommended additional parameters. Remove the slashes in front to use.
    116. 

  116.      //var disqus_identifier = '/anim';
    117. 

  117.      //var disqus_url = window.location;
    118. 

  118. 

  119.     /* * * DON'T EDIT BELOW THIS LINE * * */
    120. 

  120.     (function() {
    121. 

  121.         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    122. 

  122.         dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    123. 

  123.         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    124. 

  124.     })();
    125. 

  125.     }
    126. 

  126. </script>
    127. 

  127. 

  128. 

  129. 

  130.       
    131. 

  131.   <style>
    132. 

  132. 	.github-btn {
    133. 

  133. 		border: 0 none;
    134. 

  134. 		overflow: hidden;
    135. 

  135. 		margin-top:4px;
    136. 

  136. 	}
    137. 

  137. 	footer {
    138. 

  138. 		border-top:1px solid #e2e2e2;
    139. 

  139. 		padding-top:20px;
    140. 

  140. 		clear:both;
    141. 

  141. 	}
    142. 

  142. 	/* iPhone 及以下 */
    143. 

  143. 	@media only screen and (max-width: 767px) {
    144. 

  144. 		.github-link {
    145. 

  145. 			display:none;
    146. 

  146. 		}
    147. 

  147. 	}
    148. 

  148.   </style>
    149. 

  149.   <footer>
    150. 

  150. 

  151. 

  152. 

  153. 

  154. 	<div class="text-center">
    155. 

  155. 		©2010 - 2112 KISSY UI LIBRARY
    156. 

  156. 		<br /> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> 
    157. 

  157. 	<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
    158. 

  158. 	</div>
    159. 

  159.   </footer>
    160. 

  160.     </article>
    161. 

  161.   </div>
    162. 

  162.   <script>
    163. 

  163. 	var S = KISSY;
    164. 

  164. 	(function(){
    165. 

  165. 		S.use('node',function(S){
    166. 

  166. 			S.all('code').each(function(node){
    167. 

  167. 				var className = node.attr('class');
    168. 

  168. 				if(/^lang-/.test(className)){
    169. 

  169. 					var tc = className.replace(/^lang-/,'');
    170. 

  170. 					node.replaceClass(className,tc);
    171. 

  171. 				}
    172. 

  172. 			});
    173. 

  173. 			hljs.tabReplace = '    ';
    174. 

  174. 			hljs.initHighlighting();
    175. 

  175. 		});
    176. 

  176. 	})();
    177. 

  177. 	(function(){
    178. 

  178. 		var h3s = document.getElementsByTagName('h3');
    179. 

  179. 		for(var i = 0;i<h3s.length;i++){
    180. 

  180. 			var str = S.trim(h3s[i].innerHTML);
    181. 

  181. 			try{
    182. 

  182. 				str = str.match(/\w+/)[0];
    183. 

  183. 			}catch(e){
    184. 

  184. 				continue;
    185. 

  185. 			}
    186. 

  186. 			h3s[i].innerHTML = '<a name="'+str+'"></a>' + h3s[i].innerHTML;
    187. 

  187. 		}
    188. 

  188. 	})();
    189. 

  189.   </script>
    190. 

  190. </body>
    191. 

  191. </html>
    192. 

  192.