The Bitcoin Network
1.application layer(工作层)：Bitcoin Block chain
2.networck layer(网络层):P2P Overlay Network
注意：没有super node 和master node，每个节点平等
可以通过预先写入的seed node（叶子节点）得知其他节点
特点：simple robust but not efficient（简单，坚固但不高效）
消息传播采用flooding方式——节点第一次听到消息传给所有的邻居节点，下次收到不在发送给邻居节点，邻居节点选取完全随机
3.best effort(尽力而为)：比特币网络中的内容传播存在延迟，有些节点可能收不到

  • 从小元素开始组建
    • ![[Pasted image 20240530175253.png]]
    • 组建成一个组件
      • ![[Pasted image 20240530175328.png]]
    • 把组件组成布局
    • 把布局结合成网站

常见元素

  • 文本（text）
    • 标题，副标题，文本
  • 按钮（button）
  • 图像（image）
  • 输入元素（input elements）
  • 标签（tags）

常用组件

![[Pasted image 20240530175854.png]]
1.导航页![[Pasted image 20240530180428.png]]
2.分页符
![[Pasted image 20240530180505.png]]
3.状态栏
![[Pasted image 20240530180539.png]]
4.画廊
![[Pasted image 20240530180756.png]]
5.功能盒
![[Pasted image 20240530180908.png]]
6.资料卡
![[Pasted image 20240530181153.png]]
7.预览栏
![[Pasted image 20240530181323.png]]
8.折叠标签
![[Pasted image 20240530181418.png]]
9.选项卡
![[Pasted image 20240530181458.png]]
10.轮播图（滑块）
![[Pasted image 20240530181644.png]]
11.客户推荐
![[Pasted image 20240530181739.png]]
12.客户logo
![[Pasted image 20240530181932.png]]
13.来源证明
![[Pasted image 20240530182041.png]]
14.步骤组件
![[Pasted image 20240530182110.png]]
15.表单![[Pasted image 20240530182215.png]]
![[Pasted image 20240530182251.png]]
16.表格
![[Pasted image 20240530182342.png]]
17.定价表
![[Pasted image 20240530182434.png]]
18.功能窗口
![[Pasted image 20240530182534.png]]
![[Pasted image 20240530182543.png]]

基础模块

动态数据放在数据库
==不要写太复杂的选择器 ==
- html
- 网页基础
- 选择器优先级
- 内联>ID>类和伪类>标签>通用
- 一般复杂的优先级大于简单的
- css：网页样式
- RGB表示法
- rgb（0，255，255，0.3）——最后的数表示透明度
- 通过红蓝绿三种颜色表示所有颜色
- ![[Pasted image 20240516123405.png]]
- 16进制表示法
- 0到FF的表示
- #00ffff
- 每两位数表示255，和rgb类似
- 盒子模型
- ![[Pasted image 20240518093002.png]]
- 内联框（inline）
- 仅占据自己所需的空间
- 盒子模型只影响本行内，不受width和height影响，只影响left，right
- 块状元素（block）
- 尽可能占据所有空间，不能并排
- 内联块框（inline—block）
- 内部像内联，外部像块
- 只占据自己所需的空间
- 但受width等所需影响
- 定位模式
- 正常定位
- 根据源代码定位
- 绝对定位
- 自己定位，可能重叠
- 绝对定位的位置受自己第一个属性为相对定位的父元素决定
- 布局
- 文本图像和其他所有元素在网页上排序放置
- 页面布局
- 组件布局
- 布局类型：
- 浮动布局
- flexbox布局
- 适合一维布局
- 允许浏览器自动创建空间
- 弹性容器（flex container）
- gap
- justfy-content
- align-items
- ![[Pasted image 20240521151906.png]]
- 弹性容器（flex items）
- 布局方向叫主轴（main axis）和（cross axis）
- ![[Pasted image 20240521152004.png]]
- ![[Pasted image 20240521151608.png]]
- CSS grid布局
- 网格容器（grid container）
- grid-template-rows
- grid-template-columns
- row-gap：0
- colmun-gap：0
- justigy-items:stretch(水平对齐)
- align-items:stretch（垂直对齐）
- justify-content:start
- item-content:start
- 网格线（grid lines）
- ![[Pasted image 20240525121439.png]]
- 网格项目（grid items）
- grid-column:
- grid-row:
- justify-self:
- align-self:
- js
- 响应用户输出
数组就是对象
- DOM
- 文档对象模型
- html和js之间的连接点
- js特点
- 高级语言
- 不需要向系统请求内存
- 低级语言（C）
- 垃圾收集
- 自动删除旧的，未被使用的数据
- 即时编译
- 编译发生在js引擎内部
- 多范式
- 范式分类
- 程序式编程
- 面向对象编程（OOP）
- 在js中的所有值基本都是对象，除了原始值（数字，字符）
- 函数式编程（FP）
- 头对象函数
- 函数被视为常规变量
- 动态语言
- 变量类型可以随意改变
- 单线程和非阻塞事件循环并发模型
- js引擎可能同时处理多个事件
- js引擎
- 执行js代码的计算机程序
- 谷歌的V8
- nodejs
- 调用栈
- 代码实际运行的地方
- 堆
- 储存对象的地方
- 编译过程
- 机器码编译，生成可执行性文件
- 在CPU中执行
- 解释过程
- 代码同时翻译和执行
- js混合使用编译和解释（即时编译）
- 不会生成可执行性文件
- ![[Pasted image 20240601104555.png]]
-
- 执行上下文
- 环境
- 范围界定
- 作用域链——与执行环境无关
- 声明变量的地方
- 全局作用域
- 函数作用域
- 块作用域‘
- ES-6之后；
- if等语句中定义的变量也是局部变量
- 但只有let和const变量
- 变量提升（hoisting）
- 函数声明 被提升 值为真实的函数
- var 被提升 值为undefined
- let和const 不被提升
- 函数表达式和箭头函数 根据定义方式
- ==不要让箭头函数作为方法，因为窗口函数==
## 工具
- 包管理器
- 包：软件片段
- npm
- 自动构建工具
- gulp webpack parcel
- 版本控制
- git
## scss响应式设计
- css的扩展
## js框架
- react
- angular
- vue

