分类：WEB开发

2016
10-25

JavaScript正则表达式这几个细节你真的知道？

前言粗浅的编写正则表达式，是造成性能瓶颈的主要原因。如下：varreg1=/(A+A+)+B/;varreg2=/AA+B/;上述两个正则表达式，匹配效果是一样的，但是，效率就相差太远了，甚至在与少量字符串匹配时，reg1就会造成你浏览器卡死。不信？我们可以测试下。首先，我们声明一个字符串变量str，同时赋予一个包含20个A的字符串给str，采用match方法与上述reg1、reg2进行匹配测试，如下：varstr='AAAAAAAAAAAAAAAAAAAA';str.match... 继续阅读 >

2016
10-22

MVC 在前端已死？

随着越来越多的前端开发开勇单项数据流架构，有些人就开始考虑传统的MVC是否还有未来？为了便于理解，我们首先分析一下前端架构的发展史。在过去的4年里，我看过许多web项目并花了大量的时间在前端架构或是为它整合一些框架。在2010年前，JavaScript（实现jQuery的语言）在传统web应用中被广泛用于DOM操作以及添加一些简单的东西。人们并不关心架构方面的东西，一些 简单的模块化方式 似乎已经... 继续阅读 >

2016
10-22

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候，css里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。inline或... 继续阅读 >

2016
10-22

理解并运用 CSS 的负 margin 值

本文样式代码采用SCSS。浏览器兼容性为IE6+。你的网页中，不可能没有使用过margin。大多数情况下，我们采用的都是正数的margin值，可能有时候会用到负的margin值。在我们的印象中，负的margin值就类似于浏览器的hack一样，不被人接受。但是，本文要说明的就是，负的margin值并不是hack，这是正常范围内的写法。Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... 继续阅读 >

2016
10-22

CSS中强大的EM

这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px... 继续阅读 >

2016
10-22

一次完整的HTTP请求过程

一次完整的HTTP请求过程从TCP三次握手建立连接成功后开始，客户端按照指定的格式开始向服务端发送HTTP请求，服务端接收请求后，解析HTTP请求，处理完业务逻辑，最后返回一个HTTP的响应给客户端，HTTP的响应内容同样有标准的格式。无论是什么客户端或者是什么服务端，大家只要按照HTTP的协议标准来实现的话，那么它一定是通用的。HTTP请求格式HTTP请求格式主要有四部分组成，分别是：请求行、请求头、空行、消息体，每部分内容占... 继续阅读 >

2016
10-22

九种浏览器端缓存方法知多少

  浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为九种，这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。  一、http缓存  http缓存是基于HTTP... 继续阅读 >

2016
10-20

前端实现文件的断点续传 HOT

早就听说过断点续传这种东西，前端也可以实现一下断点续传在前端的实现主要依赖着HTML5的新特性，所以一般来说在老旧浏览器上支持度是不高的本文通过断点续传的简单例子（前端文件提交+后端PHP文件接收），理解其大致的实现过程还是先以图片为例，看看最后的样子一、一些知识准备断点续传，既然有断，那就应该有文件分割的过程，一段一段的传。以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，... 继续阅读 >

2016
10-19

如何写出小而清晰的函数

本文以JavaScript为例，介绍了该如何优化函数，使函数清晰易读，且更加高效稳定。软件的复杂度一直在持续增长。代码质量对于保证应用的可靠性、易扩展性非常重要。然而，几乎每一个开发者，包括我自己，在职业生涯中都见过低质量的代码。这东西就是个坑。低质量代码具备以下极具杀伤力的特点：函数超级长，而且塞满了各种乱七八糟的功能。函数通常有一些副作用，不仅难以理解，甚至根本没法调试。含... 继续阅读 >

2016
10-18

深入理解Javascript--作用域和赋值操作 HOT

作用域作为一个最基础的功能存在于各种编程语言中，它使得我们的编程更加灵活有趣。其基础功能就是存储变量中的值，然后可以对值进行访问和修改。可能我们都知道作用域的一些概念，以及其一些扩展的一些内容闭包等，但是相对于这些可能我们去了解这些变量到底是存到了哪里，而我们的程序是如何访问到他们的会更加有趣。vara=1;首先我们要了解到在我们进行声明变量并进行赋值的时候到底谁参与了我们的整个流程。1，引擎：它... 继续阅读 >

2016
10-17

守护 Javascript 中的函数参数

作为开发者，我们花费许多时间来调试，尤其是在发现问题来源方面。开发工具指导我们追踪调用栈，但是追踪过程仍然相当耗时，尤其在遇到级联异步调用的时候。这一问题在很早以前就被发现了。假设我们有一个从不同文档结构中搜索包含指定字符串的元素的函数。我们使用以下看起来合法的调用：grep("substring",tree);但是我们并没有得到期望的结果。按照以往的经验，我们会花费一些时间来检查给定的树形文档结构，时间有可能会... 继续阅读 >

2016
10-17

CSS3 巧妙实现聊天气泡

前一阵子敢玩的Mobile页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约的体验风格，哈哈我不是设计师不过多评价啦。悄悄告诉大家所有的style都是我自己写的。全站哦！！！下面说正题，说好的聊天气泡呢？传统的聊天气泡什么又是传统的聊天气泡,直接上图代码如下<divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... 继续阅读 >

2016
10-17

七种css方式让一个容器水平垂直居中 HOT

