master

分支 (1)

标签 (1)

管理

管理

master

v0.3.0

my-doc-jsx-plugin-api
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body, html{
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #frame{
            display: flex;
            height: 100%;
        }
        #doc, #docEdit{
            flex: 1;
            height: 100%;
            overflow: auto;
            padding: 0 5px;
            border: 0;
        }
    </style>
    <link href="./static/myDocJsx.css" rel="stylesheet">
</head>
<body>
    <div id="frame">
        <div id="doc"></div>
        <textarea id="docEdit">
<doc>
    <h1>my-doc-jsx-plugin-api</h1>
    <p>my-doc-jsx-plugin-api是一个my-doc-jsx的插件，用于生成API文档。</p>

    <h2>安装</h2>
    <p>从npm上面安装：</p>
    <code>{
`npm instlal my-doc-jsx-plugin-api --D`
    }</code>
    <p>如果是在nodejs或者浏览器中执行，使用jsxdoc的myDocJsx方法集成，nodejs：</p>
    <code>{
`const Plugin = require('my-doc-jsx-plugin-api')
myDocJsx.usePlugin(new Plugin)`
    }</code>
    <p>浏览器中：</p>
    <code>{
`myDocJsx.usePlugin(new myDocJsxPluginAPI())`
    }</code>
    <p>cli环境下使用</p>
    <code>{
`docjsx c html --plugin my-doc-jsx-plugin-api index.jsx ./`
    }</code>

    <h2>注释生成函数文档</h2>
    <p>该功能可以将函数的注释生成为说明函数用途、参数、返回值的文档，以table表格的形式展示，具体使用方法为：</p>
    <code>{
`<api>\{\`
* 根据字符串模糊查询key，并返回匹配的缓存数组
* @param {string} searchText    key的模糊检索条件
* @return {Array<string>}      返回匹配的数组
\`\}</api>`
    }</code>
    <p>生成的效果为：</p>
    <api>{`
    * 根据字符串模糊查询key，并返回匹配的缓存数组
    * @param {string} searchText    key的模糊检索条件
    * @return {Array<string>}      返回匹配的数组
    `}</api>

    <h2>展示HTML形式的例子</h2>
    <p>该控件的功能为，运行HTML代码的显示效果，类似于jsfiddle这样的网站，不过该功能比jsfiddle简单很多，单机即可使用，同时可以展示HTML例子的代码。</p>
    <p>该控件基于HTML的iframe标签总的srcdoc属性，因此在markdown、CSP策略中设置了child-src的页面、部分浏览器中无法使用。</p>
    <p>具体使用方法为：</p>
    <code>{
`<html-example>\{
\`
<div id="app">
    \{\{ message \}\}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '运行了vue!'
        }
    })
</script>
\`
\}</html-example>`
    }</code>
    <p>效果为：</p>
    <html-example>{
`
<div id="app">
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '运行了vue!'
        }
    })
</script>
`
    }</html-example>
</doc>

        </textarea>
    </div>
    <script src="./static/react.js"></script>
    <script src="./static/babel.js"></script>
    <script src="./static/myDocJsx.js"></script>
<script>

    function renderDoc() {
        var text = document.querySelector("#docEdit").value;
        var script = myDocJsx.convert(text);
        document.querySelector('#doc').innerHTML = script;
    }

    document.addEventListener("DOMContentLoaded", function () {
        myDocJsx.usePlugin(new myDocJsxPluginAPI)

        renderDoc()
        document.querySelector("#docEdit").addEventListener("input", function () {
            renderDoc()
        })
    })
</script>
</body>
</html>