基于jquery的web组件实现方式

最新推荐文章于 2023-07-28 16:30:43 发布

wanxiangming1994

最新推荐文章于 2023-07-28 16:30:43 发布

阅读量289

点赞数

分类专栏：来自程序员的奇淫巧技文章标签： javascript jquery 前端前端框架前端开发

本文链接：https://blog.csdn.net/sdfgedcx/article/details/78634913

版权

来自程序员的奇淫巧技专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//CB=ComponentBase
var CB={
    createNew:function(cb){
        var CB=$(cb);

        var refList={};

        //为了解决元素嵌套时，ref不能正确取得元素的问题，
        //此处在加载元素时先提取出元素捕获为本地副本。
        $.each(CB.find("[ref]"),function(ind,val){
            if(refList[val.getAttribute('ref')] != undefined){
                alert("CB ref重复定义异常！");
            }
            refList[val.getAttribute('ref')]=val;
        });

        CB.get=function(REF){
            return $(refList[REF]);
        }

        return CB;
    }
}

有了CB类，我们就可以编写清爽的前端组件了。

//你可以使用自动化工具将html代码转换为js字符串（这样的工具很好找，百度一下有很多）。
var Item={
    createNew:function(title,content){
        var cb=CB.createNew("<div>"+
                "    <a ref='tabA'><a>"+
                "    <span ref='tabB'></span>"+
                "</div>");

        cb.get("tabA").html(title);
        cb.get("tabB").html(content);

        return cb;
    }
}

你可以使用类似上例的方式创造任何你需要的组件。

<html>
    <body>
        <div id='container'></div>
    </body>
    <script>
        Item.createNew("hello","wold").appendTo($("#container"));
    </script>
</html>

wanxiangming1994

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的web组件实现方式

//CB=ComponentBasevar CB={ createNew:function(cb){ var CB=$(cb); var refList={}; //为了解决元素嵌套时，ref不能正确取得元素的问题， //此处在加载元素时先提取出元素捕获为本地副本。 $.each(CB.find("[ref]"),
复制链接

扫一扫