分类目录归档：WEB开发

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... 继续阅读 >
2016
09-29

必看谷歌 HTML/CSS 规范 HOT

背景这篇文章定义了HTML和CSS的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件URL的协议部分（ http:,https: ），除非文件在两种协议下都不可用。这种方案称为protocol-relativeURL，好处是无论你是使用HTTPS还是HTTP访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。<!--Notrecommended--><scriptsrc="https://w... 继续阅读 >
2016
09-26

移动端 web 开发小技巧

retina图片兼容这个feature应该不仅仅只关心手机端,而且还包括PC,因为苹果不仅仅在手机端(从iphone4开始),而且在,MAC上也使用了retina.首先,retina的意思就是,dpr(device-pixel-ratio)是普通屏幕的两倍.对比于CSS来说就是,原来在css中设置的是1px,在实际的屏幕显示时,也是1px.但是,在retina下,css的1px就是实际屏幕的2px.这样的结果就是:有同学会想,会啥会这样呢？命名看起来大小一... 继续阅读 >
2016
09-26

jQ选择器汇总

1.#id:根据给定的ID匹配一个元素<pid="myId">这是第一个p标签</p><pid="not">这是第二个p标签</p><scripttype="text/javascript">$(function(){$("#myId").css("color","red");});</script>结果：这是第一个p标签这是第二个p标签2.element:根据给定的元素标签名匹配所有元素<div>这是div标签1</div><div>这是div标签2</div><p>这是p标签</p><scripttype="text/javascript">$(function(){... 继续阅读 >
2016
09-23

【经验】少写代码少填坑？

我不是这个世界上最有才的程序员。是的，我知道这是真的。所以我尝试尽可能少写代码。我写得越少，破坏越少，调整和维护的工作量也就越少。我也很懒，所以觉得一切过得去就行了。然而，事实证明让Web变得高效的唯一行之有效的方法也只是少写代码。精简代码？压缩代码？缓存？好吧，听起来好高级。从源头上竭尽全力拒绝增加代码或者引入别人写的代码？现在你说到点子上了。解决一个问题又会带来另一堆别的问题，你的任务... 继续阅读 >
2016
09-21

前端开发框架对比

近几年随着jQuery、Ext以及CSS3的发展，以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。JavaScript&CSS目前前端框架主要采用JavaScript+CSS模式，... 继续阅读 >
2016
09-20

编程的智慧,如何编写简单优雅的代码

 编程的智慧编程是一种创造性的工作，是一门艺术。精通任何一门艺术，都需要很多的练习和领悟，所以这里提出的“智慧”，并不是号称一天瘦十斤的减肥药，它并不能代替你自己的勤奋。然而由于软件行业喜欢标新立异，喜欢把简单的事情搞复杂，我希望这些文字能给迷惑中的人们指出一些正确的方向，让他们少走一些弯路，基本做到一分耕耘一分收获。反复推敲代码既然“天才是百分之一的灵感，百分之九十九的汗水”，那我先... 继续阅读 >
2016
09-16

有关css栅格系统的故事

说到栅格系统（gridsystem），你也许见过这样的概念：像这样，通过固定的格子结构，来进行布局设计。这是一种设计风格，而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整，可以让网页具有更友好的浏览体验。而随着响应式设计（responsivedesign）的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。栅格与响应式响应式的要点是为同一个页面设计多种布局形态，分别适... 继续阅读 >
2016
09-14

效率提升jQuery的25个技巧 HOT

1、从GoogleCode加载jQueryGoogleCode上已经托管了多种JavaScript类库，从GoogleCode上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在GoogleCode上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:<scripttype="text/javascript"src="http:/... 继续阅读 >
2016
09-12

前端安全之路-代码保护

0x00前言在信息安全领域，可信系统（Trustedsystem）是一个让人心动的目标，它指的是一个通过实施特定的安全策略而达到一定可信程度的系统。在计算机中，可信平台模块（TrustedPlatformModule，TPM）已经投入使用，它符合可信赖计算组织（TrustedComputingGroup，TCG）制定的TPM规范，是为了实现可信系统目标的而打造的一款安全芯片。作为可信系统的信任根，TPM是可信计算的核心模块，为计算机安全提供了强有力的保障... 继续阅读 >
2016
09-10

React 入门实例教程

现在最热门的前端框架，毫无疑问是React。React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。这个... 继续阅读 >
2016
09-10

JavaScript 中的面向对象编程

介绍JavaScript是一个强大的面向对象编程语言，但是，并不像传统的编程语言，它采用一个以原型为基础的OOP模型，致使它的语法让大多数开发人员看不懂。另外，JavaScript也把函数作为首要的对象，这可能会给不够熟悉这门语言的开发人员造成更大的困惑。那就是我们决定放在前面作为一个简短前言进行介绍的原因，并且在JavaScript里也可以用作面向对象编程的一个参考。这个文档没有提供一个面向对象编程的规则预览... 继续阅读 >
2016
09-10

20个编写现代CSS代码的建议

明白何谓MarginCollapse不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:.square{width:80px;height:80px;}.red{background-color:#F44336;margin-bottom:40px;}.blue{background-color:#2196F3;margin-top:30px;}在上述例子中我们会发... 继续阅读 >