阅读目录方法一：position加margin方法二：diaplay:table-cell方法三：position加transform方法四：flex;align-items:center;justify-content:center方法五：display:flex;margin:auto方法六：纯position方法七：兼容低版本浏览器，不固定宽高总结这种css布局平时用的比较多，也是面试题常出的一个题，网上一搜一大丢，不过还是想自己总结一下。这种方法比较多，本文只总结其中的几种，以便加深印象。效果图都为这... 继续阅读 >

2016
10-14

深入浅出JavaScript之闭包（Closure）

闭包（closure）是掌握Javascript从人门到深入一个非常重要的门槛，它是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面写下我的学习笔记~闭包-无处不在 在前端编程中，使用闭包是非常常见的，我们经常有意无意，直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件)!function(){varlocalData="localDatahere";document.addEventListener('c... 继续阅读 >

2016
10-14

那些不推荐使用的html标签

那些不推荐使用的html标签acronym首字母缩写，例如WWW类似的有abbr标签，表示单词缩写，例如inc.。语法如下：<acronymtitle="WorldWideWeb">WWW</acronym><abbrtitle="incorporated">inc.</abbr>推荐用abbr，不要用acronym（忽略上面提到的语义上的差异）appletJava小应用程序，主要提供绘图功能（在页面上通过代码绘制一些东西），例如：<appletcode="ShowImage.class"width=600height=400archive="Imagetest.jar... 继续阅读 >

2016
10-14

JavaScript-总结常用代码书写规范

javascript代码规范代码规范我们应该遵循古老的原则：“能做并不意味着应该做”。全局命名空间污染总是将代码包裹在一个立即的函数表达式里面，形成一个独立的模块。不推荐varx=10,y=100;console.log(window.x+''+window.y);推荐;(function(window){'usestrict';varx=10,y=100;console.log(window.x+''+window.y);}(window));立即执行函... 继续阅读 >

2016
10-14

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(正方形)#square{width:100px;height:100px;background:red;}Rectangle(矩形)#rectangle{width:200px;height:100px;background:red;}Circle(圆形)#circle{width:100px;height:100p... 继续阅读 >

2016
10-11

JavaScript中this绑定详解

this可以说是javascript中最耐人寻味的一个特性，就像高中英语里各种时态，比如被动时态，过去时，现在时，过去进行时一样，无论弄错过多少次，下一次依然可能弄错。本文启发于《你不知道的JavaScript上卷》,对javasript中的this进行一个总结。学习this的第一步就是明白this既不是指向函数自身也不指向函数的作用域。this实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。默... 继续阅读 >

2016
10-11

JavaScript原型详解

1，前言下面是2008年Github创建以来，各种编程语言的排名情况其中JavaScript自2015年之后就盘踞第一名，成为github上被使用最多的语言，早期，JS的使用还主要集中于浏览器中，但是随着node.js进军服务器开发和ReactNative逐渐向移动端渗透，一个属于JS的全栈时代就要来临了。而且JS界还流传一句名言：“所有能用JS开发的应用程序，最终都会用JS来开发”。我就问你怕不怕？好了，说了这么多，我并不是想说JS为世界... 继续阅读 >

2016
10-08

在 2016 年学 JavaScript 是一种什么样的体验？

嘿，我最近接到一个Web项目，不过老实说，我这两年没怎么接触Web编程，听说Web技术已经发生了一些变化。听说你是这里对新技术最了解的Web开发工程师？准确地说，我是一名「前端工程师」。不过你算是找对人了。我对今年的技术别提多熟了，前端可视化、音乐播放器、能踢足球的无人机，你尽管问吧。我刚去JS大会和React大会逛了一圈，没有什么新技术是我不知道的。厉害。是这样的，我要开发一个网页，用来展示用户... 继续阅读 >

2016
10-05

使用CSS完成元素居中的七种方法

在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知,在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:<divclass=... 继续阅读 >

2016
10-05

6个最好的 HTML5/CSS3 演示（PPT）框架

HTML是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.今天我们要介绍的是最好的几个HTML5/CSS3的演示工具和框架，你可以用它们来创建你的网页PPT。1.html5Slides这是Google提供的HTML5幻灯片模板。你可以下载这个模板，然后编辑它，就可以创建你自己的幻灯片了。2.SlidesPresentationwithHTML5这个工具用了纯HTML做主题和框架，CSS做切换效果，还有一个简... 继续阅读 >

2016
09-30

js 常用的正则表达式大全

以下收录一些我经常用到的正则表达式，因为工作场景中用到正则的地方几乎都跟validate插件的验证有关系，所以以下正则也是$.validator.addMethod() 的拓展：validate: http://jqueryvalidation.org/电话验证/***手机**/$.validator.addMethod("isMobile",function(value,element){varreg=/^((1[3-8][0-9])+\d{8})$/;returnthis.optional(element)||(reg.test(value));},"手机格式不正确");/... 继续阅读 >

2016
09-29

JavaScript 性能优化技巧

加载与运行延期脚本<scripttype="text/javascript"src="file1.js"defer></script>js文件要在dom加载完成时才会被下载动态脚本元素varscript=document.createElement("script");script.type="text/javascript";script.src="file1.js";document.getElementsByTagName_r("head")[0].appendChild(script)无论在何处启动下载，文件的下载和运行都不会阻塞其他页面的处理过程XHR脚本注入varx... 继续阅读 >