fmd.js
Version:
another module writing system
103 lines (100 loc) • 5.45 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>定义模块 define a module - fmd.js</title>
<link rel="stylesheet" href="/assets/tpl.css"/>
</head>
<body>
<header>
<h1><a href="/"><img src="/assets/fmd.js.png"/></a></h1>
<nav>
<ul>
<li><a href="/test/runner.html">Unit Testing</a></li>
</ul>
<ul>
<li><a href="https://github.com/fmdjs/fmd.js">GitHub Repository</a></li>
<li><a href="https://github.com/fmdjs/fmd.js/issues/new">Submit Issues</a></li>
</ul>
</nav>
<p>Copyright (C) 2013-2017 fmdjs.org<br/>Licensed under the MIT.</p>
</header>
<aside>
<ul>
<li><a href="/docs/quick-start.html">Qucik Start</a></li>
</ul>
<section>
<h1>Basic API</h1>
<ul>
<li><a href="/docs/api/define.html">Define a module</a></li>
<li><a href="/docs/api/require.html">Built-in module 'require'</a></li>
<li><a href="/docs/api/exports.html">Built-in module 'exports'</a></li>
<li><a href="/docs/api/module.html">Built-in module 'module'</a></li>
<li><a href="/docs/api/@fmd.html">Built-in module '@fmd'</a></li>
<li><a href="/docs/api/config.html">Configuration Options</a></li>
<!--
<li><a herf="/docs/api/id-conversion.html">id2url</a></li>
-->
<li><a href="/docs/api/events-basic.html">Basic Events</a></li>
<li><a href="/docs/api/load-css.html">Load CSS</a></li>
<li><a href="/docs/api/auxiliary.html">Auxiliary</a></li>
</ul>
</section>
<section>
<h1>Advanced API</h1>
<ul>
<li><a href="/docs/plugins.html">Plugins</a></li>
<li><a href="/docs/api/plugin-non.html">Plugin 'non'</a></li>
<li><a href="/docs/api/plugin-combo.html">Plugin 'combo'</a></li>
<li><a href="/docs/api/events-advanced.html">Advanced Events</a></li>
</ul>
</section>
<section>
<h1>Node.js</h1>
<ul>
<li><a href="/docs/in-node.html">Use in Node.js</a></li>
</ul>
</section>
</aside>
<article>
<h1 id="-define-a-module">定义模块 define a module</h1>
<p>fmd.js采用类似AMD和CommonJS的方式来定义模块，<code>define</code>是全局函数，基本语法如下：</p>
<pre class="sh_javascript">define( id?, dependencies?, factory );</pre>
<p><code>id</code>，模块标识符，用来唯一标识所定义模块，只能是字符串</p>
<p><code>dependencies</code>，模块依赖，只能是数组，且其每一项均是所依赖模块的id</p>
<p><code>factory</code>，模块构造方法，可以是函数、对象、数组</p>
<h2 id="define-id-dependencies-factory-">define( id, dependencies, factory )</h2>
<p>这是最常规的用法。当模块存在id时，则此模块为具名模块</p>
<pre class="sh_javascript">define( 'case/a', ['case/b','case/c'], function( b, c ){
//todo sth
} );</pre>
<p>此场景下，称模块<code>case/a</code>依赖/引用模块<code>case/b</code>、模块<code>case/c</code>，模块<code>case/b</code>被模块<code>case/a</code>依赖/引用。此时，<code>factory</code>为函数，执行后，将得到该模块输出的接口，执行时，将会依次传入<code>dependencies</code>中各个id所标识的模块所输出的接口。即，<code>b</code>代表模块<code>case/b</code>输出的接口，<code>c</code>代表模块<code>case/c</code>输出的接口</p>
<p>具名模块只有在第一次其他模块依赖时才会执行<code>factory</code>并且输出接口，之后再被依赖，将直接输出接口</p>
<h2 id="define-id-factory-">define( id, factory )</h2>
<p>当模块没有任何依赖的模块，可将<code>dependencies</code>参数省去</p>
<pre class="sh_javascript">define( 'case/b', function(){
//todo sth
} );</pre>
<h2 id="define-id-factory-lt-object-array-gt-">define( id, factory<object/array> )</h2>
<p>当<code>factory</code>为对象或数组时，<code>factory</code>对象或数据即为该模块输出的接口</p>
<pre class="sh_javascript">define( 'case/car', {
color: 'white',
size: 'large'
} );
define( 'case/size', ['large','normal','small'] );</pre>
<h2 id="define-dependencies-factory-">define( dependencies, factory )</h2>
<p>当不写id时，此模块则匿名模块</p>
<pre class="sh_javascript">define( ['case/b','case/c'], function( b, c ){
//todo sth
} );</pre>
<p>匿名模块一经定义立即执行，因为没有其他任何模块可以通过id来依赖于它</p>
<h2 id="define-factory-">define( factory )</h2>
<p>匿名模块也可以省去<code>dependencies</code></p>
<pre class="sh_javascript">define(function(){
//todo sth
});</pre>
</article>
<script src="/dist/fmd.js"></script>
<script src="/assets/sh.js"></script>
</body>
</html>