Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (149 sloc) 14 KB
<!DOCTYPE html><html><head><title>KISSY MINI</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="author" content="拔赤"><link rel="stylesheet" href="/stylesheets/2015-06-17.css"><link rel="stylesheet" href="/highlight/styles/github.css"></head><body><a href="http://gitlab.alibaba-inc.com/kissy/m/tree/master" class="forkme"><img style="position: absolute; top: 0; left: 0; border: 0;" src="/images/forkme.png"></a><div id="container"><header><h1>Kissy Mini</h1></header><div><ul class="nav"><li> <a href="/index.html">首页</a></li><li> <a href="/docs/core.html">API 文档</a></li><li> <a href="http://github.com/jayli/generator-mask#generator-mask">MASK 工具</a></li><li><a href="http://github.com/jayli/generator-mpi#generator-mpi">MPI 工具</a></li><li> <a href="/about.html">关于我们</a></li></ul><br style="clear:both"></div><div id="main" role="main"><br><div class="article"><p>KISSY MINI 是 <a href="http://docs.kissyui.com">KISSY</a> 的一个分支项目,2014 年初 release 第一版并投入使用。目标是建设一个 KISSY 的面向移动端的 MINI 版,具有完整的功能,并保持使用简单。同时在事件处理、模块化和面向对象方面依然秉承了 KISSY 的优良基因。目前已经在阿里的许多场景中平稳运行。 </p>
<p>KISSY MINI 与 KISSY 在企业级研发和模块开发上遵照类似的设计原则,此外没有其他关系,因此<strong> KISSY MINI 是一个全新的 js 库</strong>。</p>
<p><img src="https://gw.alicdn.com/tps/TB1N6CAJXXXXXXJXpXXXXXXXXXX-524-392.png" width="150" /></p>
<p><span class="gitter"><a href="http://badge.fury.io/bo/kissymini"><img src="https://badge.fury.io/bo/kissymini.svg" alt=""></a>
<a href="http://github.com/kissymini/kissymini.github.io"><img src="https://img.shields.io/github/tag/kissymini/kissymini.github.io.svg" alt=""></a>
<img src="https://img.shields.io/badge/kissymini-available-green.svg?style=flat-square" alt="">
<a href="https://gitter.im/kissymini?utm_source=share-link&amp;utm_medium=link&amp;utm_campaign=share-link"><img src="/images/gitter.svg" alt=""></a></span></p>
<p>KISSY MINI 对外提供一个种子文件(<code>v 1.x</code> 及后续版本)</p>
<ul>
<li><strong>dist</strong>:<a href="http://g.alicdn.com/kissy/m/1.0.1/mini-min.js">mini-min.js</a> (<strong>gizp 压缩后为 17k</strong>)</li>
<li><strong>源码</strong>:<a href="http://g.alicdn.com/kissy/m/1.0.1/mini.js">mini.js</a></li>
</ul>
<p>KISSY MINI 所包含的核心模块:</p>
<table>
<thead>
<tr>
<th style="text-align:center">模块名</th>
<th style="text-align:center">体积</th>
<th style="text-align:center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">core</td>
<td style="text-align:center"><strong>2.9k</strong></td>
<td style="text-align:center">构造 KISSY 全局对象</td>
</tr>
<tr>
<td style="text-align:center">node</td>
<td style="text-align:center"><strong>4.2k</strong></td>
<td style="text-align:center">Node模块,主要涵盖 DOM 操作的封装</td>
</tr>
<tr>
<td style="text-align:center">io</td>
<td style="text-align:center"><strong>2.1k</strong></td>
<td style="text-align:center">Ajax模块</td>
</tr>
<tr>
<td style="text-align:center">event</td>
<td style="text-align:center"><strong>2.1k</strong></td>
<td style="text-align:center">Event 模块,提供事件的封装,包括自定义事件</td>
</tr>
<tr>
<td style="text-align:center">loader</td>
<td style="text-align:center"><strong>4.6k</strong></td>
<td style="text-align:center">简版的 loader 模块</td>
</tr>
<tr>
<td style="text-align:center">anim</td>
<td style="text-align:center"><strong>1k</strong></td>
<td style="text-align:center">动画模块</td>
</tr>
<tr>
<td style="text-align:center">touch</td>
<td style="text-align:center"><strong>2.1k</strong></td>
<td style="text-align:center">手势事件模块,包括常用的触屏事件,解决 tap 穿透问题</td>
</tr>
</tbody>
</table>
<p>这些模块看过之后可以立即忘掉他们,这些模块会默认被初始化好,而且绝大部分功能可通过 <code>KISSY</code> 全局对象来访问,比如 <code>KISSY.Node</code>、<code>KISSY.Event</code>、<code>KISSY.IO</code> 等,注意 <code>KISSY.Anim</code>、 <code>KISSY.Touch</code> 是不存在的。通常情况下,我们更推荐你使用基于 DOM 的链式调用。在需要特殊的面向对象编程时(比如使用自定义事件(KISSY.Event.Target)或者类扩充(KISSY.augment)时),需要通过全局对象<code>KISSY</code>。</p>
<ul>
<li>API 文档入口:<a href="./docs/core.html">core</a>,<a href="./docs/node.html">node</a>,<a href="./docs/io.html">io</a>,<a href="./docs/event.html">event</a>,<a href="./docs/loader.html">loader</a>,<a href="./docs/anim.html">anim</a>,<a href="./docs/touch.html">touch</a></li>
<li>测试用例入口:<a href="./tests/node.html">node.html</a>、<a href="./tests/io.html">io.html</a>、<a href="./tests/loader.html">loader.html</a>、<a href="./tests/event.html">event.html</a></li>
</ul>
<h3 id="-">种子文件</h3>
<p>获取最新的种子文件 </p>
<ul>
<li><a href="http://g.alicdn.com/kissy/m/1.0.1/mini-min.js" style="background:none" ><img src="https://img.shields.io/badge/kissy%20mini-1.0.1-green.svg" alt=""></a> 新版 </li>
<li><a href="http://g.alicdn.com/kissy/m/0.3.11/mini-full-min.js" style="background:none"><img src="https://img.shields.io/badge/kissy%20mini-0.3.11-orange.svg" alt=""></a> 旧版</li>
</ul>
<p>注意,KISSY MINI 0.x 版本对外提供三个文件,分别是<a href="http://g.alicdn.com/kissy/m/0.3.11/mini-min.js">mini.js</a>、<a href="http://g.alicdn.com/kissy/m/0.3.11/mini-full-min.js">mini-full.js</a> 和 <a href="http://g.alicdn.com/kissy/m/0.3.11/mini-all-min.js">mini-all.js</a>。这和 v1.x 不同。</p>
<h3 id="-">开始使用</h3>
<p>直接引用线上地址</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://g.alicdn.com/kissy/m/1.0.1/mini-min.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre><p>或者通过 bower 安装到本地</p>
<pre><code>bower <span class="hljs-keyword">install</span> kissymini
</code></pre><p>启动:DOMReady 后弹出 Hello World!</p>
<pre><code>KISSY.ready(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(S)</span></span>{
alert(<span class="hljs-string">'Hello World!'</span>);
});
</code></pre><p>DOM操作:获取一个<code>className</code>叫<code>continue</code>的<code>button</code>,并将它的内容改为&quot;Hello Kissy&quot;。</p>
<pre><code>var <span class="hljs-variable">$ </span>= <span class="hljs-constant">KISSY.</span>all;
<span class="hljs-variable">$(</span><span class="hljs-string">'button.continue'</span>).html(<span class="hljs-string">'Hello Kissy!'</span>);
</code></pre><p>Ajax 操作:</p>
<pre><code><span class="hljs-keyword">var</span> S = KISSY;
S.IO.<span class="hljs-keyword">get</span>(<span class="hljs-string">"test.php"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(d)</span></span>{
alert(d);
});
</code></pre><p>说明:Loader 模块是 Kissy Mini 重要的核心模块,负责在<code>KISSY.use(&#39;模块名&#39;)</code>时自动载入外部模块,模块规范符合 <a href="http://docs.kissyui.com/1.4/docs/html/guideline/kmd.html">Kissy 标准的模块规范 KMD</a>。v1.x 的后续版本会对渐渐放弃对 KMD 的完全兼容(即不鼓励<code>KISSY.add(function(){},{requires:[&#39;a&#39;,&#39;b&#39;]})</code>这种载入依赖的写法),而更加强调对 CMD 语法的支持。因此我们推荐模块开发写法采用 CMD 格式。并且无需通过<code>KISSY.use()</code>来载入内置模块了。引用种子文件后内置模块自然生效可用。</p>
<p>同时 Loader 在 v1.0 之后就不在支持 Combo 了,因为出于简化场景的需要,我们更倾向于用离线包给前端页面提速,因此 KISSY MINI 不再优先支持载入线上资源文件的场景。Loader 在满足基本规范的前提下,会在 v1.x 的后续版本中逐步简化。</p>
<p>1)定义模块</p>
<p>这里采用 CMD 写法来引入外部依赖</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// ./index.js</span>
KISSY.add(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(S, require, exports, module)</span> </span>{
<span class="hljs-comment">// 通过 require 引入外部模块</span>
<span class="hljs-keyword">var</span> myMode = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./my-mode'</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Mod</span><span class="hljs-params">()</span> </span>{}
<span class="hljs-keyword">return</span> Mod;
});
</code></pre>
<p>2)使用模块</p>
<p>如果 HTML 页面和js代码在同一台服务器上,则可以直接用相对路径来访问js</p>
<pre><code class="lang-javascript">KISSY.<span class="hljs-keyword">use</span>(<span class="hljs-string">'./index'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(Mod)</span> </span>{
<span class="hljs-keyword">var</span> data = <span class="hljs-keyword">new</span> Mod();
});
</code></pre>
<p>如果不在同一台服务器上,则需要配置“包”</p>
<p>3)包配置</p>
<pre><code class="lang-javascript"><span class="hljs-tag">KISSY</span><span class="hljs-class">.config</span>(<span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">packages</span>:<span class="hljs-value"> [{
name : <span class="hljs-string">'pkg1'</span>,
path : <span class="hljs-string">'./module'</span>,
</span></span></span>}]
});
</code></pre>
<h3 id="-">构建工具</h3>
<p>KISSY MINI 的社区在 v1.0 及后续版本中将不再集中(<a href="http://kpm.taobao.net/">KISSY Gallery</a>)管理,KISSY MINI 的自定义模块直接依赖于 git 仓库,通过 bower 来约束代码之间的依赖关系。这样,就剔除了 KISSY MINI 组件代码部署上线这个操作,这极大简化了 KISSY MINI 模块研发规范。因此需要注意,KISSY MINI 从 v1.0 版本开始,组件模块代码无法直接和 KISSY 6.x 兼容,但迁移成本其实非常小。同时,我们推荐使用 <a href="http://github.com/jayli/generator-mpi">MPI 脚手架</a>工具来生成模块代码骨架,使用 <a href="http://github.com/jayli/generator-mask">Mask 工具</a>来生成项目代码骨架。</p>
<p>1)<strong>脚手架</strong>:</p>
<ol>
<li><a href="http://github.com/jayli/generator-mask">项目脚手架工具 Mask</a>:KISSY MINI 项目默认用 Grunt 来构建</li>
<li><a href="http://github.com/jayli/generator-mpi">模块脚手架工具 MPI</a>:模块无需构建,通过 bower 来管理依赖,通过 git 来存储</li>
</ol>
<p><img src="https://gw.alicdn.com/tps/TB16ARoJpXXXXX1XVXXXXXXXXXX-1466-632.png" width="600" /></p>
<p>注意,KISSY MINI 的模块代码无需发布到 npm,这样我们就不用人肉同步 git 仓库的代码版本和 npm 仓库代码版本的差异,你也可以轻松构建自己的代码仓库。</p>
<p>脚手架工具一次性安装:</p>
<p>首先安装三件套</p>
<pre><code>npm install -<span class="hljs-keyword">g</span> yo grunt-<span class="hljs-keyword">cli</span> bower
</code></pre><p>然后安装本地服务和脚手架工具</p>
<pre><code>npm <span class="hljs-keyword">install</span> -g here-ssi generator-mask generator-mpi
</code></pre><p>这样就拥有了三个重要的命令</p>
<ol>
<li><code>here</code>:开启本地服务,详情查看<a href="https://www.npmjs.com/package/here-ssi">here-ssi</a>文档</li>
<li><code>yo mask</code>:生成项目,详情查看<a href="https://github.com/jayli/generator-mask#generator-mask">Mask</a>文档</li>
<li><code>yo mpi</code>:生成组件,详情查看<a href="https://github.com/jayli/generator-mpi#generator-mpi">Mpi</a>文档</li>
</ol>
<p>2)<strong>编译构建</strong>:KISSY MINI 的代码编译工具</p>
<ul>
<li>Grunt:<a href="https://github.com/daxingplay/grunt-kmc">grunt-kmc</a> 或者 <a href="https://www.npmjs.com/package/grunt-kmb">grunt-kmb</a></li>
<li>Gulp:<a href="https://www.npmjs.com/package/gulp-kmc">gulp-kmc</a>。</li>
</ul>
<p>以<a href="https://github.com/daxingplay/grunt-kmc">grunt-kmc</a>为例,示例代码请参照<a href="https://github.com/daxingplay/grunt-kmc/tree/master/example/combo-one-file">combo-one-file</a>,<a href="http://asciinema.org/a/6732">视频演示</a>。</p>
<h3 id="-demo">示例 Demo</h3>
<ul>
<li>Demo:<a href="./demo/api/kissy-api.html">KISSY全局对象挂载的方法</a>、<a href="./demo/dump/delegate.html">事件委托DEMO</a>、<a href="./demo/dump/fx.html">给DOM添加新事件</a>、<a href="./demo/game/index.html">一个小游戏</a>、<a href="./demo/modules-loader/index.html">模块加载Demo</a>、<a href="./demo/slide_and_lazyload/index.html">天猫超市的Demo</a></li>
<li>组件:<a href="http://kissygalleryteam.github.io/slide/1.3/demo/index.html">Slide</a>(Kiss 官方组件)、<a href="/demo/slide/index.htm">Mini Slide</a>、<a href="/demo/ringnav/index.htm">仿 Path 的环状菜单</a></li>
<li>项目:<a href="http://h5.m.taobao.com/trip/ticket/pad/search/index.html?ttid=703628@taobao_ipad_4.0">阿里旅行-景点门票 Pad 版</a>,<a href="http://wapp.m.taobao.com/mseckill/index.html?host=h5.m.taobao.com">淘宝秒杀手机版</a></li>
</ul>
<p><a href="http://h5.m.taobao.com/trip/home/index.html">阿里旅行·去啊</a> 无线 Web 产品均基于 Kissy Mini。</p>
</div></div><section class="comment"><div id="disqus_thread"></div><script src="/javascripts/disqus.js"></script></section></div><script src="/javascripts/jquery.min.js"></script><script src="/javascripts/jquery.grumble.min.js"></script><script src="/javascripts/main.js"></script></body></html>