开发无框架单页面应用 -- 老码农的祖传秘方

miniSPA.refresh = function(node, scope) {
    var children = node.childNodes;
    if(node.nodeType != 3){                            //traverse child nodes, Node.TEXT_NODE == 3
        for(var k=0; k<node.attributes.length; k++){
            node.setAttribute(node.attributes\[k\].name, miniSPA.feedData(node.attributes\[k\].value, scope));       //replace variables defined in attributes
        }
        if(node.hasAttribute('data-src')){
            node.setAttribute('src',node.getAttribute('data-src'));             //replace src attribute
        }
        var childrenCount = children.length;
        for(var j=0; j<childrenCount; j++){
            if(children\[j\].nodeType != 3 && children\[j\].hasAttribute('data-repeat')){     //handle repeat items
                var item = children\[j\].dataset.item;
                var repeat = children\[j\].dataset.repeat;
                children\[j\].removeAttribute('data-repeat');
                var repeatNode = children\[j\];
                for(var prop in scope\[repeat\]){
                    repeatNode = children\[j\].cloneNode(true);                  //clone sibling nodes for the repeated node
                    node.appendChild(repeatNode);
                    var repeatScope = scope;
                    var obj = {};
                    obj.key = prop;
                    obj.value = scope\[repeat\]\[prop\];                           //add the key/value pair to current scope
                    repeatScope\[item\] = obj;
                    miniSPA.refresh(repeatNode,repeatScope);                           //iterate over all the cloned nodes
                }
                node.removeChild(children\[j\]);                                 //remove the empty template node
            }
            else{
                miniSPA.refresh(children\[j\],scope);                                    //not for repeating, just iterate the child node
            }
        }
    }
    else{
        node.textContent = miniSPA.feedData(node.textContent, scope);           //replace variables defined in the template
    }
}

从上面的代码可以看到，refresh 方法是一个递归执行的函数，每次处理当前 node 之后，还会递归处理所有的孩子节点。通过这种方式，就能把模板中定义的所有元素的占位变量都替换为真实数据。

feedData 用来替换文本节点中的占位变量。它通过正则表达式获取{{...}}中的内容，并把多级属性（例如data.map.value）切分开，逐级循环处理，直到最底层获得相应的数据。

miniSPA.feedData = function(template, scope){                                     //replace variables with data in current scope
    return template.replace(/\\{\\{(\[^}\]+)\\}\\}/gmi, function(model){
        var properties = model.substring(2,model.length-2).split('.');          //split all levels of properties
        var result = scope;
        for(var n in properties){
            if(result){
                switch(properties\[n\]){                  //move down to the deserved value
                    case 'key':
                        result = result.key;
                        break;
                    case 'value':
                        result = result.value;
                        break;
                    case 'length':                     //get length from the object
                        var length = 0;
                        for(var x in result) length ++;
                        result = length;
                        break;
                    default:
                        result = result\[properties\[n\]\];
                }
            }
        }
        return result;
    });
}

initFunc 方法的作用是解析片段对应的初始化方法，判断其类型是否为函数，并执行它。这个方法是在 changeUrl 方法里调用的，每次访问路径的变化都会触发相应的初始化方法。

miniSPA.initFunc = function(partial) {                            //execute the controller function responsible for current template
    var fn = window\[partial\].init;
    if(typeof fn === 'function') {
        fn();
    }
}

最后是 miniSPA 库自身的初始化。很简单，就是先获取 404.html 片段并缓存到 settings.partialCache.notfound中，以便在路径变化时使用。当路径不合法时，就会从缓存中取出404片段并显示在局部刷新的 div 中。

miniSPA.ajaxRequest('lib/404.html', 'GET','',function(status, partial){
    settings.partialCache.notfound = partial;
});        //cache 404 page first

好了，核心的代码就是这么多。整个 js 文件才区区 155 行，比起那些动辄几万行的框架是不是简单得不能再简单了？

有了上面的 miniSPA.js 代码以及配套的 404.html 和 home.html，并把它们打包放在 lib 目录下，下面就可以来看我的应用里有啥内容。

应用代码

说到应用那就更简单了，app.js 一共30行，实现了一个 GET 和一个 POST 访问。

首先是 getEmoji 对象，定义了一个 html 片段文件路径和一个初始化方法。初始化方法中分别调用了 miniSPA 中的ajaxRequest 方法（用于获取 Github API 提供的 emoji 表情数据， JSON格式）和 render 方法（用来渲染对应的 html 片段）。

var getEmoji = {};
getEmoji.partial = "getEmoji.html"
getEmoji.init = function(){
    document.getElementById('spinner').style.visibility = 'visible';
    document.getElementById('content').style.visibility = 'hidden';
    miniSPA.ajaxRequest('https://api.github.com/emojis','GET','',function(status, partial){
        getEmoji.emojis = JSON.parse(partial);
        miniSPA.render('getEmoji');         //render related partial page with data returned from the server
        document.getElementById('content').style.visibility = 'visible';
        document.getElementById('spinner').style.visibility = 'hidden';
    });
}

然后是 postMD 对象，它除了 html 片段文件路径和初始化方法（因为初始化不需要获取外部数据，所以只需要调用render 方法就可以了）之外，重点在于 submit 方法。submit 会把用户提交的输入文本和其他两个选项打包 POST 给 Github 的 markdown API，并获取后台解析标记返回的 html。

var postMD = {};
postMD.partial = "postMD.html";
postMD.init = function(){
    miniSPA.render('postMD');               //render related partial page
}
postMD.submit = function(){
    document.getElementById('spinner').style.visibility = 'visible';
    var mdText = document.getElementById('mdText');
    var md = document.getElementById('md');
    var data = '{"text":"'+mdText.value.replace(/\\n/g, '<br>')+'","mode": "gfm","context": "github/gollum"}';
    miniSPA.ajaxRequest('https://api.github.com/markdown', 'POST', data,function(status, page){
        document.getElementById('spinner').style.visibility = 'hidden';
        md.innerHTML = page;                //render markdown partial returned from the server
    });
    mdText.value = '';
}
miniSPA.changeUrl();                        //initialize

这两个对象对应的 html 片段如下：

getEmoji.html :

<h2>GET request: Fetch emojis from Github pulic API.</h2>
<p> This is a list of emojis get from https://api.github.com/emojis: </p>
<i id="spinner" class="csspinner duo"></i>
<span id="content">
    <h4>Get <strong class="highlight">{{emojis.length}}</strong> items totally.</h4>
    <hr>
    <ul>
        <li data-repeat="emojis" data-item="data">
            <figure>
                <img data-src='{{data.value}}' width='100' height='100'>
                <figcaption>{{data.key}}</figcaption>
            </figure>
        </li>
    </ul>
</span>

postMD.html :

<h2> POST request: send MD text and get rendered HTML</h2>
<p> markdown text here (for example:  <strong>Hello world github/linguist#1 **cool**, and #1! </strong>): </p>
<textarea id="mdText" cols="80" rows="6"></textarea>
<button onclick="postMD.submit();">submit</button>
<hr>
<h4>Rendered elements from Github API (https://api.github.com/markdown):</h4>
<i id="spinner" class="csspinner duo"></i>
<div id="md"></div>

演示地址

以上代码的在线演示可以在 我的 Github 项目页面 看到。

以上演示代码已经在 Chrome, Firefox, Safari 和 Opera 较新版本上测试过。IE 9 以上版本估计也可以，不过没测过。

另外，这些代码还有不少值得优化的地方，不过时间有限，主要是为了达到演示目的，所以暂时就不去改它了。

原文出处：framework-free-single-page-app