wangjiling.github.io/index.html at master · wangjiling/wangjiling.github.io · GitHub

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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>WEB前端学习分享</title>

  <!-- Edit site and author settings in `_config.yml` to make the social details your own -->

    <meta content="WEB前端学习分享" property="og:site_name">

    <meta content="WEB前端学习分享" property="og:title">


    <meta content="website" property="og:type">


    <meta content="WEB前端学习分享" property="og:description">


    <meta content="/" property="og:url">


    <meta content="/img/wang.png" property="og:image">


    <meta name="twitter:card" content="">

    <meta name="twitter:site" content="@">
    <meta name="twitter:creator" content="@">

    <meta name="twitter:title" content="WEB前端学习分享">


    <meta name="twitter:url" content="/">


    <meta name="twitter:description" content="WEB前端学习分享">


    <meta name="twitter:image:src" content="/assets/img/wang.png">


	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta property="og:image" content="">
	<link rel="shortcut icon" href="/assets/img/favicon/favicon.ico" type="image/x-icon">
	<!-- Chrome, Firefox OS and Opera -->
	<meta name="theme-color" content="#263959">
	<!-- Windows Phone -->
	<meta name="msapplication-navbutton-color" content="#263959">
	<!-- iOS Safari -->
	<meta name="apple-mobile-web-app-status-bar-style" content="#263959">
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="/assets/fonts/font-awesome/css/font-awesome.min.css">
	<!-- Styles -->
	<link rel="stylesheet" href="/assets/css/main.css">
</head>

<body>

  <div class="wrapper">
    <aside class="sidebar">
  <header>
    <div class="about">
      <div class="cover-author-image">
        <a href="/"
          ><img
            src="/assets/img/wang.png"
            alt="Wang Jiling"
        /></a>
      </div>
      <div class="author-name">Wang Jiling</div>
      <p>前端工程师，目前专注于大前端开发、架构</p>
    </div>
  </header>
  <!-- End Header -->
  <footer>
    <section class="contact">
      <h3 class="contact-title">Contact me</h3>
      <ul>
        <!--
          <li><a href="https://twitter.com/wangjiling" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>


          <li><a href="https://facebook.com/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
         -->

        <li class="github">
          <a href="https://github.com/wangjiling" target="_blank"
            ><i class="fa fa-github"></i
          ></a>
        </li>

        <!--
          <li class="linkedin"><a href="https://in.linkedin.com/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
         -->

        <li class="email">
          <a href="mailto:vincentwangjiling@gmail.com"
            ><i class="fa fa-envelope-o" aria-hidden="true"></i
          ></a>
        </li>

      </ul>
    </section>
    <!-- End Section Contact -->
    <div class="copyright">
      <p>2016-2019 &copy; Wang Jiling</p>
      <p>
        <a target="_blank" href="http://www.miitbeian.gov.cn"
          >沪ICP备17029424号</a
        >
      </p>
    </div>
  </footer>
  <!-- End Footer -->
</aside>
<!-- End Sidebar -->
<div class="content-box clearfix">
<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/web-tool.jpeg)" href="/2017/10/08/front-end-code-deployment/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2017/10/08/front-end-code-deployment/">linux(ubuntu) 前端代码部署环境搭建</a></h2>
    <p>安装 nodejs

1、下载编译后的文件
wget -c https://nodejs.org/dist/v8.9.3/node-v8.9.3-linux-x64.tar.xz

2 、解压，移动
tar xvJf node-v8.9.3-linux-x64.tar.xz -C /usr/local/
cd /usr/local/
mv node-v8.9.3-linux-x64/ nodejs</p>
    <span class="post-date">2017, Oct 08</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/web-dev.jpeg)" href="/2016/12/12/js-iframe-height-adaptive/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/12/12/js-iframe-height-adaptive/">iframe高度自适应</a></h2>
    <p>引言

iframe 高度自适应，其实就是设置 iframe 的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹，对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过 CSS 来给它直接定义一个高度达到效果，但当内容是未知或者是变化的时候，这个时候有以下几种情况。

一、传统方式

1、同域下父页面内的 js 能获取到 iframe 页面的高度，所以在 iframe 加</p>
    <span class="post-date">2016, Dec 12</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/web-dev.jpeg)" href="/2016/11/15/css-border-radius/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/11/15/css-border-radius/">刨根问底，CSS3圆角使用</a></h2>
    <p>引言

web开发中使用css对页面进行排版布局，CSS3是层叠样式表（Cascading StyleSheet）语言的最新版本，它的一大优点就是支持圆角。本文根据实际项目开发经验，对border-radius进行详细讲解。

