[!summary]+
JS 中的一切变量皆为对象，可以将对象理解为一个包含相关数据和方法的集合（变量 & 函数）我们也将其称之为属性和方法，就像我们在 python 里做的那样，本篇为 mdn_JS对象基础，mdn_JS对象原型 的阅读笔记

如果 面向对象编程基本概念 不太清楚的话，可以看一下这个链接，了解一下下面这些基本概念：derive 派生 | oriented 面向 | polymorphism 多态 | override 重写/重载 | encapsulation 封装 | private 私有 | delegation 委派 |

从声明对象开始

手动声明对象（字面量）

在 JS 中声明一个对象实际上和声明一个字典一样，使用 {} 就可以声明一个对象，{}中可以包含属性甚至函数，下面给出一个例子：

1
2
3
4
5
6
7
8
9
10

const person = {
	name: ["aiken", "metis"],
	age: 26,
	bio: function () {
		console.log(`${this.name[0]} ${this.name[1]} now is ${this.age} years old`);
	}
	introduce() {
		console.log(`hello! i'm ${this.name[0]}.`);
	}
}

可以看出该声明的对象中，不仅包含属性: name, age, 还包含方法 bio, introduce,可以看出方法存在两种不同的写法，更常用的是第二种简写。

这种手动写出对象的内容来创建的特定对象叫做对象字面量(object literal)，与从定义好的类实例化出来的对象不同。

基于函数来批量声明对象

当我们需要批量创建多个同类对象的时候，按照上面的方法来定义就会显得十分麻烦，这个时候我们可以使用函数来批量声明对象。

1
2
3
4
5
6
7
8
9
10
11
12

function createPerson(name, age)
{
	const obj = {};
	obj.name = name;
	obj.age = age;
	obj.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
	return obj;
}
const aiken = createPerson('aiken','26');
const metisy = createPerson('metis', '25');

通过函数来声明对象的时候：用首先定义一个空对象，然后去修改对象属性和对象的方法，实现批量处理。

“this” 使用和含义

this 指代代码运行时调用 this 的对象本身，这在定义单个对象字面量的时候可能没什么用，但是当我们有多个对象，这样这种时候通过使用 this，就可以使得函数定义是更通用的，就像上面的例子中，aiken.bio 和 metisy.bio 都能正确的打印出其年纪和名称。

使用类(构造函数)来声明对象

使用类来声明对象是各种编程语言中最通用的一种声明对象的方式，JS 一切皆为对象的设计思想，使得 JS 中定义类的方式和定义函数的方式实际上是十分相似的，这里主要的区分在于用构造函数声明新对象的时候，我们使用 new 关键字。下面给出一个例子：

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name, age)
{
	// 命名类的时候和其他语言一样，使用大写字母开头。
	this.name = name;
	this.age = age;
	this.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
}

const aiken = new Person('aiken', 26);
const metis = new Person('metis', 25);

可以看出，使用构造函数的方式的时候，我们无需指定返回值，但需要使用 new 关键词去声明新的对象。

[!summary]+
web-js 中主要的编程方式就是需要结合browser 的事件和属性来实现对页面的动态控制，事件章节可以说是web 动态编程中的核心部分了，了解主要存在和需要被控制的事件是相当重要的。

常见的浏览器事件

下面列出一些常见的事件类型和具体事件，更多的事件可以参考Mdn，在设计页面的时候可以考虑我们希望获得什么效果来找寻是否有对应的事件来构建对应的动态响应。

在确定了事件之后，就需要对事件附加一个事件处理器（监听器），当事件触发的时候，运行指定的js 代码对该事件做出相应。

事件处理器

[!summary]+
通常而言，我们使用特定的 element 调用 addEventListener(event, function) 添加一个事件监听器，当参数中指定的事件 event 在对应元素上发生，就调用对应的 function 执行相应的变动，如果不是通用的函数，这里经常可以看到使用匿名函数去定义对应的操作。

添加事件处理器

因此对于一个事件而言，实际上包含的操作有以下的几个：找到 DOM 中要操作的对应元素、添加事件监听器、选择对应的事件、定义对应的操作函数；

1

const btn = document.querySelector("button");

1
2
3
4
5
6
7
8

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

1

btn.addEventListener("click", changeBackground);

可以为同一个事件设置多个处理器，也就是添加多个 function，对于添加事件来说其中 addEventListener 是最为通用的，可以绑定多种事件，不过除了 addEventListener 之外，还有一些特殊事件的添加监听的方法，例如 click 事件有一个内联的监听器：onclick。

