原生+TS实现todolist效果

中

秋

快

乐

前言

我是歌谣最好的种树是十年前其次是现在原生+TS实现todolist效果

环境配置

 npm init -y
yarn add vite -D

修改page.json配置端口

 {
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

主文件

 <!DOCTYPE html>
<html lang="en">
 
 
 
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
 
 
 
<body>
 
 
 
 
    <diV>
        <!-- <input type="file" id="fileInput" name="fileInput" multiple> -->
        <input type="text" id="inputText">
        <button id="addBtn">Add</button>
    </diV>
    <ul id="todoList">
 
 
 
 
    </ul>
    <ul id="data">
 
 
 
 
    </ul>
    <script type="module" src="./index.ts"></script>
</body>
 
 
 
 
</html>
<script>
    // var fileInput = document.getElementById("fileInput");
    // var data = document.getElementById("data");
    // var files = fileInput.files;
    // fileInput.addEventListener("change",function(e){
    //     console.log(e)
    //     for (var i = 0; i < files.length; i++) {
    //     var file = files[i];
    //     var linode=document.createElement("li")
    //     linode.innerText=file.name
    //     data.append(linode)
    // }
    // })
   
    // data.append()
    // var formData = new FormData();
 
 
 
 
    // for (var i = 0; i < files.length; i++) {
    //     var file = files[i];
    //     formData.append("files[]", file, file.name);
    // }
</script>

index.ts

 interface ITodo {
    id: number,
    content: string,
    completed: boolean
}
type TypeTarget = HTMLInputElement | HTMLButtonElement
type TypeContentMap = {
    [key: number]: HTMLSpanElement,
    remove(id:number):void
}
enum ElementType {
    CHECKBOX = 'HTMLInputElement',
    BUTTON = 'HTMLButtonElement'
 
 
 
 
}
const oInputText = <HTMLInputElement>document.querySelector('#inputText')
const oAddBtn = document.querySelector('#addBtn')
const oTodoList = document.querySelector('#todoList')
const eventMap = new Map([
    [oAddBtn, handleAddBtnClick],
    [oTodoList, handleListClick],
]
)
const contentMap: TypeContentMap = {
    remove:(id:number)=>delete contentMap[id]
}
const init = () => {
    bindEvent()
}
function bindEvent() {
    eventMap.forEach((handler, el) => {
        el?.addEventListener("click", handler, false)
    })
}
function handleAddBtnClick() {
    const inputText = oInputText.value
    console.log(1111)
    if (!inputText.trim().length) return
    const oTodoItem = CreateTodoItem({
        id: new Date().getTime(),
        content: inputText,
        completed: false
    })
    oTodoList?.append(oTodoItem)
}
function handleListClick(e: Event) {
    const target = <TypeTarget>e.target
    const type = getObjectType<TypeTarget>(target)
    if (type === ElementType.CHECKBOX || type === ElementType.BUTTON) {
        const id = Number(target.dataset.id)
        switch (type) {
            case ElementType.CHECKBOX:
                setContentStyle(id, (<HTMLInputElement>target).checked)
                break
            case ElementType.BUTTON:
                removeTodoItem(id,<HTMLElement>target.parentNode)
                break;
            default:
                break
        }
    }
 
 
 
 
}
function CreateTodoItem({ id, content, completed }: ITodo) {
    const oTodoItem = document.createElement("li")
    oTodoItem.appendChild(createCheckBox(id, completed))
    oTodoItem.appendChild(createContent(id, content))
    oTodoItem.appendChild(createRemoveBun(id))
    return oTodoItem
}
 
 
 
 
function createCheckBox(id: number, completed: boolean) {
    const oCheckBox = document.createElement('input')
    oCheckBox.type = 'checkbox'
    oCheckBox.checked = completed
    oCheckBox.dataset.id = id.toString()
    return oCheckBox
}
 
 
 
 
function createContent(id: number, content: string) {
    const oContent = document.createElement('span')
    oContent.innerText = content
    contentMap[id] = oContent
    return oContent
}
 
 
 
 
function createRemoveBun(id: number) {
    const oRemoveBtn = document.createElement("button")
    oRemoveBtn.innerText = 'REMOVE'
    oRemoveBtn.dataset.id = id.toString()
    return oRemoveBtn
}
function removeTodoItem(id:number,item:HTMLElement){
    oTodoList?.removeChild(item)
    contentMap.remove(id)
 
 
 
 
}
function getObjectType<T>(value: T): string {
    return Object.prototype.toString.call(value).match(/\[object (.+?)\]/)[1]
}
function setContentStyle(id: number, completed: boolean) :void{
    contentMap[id].style.textDecoration = completed ? 'line-through' : ''
}
init()

运行结果

想加入前端学习交流群私信我

点击上方蓝字关注我们

下方查看历史文章

Vue3+typesctipt实现todolist效果

关于原始typescript实现todolist笔记(装饰器模式)

关于原生typescript实现todolist

关于面向对象

关于原型

posted @ 2023-10-16 15:29 前端导师歌谣阅读(12) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端歌谣-第十二课-原生+TS实现todolist效果

· 关于原生typescript实现todolist

· Vue案例——todolist

· Vue.js的todolist案例（之一）添加&勾选&删除等

· react的todolist

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

原生+TS实现todolist效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	{
	"name": "demo1",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"dev": "vite --port 3002"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"vite": "^4.4.9"
	}
	}

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




	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>




	<body>




	<diV>
	<!-- <input type="file" id="fileInput" name="fileInput" multiple> -->
	<input type="text" id="inputText">
	<button id="addBtn">Add</button>
	</diV>
	<ul id="todoList">




	</ul>
	<ul id="data">




	</ul>
	<script type="module" src="./index.ts"></script>
	</body>




	</html>
	<script>
	// var fileInput = document.getElementById("fileInput");
	// var data = document.getElementById("data");
	// var files = fileInput.files;
	// fileInput.addEventListener("change",function(e){
	// console.log(e)
	// for (var i = 0; i < files.length; i++) {
	// var file = files[i];
	// var linode=document.createElement("li")
	// linode.innerText=file.name
	// data.append(linode)
	// }
	// })

	// data.append()
	// var formData = new FormData();




	// for (var i = 0; i < files.length; i++) {
	// var file = files[i];
	// formData.append("files[]", file, file.name);
	// }
	</script>

	interface ITodo {
	id: number,
	content: string,
	completed: boolean
	}
	type TypeTarget = HTMLInputElement \| HTMLButtonElement
	type TypeContentMap = {
	[key: number]: HTMLSpanElement,
	remove(id:number):void
	}
	enum ElementType {
	CHECKBOX = 'HTMLInputElement',
	BUTTON = 'HTMLButtonElement'




	}
	const oInputText = <HTMLInputElement>document.querySelector('#inputText')
	const oAddBtn = document.querySelector('#addBtn')
	const oTodoList = document.querySelector('#todoList')
	const eventMap = new Map([
	[oAddBtn, handleAddBtnClick],
	[oTodoList, handleListClick],
	]
	)
	const contentMap: TypeContentMap = {
	remove:(id:number)=>delete contentMap[id]
	}
	const init = () => {
	bindEvent()
	}
	function bindEvent() {
	eventMap.forEach((handler, el) => {
	el?.addEventListener("click", handler, false)
	})
	}
	function handleAddBtnClick() {
	const inputText = oInputText.value
	console.log(1111)
	if (!inputText.trim().length) return
	const oTodoItem = CreateTodoItem({
	id: new Date().getTime(),
	content: inputText,
	completed: false
	})
	oTodoList?.append(oTodoItem)
	}
	function handleListClick(e: Event) {
	const target = <TypeTarget>e.target
	const type = getObjectType<TypeTarget>(target)
	if (type === ElementType.CHECKBOX \|\| type === ElementType.BUTTON) {
	const id = Number(target.dataset.id)
	switch (type) {
	case ElementType.CHECKBOX:
	setContentStyle(id, (<HTMLInputElement>target).checked)
	break
	case ElementType.BUTTON:
	removeTodoItem(id,<HTMLElement>target.parentNode)
	break;
	default:
	break
	}
	}




	}
	function CreateTodoItem({ id, content, completed }: ITodo) {
	const oTodoItem = document.createElement("li")
	oTodoItem.appendChild(createCheckBox(id, completed))
	oTodoItem.appendChild(createContent(id, content))
	oTodoItem.appendChild(createRemoveBun(id))
	return oTodoItem
	}




	function createCheckBox(id: number, completed: boolean) {
	const oCheckBox = document.createElement('input')
	oCheckBox.type = 'checkbox'
	oCheckBox.checked = completed
	oCheckBox.dataset.id = id.toString()
	return oCheckBox
	}




	function createContent(id: number, content: string) {
	const oContent = document.createElement('span')
	oContent.innerText = content
	contentMap[id] = oContent
	return oContent
	}




	function createRemoveBun(id: number) {
	const oRemoveBtn = document.createElement("button")
	oRemoveBtn.innerText = 'REMOVE'
	oRemoveBtn.dataset.id = id.toString()
	return oRemoveBtn
	}
	function removeTodoItem(id:number,item:HTMLElement){
	oTodoList?.removeChild(item)
	contentMap.remove(id)




	}
	function getObjectType<T>(value: T): string {
	return Object.prototype.toString.call(value).match(/\[object (.+?)\]/)[1]
	}
	function setContentStyle(id: number, completed: boolean) :void{
	contentMap[id].style.textDecoration = completed ? 'line-through' : ''
	}
	init()

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

原生+TS实现todolist效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识