Reg中的lastIndex

问题出现

在写一个搜索算法测试的时候,遇到一个问题,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var search = function(data,text){
var arr = text.split(''),reg='[A-z]*';
for(var i in arr){
reg = reg + arr[i] + '[A-z]*'
}
var _regExp =new RegExp(reg,'gi');
for(var j in data){
if(_regExp.test(data[j])){
console.log(data[j]);
}
}
}

search(['yreenchan','alenwang','maginazhang'],'ea');

聊聊百分比布局下的精灵图

对于前端开发来说,性能优化有一个很简单有效的方法就是减少请求数,所以我们经常将几个小的图片合并成一个大的图片,利用background-position定位到具体的某一张小图片,这种合成的大图片我们称之为精灵图。对于PC固定尺寸来说,精灵图的实现非常容易,但对于移动端常用的百分比布局来说,又该如何实现呢?

固定尺寸精灵图实现

对于PC端,如果我们用固定尺寸px来布局的话,那么精灵图的实现非常简单。拿下图而言:
此处输入图片的描述

React——带你走进组件化的世界

Facebook一个开源项目掀起了前端界的惊涛骇浪,React到底是何方神圣,现在就让我们一起走进React的世界。

React是什么?

React起源

React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。

使用gulp简化你的工作

前言

构建工具的产生,极大地简化了我们的开发流程,让我们一起来看看在没有这些构建工具出现之前,我们的工作场景:写好js、css,合并压缩文件,改名,修改版本号,发布线上。等到需要修改一个功能的时候,重复上面的步骤。甚至如果使用了sass之类的来写样式的话,还得把sass转换成css。我们会发现有很多重复性的工作,对于程序员这种懒人来说是非常难受的,所以构建工具应运而生。

RESTful理解

什么是REST?什么又是RESTful?node.js如何实现REST架构?

REST与RESTful

REST与RESTful这几年来一直充斥在各大博客与技术论坛中,它们是何方神圣呢?其实REST并不是一种新的技术,而是一种软件架构的设计风格,全称是REpresentational State Transfer,是由http协议主要设计者Fielding在一篇论文中提到,从而引起大家的关注,并且得到实现和推广。前面所说REST是一种软件架构的设计风格,那么凡是符合REST设计的架构称为RESTful架构。

浅谈BigPipe

随着页面元素的越来越多,页面的加载也会越来越慢,性能的问题也就越来越突出,来看看BigPipe能够带给我们什么。

背景

对于一个简单的项目来说,直接前端发送请求,然后后端请求数据返回页面一气呵成并不会有太多的性能问题。但是对于一些复杂的页面,拿电商来说,商品的详情页面分为很多块,可能需要请求不同的后台系统API,比如商品库系统,会员系统,推荐系统等等从而拼接成这样一个页面。对于这样的页面,意味着我们可能发很多请求去请求不同的后台api从而获取页面片段,然而请求的建立是需要消耗时间和性能的,那么我们如何能够短时间加载完呢?

exports 与 module.exports

对于使用过Node.js的同学应该对于exports 与 module.exports都很熟悉吧,那么他们之间又有什么关系呢?

exports 与 module.exports的关系

经常使用Node.js的朋友会发现,我们导出模块经常使用:

1
2
3
function a(){
}
module.exports = a;

移动端如何优雅地调试

在整个开发周期来看,有时候自测试的周期远远比构思和编码的周期还长,特别是对于踩坑比较少的人来说。所以,调试对于程序员来说再熟悉不过了,对于前端来说,由于不同浏览器的内核以及移动设备的多样性,又增加了前端调试的复杂性。那么,如何优雅地进行前端调试呢,且听下文慢慢说道。

CSS3实现逐帧动画

随着浏览器对于css3的兼容,css3实现的动画也登上了前端的舞台,甚至在性能上已经超过了原来使用js实现动画的性能,那么,如何使用css3更加优雅地实现动画呢?

前言

动画的类型有很多,位移、旋转、放大缩小等等,这些都属于比较基础的动画,对于一些比较复杂的动画,可能就需要使用逐帧的方式进行实现。

变量提升

JavaScript作为解释型语言,与编译型语言有很大的不同,变量的声明会更加灵活,但同时也会带来一些问题,变量提升就是其中的一个需要特别注意的地方。

变量提升(对于变量)

1
2
3
4
5
6
7
8
9
10
11
12
13
var myvar = '变量值'; 
console.log(myvar); // 变量值
//代码段2--------------------------
var myvar = '变量值2';
(function() {
console.log(myvar); //变量值2
})();
//代码段3----------------------------
var myvar = '变量值';
(function() {
console.log(myvar); // undefined
var myvar = '内部变量值';
})();