竹风欣海笑 水流无意境常静，花落虽频意自闲。 2017-08-02T02:38:17.090Z http://wangzc.cc/ wangzc Hexo 使用mavo制作可自定义编辑的导航页面 http://wangzc.cc/blog/web-nav-mavo/ 2017-08-01T08:03:00.000Z 2017-08-02T02:38:17.090Z 离职后，得闲整理前端这一年的收获。发现每个浏览器的书签都是满满的，这些都是平常关注前端动态留下的痕迹。意外发现一个好玩的东西——mavo,今天就用它来做一个前端导航页面。

webNav

预览地址：

导航数据存放在github上：www.wangzc.cc/nav/index.html

导航数据存在本地：www.wangzc.cc/nav/local.html

源代码：https://github.com/wangzc92/webNav

特点

有人会问，这页面跟之前的导航页面有啥区别？区别就是这个页面可以可视化编辑，添加删除排序都是轻而易举完成的。如果数据是存放在云上，编辑保存之后实时更新。

拿第一个内容存放在github上为例，打开页面之后，顶部右侧有个登陆键，使用github账号登陆之后，会出现下列选项：

paste image

点击Edit则进入编辑状态，页面中所有的文字，图片，链接都可以修改，而且可以添加，删除，排序单站点导航或者一大类。修改完之后点击保存就自动同步到github上。

说明：此处例子存储在我的github上，登陆你们的github是没有权限合并到我这里，点击保存后会将代码克隆到你们的版本库，将数据存储地址改成你们的之后就可以作为自己的导航页面了。如果你们有更多更好的导航，欢迎提交合并请求。

代码

打开页面源代码，发现代码非常简单，加上html标签仅有35行，除了引用mavo的js之外，自己未写一行js。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
	<link rel="stylesheet" href="style.css">
	<script src="https://get.mavo.io/mavo.js"></script>
</head>
<body>
	<main mv-app="webNav" class="mv-autoedit clearfix" mv-storage="https://github.com/wangzc92/webNav">
		<aside>
			<h1 property="name">前端导航</h1>
			<ul class="nav">
				<li property="nav" mv-multiple mv-value="category">
					<a href="#[title]">[title]<span>[count(item)]</span></a>
				</li>
			</ul>
			<footer>&copy;<a href="http://wangzc.cc" target="_blank">竹风欣海笑</a></footer>
		</aside>
		<article>
			<section class="clearfix" id="[title]" property="category" mv-multiple>
				<h2 property="title">导航标题</h2>
				<a class="item" property="item" href="" mv-multiple target="_blank">
					<div class="clearfix">
						<img property="img" src="">
						<h3 property="site">站点名称</h3>
					</div>
					<p property="info">简介简介简介简介简介简介简介简介</p>
				</a>
			</section>
		</article>
	</main>
</body>
</html>

细看代码，能够发现几个未见过的属性：mv-app,mv-storage,property,mv-multiple。没错，这些都是mavo中定义的属性。下面就讲解一下具体实现。

mavo简介

官网：http://mavo.io/

根据官网介绍，Mavo是通过扩展HTML的语法来管理、存储和转换数据的Web应用程序。特点有：

  • 它可以将数据存储在本地或云中；
  • 在网站上编辑数据，有一个直观的，自动生成的，可定制的界面。
  • 多媒体在你的页面上通过拖放，粘贴，或者浏览，没有一行代码就可以上传。
  • 在HTML中执行计算，在需要时进行更新。不需要编写JavaScript！

使用

使用方法也特别简单，只需下载或引用mavo的css和js。

1
2
<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>

语法

mavo扩展属性较多，下面介绍几个最重要的，更多详见官方文档。

mv-app

是mavo的根节点，可以理解成一个app应用的名字或id。

1
2
3
<div mv-app="mavoTest">
	My first Mavo app!
</div>

mv-storage

告诉mavo你的数据存放在哪里。可以存放在本地或云端。

  • 本地：设置mv-storage="local"将数据存储在浏览器的localStorage中，但这种方式无法将你的数据分享给其他人，而且本地存储也是有容量限制的。

  • github: 你不需要了解它是如何存储在github并从github上获取数据的，只需设置好存储位置即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     https://github.com/[username]
     //mavo自动创建mv-data版本库，数据文件为[appname].json
     
     https://github.com/[username]/[reponame]
     //mavo自动创建[appname].json在指定版本库中
     
     https://github.com/[username]/[reponame]/[filename]
     //默认分支为master
    https://github.com/[username]/[reponame]/blob/[branch]/[filename]
    //设置不同分支

  • 其他云端

property

简单理解property定义的是该字段名。如果该节点定义的有class或id，可以直接拿来作为字段名，不需重复定义。

1
2
3
<div property class="name">Lea Verou</div>
<div property id="name">Lea Verou</div>
<div property="name">Lea Verou</div>

mv-multiple

如果说一个property是一个个体或字段，那么mv-multiple可以说是一个组或类。上面导航中有两个mv-multiple：一是单个站点组，由站点图标，站点标题，站点描述和站点链接组成。二是导航组，由多个站点组组成的大类。

其他属性

mavo还提供了很多属性，相互结合可以做出很复杂的页面，而代码却十分简单。更多属性例子请自行去官网查阅。

总结

利用mavo，曾做过可视化编辑多语言系统，解决编辑不懂代码的难题。

有了这个导航页面，随时可以添加内容，归类整理。最后还是那句话，如果你有更好的前端网站链接，欢迎编辑好发送合并请求，让前端导航更全。

竹风原创，转载请附上原文链接：http://wangzc.cc/blog/web-nav-mavo/

]]> <p>离职后，得闲整理前端这一年的收获。发现每个浏览器的书签都是满满的，这些都是平常关注前端动态留下的痕迹。意外发现一个好玩的东西——mavo,今天就用它来做一个前端导航页面。</p> <p><img src="http://ofi3qxlvd.bkt.clouddn.com/1 gulp实用指南(1)--基本API介绍 http://wangzc.cc/blog/gulp-api/ 2017-06-25T01:15:00.000Z 2017-06-30T01:34:50.635Z gulp简介

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

安装

1
2
3
4
#全局安装
$ npm install gulp --global
#作为项目依赖安装
$ npm install gulp --save-dev

使用方法

在项目根目录下创建一个名为 gulpfile.js 的文件：

1
2
3
4
5
var gulp = require('gulp');
gulp.task('test', function() {
  // 将你的任务代码放在这
});

然后运行$ gulp test执行任务。

基本API介绍

gulp简单易学，主要有四个方法：.src, .dest, .task, .watch，如果你能熟练掌握这四种方法，那么恭喜你，可以开启你的自动化之路了。

