模仿angularjs写了一个简单的HTML模版和js数据填充的示例

liulun

发布于 2018-01-12 15:21:53

1K0

发布于 2018-01-12 15:21:53

文章被收录于专栏：liulunliulun

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script language="javascript" type="text/javascript">        
        //框架代码
        $(function () {
            $("[up-ctl]").each(function (i, item) {
                var parent = $(this);
                var ctl = parent.attr("up-ctl");
                var tar = window[ctl]();//执行用户的ctl方法
                //parent.data("_data", tar);//以后可能会用到

                var str = parent.html().replace(/##(.+?)##/g, function (e1, e2) {
                    var res = tar[e2];
                    if (res == undefined || res == null) {
                        return e1;
                    } else {
                        return res;
                    }
                });
                parent.html(str);

                parent.find("[up-repeat]").each(function (i, item) {
                    var repeat = $(this);
                    var itemAttr = repeat.attr("up-repeat");
                    for (var i = 0; i < tar[itemAttr].length; i++) {
                        var repeatStr = repeat.html().replace(/{{(.+?)}}/g, function (e1, e2) {
                            var res = tar[itemAttr][i][e2];
                            if (res == undefined || res == null) {
                                return e1;
                            } else {
                                return res;
                            }
                        });
                        repeat.after(repeatStr);
                    }
                    repeat.remove();
                });
            })
        });
    </script>
    <script>
        //用户代码
        function ctl1() {
            var obj = {};
            obj.title = "这是一个对象";
            obj.items = [];
            for (var i = 0; i < 20; i++) {
                var item = {};
                item.title = "第" + i + "个";
                item.index = i;
                obj.items.push(item);
            }
            return obj;
        }
    </script>
</head>
<body>
    <div up-ctl="ctl1">
        <h1>##title##</h1>
        <ul>
            <li up-repeat="items">
                {{index}}：{{title}}<br />
            </li>
        </ul>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014-07-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

angularjs