数据来源

  • 源代码
  • UI
    • 用户自行输入，或者被写入DOM
  • 来源于外部
    • 通常是一个Web API:允许我们从另一个web程序中获取数据
      API
  • 应用程序编程接口

js中的数据结构

  • 数组（array）
  • 集合(Set)
  • 映射(Map)
  • 对象（Object）
  • …..(WeakMap,WeakSet)等等

排版

  • serif字体
    • ![[Pasted image 20240526152349.png]]
    • ![[Pasted image 20240526153341.png]]
  • non-serif字体
    • ![[Pasted image 20240526152402.png]]
    • ![[Pasted image 20240526153325.png]]
  • 字体大小
    • 普通文本：16px-32px
    • 长文本：20px或者更大一点
    • 标题：可以超过50px并且加粗（600+）
    • font-weight不要低于400
    • 每行字体要少于75个字母（17个字左右）
    • 常规文本行高在1.5到2.0之间
    • 标题或大字体低于1.5
    • 可以适当减小字体间距
    • 对短标题全部大写（英文）
    • 不要对齐文本
    • 不要居中长标题

色彩

  • 颜色与主题相符
    • 红色：吸引注意力
    • 橙色：快乐，创造力
    • 黄色：高兴
    • 绿色：自然
    • 蓝色：平静，专业
    • 紫色：财富，魔法
    • 粉色：浪漫，亲情，有吸引力
    • 棕色：自然，耐用性
    • 纯黑：优雅，极简主义，悲伤
  • 工具：open color，tailwind color，flat ui color，palleton.com
  • 需要两个颜色：
    • 主要颜色（亮色）
    • 衬托颜色（暗色）
    • 强调色（选用）
  • 对比度
    • 常规文本：4.5：1
    • 大文本：3：1

图像

  • 产品照片
  • 讲故事的照片
  • 插图
    • 2D
    • 3D
  • 图案
  • 只使用和你的主题有关的图片
  • 永远不要使用廉价的，过度生产的图片
  • 工具：unsplash pexels drawkit undraw
  • 在你的图片中使用真正的人，而不是过度生产的图片
  • 可以简单的修剪图片，组合图片
  • 在图片上处理文本
    • 让整个图像变暗（变亮）
    • 仅将部分变暗（渐变）
    • 将文本定位到图像的中性元素的位置
    • 将文本简单的放在框里
  • 实际技术
    • 在高分辨率设备中，原图片的大小要是原来的2—3倍
    • 压缩图像，让文件大小变小（squoosh）
    • 并排使用图像时，确保他们具有同样的尺寸

图标

  • 图标包——在一个项目里只用一个图标包
    • phosphor icons
    • 阿里巴巴矢量图标库
    • ionicons
    • icons
  • 格式为.svg或者icon fonts而不是,jpg和.png
  • 用图标给文本提供视觉体验
  • 构建功能块
  • 和“action”一起
  • 用作要点
  • 用法：
    • 使用和文本一样的颜色
    • 图标风格要和字体适配
    • 如果想要吸引注意，可以在不同的图标使用不同的颜色
    • 图标不应该使用太大和线条太粗的

阴影

  • 严肃的主题阴影少
  • 趣味的主题阴影多
  • 阴影原则
    • 小剂量的使用阴影
    • 让阴影亮一些
    • 小心的运用阴影
    • 使用小阴影在小元素（按钮，链接，’action’,讲故事的图片）
    • 使用中等阴影在更大的区域 ，让购物车脱颖而出
    • 大阴影
      • 导航，弹出的提示
    • 在点击和悬停事件是使用阴影
    • 阴影不一定是黑的