gulp.src(globs[, options])

  1. 说明：src方法是指定需要处理的源文件的路径。

  2. globs （类型： String 或 Array）
    需要处理的源文件匹配符路径，可使用通配符匹配多个文件。

    常见通配符：

    • “*“ 匹配所有文件；例：src/*.js选择src目录下的所有js文件。
    • “**“ 匹配0个或多个文件夹；例：src/**/*.js匹配src目录下所有的js文件，包含各个子文件夹中的js。
    • “!” 排除文件;例：!src/a.js不包含a.js文件。
    • “{}” 匹配多属性；例：src/{a, b}.js匹配a.js和b.js文件；src/*.{jpg, png}匹配src目录下所有后缀名为jpg和png的文件。

  3. options （类型： Object）
    除了 node-glob 和 glob-stream 所支持的参数外，gulp 增加了一些额外的选项参数：

    • options.buffer 类型： Boolean 默认值： true；设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
    • options.read 类型： Boolean 默认值： true；设置false，将不执行读取文件操作，返回null；
    • options.base 类型：String； 设置输出路径以某个路径的某个组成部分为基础向后拼接。

gulp.dest(path[, options])

  1. 说明：dest方法是指定处理完后文件输出的路径。
  2. path （类型： String or Function）
    文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径。

  3. options （类型： Object ）
    有2个属性cwd、mode:

    • options.cwd 类型：String 默认：process.cwd()；输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
    • options.mode 类型：String 默认：0777 ；指定被创建文件夹的权限。

gulp.task(name[, deps], fn)

  1. 说明：task定义一个gulp任务。
  2. name
    任务的名字，不能含有空格
  3. deps（类型： Array）
    一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
  4. fn 该函数定义任务所要执行的一些操作。

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

  1. 说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务；
  2. glob （类型：String or StringArray）
    需要处理的源文件匹配符路径。
  3. opts （类型：Object）
  4. tasks （类型：StringArray）
    需要执行的任务的名称数组；
  5. cb(event) （类型：Function）
    每个文件变化执行的回调函数；

组合举例

看完这么多理论，来看个小栗子：

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('less', function () {
    gulp.src(['less/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});
gulp.task('watchLess', ['less'], function(){
    gulp.watch(['less/*.less'], ['less']);
});

分析：这里一共有两个任务，less实现将less目录下（除了extend和page）所有less解析成css的功能；watchLess监听less目录下的所有less文件，一旦发生变化执行less任务。

接下来将分几篇介绍gulp实用的插件，欢迎继续关注。

]]> <h2 id="gulp简介"><a href="#gulp简介" class="headerlink" title="gulp简介"></a>gulp简介</h2><p>gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。</p> <h css打字机效果PK传统js打印 http://wangzc.cc/blog/demos-prints/ 2017-02-28T03:53:00.000Z 2017-04-27T02:36:19.319Z 也许大家都知道使用js的substring函数来实现字符打印，那么通过css3实现同样的效果你了解吗？

print

上面两种效果，不知道你更喜欢哪一种呢？下面分别向大家介绍实现方法。

一、JS打印

先介绍一下js实现打字机效果的原理，其实主要是substring函数，它有两个参数，开始位置和结束位置，用于提取字符串中介于两个指定下标之间的字符。实现代码如下：

1
2
3
4
5
6
var index=0;
var text="今天是个好日子，幸福像花儿一样。";
function type(){
document.getElementById("txt").innerText = text.substring(0,index++)+'_';
}
setInterval(type, 350);

将文本通过substring函数分离开，然后不断向后提取输出。这也是比较传统的方式。现在介绍另一种使用新兴css3来实现这个效果。

二、CSS打印

实现打印效果我们第一想到的就是把文字一个个提取出来，但是css不能拆分文本，所以想到另一种方式，通过控制显示隐藏来实现分离。好，顺着这个思路写出代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes typing { from { width: 0; } }
	@keyframes blink-caret { 50% { border-color: transparent; } }
	h1 { 
		font: bold 200% Consolas, Monaco, monospace;
		border-right: .1em solid;
		width: 16.5em; /* fallback */
		/* width: 30ch; # of chars */
		margin: 2em 1em;
		white-space: nowrap;
		overflow: hidden;
		animation: typing 10s steps(16, end), /* # of steps = # of chars */
		           blink-caret .5s step-end infinite alternate;
	}

代码也很简单，通过css分步动画，多少个文字就分成多少步，实现一个一个出现的效果。

三、比较总结

纵观两种语言实现方式，我还是更喜欢js，简单粗暴。css方法中如果字体不同，中英文不同，单个长度都会发生变化，不太适宜开发维护。但如果文字较少，用css效果还是不错的。

今天的分享到此结束，关注我，每天都要更新哦。玩转前端，带你领略不一样的前端世界！

]]> <p>也许大家都知道使用js的substring函数来实现字符打印，那么通过css3实现同样的效果你了解吗？</p> 前端开发神器Emmet，让你的代码输入效率瞬间翻倍 http://wangzc.cc/blog/tools-emmet/ 2017-02-24T03:19:00.000Z 2017-04-27T02:09:36.774Z 你还在一个字符一个字符的敲代码吗？如果是那你就太OUT了，现在什么都流行自动化，当然敲代码也不能落后啊。这款emmet神器，让你的代码输入效率瞬间翻倍！我们还是先看效果图：

paste image

怎么样，是不是很酷，快来学习一下吧。

Emmet，前身是大名鼎鼎的Zen Coding，借助css语法来提高输入html/css代码效率。Emmet作为一款插件被广泛运用在代码编辑器中，如sublime,webstrom,notepad++等都默认安装的有，如果没有可自行百度安装。

基本使用：输入Emmet命令，按Tab键即可。

一、快速生成html代码

1.生成html文档

html文档一般包括<html> <meta> <head> <body>标签等,这些固定标签可以通过Emmet一键生成。

1
2
3
html:5或! 快速生成html5文档
html:xt 快速生成XHTML过渡文档
html:4s 快速生成HTML4严格文档

2.生成html标签

Emmet可以自动补全标签，只需输入尖括号内的标签名然后按下Tab键，一个完整闭合的标签就生成了。另外我们可以使用”>”生成子元素，使用”+”生成同级元素，使用”^”返回上一层父级元素，使用”*”生成重复元素，使用”()”进行组合操作。

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
div
<div></div>
img
<img src="" alt="">
div>ul>li
<div>
	<ul>
		<li></li>
	</ul>
</div>
h1+h2+h3
<h1></h1>
<h2></h2>
<h3></h3>
div>h1>span^h2
<div>
	<h1><span></span></h1>
	<h2></h2>
</div>
ul>li*3
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

3.标签中添加类、id、文本和属性

Emmet使用”#”和”.”来生成id和class属性,使用”[]”进行自定义属性，使用”{}”来定义标签内包含的内容。如果标签是div的话可以直接省略div。

比如输入下面这段，按下Tab键

1
(header>ul>li*2>a)+section>h1+p^footer

运行结果如下：

1
2
3
4
5
6
7
8
9
10
11
<header>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</header>
<section>
	<h1></h1>
	<p></p>
</section>
<footer></footer>

加入属性再试一下

1
div#header{hello}+.content>table.class1.class2>tr>td[title="Hello world!" colspan=3]

1
2
3
4
5
6
7
8
<div id="header">hello</div>
<div class="content">
	<table class="class1 class2">
		<tr>
			<td title="Hello world!" colspan="3"></td>
		</tr>
	</table>
</div>

4.自动生成编号

Emmet支持自动生成连续的编号，使用”$”符号快速生成相关属性的编号。如果需要生成多位的数字编号，可以组合使用多个”$”符号。如果需要指定反向编号，可以使用”$@-“符号。当然如果输出从某个编号到某个编号也是可以的，自己去探索吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
ul>li.item$$$*3
<ul>
	<li class="item001"></li>
	<li class="item002"></li>
	<li class="item003"></li>
</ul>
ul>li.item$@-*3
<ul>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>

二、快速生成css代码

1.快速生成css属性和值

书写css是枯燥无味的事情，Emmet可以帮你简化这个过程。生成的属性值默认是px，当然也可以生成其他单位，那就请记住下面几个符号：

“p”表示”%”,”e”表示”em”,”x”表示”ex”。

1
2
3
4
5
6
7
8
9
ov:h
overflow: hidden;
w100
width: 100px;
h10p+m5e
height: 10%;
margin: 5em;

2.自动添加前缀

css一些属性经常要兼容各个浏览器而添加一大堆后缀，有了Emmet，一切烦恼轻松解决。例如下面生成圆角和渐变，太给力了。

