Skip to content

Commit 58ce585

Browse files
xiaomuzhuxiaomuzhu
committed
feat: 添加盒模型 BFC等部分
1 parent 5405f42 commit 58ce585

File tree

9 files changed

+466
-18
lines changed

9 files changed

+466
-18
lines changed

‎.temp/internal/app-enhancers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import m0 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/0.js"
22
import m1 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/1.js"
33
import m2 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/data-block.js"
4-
import m3 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/global-components-71.js"
4+
import m3 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/global-components-94.js"
55
import m4 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/2.js"
66
import m5 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/3.js"
77
import m6 from "/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/.temp/app-enhancers/4.js"

‎.temp/internal/page-components.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ export default {
66
"v-5b8d0d7e": () => import("/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/docs/guide/README.md"),
77
"v-8c976b3a": () => import("/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/docs/guide/preface.md"),
88
"v-281299f7": () => import("/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/docs/guide/book.md"),
9+
"v-db07261a": () => import("/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/docs/guide/cssBasic.md"),
910
"v-36e82cfa": () => import("/Users/dxy/Downloads/dxy-gzh/Front-end-Interview/docs/guide/htmlBasic.md")
1011
}

‎.temp/internal/routes.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ export const routes = [
4848
ensureAsyncComponentsLoaded("Layout", "v-281299f7").then(next)
4949
},
5050
},
51+
{
52+
name: "v-db07261a",
53+
path: "/guide/cssBasic.html",
54+
component: GlobalLayout,
55+
beforeEnter: (to, from, next) => {
56+
ensureAsyncComponentsLoaded("Layout", "v-db07261a").then(next)
57+
},
58+
},
5159
{
5260
name: "v-36e82cfa",
5361
path: "/guide/htmlBasic.html",

‎.temp/internal/siteData.js

Lines changed: 132 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ export const siteData = {
6767
"title": "工程化",
6868
"slug": "工程化"
6969
},
70+
{
71+
"level": 3,
72+
"title": "Typescript",
73+
"slug": "typescript"
74+
},
7075
{
7176
"level": 3,
7277
"title": "性能优化",
@@ -189,6 +194,131 @@ export const siteData = {
189194
}
190195
]
191196
},
197+
{
198+
"title": "CSS基础",
199+
"frontmatter": {},
200+
"regularPath": "/guide/cssBasic.html",
201+
"relativePath": "guide/cssBasic.md",
202+
"key": "v-db07261a",
203+
"path": "/guide/cssBasic.html",
204+
"headers": [
205+
{
206+
"level": 2,
207+
"title": "CSS选择器的优先级是怎样的？✨",
208+
"slug": "css选择器的优先级是怎样的？✨"
209+
},
210+
{
211+
"level": 2,
212+
"title": "有哪些方式（CSS）可以隐藏页面元素？",
213+
"slug": "有哪些方式（css）可以隐藏页面元素？"
214+
},
215+
{
216+
"level": 2,
217+
"title": "CSS有几种定位方式？",
218+
"slug": "css有几种定位方式？"
219+
},
220+
{
221+
"level": 2,
222+
"title": "如何理解z-index？✨",
223+
"slug": "如何理解z-index？✨"
224+
},
225+
{
226+
"level": 2,
227+
"title": "如何理解层叠上下文？✨",
228+
"slug": "如何理解层叠上下文？✨"
229+
},
230+
{
231+
"level": 3,
232+
"title": "是什么？",
233+
"slug": "是什么？"
234+
},
235+
{
236+
"level": 3,
237+
"title": "如何产生？",
238+
"slug": "如何产生？"
239+
},
240+
{
241+
"level": 2,
242+
"title": "清除浮动有哪些方法？",
243+
"slug": "清除浮动有哪些方法？"
244+
},
245+
{
246+
"level": 2,
247+
"title": "你对css sprites的理解，好处是什么？",
248+
"slug": "你对css-sprites的理解，好处是什么？"
249+
},
250+
{
251+
"level": 3,
252+
"title": "是什么？",
253+
"slug": "是什么？-2"
254+
},
255+
{
256+
"level": 3,
257+
"title": "如何操作？",
258+
"slug": "如何操作？"
259+
},
260+
{
261+
"level": 3,
262+
"title": "好处：",
263+
"slug": "好处："
264+
},
265+
{
266+
"level": 3,
267+
"title": "不足：",
268+
"slug": "不足："
269+
},
270+
{
271+
"level": 2,
272+
"title": "你对媒体查询的理解？",
273+
"slug": "你对媒体查询的理解？"
274+
},
275+
{
276+
"level": 3,
277+
"title": "是什么?",
278+
"slug": "是什么"
279+
},
280+
{
281+
"level": 3,
282+
"title": "如何使用？",
283+
"slug": "如何使用？"
284+
},
285+
{
286+
"level": 2,
287+
"title": "你对盒模型的理解？ ✨",
288+
"slug": "你对盒模型的理解？-✨"
289+
},
290+
{
291+
"level": 3,
292+
"title": "是什么？",
293+
"slug": "是什么？-3"
294+
},
295+
{
296+
"level": 2,
297+
"title": "标准盒模型和怪异盒模型有什么区别？✨",
298+
"slug": "标准盒模型和怪异盒模型有什么区别？✨"
299+
},
300+
{
301+
"level": 2,
302+
"title": "谈谈对BFC(Block Formatting Context)的理解？ ✨",
303+
"slug": "谈谈对bfc-block-formatting-context-的理解？-✨"
304+
},
305+
{
306+
"level": 3,
307+
"title": "是什么？",
308+
"slug": "是什么？-4"
309+
},
310+
{
311+
"level": 3,
312+
"title": "如何形成？",
313+
"slug": "如何形成？"
314+
},
315+
{
316+
"level": 3,
317+
"title": "作用是什么？",
318+
"slug": "作用是什么？"
319+
}
320+
]
321+
},
192322
{
193323
"title": "HTML基础",
194324
"frontmatter": {},
@@ -299,7 +429,8 @@ export const siteData = {
299429
"title": "基础",
300430
"collapsable": false,
301431
"children": [
302-
"htmlBasic"
432+
"htmlBasic",
433+
"cssBasic"
303434
]
304435
}
305436
]

