fmd.js
Version:
another module writing system
105 lines (98 loc) • 5.76 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>Quick Start - 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="quick-start">Quick Start</h1>
<h2 id="-fmd-js">引入fmd.js</h2>
<p>在页面直接通过<code>script</code>标签引入fmd.js</p>
<h2 id="-">模块书写</h2>
<h3 id="-h-">假设存在<code>h</code>模块如下：</h3>
<pre class="sh_javascript">define( 'h', function(){
return 'hello';
} );</pre>
<p>通过<code>define</code>全局函数来定义一个模块，字符串<code>h</code>是该模块的id，后一个参数是该模块（<code>h</code>模块）的工厂函数</p>
<p>当<code>h</code>模块第一次被其他模块依赖时，其工厂函数将执行，且只执行一次，并得到由工厂函数返回的结果作为其接口</p>
<h3 id="-w-">假设存在<code>w</code>模块如下：</h3>
<pre class="sh_javascript">define( 'w', ['module'], function( mod ){
mod.exports = 'world';
});</pre>
<p><code>w</code>模块定义时相比<code>h</code>模块新增了一个参数<code>['module']</code>，此参数是<code>w</code>模块运行所需的依赖模块数组，其每一项均为一个模块的id</p>
<p>工厂函数的参数<code>mod</code>就是所依赖的<code>module</code>模块所提供的接口，若有多个依赖模块，它们的接口将依次作为工厂函数的参数</p>
<p><code>module</code>模块是fmd.js内建的模块，代表当前正在定义的模块（即<code>w</code>模块自己）。将值赋给<code>mod.exports</code>，与<code>h</code>模块的工厂函数中的<code>return</code>所取得的效果是一样的，即用来输出当前模块的接口</p>
<h3 id="-output-">假设存在<code>output</code>模块如下：</h3>
<pre class="sh_javascript">define( 'output', ['exports'], function( exp ){
exp.page = function( message ){//对外提供`page`方法
document.write( message );
};
} );</pre>
<p><code>exports</code>也是fmd.js内建的模块，其接口是个对象，代表当前正在定义的模块（即<code>output</code>模块自己）的接口宿主，对<code>exp</code>对象增加属性或方法，即是当前模块所能提供的接口</p>
<h3 id="-hello-world-">现在想要在页面上输出<code>hello world</code>，可以这么做：</h3>
<pre class="sh_javascript">define(['require','output','w'], function( req, out, wo ){
var he = req('h');//取得`h`模块的接口赋予给`he`变量
out.page( he + ' ' + wo );//`page`方法由`output`模块提供
} );</pre>
<p>这个模块定义时没有提供id，那么此模块一经定义即被执行</p>
<p><code>req</code>、<code>out</code>、<code>wo</code>分别是所依赖的<code>require</code>模块、<code>output</code>模块、<code>w</code>模块所提供的接口</p>
<p><code>require</code>模块也是fmd.js内建的模块，用来取得其他模块所提供的接口</p>
<h2 id="-">示例</h2>
<p><a href="/examples/hello-world/sync.html">hello world同步</a>、<a href="/examples/hello-world/async.html">hello world异步</a></p>
</article>
<script src="/dist/fmd.js"></script>
<script src="/assets/sh.js"></script>
</body>
</html>