1
2
3
4
5
6
7
8
9
10
11
-bdrs
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;
lg(right,#fff 50%,#000)
background-image: -webkit-linear-gradient(right, #fff 50%, #000);
background-image: -o-linear-gradient(right, #fff 50%, #000);
background-image: linear-gradient(to left, #fff 50%, #000);

三、其他功能

在Emmet中可以快速生成占位文字：

1
lorem<Tab键> 或者 lipsum<Tab键>

如果需要生成重复的Dummy文字，可以使用如下命令：

1
p*4>lorem

并且支持模糊输入，如下：

1
ul>lorem25.item*3<Tab>

这里就不贴效果了，自己去体验吧。

四、总结

大概介绍了Emmet的功能，是不能很强大很酷炫！学会之后只需敲入命令就可以瞬间生成一个网页，当然我不建议使用太复杂太长的命令。平常敲代码再也不用输入尖括号了，爽歪歪！赶紧动起手，体验开发的乐趣！

如果喜欢，欢迎订阅收藏，我是竹风，欢迎交流学习！

]]> <p>你还在一个字符一个字符的敲代码吗？如果是那你就太OUT了，现在什么都流行自动化，当然敲代码也不能落后啊。这款emmet神器，让你的代码输入效率瞬间翻倍！我们还是先看效果图：</p> 前端解读：css颜色的六种表示方法 http://wangzc.cc/blog/css-color/ 2017-02-18T03:12:00.000Z 2017-04-27T02:08:48.721Z 制作丰富多彩的前端网页要不断与颜色打交道，虽然不要求我们像设计师一样对颜色那么敏感，但也要至少了解一下颜色的知识。所有的颜色都是由三种颜色按照不同的比例合成产生，这也就是三原色原理。

paste image

如果你能理解三原色原理，下面对颜色的定义也会更容易理解。

css中对颜色的表示法 主要有颜色名、十六进制、RGB和RGBA、HSL和HSLA。下面分别对几种方法进行讲解。

一、颜色名

所有的浏览器都支持颜色名。HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。这种表示方法很直观，但毕竟颜色不多，名字也不好记。所以也就常用的颜色会使用一下。下面列出的是17种标准颜色。

paste image

二、十六进制表示法

paste image

仔细观察十六进制和对应的颜色，是否发现了什么？没错，前两个字母表示的是红通道，中间两个是绿通道，后两位是蓝通道。还是利用三基色原理生成各种颜色。

三、RGB和RGBA

RGB的工作方式与十六进制值类似。只是用数字0~255而不是十六进制数字来定义红、绿和蓝色通道。

1
2
3
rgb(255,0,0)等同于#ff0000;
rgb(0,255,0)等同于#00ff00;
rgb(0,0,255)等同于#0000ff;

十六进制的ff转换成十进制是多少，不会计算的自行百度。计算的结果就是255。

这下明白吧，从十六进制转换成rgb形式，不用借助工具也可以直接计算了。

RGBA在RGB的基础上 ，加入了第四个值。它用来指定alpha通道或者颜色的不透明度，值范围是0~1；0是完全透明，1是完全不透明。

四、HSL和HSLA

HSL是色调（H）、饱和度（S）和亮度（L）的首字母缩写。它是定义颜色的另一种方式。对此很多人有共鸣，特别是习惯用图形编辑器的设计师们。其语法如下：

1
2
hsl(0,100%,50%) 等同于#ff0000；
hsl(0,0%,100%) 等同于#ffffff;

paste image

第一个值：色调。取值范围是0~360。这基本上是一个标准色轮里的一个点。

第二个值：饱和度。它指颜色的鲜艳程度（纯度），取值范围是0~100%；100%是颜色全彩色，0%是灰度。

第三个值：亮度。它指颜色的明亮度，取值范围是0~100%。100%是完全亮/白，0%是完全暗/黑。

HSL在很多方面都是有意义的。例如，你可以选择互补的红色阴影搭配前面的红色，只要通过改变亮度，像这样：

paste image

HLSA的工作方式与RGBA一样，你只需要对现有的颜色添加alpha通道值即可。例如hsla(0,100%,50%,0.5)，它的结果是50%透明的全红。

另外也完全不用担心浏览器兼容问题，这几种表示方式几乎兼容所有主流浏览器。

paste image

五、总结

了解颜色的产生的原理以及存储方式后，css颜色定义并不复杂，合理在网页上使用颜色，能够为你的网站增色不少哦。最后推荐一下w3cschool里面的颜色在线选择工具，几种表示方法可以相互转换。

竹风原创，转载请注明出处，谢谢！

]]> <p>制作丰富多彩的前端网页要不断与颜色打交道，虽然不要求我们像设计师一样对颜色那么敏感，但也要至少了解一下颜色的知识。所有的颜色都是由三种颜色按照不同的比例合成产生，这也就是三原色原理。</p> 资源管理神器Clover，同浏览器一样的姿势打开文件夹 http://wangzc.cc/blog/tools-clover/ 2017-02-12T03:45:00.000Z 2017-04-27T02:25:30.243Z 你还在为打开多个文件夹，切换时找文件找的晕头转向而烦恼吗？
你还在为每天层层深入的找某个文件而浪费时间吗？
看了这篇文章，让你瞬间摆脱烦恼。

大家好，我是竹风，今天为大家推荐一款资源管理神器，资源管理器，俗称“我的电脑”。下面先看一下我打开关闭文件的姿势：

clover

是不是有一种穿越到浏览器的感觉，没错，这就是Clover，一款小而精致且完全免费的软件，能为你的Windows Explorer资源管理器增加多标签页的功能，就像谷歌浏览器那样方便好用。Clover主要有以下几个特点：

  • 方便的Tab页功能

要掌握功能强大，操作简单的标签页，只需记住Ctrl+T新开页面，Ctrl+W关闭页面，Ctrl+Tab切换页面，工作效率提高何止一倍！

  • 操作系统无缝集成

Clover 通过插件的形式集成到 Windows Explorer，保留您通常的使用习惯，无需学习新的文件管理操作，马上就可以使用啦。

  • 快如闪电的书签栏

按Ctrl+D添加当前路径，或者直接将文件夹拖入书签栏。再也不用到处寻找要访问的文件夹了，瞬间到达，何等痛快！

Clover功能虽少，但却做到了极致，Chrome 控瞬间上手无压力！

如果你的文件存放位置杂乱无章的话，再推荐一款软件——Everything，让你瞬间找到你想要的文件,比系统自带的搜索功能不知道强大到多少倍。当然平时养成一个整理文件的好习惯很重要，再结合Clover，开发效率会提升不少，快去试试吧。

今天的分享到此结束，感谢大家的阅读。如果喜欢，欢迎订阅关注哦，你们的支持是我最大的动力。玩转前端，带你领略不一样的前端世界。

]]> <p>你还在为打开多个文件夹，切换时找文件找的晕头转向而烦恼吗？<br>你还在为每天层层深入的找某个文件而浪费时间吗？<br>看了这篇文章，让你瞬间摆脱烦恼。</p> 一招让height百分比生效，解决你多年的困扰 http://wangzc.cc/blog/skills-height-100/ 2017-02-12T03:02:00.000Z 2017-04-27T02:09:16.583Z 前端开发人员可能都遇到这种情况，有时候我们想把div的高度像设置宽度一样设置成占网页的百分之多少，却发现高度百分比并不起效。

比如我们想让一个div的宽度为50%，高度为50%，很自然的写出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
	</style>
</head>
<body>
	<div style="width:50%;height:50%;background:#0f0;">
		想让这个div宽度为50%，高度为50%。
	</div>
