前端组件封装


步骤如下:

1、定义一个类;
2、在类中添加方法;
3、在body中定义一个DOM节点;
4、在脚本中将DOM节点和类定义的方法结合起来,实现特定功能的组件。

<body>
    <input type="button" value="组件测试" />
    <div id="box">           <!--组件占位使用的DOM节点-->
        111
    </div>     
    <script type="text/javascript">
        function TestWidget(did){   //定义一个组件类
            var self = document.querySelector("#" + did);
            this.addp = function(){
                self.innerHTML = "<p>222</p>"
            }
            return this; //返回当前组件
            }
        function Test(){
            var t = new TestWidget("box");
            t.addp();
        }
        Test();
    </script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,785评论 18 399
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,714评论 25 709
  • 9元钱能做什么?当面对这样的问题,我们会给出什么答案呢?吃一顿丰盛的早餐,打一次出租车,或者上两个小时网吧...
    小云_9922阅读 3,219评论 5 4
  • 白天,太阳毒辣, 我们彼此远远望着, 一句话也没有说—— 干裂的白日梦持续很久, 皮肤上留下许多盐, 表明我们曾在...
    三水林枫阅读 712评论 20 31