CSS3 border-radius使用

一、CSS3圆角的优点

传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图</p>
    <span class="post-date">2016, Nov 15</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/programer.jpeg)" href="/2016/10/09/angularjs1x-dev-suggest/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/10/09/angularjs1x-dev-suggest/">AngularJS 1.x免入坑宝典</a></h2>
    <p>前言

在web技术发展迅速的今天，各种优秀框架（Angular、React、Vue等）层出不穷，而框架的出现和选择使用归于一点就是让开发者能更快地开发出更好的应用。本文结合项目实战经验，总结了一下AngularJS 1.x项目开发过程中最常遇到的一些问题和坑，并对一些概念和模块进行深入理解和分析，希望能给AngularJs初学者一些帮助，少走弯路，免入坑。

AngularJS 简介

Angu</p>
    <span class="post-date">2016, Oct 09</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/programer.jpeg)" href="/2016/09/16/angularjs1x-project-build/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/09/16/angularjs1x-project-build/">AngularJS 1.x 项目构建</a></h2>
    <p>前言

为了能在项目庞大的时候进行有效的维护和降低每一次迭代开发的成本，需要我们在项目开始时搭建一个较为合理的架构，之后随着项目开发再慢慢完善。一套搭的比较完善的架子有两个最为突出的特性：其一就是结构清晰维护方便；另一个就是开发效率极高，大量的内容被抽象出来，做成公共的组件，只要实现业务部分即可。

构建AngularJS项目

Angular项目框架结构图：


构建Angular项目的方式有</p>
    <span class="post-date">2016, Sep 16</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/web-dev.jpeg)" href="/2016/09/01/js-debug-method-and-technique/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/09/01/js-debug-method-and-technique/">Web开发中的JS调试方法和技巧</a></h2>
    <p>引语

对于 PG 来说，代码调试不可谓不重要，在任何一项技术开发中都可谓是必不可少的技能。掌握各种调试方法和技巧，能快速定位问题、降低故障概率、帮助分析逻辑错误等，达到事半功倍的效果。关于 JS 调试方面的文章有很多，本文结合大牛的一些博客和自己在开发中的实际操作，系统性和综合性地阐述 JS 调试知识，可以作为 Web 开发入门的辅助篇。

本文所有操作均在如下图所示版本的 Chrome 中操作</p>
    <span class="post-date">2016, Sep 01</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/bookrack.jpeg)" href="/2016/08/20/git-common-commands/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/08/20/git-common-commands/">Git常用命令</a></h2>
    <p>前言

对于PG来说，VCS（版本控制系统）应该都很熟悉，可以帮助开发者同步工作，整合代码，维护历史版本。工作中陆续使用过Svn、Mercurial、Git，而最近的几年一直在使用Git。毫无疑问，目前Git是最流行的分布式版本控制系统。

最近两天回顾了一下开发中所用到的Git操作，并查阅了大量资料，重新系统性地梳理了Git相关知识。本文主要介绍工作中常用到的Git命令，旨在帮助理解这些命令，更</p>
    <span class="post-date">2016, Aug 20</span>
  </div>
</article>

<article class="post">

    <a class="post-thumbnail" style="background-image: url(/assets/img/program.jpg)" href="/2016/08/08/how-to-start-web-programming/"></a>

  <div class="post-content">
    <h2 class="post-title"><a href="/2016/08/08/how-to-start-web-programming/">如何快速入门web前端开发</a></h2>
    <p>引语
大学读的专业是计算机科学与技术，计算机相关的课程（硬件、软件）基本都学了一遍。毕业后主要做web前端相关的开发工作，也使用过（java、php）等后端语言参与过后端开发，现在是专注web前端领域相关的技术开发和新技术的调研。

当下web相关技术和行业发展迅速，web前端开发工程师十分紧俏。在web前端开发道路上，喜悦、烦恼都历历在目，感慨颇多。后面会分享一系列web前端开发相关技术实践经验</p>
    <span class="post-date">2016, Aug 08</span>
  </div>
</article>


<div class="container">
  <nav class="pagination" role="pagination">
    <ul>


      <p><span class="page-number">Page 1 of 2</span></p>


      <p><a class="older-posts" href="/page/2/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>

    </ul>
  </nav>
</div>

</div>

  </div>

  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111688204-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-111688204-1');
</script>

<!-- baidu -->
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?4203e28ed2486071d9be8be5ac2e99cd";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>
</html>