</body>
</html>

可结果发现宽度为50%，高度却不起作用。

paste image

查阅很多资料后，终于找到了解决办法。问题就在于浏览器计算高度和宽度的方式不同：

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 50% 也不会起作用。解决办法就是给html和body加上height: 100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		html,body{height:100%;}
	</style>
</head>
<body>
	<div style="width:50%;height:50%;background:#0f0;">
		想让这个div宽度为50%，高度为50%。
	</div>
</body>
</html>

运行结果如下，得到我们想要的结果。

paste image

总结：高度百分比只有在父元素高度固定的情况下生效，利用宽高百分比，实现响应式布局。另外如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

竹风原创，转载请注明出处，谢谢！

]]> <p>前端开发人员可能都遇到这种情况，有时候我们想把div的高度像设置宽度一样设置成占网页的百分之多少，却发现高度百分比并不起效。</p> 玩转css3盒阴影和文本阴影 http://wangzc.cc/blog/css-box-shadow/ 2017-01-20T02:22:00.000Z 2017-04-20T08:43:11.104Z 在开发中经常会使用阴影增加现实感，css3实现的模糊阴影主要分为盒阴影box-shadow和文本阴影text-shadow。今天就带大家玩转css的阴影，后面的拓展也只是抛砖引玉，希望给各位带来启迪。

paste image

一、box-shadow

该属性用来给容器添加一个或多个阴影效果。这个属性非常有用，可以结合伪类和动画实现设计的层次感和高亮度。基本语法是：

1
box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

属性说明：

  • inset：【可选】将默认的外阴影设置为内阴影。
  • x-offset：【必需】水平方向阴影偏移量，可为负值。
  • y-offset：【必需】垂直方向上阴影偏移量，可为负值。
  • blur：【可选 】阴影模糊半径，不可为负值。
  • spread：【可选】阴影延展半径，可为负值。
  • color：【可选】阴影颜色。

box-shadow阴影偏移量可正可负，为正值时则向右或下偏移。

paste image

box-shadow可设置多个阴影，中间用逗号“，”分隔；比如可同时设置内外影响，例如：

paste image

拓展：多个阴影巧妙结合，可以创造出很多意想不到的效果。

四色边框：

paste image

双重边框:

paste image

更多示例请自行创造。

二、text-shadow

通过css3的文本阴影属性可以用编程方式创建文本阴影。阴影可以创造出各式各样的效果，不过通常是高亮文本、给文本深度和使得文本突出显示。
语法是：

1
text-shadow: x-offset y-offset blur color;

属性说明：

  • x-offset：【必需】水平方向阴影偏移量，可为负值。
  • y-offset：【必需】垂直方向上阴影偏移量，可为负值。
  • blur：【可选 】阴影模糊半径，不可为负值。
  • color：【可选】阴影颜色。

paste image

更多效果等你亲自体验…

三、总结

阴影在网页开发中十分常见，巧妙使用阴影，可以为你的网页增色不少。

竹风原创，转发请注明原文链接，谢谢。

]]> <p>在开发中经常会使用阴影增加现实感，css3实现的模糊阴影主要分为盒阴影box-shadow和文本阴影text-shadow。今天就带大家玩转css的阴影，后面的拓展也只是抛砖引玉，希望给各位带来启迪。</p> 纯css实现半字符艺术 http://wangzc.cc/blog/css-half-font/ 2017-01-12T02:11:00.000Z 2017-04-27T02:08:53.901Z css不仅是一门技术，还是一门艺术。css3的出现，给我们带来了更大的想象空间。今天带大家见识一下半字符的艺术。

paste image

你把爱分成了不同比例，谁又把多的那部分给占据；你把爱分成了不同比例，谁又把谁的那部分给占据。——易欣歌曲《分爱》

看到这张图，你有实现这个效果的思路吗？下面就教大家实现一个简单的半字符。

paste image

一、原理分析

大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元。其实实现半字符的思路很简单，就是一个字写两遍，分别显示一半。当然不能真的把一个字写两遍，这样也太愚蠢了，而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。

二、实现代码

1
<span class="half" data-content="爱">爱</span>
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
.half{
    position:relative;
    display:inline-block;
    font-size:200px;
    color: transparent;
    /*overflow:hidden;*/
    white-space: pre;
}
.half:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 60%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}
.half:after {
    display:block;
    direction: rtl;
    z-index:1;
    position:absolute;
    top:0;
    right:-10px;
    width: 40%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #00f;
}

其实就是加了个after，before和after的宽度比例不一样，本体设为透明。

三、拓展

左右半个字符都可以用伪元素生成，这样可以生成三部分，也就是一个文字可以实现三种颜色啦。这里要注意的一点是，after样式中要添加一句

1
direction: rtl;

这条语句保证宽度是从右边开始计算。

paste image

四、总结

别光看啊，赶快敲代码去试一试，体验css的艺术。
心有多大，江湖就有多大。我是竹风，关注我，一起探索前端的奥秘。

]]> <p>css不仅是一门技术，还是一门艺术。css3的出现，给我们带来了更大的想象空间。今天带大家见识一下半字符的艺术。</p> 纯css3实现图片倒影效果 http://wangzc.cc/blog/css-box-reflect/ 2017-01-06T01:49:00.000Z 2017-04-20T08:42:22.456Z 纯css3实现的图片倒影效果。主要用到的是box-reflect属性，但由于兼容性问题，配合使用了-moz-element()。

paste image

这里只引用了上面的一张图片，下面的倒影则是由纯css实现的，简直美爆了有木有？

一、box-reflect

box-reflect属性能够轻松帮助我们实现倒影效果，但是它只支持chrome, safari和opera等Webkit内核的浏览器，具体兼容性如下。

paste image

它的基本语法是：

1
box-reflect：none | <direction> <offset><mask-box-image>

属性说明：

none：此值为box-reflect默认值，表示无倒影效果。

<direction>：此值表示box-reflect生成倒影的方向，主要包括above, below, left, right。分别代表四个不同方向。

<offset>：用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值。

<mask-box-image>：用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。

附上效果图一张：

paste image

前端技巧：纯css3实现图片倒影效果可以使用渐变给倒影添加遮罩效果，比如刚开始的那种效果图，实现代码如下：

1
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

二、火狐中的替代方案

火狐中可以使用-moz-element()来生成倒影。

具体实现方式是先将图片放在id为img的盒子里，下面加一个存放倒影的div，html代码如下：

1
2
<div id="img"><img src="moon.jpg"></div>
<div class="daoying"></div>

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
.daoying{
width: 690px; height: 409px;
background: -moz-element(#img);
transform: scaleY(-1);
}
.daoying:before {
content: '';
display: block;
height: 100%;
background-image: linear-gradient(to top, hsla(0,0%,100%,0), white);
}

三、总结

box-reflect使用的时候要加-webkit前缀，-moz-element()也只有火狐能识别出来，所以二者结合互不影响，完美实现图片倒影效果。

看完教程，赶快去亲自试验一下吧。

]]> <p>纯css3实现的图片倒影效果。主要用到的是box-reflect属性，但由于兼容性问题，配合使用了-moz-element()。</p> 【转载】Web前端开发工程师编程能力飞升之路 http://wangzc.cc/blog/thinks-beginner/ 2017-01-01T00:35:47.000Z 2017-04-27T02:09:23.910Z 最近在网上看到这篇“Web前端开发工程师编程能力飞升之路”的文章，受益颇深，故转载到博客中，勉励自己。作者把前端技术按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级，每个级别都提供了进阶之路，帮助在该等级迷茫的人们早日突破自己，更上一层楼。

