ts 之定义类 Class

小小liang

已于 2022-09-07 17:28:11 修改

阅读量2k

点赞数 1

分类专栏： ts + vue2 文章标签： typescript javascript 前端

于 2022-05-13 19:46:17 首次发布

本文链接：https://blog.csdn.net/weixin_47409897/article/details/124737650

版权

ts + vue2 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

ts 之定义类 Class

定义一个简单的类

class City {
  // 成员变量
  cName:string;
  cLevel:number;
  // 构造函数
  constructor(name:string,lever:number){
    this.cName = name;
    this.cLevel = lever
  }
  // 成员方法
  about(){
    console.log("我是介绍之-"+this.cName+"等级为-"+this.cLevel);
    
  }
}
let res = new City("小渣亮",10)
console.log("res",res); // City {cName: '小渣亮', cLevel: 10}
res.about() // 我是介绍之-小渣亮等级为-10

定义一个数据类的封装

ts / DateHelper.ts

class DateHelper{
  dataKey:string;
  privateKey:string;
  // privateKey:any;
  // 构造函数 接受 类调用时候 传递的参数
  constructor(dataKey:string,privateKey:string){
    this.dataKey =dataKey;
    this.privateKey = privateKey;
  }
  // 方法
  // 读取数据
  readData():any{
    // 1：读取 本地数据 （ 根据 dataKey 读取 ）
    let strData:string |null = localStorage.getItem(this.dataKey);
    // 2：将 读取的 json数组 字符串 转化为数组对象
    let arrData:any = [];
    if ( strData != null ) {
      arrData = JSON.parse(strData)
    }
    // 3：返回 数组对象
    return arrData;
  }
  // 存储数据
  savaData(arrData:Array<Object>):void{
    // 1： 将数组 转化为 json字符串
    let str:string = JSON.stringify(arrData);
    // 2：将字符串 保存到 本地 localStorage 中
    localStorage.setItem(this.dataKey,str)
  }
  // 新增数据
  addData(conStr:string):number{
    // 1：读取本地 现有数据
    let arr:any = this.readData();
    // 2：创建一个 新的评论对象 并且设置 评论内容属性 {  content: '菜鸡' }
    interface locObject {
      [key: string]: any
    }
    let obj:locObject = {
      content:conStr,
    }
    // 3.1： 自动 生成一个主键值 （id值） {  content: '菜鸡' ,id:1 }
    let newId:any = arr.length > 0 ? arr[arr.length - 1][this.privateKey] + 1: 1;
    obj[this.privateKey] = newId;
    // 4将 添加 主键值 的对象 添加到数组
    arr.push(obj)
    // 5：将数组 保存 到 localStorage 中
    this.savaData(arr)
    // 6：返回 id
    return newId;
  }
  // 删除 id 
  removeDataById(id:string | number):boolean{
    //1： 读取 本地数组
    let arr = this.readData()
    //2： 查找要删除的 评论对象 下标 并且保存到本地
    interface locObject {
      [key: string]: any
    }
    let index = arr.findIndex( (ele:locObject) => {
      return ele[this.privateKey] == id;
    })
    
    // 如骨 下标 大于 -1 代表着可以找到 需要删除的数据
    if ( index > -1) {
      arr.splice(index,1);
      // 保存到本地
      this.savaData(arr)
      return true;
    }
    return false; // 否者 返回 false
  }
}
// 调用类

自动转化 ts 为js设置

在这里插入图片描述

01.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./js/DateHelper.js"></script>
  <div>
    我是
    <div id="apple"></div>
    <div>
      <input type="text" id="txt">
    </div>
    <button id="btnOk">发布</button>
  </div>
  <script>
    // 0：创建一个 DateHelper 类 的对象，并且设置好，数据 和评论的id
    let db = new DateHelper('plData', 'id');
    // console.log("db", db);
    // 1：相关事件
    // 1.1 读取本地数据，
    // 1.2 遍历生成评论数组，生成div
    window.onload = function () {
      let arr = db.readData();
      console.log("arr", arr);
      for (let ele of arr) {
        makeDiv(ele.id, ele.content)
      }
    }
    // 发布
    document.querySelector("#btnOk").onclick = () => {
      // 获取 input的数据 拿到评论的数据
      let strCon = document.querySelector("#txt").value
      // 获取id值
      let id = db.addData(strCon);
      // 渲染 div
      makeDiv(id, strCon)
      document.querySelector("#txt").value = "";
    }
    // 创建 div
    function makeDiv(pId, strContent) {
      let divRoot = document.querySelector("#apple");
      let div = document.createElement("div");
      div.innerHTML = pId + '-' + strContent;
      divRoot.appendChild(div);
      // 动态创建 删除
      let spanObj = document.createElement("span");
      spanObj.innerHTML = '<a href="###">删除<a/>';
      // 为删除 按钮 添加 pId属性
      spanObj.setAttribute('pId', pId)
      spanObj.onclick = remove;
      // 将span 添加到 内容div中
      div.appendChild(spanObj)
    }
    // 删除
    function remove(e) {
      let btnDel = e.srcElement;
      let conDiv = btnDel.parentNode;
      // console.log("conDiv", conDiv, "conDiv.parentNode", conDiv.parentNode);
      conDiv.parentNode.parentNode.removeChild(conDiv.parentNode)
      let id = conDiv.getAttribute('pid');
      // console.log("id", id);
      db.removeDataById(id)
    }
  </script>
</body>

</html>

效果

在这里插入图片描述

小小liang

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ts 之定义类 Class

目录ts 之定义类 Class定义一个简单的类定义一个数据类的封装ts / DateHelper.ts自动转化 ts 为js设置01.html效果ts 之定义类 Class定义一个简单的类class City { // 成员变量 cName:string; cLevel:number; // 构造函数 constructor(name:string,lever:number){ this.cName = name; this.cLevel = lever
复制链接

扫一扫