1月20日java假期学习读书笔记

一、学习目标
深入理解JavaScript的面向对象编程（OOP）。
掌握JavaScript模块化开发的基本方法。
通过实际项目练习，构建一个简单的前端页面。
学习如何组织代码，提高代码可维护性。
二、学习内容
（一）JavaScript面向对象编程（OOP）
构造函数和new关键字
使用构造函数创建对象实例。
JavaScript
复制
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.sayHello = function () {
return Hello, my name is ${this.name} and I am ${this.age} years old.;
};

const person1 = new Person("Alice", 25);
console.log(person1.sayHello()); // 输出：Hello, my name is Alice and I am 25 years old.
类（ES6）
ES6引入了class语法，使面向对象编程更加简洁。
JavaScript
复制
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayHello() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}

}

const person2 = new Person("Bob", 30);
console.log(person2.sayHello()); // 输出：Hello, my name is Bob and I am 30 years old.
继承
使用extends关键字实现类的继承。
JavaScript
复制
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}

sayHello() {
    return `${super.sayHello()} I am in grade ${this.grade}.`;
}

}

const student = new Student("Charlie", 15, 9);
console.log(student.sayHello()); // 输出：Hello, my name is Charlie and I am 15 years old. I am in grade 9.
（二）JavaScript模块化开发
模块化的重要性
模块化开发可以将代码分割成独立的模块，提高代码的可维护性和复用性。
CommonJS模块化（Node.js）
使用require和module.exports实现模块化。
JavaScript
复制
// math.js
function add(a, b) {
return a + b;
}

function subtract(a, b) {
return a - b;
}

module.exports = { add, subtract };
JavaScript
复制
// app.js
const math = require("./math");
console.log(math.add(3, 5)); // 输出：8
console.log(math.subtract(10, 5)); // 输出：5
ES6模块化（浏览器）
使用import和export实现模块化。
JavaScript
复制
// math.js
export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}
JavaScript
复制
// app.js
import * as Math from "./math.js";
console.log(Math.add(3, 5)); // 输出：8
console.log(Math.subtract(10, 5)); // 输出：5
（三）实际项目练习：构建一个简单的待办事项列表
HTML结构
HTML
复制

我的待办事项

添加

CSS样式 css 复制 body { font-family: Arial, sans-serif; margin: 20px; }

todoList {

list-style-type: none;
padding: 0;

}

todoList li {

margin: 5px 0;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;

}
JavaScript逻辑
JavaScript
复制
const addButton = document.getElementById("addButton");
const newItemInput = document.getElementById("newItem");
const todoList = document.getElementById("todoList");

addButton.addEventListener("click", function () {
const newItemText = newItemInput.value.trim();
if (newItemText !== "") {
const newItem = document.createElement("li");
newItem.textContent = newItemText;
todoList.appendChild(newItem);
newItemInput.value = ""; // 清空输入框
}
});
三、学习心得
面向对象编程的优势
使用类和继承可以更好地组织代码，提高代码的可读性和可维护性。
ES6的class语法使面向对象编程更加简洁和直观。
模块化开发的重要性
模块化开发可以将复杂的代码分割成独立的模块，便于维护和复用。
掌握CommonJS和ES6模块化语法是现代JavaScript开发的基础。
实际项目练习的意义
通过构建一个简单的待办事项列表，我更好地理解了HTML、CSS和JavaScript的结合使用。
实践可以帮助快速发现和解决问题，加深对知识点的理解。