‎docs/.vuepress/config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ function renderSiderBar() {
7878
{
7979
title: '基础',
8080
collapsable: false,
81-
children: ['htmlBasic']
81+
children: [
82+
'htmlBasic',
83+
'cssBasic',
84+
]
8285
}])
8386
}

‎docs/guide/README.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
## 模块概览
1414

15-
本项目会分为六大模块，分别为：前端基础、框架解读、工程化、性能优化、计算机基础、细分领域。
15+
本项目会分为七大模块，分别为：前端基础、框架解读、工程化、Typescript、性能优化、计算机基础、细分领域。
1616

1717
### 前端基础
1818

@@ -35,6 +35,7 @@
3535
#### 实战技巧
3636

3737
实战技巧大概有这么几种：
38+
3839
1. 基础组件实现：主要考察是否只会用现成组件库，有没有造组件轮子的能力。
3940
2. 组件复用：这部分考察抽象能力，DRY是基本要求。
4041
3. 组件通信：这部分考察对项目的状态管理经验。
@@ -47,6 +48,7 @@
4748
前端工程化现在已经成为标配了，我们目前计划的内容有：webpack、Babel、Git、测试、Node工具。
4849

4950
#### webpack
51+
5052
webpack是前端项目的事实上的打包标准，这部分我们会从打包原理、插件loader编写和实战搭建三个部分进行讲解。
5153

5254
webpack的知识是实战型的，所以会有一个实战源码。
@@ -66,11 +68,20 @@ Git是任何软件工程师的必备技能（SVN瑟瑟发抖），这部分主
6668
但是测试是软件工程的基本要求，我们还是增加了这个部分，主要是对测试工具的对比和入门，以及测试思想的解读。
6769

6870
#### Node工具
71+
6972
实际上Node才是前端工程化的基石，现在前端对Node要求也越来越多，当然除了写中间层之外，一大用处就是造基于Node的工程工具，如下：
7073
![2019-06-12-17-52-29](https://xiaomuzhu-image.oss-cn-beijing.aliyuncs.com/998be8184d459d6592b2a2cacd10380b.png)
7174

7275
这个部分我们会造一个基于Node的Cli工具，并将各种代码美化工具、代码检测工具以及各种工程化的思想集成进去，除了学会造node工具之外，对前端工程化的知识算是一个总的梳理。
7376

77+
### Typescript
78+
79+
考虑再三，我还是认为TS应该占据一席之地，这两年Typescript其实有成为前端大型项目的标准开发语言，Angular这种庞然大物早就用了TS自不必说，Vue已经抛弃flow用TS重写（用过flow就知道多难用），甚至连Facebook开源的jest也抛弃flow改用TS，在Node后端框架中最流行的Nestjs也是基于TS的，还有vscode、antd、rxjs等等都是基于TS的。
80+
81+
在招聘信息上我见到越来越多的要求是『有使用Typescript的经验者优先』这种条件，个人认为在Vue 3.0正式发布后TS会逐渐成为硬性要求，虽然尤小右声明Vue在使用层面不限制js或者ts，但是Angular团队也是这么说的。。。但是问题在于Vue的生态会逐渐被TS重写，Vue对TS的支持会非常好，会有越来越多的团队用TS开发Vue新项目，这个趋势是不可逆的，包括本身对TS支持良好的Angular和React，三大框架都被TS纳入版图之后，这个方向已经很明朗了。
82+
83+
所以，这部分会介绍TS的基本语法和高级类型编程，然后用TS重写一个库作为实战（这个库初步定为Axios，但是声明跟某课网的那个课程没有半点关系哈）。
84+
7485
### 性能优化
7586

7687
性能优化是任何软件工程必备的步骤，我们不会罗列雅虎军规，而是进入到实战进行优化。
@@ -91,7 +102,6 @@ Git是任何软件工程师的必备技能（SVN瑟瑟发抖），这部分主
91102

92103
前端的目前分化的领域大概有四类：移动前端、可视化、图形、Node。
93104

94-
95105
移动web前端,他们大部分时间在为移动设备工作,除了传统前端知识外,还需要运用 hybrid、RN 甚至一些 native 技术
96106
![移动前端招聘信息]( https://xiaomuzhu-image.oss-cn-beijing.aliyuncs.com/5efdb218b01fbe5842a03131db64eddf.png)
97107

@@ -106,4 +116,4 @@ Node 前端,讲道理 node 工程师跟前端的关系已经很小了,但是也
106116

107117
实际上，这四个领域的分化导致其对特定领域的知识要求更高，而相关的资料就相比于通用前端知识更少，这部分应该是本项目难度最大的地方，我会按照移动前端、Node前端、可视化、图形先后顺序进行更新，这也是我个人的熟悉程度，也是目前市面上相关需求的大小排序，毕竟市场对于找一个写shader的前端需求有限，一般是一些大厂或者游戏厂商。
108118

109-
目前只产出了移动前端这部分的内容，前端火起来也正是因为移动互联网的兴起，现在比较热门的hybrid、小程序、RN都在这个部分。
119+
目前只产出了移动前端这部分的内容，前端火起来也正是因为移动互联网的兴起，现在比较热门的hybrid、小程序、RN都在这个部分。

0 commit comments

Comments
 (0)