一个Web开发学习笔记-00
前言
开始学习Web开发。以前的知识都还给老师了，现在做个简要的学习笔记，避免学习过程思路混乱。
整体目标是能够读懂CRBBV1.0项目代码，编写类似基于区块链的应用，过程中会涉及到各种各样的知识和工具。
笔记中引用内容均给出出处。
平台：IDEA2020
React入门（1）
关于React的理论
【Web】
Web是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
【C/S和B/S】
【框架和库】
library：小而巧的库，只提供了特定的API；优点就是可以很方便的从一个库切换到另外的库；但是代码几乎不会改变；
Framework：大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架，是比较困难的；
【前端三大主流框架】
Angular.js；Vue.js；React.js
【模块化和组件化】
模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；
组件化： 是从 UI 界面的角度 来进行分析的；把一些可复用的UI元素，抽离为单独的组件；便于项目的维护和开发。
【DOM】
普通文档（.txt）和HTML/XML文档（.html/*.xml）的区别仅仅是因为后者是有组织的结构化文件；
浏览器将结构化的文档以树的数据结构读入浏览器内存，并将每个树的子节点定义为一个NODE（想象这颗树，从根节点到叶子节点都被建模为一个NODE对象）；
这每个节点（NODE）都有自己的属性（名称、类型、内容…）；NODE之间有层级关系（parents、child、sibling…）；
以上已经完成文档的建模工作（将文档内容以树形结构写入内存），此时再编写一些方法来操作节点（属性和位置信息），即为NODE API。
DOM是一种将HTML/XML文档组织成对象模型的建模过程。
DOM建模重点在于如何解析HTML/XML文档和开放符合DOM接口规范的节点操作API接口。
作者：字非易
【虚拟DOM】
是框架中的概念。是程序员手动用JS对象来模拟DOM元素和嵌套关系的过程。目的是实现页面元素的高效更新。
【Diff算法】
实际项目中不需要关心虚拟DOM的运行原理，只需关注数据即可，因为Diff算法会帮助我们计算和分析虚拟DOM中变化的部分，从而重新渲染该部分，实现性能提升，简化操作。来源
tree diff：新旧两棵DOM树，逐层对比的过程
component diff：在进行Tree Diff的时候，每一层中，组件级别的对比
element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行 元素级别的对比
【页面渲染】
页面渲染的概念。
动手之前需要知道的其他知识
NodeJS
NodeJS是一个JavaScript运行时环境，简单来说就是运行在服务端的 JavaScript，以前只有浏览器可以解析执行JavaScript代码，他们之间的关系：
JavaScript包括：
ECMAScript(语言基础，如：语法、数据类型结构以及一些内置对象)
DOM（一些操作页面元素的方法）
BOM（一些操作浏览器的方法）
Nodejs包括：
ECMAScript(语言基础，如：语法、数据类型结构以及一些内置对象)
os(操作系统)
file(文件系统)
net(网络系统)
database(数据库)
前端和后端的js相同点就是，语言基础都是ECMAScript，只是他们所扩展的东西不同，前端需要操作页面元素，于是扩展了DOM，也需要操作浏览器，于是就扩展了BOM。而服务端的js则也是基于ECMAScript扩展出了服务端所需要的一些API，稍微了解后台的童鞋肯定知道，后台语音有操作系统的能力，于是扩展os，需要有操作文件的能力，于是扩展出file文件系统、需要操作网络，于是扩展出net网络系统，需要操作数据，于是要扩展出database的能力。
简书
npm
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
npm init -y 【默认初始化，创建package.json】
npm -v
npm install npm -g 【global】
npm i(install) <module>(@版本号)
【默认本地安装，放在工程目录下的 node_modules 目录】
npm list -g 【查看所有全局安装的模块】
npm list <module> 【查看版本号】
npm i <module> --save-dev(-D)
【开发环境下的依赖，代码提交线上时，不需要这些工具】
npm run <键名> 【package.json中的配置项"scripts"定义了命令的快捷方式。】
npm info <module> 【查看模块信息】
NodeJS和npm的关系
npm是nodejs的包管理器（package manager）。我们在node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。
webpack
学习webpack之前，先学习了JavaScript的基本知识。
webpack：一种基于nodejs开发的模块打包工具，对符合node规范的项目进行打包。
webpack-cli：使得能够在命令行中使用webpack命令
webpack学习视频
webpack全局安装方法
webpack官方文档
webpack-dev-server官方文档
全局使用
webpack ./index.js
局部使用
npx webpack ./index.js 【npx：在命令行执行本地已安装的依赖包命令】
npm run <command> 【<command>是在package.json设置的script命令快捷方式。不用在"script"中加npx，因为自动先到项目工程文件夹node_module中寻找模块】
注意：webpack 4.x以后提供了 约定大于配置的概念；目的是为了尽量减少配置文件的体积（配置文件webpack.config.js）。默认约定：打包的入口是src -> index.js;打包的输出文件是dist -> main.js。mode默认production。
另外，直接使用export default与import from来确定模块间的关联，这是ES6中导出模块的API，具体方法在学习视频中。
动手阶段
创建webpack4.x项目和配置
1. 创建文件夹，用idea打开文件夹，终端运行`npm init -y` 快速初始化项目
2. 在项目根目录创建`src`源代码目录和`dist`产品目录
3. 在 src 目录下创建 `index.html`，`index.js`
4. 运行`npm i webpack webpack-cli webpack-dev-server -D`，注意版本↓
5. 运行`npx webpack ./index.js`
6. 运行`webpack-dev-server` #效果是保存js文件即可自动打包更新
7. 配置html-webpack-plugin插件 #略
webpack-dev-server打包出错：版本冲突(webpack@4.29.0对应版本，较新的解决方案)
项目中使用 react
1. 运行 `cnpm i react react-dom -S`#-S,dependencies依赖
2. `index.html`中创建容器：<div id="app"></div>
3. `index.js`中创建虚拟DOM元素： const myh1 = React.createElement('h1', { title: 'h1title', id: 'myh1' }, 'h1textcontent', n个h1子节点)
5. 渲染：ReactDOM.render(myh1, document.getElementById('app'))
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
