/*

*缺点

* 1. 还需要我们自己手工维护dom状态，以数据的思想去思考

*2. 数据改变后，还需要我们自己手动改变dom

*3.

* */

class LikeButton{

    constructor(){

        //定义一个状态

        this.state={

            liked:false

        }

    }

    createDOMFromString(domStr){

        let div=document.createElement('div');

        div.innerHTML=domStr;

        return div.children[0];

    }

    //如果原来有，现在没有，添加这个属性

    //如果原来有，现在有，覆盖这个属性

    setState(newState){

        this.state=Object.assign(this.state,newState);

        //先缓存老的dom对象

        let oldEle=this.ele;

        //生成一个新的dom对象

        let newEle=this.render();

        //替换老的dom对象

        oldEle.parentNode.replaceChild(newEle,oldEle);

    }

    //render返回值决定了此组件长什么样子

    // dom字符串永远只有一个顶级元素

    //因为我们dom字符串是又state决定的，所以只需要在修改了state之后从新reader一下

    //事件处理函数需要绑定this为组件的实例

    handleClick(event){

        //修改状态

       this.setState({liked:!this.state.liked})

    }

    render(){

        this.ele=this.createDOMFromString(

            `

            <button id="like-button">

                <span id="like-text" style="color:red">${this.state.liked?'取消':'点赞'}</span>

             </button>

            `

        );

        this.ele.addEventListener('click',this.handleClick.bind(this));

        return this.ele;

    }

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="wrapper">

</div>

</body>

<script src="LikeButton.js"></script>

<script>

    let likeButton=new LikeButton();

    let wrapper=document.querySelector(".wrapper");

    wrapper.appendChild(likeButton.render())

</script>

</html>

从一个简单的组件化封装写优化DOM操作的更多相关文章

  1. React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...

  2. 前端组件化（二）：优化 DOM 操作

    看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更 ...

  3. vue组件化之模板优化及注册组件语法糖

    vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化  在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...

  4. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  5. asp.net mvc4+mysql做一个简单分页组件（部分视图）

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  6. Antd组件库，利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  7. 一步一步写一个简单通用的makefile(四)--写一个通用的makefile编译android可执行文件

    通常要把我们自己的的代码编译成在android里面编译的可执行文件,我们通常是建一个文件夹 . ├── Android.mk ├── Application.mk ├── convolve.cl ├─ ...

  8. win7中的Uac与开机自动启动（好几种办法，特别是用不带UAC的程序启动UAC程序是一个简单的好办法，写驱动自启动更是了不得）

    在另一篇文章中已经介绍了给Exe加上Uac的方法,在使用的过程中我们会发现,如果把带Uac的Exe写入注册表的Run中,是无法实现开机自动启动的,原因就是带Uac的exe需要申请管理员权限,以便运行执 ...

  9. Python一个简单的数据库类封装

    #encoding:utf-8 #name:mod_db.py '''使用方法:1.在主程序中先实例化DB Mysql数据库操作类.      2.使用方法:db=database()  db.fet ...

随机推荐

  1. 转 叫板OpenStack:用Docker实现私有云

    http://www.cnblogs.com/alexkn/p/4239457.html 看到各大厂商的云主机,会不会觉得高大上?目前大公司的主流方案是OpenStack,比如某个公司的私有云

  2. 198 House Robber 打家劫舍

    你是一个专业的强盗,计划抢劫沿街的房屋.每间房都藏有一定的现金,阻止你抢劫他们的唯一的制约因素就是相邻的房屋有保安系统连接,如果两间相邻的房屋在同一晚上被闯入,它会自动联系警方.给定一个代表每个房屋的 ...

  3. 018 [工具软件]截图贴图注释 Snipaste

    Snipaste 是一个截图贴图工具,绿色免费.官方主页:https://zh.snipaste.com/. 三大功能: 1.截图,可以自动识别窗口的各元素,可以精准到像素调整截图区域大小. 2.贴图 ...

  4. WPF学习11：基于MVVM Light 制作图形编辑工具（2）

    本文是WPF学习10:基于MVVM Light 制作图形编辑工具(1)的后续 这一次的目标是完成 两个任务. 画布 效果: 画布上,选择的方案是:直接以Image作为画布,使用RenderTarget ...

  5. jQuery 几款比较棒的插件

    jQuery滚动监听插件Waypoints 博客分类: Javascript /Jquery / Bootstrap / Web   你是否希望当用户仅仅滚动滑条的时候,就能触发各种各样的动态效果呢? ...

  6. 【译】x86程序员手册41-10.6 TLB（快表）测试

    译注:本章基本未做翻译 10.6 TLB Testing TLB测试 The 80386 provides a mechanism for testing the Translation Lookas ...

  7. numpy基本用法

    numpy 简介 numpy的存在使得python拥有强大的矩阵计算能力,不亚于matlab. 官方文档(https://docs.scipy.org/doc/numpy-dev/user/quick ...

  8. 迅为电子4.3寸CAN总线工业平板电脑简介

    型号:iTOP-HMI043-C 4.3寸CAN总线工业平板电脑支持CAN通讯显示器,显示:显示尺寸:4.3英寸:分辨率:480×272 TFT液晶 65536色 :接口:支持CAN 2.0B:USB ...

  9. webstorm 创建es6项目 babel 转 es5

    node 安装 webstorm 安装 略过 npm install -y //生成package.json npm install babel-cli -g //全局安装babel-cli npm ...

  10. caffe LOG LOG_IF

    caffe使用了glog,在caffe的solver中输出都是用的LOG和LOG_IF LOG_IF是条件输出: LOG_IF(INFO, num_cookies > ) << &q ...