背景

如果你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；

如果你是做了两三年web产品前端研发，迷茫找不着提高之路，看这篇文章吧；

如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体 系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触web前端研发至今 已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！

前言

所谓的天才，只不过是比平常人更快的掌握技能、完成工作罢了；只要你找到了正确的方向，并辅以足够的时间，你一样能够踏上成功彼岸。

本文将web前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级（不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路），参考突破之法破之。

所谓的级别，只是你面对需求时的一种态度：能够完成、能够完美地完成、能够超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。

切记心浮气燥，级别够了，那级别里的东西自然就懂了。悟了就是悟了，没悟也没关系，静下心来，投入时间而已。

一、入门

能够解决一些问题的水平。有一定的基础（比如最常见的html标签及其属性、事件、方法；最常见的css属性；基础的javascript编程能力），能够完成一些简单的web前端研发需求。

举个例子：删除一字符串中指定的字符。

1
2
3
4
5
var str="www.baidu.com/?page";
str=str.replace('?page',"");
alert(str);
str=str.substring(0,str.indexof("/"));
alert(str);

首先不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程；其次，这两段代码在这个实例里没有什么大过错，可能会有瑕疵，但能够解决问题（删除指定的字符），这就是这个级别的特征。

再举个例子：

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
// 计算系统当前是星期几
var str = "";
var week = new date().getday();
if (week == 0) {
        str = "今天是星期日";
} else if (week == 1) {
        str = "今天是星期一";
} else if (week == 2) {
        str = "今天是星期二";
} else if (week == 3) {
        str = "今天是星期三";
} else if (week == 4) {
        str = "今天是星期四";
} else if (week == 5) {
        str = "今天是星期五";
} else if (week == 6) {
        str = "今天是星期六";
}
// 或者更好一些
var str1 = "今天是星期";
var week = new date().getday();
switch (week) {
    case 0 :
        str1 += "日";
        break;
    case 1 :
        str1 += "一";
        break;
    case 2 :
        str1 += "二";
        break;
    case 3 :
        str1 += "三";
        break;
    case 4 :
        str1 += "四";
        break;
    case 5 :
        str1 += "五";
        break;
    case 6 :
        str1 += "六";
        break;
}
alert(str);
alert(str1);

入门”阶段是每个程序员的必经之路，只要”入门”，你就上路了。所谓”师傅领进门，修行靠个人”，有了这个”入门”的基础，自己就可以摸索着前进了。

进阶之路

将javascript、html、css之类的编码帮助手册里的每个方法/属性都通读几遍！只有将基础打好，以后的路才能走的顺畅。参考这些帮助文档，力争写出无瑕疵的代码。

这些编码文档建议不仅是在入门提高期看，在你以后每个阶段破阶的时候都应该看看，最基础的东西往往也是最给力的东西，有时能够给你带来意想不到的收获。

二、登堂

能够正确地解决问题。不管你是通过搜索网络，或者通过改造某些成品代码（jquery/dojo/ext/yui）案例，只要能够无错地完成需求。

同样以上面的那段”字符串剪裁”代码为例：

1
2
3
var str="www.baidu.com/?page";
str=str.replace(/?page/,"");
alert(str);

仅仅解决问题对于”登堂”阶段来说已经不是问题，这个级别所给出方案不能是漏洞百出。以上面这段代码为例：replace方法的第一个参数虽然可以支持字符串，但最佳的类型是正则表达式；

1
2
3
4
var a = new array("日", "一", "二", "三", "四", "五", "六");
var week = new date().getday();
var str = "今天是星期"+ a[week];
alert(str);

对比”入门级”的代码，不管是从代码量、代码效率、代码优美性、代码思路来说，”登堂”级的这个日期处理代码都要优秀很多。

进阶之路

这个阶段虽然能够给出正确的解题方案，但是不一定是最优秀的方案。如何才能得到最优秀的方案呢？首先就是积累各种能够解决需求的方案，然后再验证每个方案，在这些方案中选择最好的一种。因此该阶段的进阶之路就是”行万里路，看万卷书”，积累各个需求的各个解决方案。

你可以扎身在专业论坛（蓝色理想、无忧、csdn）里，通读所有的faq及帖子；你可以打开搜索引擎，穷举所有的搜索结果。自己建立测试环境一一验 证这些代码：去揣摩每段代码的意图，去比较每段代码之间的差异。这两条路可以让你快速完成原始积累，当你再面对大多数需求时能够说这些问题我以前做过，那 你就水到渠成地晋阶了。

三、入室

最强代码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。

还以上面的那个例子为例，你能说出1、2、3之间的差别，以及适用于那种环境吗？

1
2
3
4
5
6
7
var str="www.baidu.com/?page";
// 1、字符串剪裁
str.substring(0, str.indexof("?page"));
// 2、正则表达式
str.replace(/?page/, "");
// 3、字符串分拆、合并
str.split("?page").join("");

能够解决问题的方法会有很多，但是对于程序员来说应该选择最优秀的。上面这段代码从代码量来说”正则表达式”最优秀；从代码执行效率来说： “字符串剪裁”法最高（chrome中”正则表达式”效率最高），split法最次；从可扩展性上来说，”正则表达式”法最优。具体使用那种方案视具体的 需求环境而定。

“入室”阶段，程序员应该能够肯定的回答：对于这个需求而言，我的代码就是最优秀的代码。

再以”今天是星期几”为例，”登堂”级的代码你敢说是最优秀的代码了吗？

1
2
// 计算系统当前是星期几
var str = "今天是星期" + "日一二三四五六".charat(new date().getday());

对比”登堂”级的示例代码，上面这段代码给你什么感受？程序员追求的就是完美。”入室”级别追求的就是每一招每一式的完美无缺。

从web前端编程来说，通过2年左右的努力，很多人能够达到这个水平，但是，很大一部分人的编程能力也就止步于此。或限于产品的需求单一性，或限于需求开发的时间紧迫性，或限于人的惰性，能够完美地解决当前的需求就够了。

由于长期处于技术平台期，技术上得不到提高，通常这个级别的工程师会比较燥。技术上小有所成；或追求个人的突破；或追求产品差异性带来的新鲜感；或者只是想换个心情；因此很多此级别的工程师会经常换公司。

戒骄戒躁：

切勿以为自己能写一手漂亮的代码而自满；

切莫以为别人”尊称”你一声”大侠”你就以 “大侠”自居；

切莫以为自己积累了一些得意的代码就成了框架式开发。

细节决定成败，优秀的方案并不能保证最终的成功。还以”删除指定字符串”为例，原始字符串从格式上来看应该是了个url链接，在去除”pn=0″之 后，最末尾处留了一个尾巴”?”；如果原始字符串是”http://www.xxx.com/?pn=0&a=1″，去除”pn=0″之后 ? 和 & 两个符号紧贴一起，这更是明显的bug。

进阶之路

此阶段进阶之路就是：切勿心浮气躁；你不再被需求牵着走，而是你牵着需求走。注重细节，注意那些当前需求里没有明文给出的细节：代码性能的差异、运行平台（浏览器）的差异、需求的隐性扩展、代码的向后兼容等等。

再通读几遍html/css/javascript帮助文档。

我建议这个级别的工程师做一做webtreeview控件，要求总节点量一万左右操作流畅，你的晋升之路就在这个控件的编码过程中。

四、入微

