前端路上

万物皆有裂缝

Babun是一款集颜值功能于一身的window平台下的命令行工具。它集成了zsh、Cygwin等强大的工具,支持各种配置,并且有丰富的插件支持;并且有丰富的命令和命令提示功能,以及超级棒的历史命令提示。

Babun

官方贴出了Babun的十大特性

阅读全文 »

与其在上一秒中沉醉,不如努力拥抱下一秒.

匆匆而去的2016

阅读全文 »

移动端越来越被大众所接收,那么相应的技术就越来越向它靠拢,这是一种不可阻挡的趋势,也是万物发展的规律。移动端有三大难题:兼容、调试和适配。这三大问题就好像三座无法逾越的大山阻挡者我们前进的步伐,此文将记录我在项目中关于移动端适配的一些方式,供大家参考

分析

移动端适配的根本原因

阅读全文 »

有人说为什么会使用webpack+gulp呢?强大的webpack完全可以摒弃gulp了嘛?话虽如此,但个人觉得webpack配置太繁琐复杂,相对来说gulp更简单一点,并且gulp也能很好的完成我期望的任务。所以我想用webpack来处理js任务(因为它支持AMD和CMD,并且可以直接引入模块),用gulp处理images/css/html等资源

ps: 平时在项目中使用它们的机会不多,以下都是自己项目之外的折腾,如果有错误之处,请不吝指出。

demo

阅读全文 »

正则的魅力在于使用很简洁的方式解决一些比较复杂的方式,使代码变得更优雅,也使实现的过程变得更简单透明。本文搜集整理一些常用正则,记录以便查阅

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
var regex = window.regex || (function (document, $) {
var _reg = {};
/* 'pwd':/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,16}$/,//密码 */
//验证数字
$.extend(_reg, {
'num': /^\d+$/, //数字
'znum': /^[1-9](\d+)?$/, // 大于0的数字
'float': /^[-]{0,1}(\d+)[\.]+(\d+)$/, //浮点数
'money': /^\d{1,12}(?:\.\d{1,3})?$/, // money
'idCard': /^\d{15}$|^\d{18}$|^\d{17}[xX]$/, //身份证
'idCardStrict':/^(\d{6})([1-2])(\d{3})((?:0[1-9])|(?:1[0-2]))((?:0[0-9])|(?:[1-2][0-9])|(?:3[0-1]))(\d{3})(\d{1})$/,
'qq': /^[1-9]\d{4,15}$/, //QQ
'pwd': /^[\@A-Za-z0-9]{6,16}$/, //密码
'areacode': /^(0[1,2]{1}\d{1})$|^(0[3-9]{1}\d{2})$/, //区号
'tel': /^\d{7,8}$/, // 固话格式
'mobile': /^((\+86)|(\(\+86\)))?-?(13|14|15|18|17)[0-9]{9}$/, //验证手机号码
'telephone': /^(((\+)?86)|(\(\+86\)))?-?((((0)?[1,2]{1}\d{1})?-?\d{8})|((0[3-9]{1}\d{2})?-?\d{7,12}))-?(\d{1,8})?$/, //验证固定电话
'phone': /^((\+86)|(\(\+86\)))?-?(13|14|15|18|17)[0-9]{9}$|^((\+86)|(\(\+86\)))?-?(((0[1,2]{1}\d{1})?-?\d{8})|((0[3-9]{1}\d{2})?-?\d{7,8}))$/, //手机号码和固定电话
'zipcode': /^\d{6}$/ //验证邮编
});
//验证字符串
$.extend(_reg, {
'email': /^\w{1,16}([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, //邮箱
'chinese': /^[\u4E00-\u9FA5]+$/, //仅汉字
'char': /^[A-Za-z]+$/, //仅仅是字母
'charn': /^[A-Za-z0-9]+$/, //数字加字母
'nospecial': /^[\u4E00-\u9FA5A-Za-z0-9]+$/, // 不包含特殊字符
'url': /^((http|https|ftp):\/\/)?(\w(\:\w)?@)?([0-9a-z_-]+\.)*?([a-z0-9-]+\.[a-z]{2,6}(\.[a-z]{2})?(\:[0-9]{2,6})?)((\/[^?#<>\/\\*":]*)+(\?[^#]*)?(#.*)?)?$/,
'loginName': /^(13|14|15|18|17)[0-9]{9}$|^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, // 用户名
'userName': /^[\u4e00-\u9fa5]{2`,4}$|[a-zA-Z]{4,20}$/, //真实姓名
'nickName': /^([a-zA-Z\u4e00-\u9fa5]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{3,19})$/ //昵称
});
return _reg;
})(document, window.jQuery);
window.regex = regex;
阅读全文 »

Javascript的Array(数组对象)方法整理,对比他们的功能,返回值,分析他们的参数,以及具体的作用。

length:获取数组长度

  • Method: Arry.length
  • 被引用数组(Arry)是否改变: NO
  • Arguments: 无
  • Return: 返回被引用数组长度
阅读全文 »

工欲善其事,必先利其器。git一个不可或缺的利器,其魅力值得我们慢慢品尝!

安装

官网下载最新版本安装,然后查看是否安装成功

阅读全文 »

神奇的url

一条url包含了很丰富的信息,那么我们如何来获取这些信息并有效的加以利用呢?
随便举个例子:https://github.com/search?utf8=%E2%9C%93&q=javascript
这条url就是在github上搜索javascript后跳转页面对应的url。我们要做的就是获取’?’后面的参数,以及获取后可以用来做什么。

获取参数

阅读全文 »

利用jquery的插件jquery.animateNumber实现一个简单的数字滚动效果

需求分析

  1. 处理数据:因为数据是后端提供,所以有可能格式不是我们想要的,所以也许需要格式化数据;
  2. 根据页面设计的效果图(如图),需要把数字字符串拆分成单个数字字符串
    animateNumber_01
  3. 每一个数字进行滚动变化
  4. 最后,在项目中,我选取了插件jquery.animateNumber来实现滚动效果。这个插件的使用方式很简单,在官方有很详尽的文档来展示各个案例,就不一一赘述了。
阅读全文 »
0%