-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathskillinfo.html
274 lines (234 loc) · 7.74 KB
/
skillinfo.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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body class="indexPage">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WEB前端</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">个人首页</a></li>
<li><a href="skillinfo.html">技能介绍</a></li>
<!-- <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">项目展示 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="webapp/index.html">移动端</a></li>
<li><a href="openEye/index.html">移动端2</a></li>
<li><a href="pc/index.html">pc端响应式</a></li>
</ul>
</li> -->
</ul>
</div>
</div>
</nav>
<div class="session">
<h3>代码规范：</h3>
<pre>
【html部分：】
1)严格遵守Tab键缩进格式，让代码层次清晰;
2)使用语义化标签；
3)规范的class命名；
4)大板块的注释；
<!-- 头部导航 -->
<div class="header">
<ul class="nav">
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">产品</a>
<ul class="sub_nav">
<li>
<a href="javascript:;">软件产品</a>
</li>
<li>
<a href="javascript:;">硬件产品</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">成就</a>
</li>
<li>
<a href="javascript:;">我们</a>
</li>
</ul>
</div>
<!-- 中间内容区域 -->
<div class="main">
<div class="banner"></div>
<div class="session">
<h1>标题</h1>
<p>文字说明</p>
</div>
</div>
<!-- 底部 -->
<div class="footer"></div>
【css部分：】
1)每个样式采用标准换行方式；
*{
padding:0;
margin:0;
}
.nav{
width:1200px;
height:40px;
margin:0 auto;
}
【js部分：】
1)严格遵守Tab键缩进格式，让代码层次清晰;
2)javascript规范空格缩进写法；
3)必要的注释,参数说明；
4)规范分号结束语句，利于后期压缩；
var models = (function () {
return {
init: function () {
this.eventBind();
},
/*
*页面事件绑定
*/
eventBind: function () {
...
},
/*
* 高度自适应函数
* @param {string} _height 要调整的高度
* @return {number}
*/
autoHeight: function (_height) {
if (typeof _height === 'undefind') {
_height = 0;
}
return document.documentElement.clientHeight - _height;
}
}
})();
</pre>
</div>
<div class="session">
<h3>性能和兼容性说明：</h3>
<pre>
【html性能和兼容：】
html部分只有图片加载上遇到性能问题，
特别是在移动端，网速相对pc端较慢；采用图片懒加载方式，滑动到
相应的位置，开始加载显示相应位置的图片；
轮播大图采用css背景图片的写法，让它优先加载；
兼容上，只有placeholder属性，需要js方法兼容低版本的浏览器；
【css兼容和性能：】
样式分公用样式和私有样式：
公用样式写在common.css里面；
私有样式，写在具体的对应的css文件里，私有样式我一层层套的很紧密，
以防后期改样式，会不知不觉改动到其他页面；
css我能兼容到ie7+；
css3不兼容ie7和ie8，我会分别用ie的hack写法，采用另一种样式做兼容；
背景图标采用雪碧图，防止鼠标经过闪屏；
【js性能和兼容性说明：】
1)js代码习惯采用单例模式，一个js文件只有一个全部变量；
2)返回接口，可以提高其他js文件调用：models.autoHeight()；
var models = (function () {
//局部变量
var _str = '';
var fn = function () {
}
return {
init: function () {
this.eventBind();
},
//页面事件绑定
eventBind: function () {
...
},
/*
* 高度自适应函数
* @param {number} _height 要调整的高度
* @return {number}
*/
autoHeight: function (_height) {
if (typeof _height === 'undefind') {
_height = 0;
}
return document.documentElement.clientHeight - _height;
}
}
})();
3)采用惰性模式，提高性能，例如：
//事件绑定兼容，通常程序员写法：
var addEvent = function (dom, type, fn) {
if (window.addEventListener) {
dom.addEventListener(type, fn, false);
} else if (window.attachEvent) {
dom.attachEvent('on' + type, fn);
} else {
dom['on' + type] = fn;
}
}
//我的高性能写法：
var addEvent = (function (dom, type, fn) {
if (window.addEventListener) {
return function (dom, type, fn) {
dom.addEventListener(type, fn, false);
}
} else if (window.attachEvent) {
return function (dom, type, fn) {
dom.attachEvent('on' + type, fn);
}
} else {
return function (dom, type, fn) {
dom['on' + type] = fn;
}
}
})();
4)采用函数节流方式提高性能，例如：
//窗口大小改变时，调整<div id="J_height"></div>的高度
function economize(methods) {
clearTimeout(methods.tId);
methods.tId = setTimeout(function () {
methods();
},100)
}
addEvent(window, 'resize', function () {
economize(function () {
var _height = document.documentElement.clientHeight;
document.getElementById('J_height').style.height = _height + 'px';
});
});
5)其他技巧：增加dom元素时，讲所有的元素按字符串形式拼接好，一次性插入dom元素，
避免重复操作dom节点：
var htmlStr = '';
for (var i=0,len=data.length; i < len; i++) {
htmlStr += '<li class="item">'+ data[i].item +'</li>'
}
$('ul').html(htmlStr);
工作中遇到一次性实例化几百个下拉框对象实例，在低版本ie下，需要10秒左右，导致页面卡顿；
我想到两种解决：
1、采用瀑布流方式，滚动到底部再分页加载的方式；
2、先不实例化下拉框对象；鼠标经过哪一个下拉框，再实例化（鼠标经过在前面，点击在后面）；
这样点击的时候，已经实例化好了，可以用了；
具体的性能问题，工作中会具体分析
</pre>
</div>
<div class="session">
<h3>vue技能</h3>
<pre>
详细介绍详见个人简书:<a href="https://www.jianshu.com/u/1eafd9f43b77">https://www.jianshu.com/u/1eafd9f43b77</a>
</pre>
</div>
</body>
</html>