自定义复选框
思路:借助于组合选择符和before伪元素,利用content属性改变伪元素的内容,为其添加我们想要的样式。并将原来的复选框隐藏掉。 HTML结构如下: <input type="checkbox" id="awesome"><label for="awesome">Awesome!</label> 首先,生成一个伪元素,先给这个伪元素添加一些样式。 input[type= ...
类数组转换为数组
一、什么是类数组对象1.特征特征一:具有指向对象元素的数字索引下标以及 length 属性,告诉我们对象的元素个数特征二:不具有诸如 push 、forEach 以及 indexOf 等数组对象具有的方法2.常见的类数组对象 document.getElementsByClassName()document.getElementsByTagName()document.getElementsByName()document.querySelectorAll()document ...
让 Ajax 支持浏览器的前进后退
众所周知,Ajax可以实现网页的局部刷新,但与此同时,Ajax会破坏浏览器历史的前进后退。为了让Ajax也能支持浏览器的前进后退,HTML5的history API中定义了一系列方法,其中pushState就是来解决这个问题的。 来看看这几个API history.pushState(state, title, url)pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给你看的而已,第一个参数是一个对象,你可以放入 ...
一个通用的事件监听器
define(function(){ var Event = { //页面加载完成后注册onload事件 readyEvent:function(fn){ if(fn == null){ fn = document; } var oldonload = window.onload; ...
DNS 劫持与 DNS 污染的原理
DNS劫持就是通过劫持了DNS服务器,通过某些手段取得某域名的解析记录控制权,进而修改此域名的解析结果,导致对该域名的访问由原IP地址转入到修改后的指定IP,其结果就是对特定的网址不能访问或访问的是假网址,从而实现窃取资料或者破坏原有正常服务的目的。DNS劫持通过篡改DNS服务器上的数据返回给用户一个错误的查询结果来实现的。DNS劫持症状:连接宽带后首次打开的页面都是指向ISP提供的“电信互联星空”、“网通黄页广告”等内容页面。还有就是曾经出现过用户访问Google域名的时候 ...
一个优化的快速排序
快速排序是一个最差时间复杂度为O(n²)的排序算法,这种情况通常出现在选择的轴值(pivot)不能将数组划分为两个长度相等的子数组的时候,比如数组逆序排列的时候,如果选择第一个数作为轴值,划分的子数组的大小分别为0和n-1,此时算法的性能最差。 一个较好的办法是“三数取中”,查看当前数组的第一个、中间一个和最后一个位置的数组,取其中位数,以此来降低轴值选择得不好的可能性。 JavaScript实现代码如下: Array.prototype.swap = function (i ...
部署 Node 项目到 CentOS 服务器
最近开始折腾Node,跟着慕课网的教程写了个电影网站,于是想把网站部署到服务器上,本文记录了我整个环境搭建的流程。 通常Node和mongoDB一起搭配使用,再加上Node的一个热门的开发框架Express,以及angular.js,共同构成了整个web开发的技术架构(这次的开发中没有用到angular)。取其首字母,也就是所谓的”MEAN”。不废话了,下面是正文。 服务器配置 阿里云ECS 单核1G内存(这里要安利一下阿里云的学生优惠活动,一个月只要¥10,学生党的福利~ ...
DDoS 原理与应对之道
原理拒绝服务攻击的主要目的是使被攻击的网络或服务器不能提供正常的服务。web服务器在一定时间内只能处理一定量的通信,如果通信量超过了服务器承受的限度,服务器将会瘫痪。拒绝服务攻击就是向某台主机发送大量请求,使其无法响应正常的请求。比如每年春运时候的12306,大量用户涌入导致网站瘫痪,这就是一次现实版的DDoS攻击。 DDoS(分布式拒绝服务攻击)是在传统的DoS攻击基础上,利用更多的傀儡机来发起进攻。整个DDoS攻击体系可分为4部分:黑客、控制傀儡机、攻击傀儡机、受害者。黑 ...
【JavaScript 实现算法】快速排序
快速排序是一种分而治之的算法,通过递归的方式将数据依次分解为包含较小元素和较大元素的不同子序列。该算法不断重复这个步骤直到所有数据都是有序的。 快速排序的算法如下:(1) 选择一个基准元素,将列表分隔成两个子序列;(2) 对列表重新排序,将所有小于基准值的元素放在基准值的前面,所有大于基准值的元素放在基准值的后面;(3) 分别对较小元素的子序列和较大元素的子序列重复步骤 1 和 2。 这个算法的JavaScript实现如下: //工具函数:交换两个值Array.prototy ...
实现 JavaScript 中的 indexOf 方法
indexOf()方法是ES5中出现的数组方法,它有两个参数array.indexOf(value,start)第一个参数指定要在数组查找的值,第二个可选参数指定开始查找的数组下标。如果省略,则为0。如果数组中存在匹配的值,就返回第一次匹配的数组下标,如果不存在匹配的值,则返回-1。示例:[‘a’,’b’,’c’].indexOf(‘a’,1) //返回-1 下面我们来自己实现这个方法,并保证其向下兼容性。 var indexof = functio ...
【JavaScript 实现数据结构】队列
队列是一种先进先出(FIFO)的数据结构,其实现方式主要分两种:顺序队列和链式队列,本文将给出顺序队列的JavaScript实现。 JavaScript提供的数组原生方法:push()可以在数组末尾插入元素,shift()可以删除数组的第一个元素,利用这两个方法可以很容易实现队列的“入队”和“出队”。代码如下: function Queue(){ this.items = [];}Queue.prototype = { enqueue ...
JavaScript 数组去重
话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法。 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处。 双重循环去重 这个方法使用了两个for循环做遍历。整个思路是: 构建一个空数组用来存放去重后的数组 外面的for循环对原数组做遍历,每次从数组中取出一个元素与结果数组做对比 如果原数组取出的元素与结果数组元素相同,则跳出 ...
【JavaScript 实现数据结构】栈
堆栈可以用链表和数组两种方式实现,这里分别给出这两种实现方式。代码如下: //数组实现function Stack(){ this.items = []; this.size = 0;}Stack.prototype = { constructor:Stack, push:function(data){ this.items[this.size++] = data; }, pop:funct ...
阿里前端实习电话面试(二)
今天经历了阿里的两轮电话面试,分别来自阿里旅行和无线部门。加上之前无线部门的一面,事实上这已经是阿里的第三次电面了。。。我猜是他们的招聘系统出了问题,填简历时选的杭州,结果今天收到了来自北京的电面。。。 这两次面试显然考察的比第一次面试全面多了,从C语言、数据结构、算法,到网络、OOP、以及JS基础……两次都面了半个多小时…… 1.自我介绍,描述你的项目 2.项目中用到了哪些技术,如何进行依赖管理,描述项目的结构(显然是在问前端工程化) 3.什么是重载与多态?如何用JS实现多 ...
CDN 缓存原理
启用CDN缓存后浏览器访问的全过程: 1.用户输入URL,浏览器将解析过后的域名发给DNS服务器 2.CDN返回该域名对应的CNAME,此时浏览器需要再次对获得的CNAME进行解析,才能得到CDN缓存服务器的IP地址。在此过程中全局负载均衡DNS解析服务器会将用户的访问请求定位到离用户最近、负载最轻的CDN缓存服务器上。这种技术也被称为“DNS重定向”,DNS服务器不是为每个请求返回相同的IP地址,比如在悉尼的一个客户请求解析www.cdn.com,DNS服务器根据地理位置, ...
apply 方法的妙用
我们可以使用数组的 push() 方法来合并数组 var a = [1,2,3];var b = [4,5,6];Array.prototype.push.apply(a,b);console.log(a);//输出1,2,3,4,5,6 push方法本身没有提供push一个数组,但它提供了push(param1,parm2…),支持传入多个参数。而apply方法可以将一个数组转换为一个参数列表,apply的第一个参数用于改变this对象,将数组a传给它,也就相当于在a上调 ...
网站性能优化的 14 条规则
1.减少HTTP请求  减少HTTP请求的方式很多,常见的包括CSS Sprites、合并JS和CSS、图片地图等。遵守这条规则可以改善首次访问网站的响应时间。 2.使用CDN(内容发布网络)  只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%-90%时间花在了下载页面中的所有组件上。如果web服务器离服务器更近,则一个HTTP请求的响应时间将缩短。CDN是一组分布在多个不同地理位置的web服务器,每个服务器都拥有所有网站的文件副本,用户访问网站时, ...
HTTP 状态码大全
HTTP状态码被分成了五类。100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 500-599 用于支持服务器错误。  100-199:信息性状态码 状态码 原因短语 含义 100 continue 说明收到了请求的初始部分,请客户端继续发送 101 switch protocols 说明服务器正在根据客户 ...
cookie 详解
前言: Cookie是指web浏览器存储的少量数据,它与具体的web站点相关。Cookie数据会自动在浏览器和服务器之间传输,因此服务器端也可以读写存储在客户端的Cookie值。在JavaScript中,Cookie用于保存状态,以及为浏览器提供一种身份识别机制。 检测Cookie是否可用:navigator.cookieEnabled Cookie的有效期和作用域  Cookie默认的有效期很短暂,只能持续在浏览器的会话期间。如果想要延长Cookie的有效期,可以通 ...
正则表达式学习笔记
JavaScript中用RegExp对象表示正则表达式,可以用RegExp()构造函数来创建正则表达式,不过更多时候是用对象直接量来创建如: var re = /s$/;这个正则表达式可以匹配以字符s结尾的字符串 1.字符类把字符放进方括号就变成了字符类,一个字符类可以匹配它所包含的任意字符。如:/[abc]/与字母a、b、c中的任意一个都匹配。常见字符类[abc] 方括号内任意字符[^abc] 不在方括号内的任意字符. 除换行符和其他Unicode行终止符之外的任意字 ...