密码强度正则表达式 – 必须包含大写字母,小写字母和数字,至少8个字符等

需要一个密码强度正则表达式在用户注册时校验用户密码强度:密码至少8个字符,包括1个大写字母,1个小写字母和1个数字或特殊字符,例如#?!。网上搜索了一些解决方案分享给大家。

继续阅读

前端开发中的 正则表达式 及常用正则表达式大全

RegExp 是正则表达式(Regular expression)的缩写,就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征。比如 表达式“ab+” 描述的特征是“一个 ‘a’ 和 任意个 ‘b’ ”,那么 ‘ab’, ‘abb’, ‘abbbbbbbbbb’ 都符合这个特征。

正则表达式可以用来:

  1. 验证字符串是否符合指定特征,比如验证是否是合法的邮件地址。
  2. 用来查找字符串,从一个长的文本中查找符合指定特征的字符串,比查找固定字符串更加灵活方便。
  3. 用来替换,比普通的替换更强大。

创建一个正则表达式

你可以使用以下两种方法之一构建一个正则表达式: 继续阅读

页面滚动时自动显示隐藏导航效果(jQuery)

介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。

支持IE9+,Chrome,Safari,FireFox…

自动显示隐藏导航这种交互出现已经有一段时间了,特别是在移动设备上。 这种UX模式背后的想法简单而有效:我们希望导航在我们需要的时候很方便的显示,当用户向下滚动页面时,导航会自动隐藏,为内容留出更多的空间。在用户向上滚动页面时,我们将他的行为理解为想要访问导航,所以我们把导航自动自动显示出来。 继续阅读

PostCSS及其常用插件介绍

前几天,PostCSS 6.0 分布了。

PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass、Less 与 Stylus。得出这个结论的部分原因是:

  • 它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。
  • PostCSS 能替代你的预处理器。现在有很多插件实现了一些设计,如变量、 嵌套、mixins 以及 extends。

然而,虽然你可以构建自己的预处理器,但除非你想限制功能并加快编译速度,你没有别的该这么做的理由。就我个人而言,为增强 CSS,我使用 Sass,再加以 PostCSS 辅佐。没什么波澜,可能是对于大多数前端使用者来说没什么大的影响,因为通常大家都是使用其插件。

CSS 预处理器 和 CSS 后处理器

在说 PostCSS 之前,先了解一下 pre-processor 。
继续阅读

实例解析防抖动(Debouncing)和节流阀(Throttling)

有兴趣可以先看看这3篇系列文章:

防抖(Debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。

当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。
继续阅读

比较escape、encodeURI、encodeURIComponent

估计很多前端工程师并不清楚escape,encodeURI, encodeURIComponent的区别,也不知道什么时候该用哪个方法,以及这些方法为什么要被用到,下面我主要来阐述一下这三个方法的区别以及用法。

escape 方法:

 escape() 方法生成新的由十六进制转义序列替换的字符串。escape 函数是全局对象的属性. 特色字符如: @*_+-./ 被排除在外。字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示。大于的话则使用4位序列:%uxxxx 表示。

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

看看例子吧:

escape('abc123');     // "abc123"
escape('äöü');        // "%E4%F6%FC"
escape('ć');          // "%u0107"

// special characters
escape('@*_+-./');    // "@*_+-./"

escape('~!@#$%^&*(){}[]=:/,;?+\'"\\')  
//%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C

encode 方法:

encodeURI() 是对统一资源标识符(URI)进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码(只有由两个代理字符区组成的字符才用四个转义字符编码)。 继续阅读

2017前端开发者必学清单

前端生态系统高速发展,我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此,但也许我们可以放缓脚步,去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量,提升工作价值,帮我们去理解新的工具。

这篇文章里有我自己过往的经验也有新年的计划,同时也希望能收到你们的反馈。

学习如何编写可读的代码

我们大多数的工作不是写新代码,而是维护既有的代码。这也就意味着你读代码的时间要远多于写码的时间,因而你需要为你下一位维护代码的同事来优化代码,而非为解释器来优化。

我推荐大家阅读这几本很棒的书,由薄到厚,按下面顺序来阅读:

继续阅读

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

React还是Vue:你该如何选择?

2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。

但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在JavaScript社区引起了巨大反响,GitHub上多出的25000颗star就是最好的证明。

React和Vue的适用范围无疑是很相似的:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展为复杂的应用程序。

因为,很多Web开发者想知道他们应该使用哪个框架。是其中一个明显优于另一个?还是他们有各自的优点和坑?或者他们基本就是一个样?

两个框架 两个拥护者

在本文中,我想用一次公平,彻底的对比来回答上面的疑问。但是唯一的问题是我是一个Vue粉丝,完全不够客观。今年我在项目中重度使用Vue,在Medium上大加赞赏,甚至还发布了Udemy课程

为了平衡我的偏见,我叫上了我的朋友Alexis Mangin,他是一个很牛的JavaScript开发者,同时也是一个React铁粉。他同样沉浸于React中,经常在Web端和移动端的项目中使用。 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读