最强解决方案。你能够走在需求的前面，将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等，及前端编程潜规则等各个方方面面都综合考虑，给出最优方案。以一招胜万招。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0
// 我将这个字符串里所可能想到的各种情况都列举出来
var a = [
     "http://www.xxx.com/vmpn=?pn=0"// pn= 可能出现在 ? 前
    , "http://www.xxx.com/vmpn=?pn="// url里允许pn 值为空
    , "http://www.xxx.com/vmpn=?pn=0&a=1"// url 里可有多个字段
    , "http://www.xxx.com/vmpn=?a=1&pn=0"// 可能排在最后
    , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1"// 可能有多个 pn 字段
    , "http://www.xxx.com/vmpn=?a=1&pn=0&b=2"// 可能在中间
    , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1&b=1"  // 可能在中间成组
    , "http://www.xxx.com/vmpn=?a=1&pn=0&b=1&pn=1"  // 可能零星分布
];
/* 需求的不言之秘：
? 若出现在字符串最尾则要去之
? & 两个符号不可重叠
*/
var reg = /((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;
for (var i = 0; i < a.length; i++) {
    alert(a + "\n" + a.replace(reg, "$2"));
}

这个阶段已经不再追求一招一式，对你来说不是使用什么创新绝招解决需求，而是给出成熟稳重的方案，从根上解决问题。针对某个当前需求你的代码可能不是最优，但是针对此类的需求你的代码却是最优秀的代码。

进阶之路

很多web前端研发工程师在做了3-4年之后就会进入一个瓶颈期：产品开发需求是小菜一碟，没有新鲜的可以挑战的东西；代码开发中的稀奇的解题方法 都已经尝试过。没有了可挑战的难题，失去了探索的激情，也就没有了再上升的动力，好不容易走过”入室”级别的人又会有八九成止步于此。或转做技术领导人， 或转到其它的领域，或换公司。

这些人的上升之路在哪里呢？

这个阶段单单依靠技巧和数量的累积已经没有什么效果了，突破之路在第5层《化蝶》里会详细说明，我建议你在这个阶段末尾着重关注编程理论：面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等。

我建议这个级别的工程师做一做webeditor控件，不要求完整功能，但是该控件里的模块划分、代码组织、编程思想做到位，给出一个系统的解决方案。

五、化蝶

破茧重生，这个层次关注的是编程语言本身，而不再关心产品需求。什么是茧？产品需求就是茧。当你一招胜万招，打遍天下需求之时，你如果还拘泥于需求开发，那就是你限于茧中而不自知。要么就在这个茧里默默地老去，要么就破开茧获得新生。

还是以那个”字符串剪裁”的老例子：

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
/**
* 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰
* @author:meizz
* @version: 2010/12/16
* @param      {string}        str     被正则表达式字符串保护编码的字符串
* @return     {string}                被保护处理过后的字符串
*/
function escapereg(str) {
    return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");
}
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param               {string}        url     url字符串
* @param               {string}        key     被删除的query名
* @return              {string}                被删除指定 query 后的url字符串
*/
function delurlquery(url, key) {
    key = escapereg(key);
    var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +
  "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");
    return url.replace(reg, "\x241")
}
// 应用实例
var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0
delurlquery(str, "pn");

这段代码相对于层次4《入微》有什么区别吗？从代码实现上来说没有太大的区别，但是从思路上来说却有着本质的区别：1、不再是就事论事，头疼医头，而是把一类问题抽象理论化，一招破万招；2、有封装的概念，不再是每次从零开始，而是站在半山腰开始爬。

在web前端研发队伍里也有很大一部分人《入室》层次时就自我感觉良好，直接跨跃到《化蝶》，积累自己的代码库，抽象化问题。但没有基础，缺少强大 的后劲，即使能够破茧也经受不了风吹雨打。一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处，这种例子在业界屡见不鲜。不要拔苗助长，不要不 会走就想着跑，夯实基础，水到渠成地成长，厚积薄发，强力地破茧而出。

进阶之路

你已经从原始积累，到厚积薄发，到破茧而出之后，你所关注的应该不再是一招一式、一个项目、一个模块，而应该是一种思路，一种理论。你可以做以下几 个步骤以突破到更高层次：再仔细看几遍html/css/javascript接口帮助文档；选择一门强语言（c++/c#/java等）观察理解这些语 言的组织结构，语言设计；看看原型链，链式语法编程，泛型，接口编程，dom遥控器等等；仔细阅读成熟的web前端开发框架的设计文档，看他们为什么要这 样设计。

六、大侠

这里所说的大侠，不是大家互相吹捧的”大侠”，而是实至名归的高手。这个级别的人完全有能力写出不差于bindows/jquery/ext/yui/dojo的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。

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
// 库文件 /mz/string/escapereg.js
/**
* 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰
* @author:meizz
* @version: 2010/12/16
* @param               {string}        str     被正则表达式字符串保护编码的字符串
* @return              {string}                被保护处理过后的字符串
*/
mz.string.escapereg = function (str) {
        return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");
}
// 库文件 /mz/url/delquery.js
/// include mz.string.escapereg;
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param               {string}        url     url字符串
* @param               {string}        key     被删除的query名
* @return              {string}                被删除指定 query 后的url字符串
*/
mz.url.delquery = function (url, key) {
    key = mz.string.escapereg(key);
    var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +
  "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");
    return url.replace(reg, "\x241")
}
// 应用实例
/// include mz.url.delquery;
var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0
mz.url.delquery(str, "pn");

自成体系，有基础，也有理论高度。知道为什么这样设计，也知道什么样的设计最好。比如这个例子可以有这样的封装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 库文件 /mz/url/delquery.js
/// include mz.string.escapereg;
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param               {string}        url     url字符串
* @param               {string}        key     被删除的query名
* @return              {string}                被删除指定 query 后的url字符串
*/
string.prototype.delquery = function ( key) {
    key = mz.string.escapereg(key);
    var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +
  "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");
    return this.replace(reg, "\x241")
}
// 应用实例
/// include mz.url.delquery;
var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0
str.delquery("pn");

而为什么不采用下面的那种封装呢？经过了《知微》和《化蝶》你就懂了。

进阶之路

道法自然，从根上去寻找突破的契机。你可以研读html解析引擎设计与实现，js解析引擎设计与实现，其它语言的代码解析与编译实现等等。

或者出些书。低级别的人写的书要么是一大抄，空无一物；要么是害人。

七、宗师

这个级别的人已然到了无招胜有招的境界。项目开发中的难题？没有难题！运行平台的差异？从根本上搞定！代码规范、开发模式，早已经被抛在身后。这个级别的人已经不再关注于某个前端开发框架，而是应对具体的环境给出最佳的理论指导。

这个级别的人所注意的应该是以最合理的系统架构引领着整个团队的进步，在什么样的场景下该用什么样的架构设计。3个、10个、50个、100个人的团队最应该用哪种模式？等你到了宗师级别，你再来回答吧。

进阶之路

每一个宗师就是一个高山，就是一个领域里的神，但是你仅满足于在一群比你弱的群体展现你的强大吗？如果还你是止步原地，那总会有人乘着飞机、宇宙飞船从你的头领掠过，高处不胜寒！

要突破这片领域，那就必须跳出这片领域。要想突破web前端研发的宗师级，那就跳出web前端吧，上面还有web开发。即使你是web前端的宗师， 但没有快速的数据响应，没有高速的网络架构，没有优美的系统支持，你又能如何？所以突破之路就是把目光投到整条web开发的链条中去。

八、飞升

其实严格来说，飞升已经不是原领域的范围了。在web研发领域，对于这个层次的有一个很好听的称谓：架构师。当然那些”伪架构师”另当别论。

一法通，万法通。在其它的技术领域，也可以按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级；一样也可以按照我这里所写的每个级别的【进阶之路】来快速提升。

祝贺你再获辉煌！