边界半径

  • 一般越小越严肃，越大越趣味
  • 可以先选一个比较圆的字体
  • 按钮，小的边界半径
  • 图像，围绕图标

留白

  • 垂直空白
    • 在每个部分之间流出空白（大概192px-根据实际情况）
    • 在各个元素组之间（小一些）
  • 临近原则
    • 根据元素关系的远近控制空白的大小‘
  • 根据元素的大小决定空白的大小
  • 新手提示
    • 只使用16px的倍数

视觉层次

  • 使用前面的总和来建立视觉层次
    - 定位重要的元素
    - 从上到下
    - 图像会吸引很多注意力
    - 战略性的使用空白
    - 在重要和不重要位置分别使用字体大小，宽度，颜色、

用户体验

  • 确定用户需求
  • 不要使用过于复杂的布局
    • ![[Pasted image 20240530141306.png]]
  • 没必要原创，使用模板
  • 让按钮始终能轻易被看到
  • 蓝色字体和下划线只用于链接
  • 设计表格时，对齐
  • 为每种操作都做好说明
  • 最好把按钮放在他会影响的位置
  • 去掉所有无效的信息
  • 有很长的文本时，使用快引用，图片等方式将它们分开

组件

  • 重要需要突出展示的组件
    • 注册页面
    • 内容中间的宣传
    • 预览牌
    • 定价牌
      • ![[Pasted image 20240530122418.png]]
    • 需要突出展示的一个列
      • ![[Pasted image 20240530122501.png]]

网站框架

  • 严肃主题
    • 衬线字体，较细的字体
    • 金色，黑色，灰色等
    • 使用大，质量高的图像
    • 基本不使用图标
    • 基本无阴影和边界半径
  • 极简主题
    • 排版方正，无衬线字体
    • 一般只有一种颜色
    • 图片很少，通常无图表
    • 基本无阴影和边界半径
  • 平凡主题
    • 无衬线字体
    • 蓝色和黑色很常见
    • 基本无阴影和边界半径
    • 大量方块和行
  • 自信主题
    • 大而粗的字体
    • 大色块，鲜艳背景
    • 基本无边界半径
  • 沉静主题
    • 柔和的衬线字体
    • 蓝色，浅黄色等柔和颜色
    • 一般会有很多人
    • 会有一些边界半径
  • 乐观，现代主题
    • 中等大小的标体
    • 浅色颜色的无衬线字体
    • 使用渐变
    • 很多插图
    • 常用阴影和边界半径
  • FUN主题
    • 色彩丰富
    • 图片丰富
    • 大量的边界半径和阴影
    • 很多大色块
  • 确保你真正了解了该实现什么
  • 将问题分成小问题，各个解决，尽可能多的先解决小问题
  • 做尽可能多的尝试来实现哪些功能
    • 实在不行在查
  • 在编码前，结合前面的步骤写一些伪代码
1
2
3
4
5
6
7
8
9
10
11
12
13
const secureBooking = functiong(){
let passengerCount = 0;

return funtion(){
passengerCount++;
console.log(`${passengerCount}`)
};
};

const booker = secureBooking();
booker();
booker();
booker();

![[Pasted image 20241114111853.png]]代码执行时

  • 首先在全局范围下有secureBooking变量，他的执行上下文（Execution Context）进入堆栈
  • 在seB函数范围下会有passengerCount的局部变量
  • 执行上下文也进入堆栈
  • 然后在```
    1
    const booker = secureBooking();
    的调用下，seB函数会返回一个函数，booker在全局范围内，所以它属于全局变量，而在调用完成后，seB的执行上下文会被弹出堆栈
  • 在调用
    1
    booker();
    时产生一个执行上下文，他范围内的变量为空，又因为他是在全区范围内
    ![[Pasted image 20241114113630.png]]
    但是他可以访问seB函数内的passerger是因为闭包
    ***一个函数总是可以访问创建他的执行上下文中的变量，即便他不存在于堆栈中
    闭包基本优先于作用域链

闭包定义

  • 一个函数总是可以访问创建他的执行上下文中的变量，即便该上下文不存在于堆栈中
  • 闭包使函数能访问所有在他的父函数中的变量
  • 闭包是值传递，而不是引用

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let f
(function () {

  const header = document.querySelector('h1');

  header.style.color = 'red';

  f = function () {

    document.body.addEventListener('click', function () {

      header.style.color = 'blue';

    });

  };

})();

  

f();
  • 全局的执行上下文加入堆栈，里面有f
  • 在函数执行时，函数的执行上下文加入堆栈，里面有header
  • 又因为闭包，导致f能访问到上面函数的header