forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1036-css-14.html
226 lines (212 loc) · 8.37 KB
/
1036-css-14.html
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style>
.reveal pre code {
background-color: #120;
}
</style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h4>小课堂【萌新】</h4>
<h4>【CSS】为什么要做组件库？</h4>
<h4>分享人：计翔于</h4>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>
前端组件化，这是一个概念，也是一种技术。那么为什么要实现前端组件化？
</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用， 而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长， 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
</p>
</section>
<section>
<p>
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分， 这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。 就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的， 他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修， 只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
</p>
</section>
<section>
<strong></strong>
<p>
</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<p>
CSS怎么做组件化呢？为什么要做组件化？
</p>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>
CSS的模块化基本上是将实现某一模块Dom样式的CSS放在不同的文件中， 显然随着WEB应用的发展，开发者已经很不满足于这种简单的模块化了。 其实关于CSS的组件化，业界也早就已经有了很多探索，比如less，sass等。 那么为什么CSS也要组件化呢？
</p>
</section>
<section>
<p>
从开发者角度来看： <br>
在CSS上，保证代码上的模块化，具有独立作用域； 内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响。 概括的说就是，组件内部的布局只受容器变化影响。 在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响
</p>
</section>
<section>
<p>
从整个公司的发展来看： <br>
业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务。
项目可维护性更强，提高开发效率。
更好排查问题，某个组件出现问题，直接对组件进行处理。
开发测试过程中，可以只编译自己那部分代码，不需要编译整个项目代码。
</p>
</section>
<section>
<p>
CSS是一种扁平的结构，一个Dom可能对应着一个CSS样式，而这些CSS样式很有可能出现公共的部分， 那么提取这些公共的部分也就实现了CSS的组件化，在诸如less和sass出现之前， 开发者都是把公共的CSS样式写成一个个公共class，但是这样之后CSS文件的阅读性就变得困难了， 当然也不容易修改。而less和sass出现之后，使得CSS的编程可以定义变量， 可以实现继承，CSS内容的结构也变得更加清晰，提高了CSS文件的阅读性，更容易让人理解，修改起来也变得简单。
</p>
</section>
</section>
<section>
<section>
<h3>5.编码实战</h3>
</section>
<section><a href="">demo</a></section>
</section>
<section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>做组件库有什么好处？</p>
</section>
<section>
<p>
</section>
<section>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
参考一：<a href="http://www.blogjava.net/Hafeyang/archive/2012/08/01/how_to_build_frontend_component_lib.html">谈谈前端组件库</a><br>
参考二：<a href="https://blog.csdn.net/chenchun91/article/details/53375041">博客</a><br>
</section>
</section>
<section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<p>
bootstrap有哪些常用的组件？
</p>
</section>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
By
<small style="vertical-align: middle">计翔于</small>
</p>
</section>
</div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [{
src: '../plugin/markdown/marked.js'
},
{
src: '../plugin/markdown/markdown.js'
},
{
src: '../plugin/notes/notes.js',
async: true
},
{
src: '../plugin/highlight/highlight.js',
async: true,
callback: function() {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>