看完这篇文章，只能说自己的进步空间还很大，前端路漫漫，一起加油！

原文链接未找到。再次感谢原文作者！

]]> <p>最近在网上看到这篇“Web前端开发工程师编程能力飞升之路”的文章，受益颇深，故转载到博客中，勉励自己。作者把前端技术按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级，每个级别都提供了进阶之路，帮助在该等级迷茫的人们早日突破自己，更上一层楼。</p> css小技巧：巧用padding实现iframe等比例缩放 http://wangzc.cc/blog/skills-iframe/ 2016-12-23T02:50:00.000Z 2017-04-27T02:09:20.103Z 我们经常会遇到需要将其他视频网站上的视频插入到自己的页面中，从视频网站上获取的代码是固定宽高的iframe，如果自己的页面是响应式的，如何将iframe适配到各个设备成了问题。网上有很多使用js动态设置高度来实现，而一向坚持“能够使用css实现的就不去写js”原则的我，发现了一种巧妙的方法解决这个问题。

问题来源

iframe作为一种内联框架，经常用于在页面中嵌套另一个页面或多媒体文件。iframe标签要定高度才能撑开，高度写死适配又会出现各种问题。拿使用较多的插入视频为例，高度太高，上下会出现黑边。高度太低，播放时左右又会有黑边。

一般我们从视频网站粘贴过来的代码如下：

1
<iframe width="560" height="280" src="https://www.youtube.com/embed/Um7pMggPnug" frameborder="0" allowfullscreen></iframe>

解决方案

巧用padding的百分比来解决问题。

在iframe外层嵌套一层div，宽度根据页面布局设置，此例中估且设为100%全屏,高度设为0，使用padding撑开盒子高度。padding值根据视频宽高比例进行设置。最后设置iframe为绝对定位铺满全屏即可。

1
2
3
<div class="video">
    <iframe  src="https://www.youtube.com/embed/Um7pMggPnug" frameborder="0" allowfullscreen></iframe>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.video{
	position:relative;
	width:100%;
	height:0;
	padding-bottom:56.25%;
}
.video iframe{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

原理解析

重点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

结束语： 小小css能够简单实现多行js代码中才能够完成的效果，在工作学习中千万不可忽略css的大作用。

竹风原创，欢迎交流学习。转载请附上本文链接，谢谢！

]]> <p>我们经常会遇到需要将其他视频网站上的视频插入到自己的页面中，从视频网站上获取的代码是固定宽高的iframe，如果自己的页面是响应式的，如何将iframe适配到各个设备成了问题。网上有很多使用js动态设置高度来实现，而一向坚持“能够使用css实现的就不去写js”原则的我，发现了一种巧妙的方法解决这个问题。</p> 前端解读：彻底理解css3结构伪类选择器 http://wangzc.cc/blog/points-nth/ 2016-12-17T09:56:11.000Z 2017-04-27T02:09:11.927Z css3提供了一整套完备的新选择器。就样式化而言，它允许你匹配更多指定的元素。当你想匹配“列表的最后一项”，或者“总是包含某个东西的第一个段落”，这时你就可以废除那些无意义的id和class了。css选择器有很多，比如属性选择器、后代选择器、否定式选择器、目标伪类选择器、结构伪类选择器等等。今天主要为大家详细讲解css中的结构伪类选择器。

先上全家福:

  • :first-child选择与某个元素同级的第一个元素，且是该元素类型；
  • :last-child选择与某个元素同级的最后一个元素，且是该元素类型；
  • :nth-child()选择与某个元素同级的一个或多个元素，且是该元素类型；
  • :nth-last-child()选择与某个元素同级的一个或多个特定的元素，从这个元素的最后一个同级元素开始算；
  • :only-child选择的元素是它的父元素的唯一一个子元素；
  • :nth-of-type()选择指定的元素；
  • :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
  • :first-of-type选择父级元素的第一个同类子元素；
  • :last-of-type选择父级元素的最后一个同类子元素；
  • :only-of-type选择一个元素是它的父级元素的唯一一个相同类型的子元素；

是不是快被我绕晕了，好吧，下面对每个进行解析，用图片说话。

:first-child

:first-child是用来选择与某个元素同级的第一个元素，且是该元素类型，比如这里有个列表，想让列表中的”1”具有不同的样式，我们就可以使用:first-child来实现：

1
li:first-child{background:yellow;}

first-child

:last-child

:last-child选择与某个元素同级的最后一个元素，且是该元素类型，与:first-child相对，选择最后一个元素。这里也要同样注意那个问题。例如：

1
li:last-child{background:yellow;}

last-child

:nth-child()

这是今天的重点，也是最实用的，好好理解一下。:nth-child()选择与某个元素同级的一个或多个元素，且是该元素类型。参数值是an+b，n是计数器，从0开始。a是倍数，b是偏移量。主要有下面几种形式：

1
2
3
4
5
6
7
:nth-child(num); /*选择第num个元素*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*num)/*n的倍数选择，n从0开始算*/
:nth-child(n+num);/*选择大于num后面的元素*/
:nth-child(-n+num)/*选择小于num前面的元素*/
:nth-child(n*num+1);/*表示隔几选一*/
//上面num为整数

nth-child

:nth-last-child()

:nth-last-child()与:nth-child()用法一样，唯一的区别就是一个从前面数，一个从后面数。这里就不赘述了。

:only-child

:only-child选择的元素是它的父元素的唯一一个子元素;也就是该元素不能有其他的同级元素。与:only-of-type的区别是，：only-of-type选择的元素可以存在同级元素，但该元素类型只能存在一个。

:nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type和:only-of-type

我之所以这样写是我不想再重复讲述，如果分类的话，前五个可分为一组（简称为child组），后五个分为一组（简称为type组），用法一对一都是一样的，只是有一个重要的不同点。

child组计数时的第几个都是从该元素的第一个同级元素开始，如果第几个与该元素类型一样则生效。而type组计数时的第几个都是从与该元素类型一样的同级元素的第一个开始，不受其他同级元素的干扰。这是重中之重，好好理解一下，可以写几个例子感受一下。

结构伪类选择器不兼容IE8及更早版本，所以对浏览器兼容性比较强的小伙伴们还是不要选择这些方法，老老实实定义id或class吧。如果要求不高，这些方法在选取标签添加样式上还是很给力的，快去尝试一下吧。

竹风原创，欢迎交流学习。转载请附上本文链接，谢谢！

]]> <p>css3提供了一整套完备的新选择器。就样式化而言，它允许你匹配更多指定的元素。当你想匹配“列表的最后一项”，或者“总是包含某个东西的第一个段落”，这时你就可以废除那些无意义的id和class了。css选择器有很多，比如属性选择器、后代选择器、否定式选择器、目标伪类选择器、结构伪类选择器等等。今天主要为大家详细讲解css中的结构伪类选择器。</p> 开发工具：多人开发必备Git技能 http://wangzc.cc/blog/tools-git/ 2016-12-17T02:56:00.000Z 2017-04-27T02:09:40.401Z Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。在我们的工作中也是必备的技能，作为职业中的小白，主管第一天就让我学习一下Git，熟悉Git的整个开发流程。

Git具有以下特点：

  • 速度快、灵活
  • 自由选择工作方式
  • 保持工作独立
  • 适合分布式开发，强调个体

代码上传

1
2
3
4
5
$ git init   #初始化git仓库
$ git add --all / $ git add .  #添加本地文件到暂存区
$ git commit -m “注释”   #添加本地文件到版本库
$ git remote add origin https://***.git  #添加远程仓库地址
$ git push origin master  #向远程仓库推送代码