1

btn.onlick = changeBackground;

虽然有一些示例在 html 中绑定事件内联，但是最好还是分开在 js 中绑定更好。

JS 基础语法

该部分的学习除了 MDN 的相关知识，会结合数据结构的内容来进行学。

语言的第一印象和 python 有许多相似的地方。语法上可能大差不差，在循环和其他一些变量上又有一些和 C#,CPP 相似的地方。

Basic Rules 基础规则简介

首先介绍基本的编写规则:如注释、缩进规则、变量规则等…

• 注释：CPP 相同使用 // 和 /* */ 进行行/块注释。
• 句尾 ; ：单行单条语句结束可以无需 ; (但为了规范和明确可以加上)，同行多个语句可以用 ; 进行语句的区分。

变量

声明变量使用：var, let, const 三个关键词；其中 let 和 const 是相似的，用于声明块级作用域的局部变量，只有在声明的位置之后才能使用，唯一的区别在于 const 声明的常量不能用赋值运算符直接更改，（但如果是个对象，它的属性可以被添加、更新、删除）

变量定义：(另起一个 Paragraph 表示尊重) JS 为非强类型语言(即类似 python 而非 cpp)，为动态类型语言，变量声明无需指定类型。但有以下几个注意的事项：

• （不推荐）不带关键字的变量声明会默认为全局变量。
• （推荐）可以使用 let 或 var 关键字定义变量。
• （最推荐）最推荐使用 let 进行变量的声明，var 对变量定义位置的要求更低，使用 var 编写可能会方便，但是在后续维护和阅读中可能会体验很差。使用 let 然后和别的语言一样声明和使用变量。
• 可以使用 typeof 来检查变量类型

其中对于变量的定义上，Var 和 let 的详细差别可以参考 var与let的区别，var变量提升，简单的讲 var 的定义会先于所有的语句执行，声明一个全局的变量。下面简单介绍一下各种不同的数据类型：

对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心，字典也是一种对象，定义方式和 Python 一致：

1
2

let dog = { name: "Spot", breed: "Dalmatian" };
dog.name // 访问name属性。

数值： JS 只有一种数值类型 Number，不需要像 cpp 执行 int 和 float 之类的转换，说到数值类型，就需要对基本的运算符进行说明，这里简单列一下支持的一些运算符类型

基本运算符：和大多数语言的基本运算符保持一致，这里需要特殊说明的只有相等的判断符，区别于其他语言，JS 中使用三个等号来判断相等；

1
2

if a == b:
	print("a is equal to b")

1
2
3
4

if (a === b)
{
	console.log("a is equal to b");
}

这里的函数定义和条件判断都更接近 cpp，使用{}将代码块来区分，而非单纯使用缩进。

[!summary]+
本篇读书笔记主要记录书中一些投资理财相关的概念、一些思维方式、一些典型的策略等等，用于自己后续理财的基础。

“投资理财越早开始越好，无需拘泥于启动资金的多少，时间才是投资理财中最重要的增长因子”。

财务自由

需要多少钱才能财富自由

4%法则（William Bengen）：通过投资一组资产，每年从退休金中提取不超过 4%的金额用来支付自己的生活所需，那么直到自己趋势，退休金都花不完。

因此如果每年需要 40w 的开销，那么就需要超过 1000w 的资产来实现一个比较稳定的财富自由，按照自己每年的消费可以进行简单的换算。

如何避免财富缩水

[!summary]+
财富缩水主要的原因就在于通货膨胀，对通货膨胀有所了解才能更好的从通货膨胀中保护自己的财富。

很多时候通货膨胀看的是 CPI(居民消费价格指数)，最近几年国内的 CPI 同比增长一年为 2%~3%，也就是说物价每年上涨 2%~3%，但是实际上只看 CPI 是不够的，这是因为 CPI 实际上仅包含了必需消费，而如果要保证生活质量的水平不变，需要跑赢的是”可选消费通货膨胀率”。

这是因为任何一个社会，优质的教育和医疗资源的价格增长速度是比较显著的高于 CPI 的，因此可选消费指数才是我们要跑赢的目标。而这个增长速度则通常和 M2 的增长速度相关。

M2 是广义货币的量，代表社会广义货币的增长速度，最近三年的同比大概在 8%~9%，但是该指数并非完全和可选消费指数相等同。

综合而言，我们通常需要考虑的膨胀指数应该介于 CPI 和 M2 增速之间，因此资产增值的速度应该在 3%~9%之间，才能避免财富缩水，如果考虑一些不稳定时局的原因，可能还要存一些避险资产例如黄金。

通常来说，只要长期投资债券基金（包括相关的理财产品）是可以跑赢 CPI 的，债券通常的长期平均收益都在 6%上下，但若想要获得更高的收益可能就得上股票这种高风险高收益的了。

[!summary]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

• 响应式设计的历史和思路：
• 媒介查询的入门 与或非等语句
• 传统的布局方法

尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。

[!summary]+
这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：

布局模式介绍

正常布局流：指的是不对页面进行任何布局控制的时候，浏览器默认的 HTML 布局方式，实际上就是按照源码中的先后次序依次出现，在 HTML 布局的过程中，最为重要的就是元素的块和内联两种布局方式。这里需要注意的就是，块的方向和元素的书写方向的关系。

而当我们希望使用 CSS 来改变正常的布局形式的时候，通常会使用以下的一些属性，或者说布局技术，来覆盖掉默认的 HTML 布局行为。

• display 属性：改变元素在 HTML 中的渲染形式，如 block inline inline-block 还有 CSS 引入的 CSS Grid 和 Flexbox.
• float 属性：使用 float 属性能改变块级元素换行的特性，实现类似换行的效果，其值指定其他元素围绕块级元素的哪一边。
• position 属性：利用 position 来设置盒子在盒子中的位置，在嵌套的情况下就可以产生多样的排布
• 表格布局：表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用
• 多列布局： Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。

在讨论布局时，display 最多用到的属性为 flex 和 grid 属性，利用这两个属性值来改变布局。

[!summary]+
这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西

TODO

• [ ] 后续如果初窥门路了可以研究整理一下如何去找参考文献的思路。
• [ ] 熟练使用使用开发者工具进行网站调试的方式。

  DOC 查找

如何查阅 MDN 是一个很重要的技能（当今确实是可以使用 GPT 替代，但是也要掌握基础技能）：

• 当希望知道一个模块有什么属性可以设置的时候应该在 Modules 中查找对应的模块内容，例如表格的相关属性
• 当希望属性用法的时候才去查看对应的属性

Debug 调试

尝试熟练去使用开发者模式去查看盒模型，调整颜色，布局，查看属性，添加属性等。

编写规范

可以参考: MDN 的 CSS 代码规范的示例的同时，遵循组织 CSS 的一些准则，来确定自己的编写规范。

我的开发流程：

1. 使用 Layer 导入组件库
2. 使用 Layer 设置默认层，包括表格预设，各种预设的东西
3. 使用 Layer 设置主题层
4. 定义 custom 内容，内容的组织可以参考： OOCSS 面向对象的 CSS 设计，或者基于文章结构的组织（基础如 body,h -> 组件，例如不带 index 的列表-> 站点 level 如导航栏 -> 特指内容）

编写过程中：

• 保持命名方式统一
• 添加注释说明各部分内容
• 保持缩进和换行
• 为一些颜色之类的数值设置变量，避免重复修改多个地方

[!summary]+
表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

table{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

• 当为表格设置初始样式的时候，使用 layout 为 fixed 会使得表格的行为更好预测，避免由于内容产生的畸变导致难以设置或者出现一些奇怪对齐情况，使用 fixed 然后设置每一列的宽度，在对内容进行处理可能更好。
• 使用 nth-child 设置每一列的宽度，最终相加为 100%，使得在不同分辨率下比较好控制。
• border-collapse: collapse; 原本两个格子之间会有两条边线，这样的话可以合并重叠的边线，让表格更符合我们的预期。
• 使用 text-align 设置对齐方式
• 使用 thead，tfoot，tbody 来分别设置样式，可以做出类似三线表之类的东西
• 为标题 caption 设置对应的样式

后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。

[!summary]+
该篇章主要收集一些常见的样式设置的参考页和一些需要记住的重要设置内容，由于不可能记住所有的属性和设置，善用查询可能才是唯一的王道。

CSS 中的值与单位

CSS 中的值与单位 这里介绍常见的一些值和单位，有一些新的可能会有所缺失，但是大部分都有了，这里可以列举几个常见但是之前不理解的。

• em 相对字体大小
• vw 视窗宽度，值为百分比的含义
• 百分比：与父辈容器的百分比
• rgba 或者 rgb 的第四个值代表透明度，十六进制想设置透明度的话，就在后面再加两位 16 进制表示透明度的百分比。

这里倒是提示我们需要有个比较好的取色器或者像 vscode 中的色盘来编写 css，颜色搭配网站在 css 中也是很重要的。