代码下载

1
2
3
4
5
6
7
#直接下载
$ git clone https://***.git  #克隆远程代码
#通过抓取
$ git init  #初始化git仓库
$ git remote add origin https://***.git  #添加远程仓库地址
$ git fetch origin master  #抓取远程仓库代码（只有主支）
$ git merge origin/master  #合并到本地仓库

分支管理

1
2
3
4
5
6
$ git checkout -b dev   #创建一个名叫dev 的分支并切换到此分支
$ git branch  #查看有几条分支
$ git checkout dev  #切换到dev 分支
$ git branch -m oldname newname  #更换分支名称
$ git merge dev  #合并分支（要切换到要合并它的分支上）
$ git branch -d dev  #删除当前分支（强制删除：-D）

版本回退

1
2
3
4
$ git reflog   #显示回退的id
$ git reset --hard commit-id  #回到想要回退的版本
$ git reset --hard HEAD^^/$ git reset --hard HEAD~  #回退到上一个版本
$ git reset HEAD~5  #撤销过去5个commit的命令，然后在添加提交

其他命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ git --version   #查看当前git版本
$ git help --all   #查看git命令
$ git diff  #查看当前工作区域版本库有哪些区别，修改了什么内容
$ git status   #查看仓库当前状态
$ git log  #查看提交的历史记录
$ git log --pretty=oneline  #当前记录在一行显示
$ git reflog  #可以查看所有分支的所有操作记录（包括commit和reset的操作），包括已经被删除的commit记录
$ git pull  #更新本地仓库
$ git remote -v  #查看远程信息库pull和fetch详细信息
$ git branch -r  #查看远程分支
$ git branch -a  #查看所有分支
$ git push --force origin dev  #强制推荐dev分支（rebase后的分支历史改变了，可能导致不兼容现象）
$ git remote rm  #删除远程仓库
$ git remote show origin  #查看远程仓库的信息

结束语： 命令有些多，可真正在工作中用的最多的也就几条，其他的了解一下，用到的时候翻阅笔记吧。在这里提醒一下，在提交自己代码之前一定要pull一下，不然很容易把别人辛辛苦苦码的代码覆盖，这样很容易挨揍的哦~

竹风原创，欢迎交流学习。转载请附上本文链接，谢谢！

]]> <p>Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。在我们的工作中也是必备的技能，作为职业中的小白，主管第一天就让我学习一下Git，熟悉Git的整个开发流程。</p> 趣玩Demo:纯css实现旋转的太极图 http://wangzc.cc/blog/demos-taiji/ 2016-12-15T09:56:11.000Z 2017-04-27T02:09:04.113Z 大道，在太极之上而不为高；在六极之下而不为深；先天地而不为久；长于上古而不为老。人生就是一种修行，应顺应大道至德和自然规律，不为外物所拘，“无为而无不为”。周末闲来无事，用css绘制一个太极图，在转动的阴阳图上领略生命的奥秘。

taiji

在此之前你要掌握的一些基础是：

  • border圆角的实现及特点
  • :before和:after的使用
  • css简单动画

绘图分析

要绘制一个太极图，首先要先仔细观察分析，有图层概念的人很容易找到合成方法，如下图：

taiji_part

看到这里，相信很多人都已经明白了，赶紧去先自己尝试一下吧！还不太明白的继续往下看。

我们将太极分成了三部分，利用width和border实现底部黑白主体部分，然后绘制两个width和border颜色不同的圆绝对定位到主体部分。

代码实现

先在html中定义一个ID为”taiji”的div

1
<div id="taiji"></div>

绘制主体部分

1
2
3
4
5
6
7
8
9
#taiji{
    position:relative;
    width: 98px;
    height: 198px;
    background-color: #fff;
    border:2px solid #000;
    border-right-width: 100px;
    border-radius:50%;
}

两个小圆的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#taiji:before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    width: 24px;
    height: 24px;
    background-color: #000;
    border:37px solid #fff;
    border-radius:50%;
}
#taiji:after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width: 24px;
    height: 24px;
    background-color:#fff;
    border:37px solid #000;
    border-radius:50%;
}

至此，一个静态的太极图已经绘制完成，是不是很简单呢。

让太极图转起来

使用animation属性并将播放次数设为infinite就可实现无限循环转动，实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#taiji{
animation: rotate 8s linear infinite;
-webkit-animation: rotate 8s linear infinite;
}
@keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate{
from{-ms-transform:rotate(0deg)}
to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate{
from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(360deg)}
}

总结：在开发中也许永远也用不到这个图形，但在这个例子中可以学到很多方法，巧妙利用border-radius，可以绘制出很多形状。最后在转动太极图中去参悟人生吧！

竹风原创，欢迎交流学习。转载请附上本文链接，谢谢！

]]> <p>大道，在太极之上而不为高；在六极之下而不为深；先天地而不为久；长于上古而不为老。人生就是一种修行，应顺应大道至德和自然规律，不为外物所拘，“无为而无不为”。周末闲来无事，用css绘制一个太极图，在转动的阴阳图上领略生命的奥秘。</p> 涨姿势：你真的会用console调试代码吗？ http://wangzc.cc/blog/points-console/ 2016-12-14T09:35:00.000Z 2017-04-27T02:09:08.507Z 如果你是开发测试人员，一定对console不陌生。如果是初学者，恐怕只知道console.log()啦。对于整个的console家族，你又了解多少呢？我们使用console对js进行调试，但js原生中默认是没有console对象的，它是宿主对象，也就是浏览器提供的内置对象，所以浏览器不同，console对象也会有些许差异。使用console.log(console)打印出浏览器中的console对象，看看你用过哪些？

下面是chrome浏览器截图：

console

仔细看一下，还真的不少呢。接下来介绍几个常用的console方法。

用来打印消息

  • 打印字符串：console.log()
  • 打印提示消息：console.info()
  • 打印警告消息：console.warn()
  • 打印错误消息：console.error()
  • 打印调试信息：console.debug()

这几个方法都可以接受多个参数，逗号分隔。它会在每次输出结尾添加换行符。没有返回值就返回undefined。另外这五种方法都可以使用printf风格占位符，字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。如果第一个参数是格式字符串，方法会将依次用后面的参数替换占位符，然后再进行输出。五种方法示例如下：

console.log

统计次数console.count()

有时候我们需要统计一个函数被调用了几次，一般都是加入一个变量然后输出。现在，我们可以直接使用console.count()来帮助我们统计并输出。

console.count

判断真假console.assert()

我们写代码的时候总会碰到判断某个变量是否为真，这个时候可以console.assert()来判断，当表达式为false的时候，输出信息到控制台。

console.assert

查看对象信息console.dir()

如果想要看详细的对象信息，我们可以使用 console.dir，将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表，它还能打印出函数等。

console.dir

打印成表格console.table()

可以将传入的对象或数组这些复合数据以表格的形式输出。

console.table

输出信息分组console.group()和console.groupEnd()

如果输出信息比较多，可以进行分组管理。

console.group

console方法还有很多，这里就不一一列举了，想了解更多请自行查阅官方API文档。掌握这些方法，对我们调试代码很有帮助。

竹风原创，欢迎交流学习。转载请附上本文链接，谢谢！

]]> <p>如果你是开发测试人员，一定对console不陌生。如果是初学者，恐怕只知道console.log()啦。对于整个的console家族，你又了解多少呢？我们使用console对js进行调试，但js原生中默认是没有console对象的，它是宿主对象，也就是浏览器提供的内置对象，所以浏览器不同，console对象也会有些许差异。使用console.log(console)打印出浏览器中的console对象，看看你用过哪些？</p>