Topepy-CSDN博客

原创 HTML5新特性之离线缓存技术

一、离线缓存的起因：HTML5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害很大。而离线web应用允许我们在脱机时与网站进行交互。二、什么是离线Web应程序？为什么要开发离

2016-04-12 16:34:32 22051 6

原创浏览器的跨域问题以及解决方案

1、为什么会有跨域问题的存在？ JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，即同源政策。2、什么是同源？ 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。（1）、协议相同

2016-04-10 22:37:40 47988 1

原创修改ElementUI中el-autocomplete在ie11中无法输入中文

由于elementUI源码存在bug，导致el-autocomplete在ie11中无法输入中文源码如下：node_modules\element-ui\packages\autocomplete\src\autocomplete.vue line111 handleComposition(event) { if (event.type === 'composi

2017-09-26 16:24:09 3017 2

转载 URL、URI和URN三者之间的区别

一、名词含义URI = Universal Resource Identifier 统一资源标志符URL = Universal Resource Locator 统一资源定位符URN = Universal Resource Name 统一资源名称二、区别URI分为三种，URL or URN or （URL and URI）换言之，URL和URN都是URI，但是URI

2017-09-18 09:00:51 1190

原创 Vue-resource如何实现表单提交以及file图片上传的压缩

总括：个人在项目开发中所遇到的问题总结，主要介绍两个知识点：①vue-resource如何实现表单提交。②file图片上传如何压缩，减少上传压力vue中的代码let that = this // 上传图片获取url console.log('没处理时的大小:' + this.headerImage100.length) this.$server.uplo

2017-09-12 12:33:32 5955

原创 Vue组件间的通信

前言：本文主要介绍在Vue中组件与组件如何进行信息传递。分为三部分：父组件向子组件，子组件向父组件，非父子组件通信一、父组件向子组件通信（props）①、父组件向子组件传递字符串

2017-09-11 18:05:11 807 1

原创 Javascript如何改变对象的原型

1.什么是原型(prototype)。prototype是构造函数的一个属性, 该属性指向一个对象. 而这个对象将作为该构造函数所创建的所有实例的基引用(base reference)。可以把对象的基引用想像成一个自动创建的隐藏属性. 当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若不, 则查找基引用指向的对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根).

2017-08-15 19:57:30 1758

原创 JS数组去重

1.利用ES5中数组API----filter(简单)function replace(arr){ return arr.filter(function(item,index,self){ return self.indexOf(item) === index;})}2.先使用sort排序，后用splice去重。function replace(arr){ arr.

2017-08-14 21:06:59 275

原创 zepto和jquery的区别

1.总括：Zepto的主页说，会用jQuery就会用Zepto.-Zepto更轻量级。-Zepto是jQuery的精简，针对移动端去除了大量的jQuery的兼容代码。-部分API的实现方式不同。2.详情：1.针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的。并非Zepto的设计不

2017-07-29 17:46:20 656

原创 JS正则表达式详解

一、什么是正则表达式？1.定义：正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符

2016-05-12 14:23:31 2158

原创 HTML5新特性之客户端数据库(IndexedDB)

1、简述在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃（由于至今Firefox和IE不支持），而HTML5的支持的本地存储实际上变成了Web Storage（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构

2016-05-08 22:23:47 2586

原创前端知识总结

1、Javascript中null和undefined的区别总所周知：null == undefined //true null !== undefined //falsenull:是JavaScript的关键字，用于描述“空值”，对其执行typeof操作返回“object”，即为一个特殊的对象值，可以表示数字、字符串和对象是“无值”。null参与数值运算时其值会自

2016-04-22 12:03:06 817

原创类数组转数组方法详解

类数组转数组：Array.prototype.slice.call(arguments)方法详解：我们知道，Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换）如：var a={length:2,0:'first',

2016-04-21 16:52:46 2721

原创 Cookie与Session的区别

本文分别对Cookie与Session做一个介绍和总结，并分别对两个知识点进行对比分析，让大家对Cookie和Session有一个更深入的了解，并对自己的开发工作中灵活运用带来启示。一、Cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器。IETF RFC 2965 HTTP StateManagement Me

2016-04-18 15:29:46 4345 1

原创 HTML5新特性之WebSocket

一、WebSocket简介：谈到Web实时推送，就不得不说WebSocket。在WebSocket出现之前，很多网站为了实现实时推送技术，通常采用的方案是轮询(Polling)和Comet技术，Comet又可细分为两种实现方式，一种是长轮询机制，一种称为流技术，这两种方式实际上是对轮询技术的改进，这些方案带来很明显的缺点，需要由浏览器对服务器发出HTTP request，大量

2016-04-15 15:35:39 7823 1

原创 JS如何区分Object与Aarry的六种方法

一、经常遇见的问题：JS中判断一个对象的类型时，通常使用typeof，这时候问题就来了，因为typeof()辨别数组的时候返回的是object,所以JS中判断一个对象是不是数组需要一些特殊的处理方式，下面将介绍个人总结的五种处理方法。二、开门见山开发中要判断一个对象是不是数组，推荐使用下面这个函数：function isArray(obj){ if(Array.

2016-04-14 15:26:13 14212

原创 HTML5新特性之工作线程Web Worker

一、Web Worker的起因：众所周知，在HTML5推出之前的 JavaScript 的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：JavaScript 中的 setinterval 方法，setTimeout 方法等），但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。单线程的不足就是效率低下。HTML5 中引入工作线程

2016-04-13 17:11:44 756

原创前端开发的45个经典技巧

1、首次给变量赋值是切记使用var关键字(闲谈：清楚的记得有次去面试前端，一个项目经理同时面我和另外一个人，面试官开始就是要我们俩手写一个数组去重函数，哗哗的一下写完交了，面试官看来下之后直接给了一旁的竞争对手，叫她给我指出我代码的错误，才知道刚才忘记写var声明变量，瞬间脸红走了)=。=~~回归正题：变量没有声明直接赋值的话，默认会作为一个全局变量（一切无主的都是window的），要尽量避免

2016-04-01 17:52:45 6740 1

原创 CSS3属性之text-indent文本缩进使用详解

1、定义：text-indent 属性规定文本块中首行文本的缩进。2、使用：将段落的第一行缩进2em：div{text-indent:2em;}3、注意事项：3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。3-2、使用text-indent不生效的原因以及解决办法：原因:text-indent无法作用于行内元素解决办法：将行内元素变为块级元素：dis

2016-03-22 10:54:58 9199

翻译前端优化建议

原文来自YAHOO！前端团队，网址请点击1、尽量减少HTTP请求数分类：内容80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和

2016-03-18 16:43:09 2059

原创 CSS3新属性之user-select控制文本是否选中

1、抛砖:开发中遇到一个很奇怪的问题，点击网页的某地方，其他地方出现文本选中的情况，导致十分难看。如下图（点击网页其他地方search搜索出现选中状态）2、通过user-select解决:语法:user-select:none|text|all|element取值:none:文本不能被选择text:可以选择文本（默认值）all:当所有内容作为一个整体时可以被选择

2016-03-15 10:55:31 4333

原创 CSS3属性之text-overflow:ellipsis详解

1.语法:text-overflow:clip|ellipsis默认值:clip;适用于:所有元素clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。ellipsis:当对象内文本一处时显示省略标记(...)。当然这还是不够的，需要加点调料才能出现效果:那就是配合overflow:hiddenwhite-space:overflow;效果

2016-03-14 14:17:35 48238 2

原创 CSS3选择器之:nth-child()伪类选择器详解

1、语法:nth-child(an+b) 注意: (an+b)不能写成(b+an);描述:伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。2、用法:2-1.简单数字序号写法 --->:nth-child(3);:nth-chi

2016-03-10 14:59:00 2378

原创 CSS3新属性box-flexd弹性盒模型

1、介绍:box-flex是css3属性，需考虑兼容性问题。(大部分浏览器已经实现了无前缀版本)#element{box-flex:1.0; /*必须是整数，占父元素几等分的意思*/-moz-box-flex:1.0; /* Firefox的兼容性*/-webkit-box-flex:1.0; /*Safari和Chrome的兼容性*/-o-box-flex:1.0;

2016-03-09 11:53:03 1249

原创 DIV边框重叠变粗解决方案(子元素浮动导致父元素失去高度解决方法)

1、问题如图：代码如下： new document .father{width:400px;}.c{width:95px;height:100px;float:left;border:1px solid black;}

2016-03-08 17:27:20 9650 1

原创 JS三目运算(三元运算)

1、什么是三目运算：(布尔表达式 ? 值0:值1;)5>3?alert('5大'):alert('3大');即 if(5>3){alert('5大')}else{alert('3大')};注意:三目运算和if(){}else{}的区别是三目运算有返回值,例如:var max = a>b?a:b;2、多条件的三目运算怎么写:实例:根据学生成绩判定ABCD四个

2016-03-08 15:10:11 15406

原创 CSS盒模型

1、盒模型的组成:内容（content）、内边距(padding)、边框(border)、边界(margin)四部分组成。2、盒模型的分类:(box-sizing)(1)、标准盒子模型(content-box)box-sizing:content-box(默认)注意：1、此时的width = content.width (padding和border不被包含在定义的wi

2016-03-07 15:03:47 692

原创 js数字舍入误差以及解决方法

1、起因：返回结果是true。2、原因：计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示，如圆周率 3.1415926...，1.3333... 等。JS 遵循 IEEE 754 规范，采用双精度存储（double precision），占用 64 bit。3、解决方法（1）toFixed(),存在兼容性（chrome）(2)比较

2016-03-02 16:51:34 3822

原创 js for循环输出i为同一值的问题

1、最近开发中遇到一个问题，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。代码如下：闭包演示 1 2 3 4 5 window.onload=function() { var ps = documen

2016-02-22 14:31:37 11979

原创 String与JSON的转换和Array转String

1、String转JSON：(1)方法一：json.parse()函数; 注意：json字符串的格式一定要标准，key和value一定要用双引号包括，否则会出线解析异常！例如：var use = {"name":"god"};var used = JSON.parse(use);(2)方法二：eval()函数处理：注意：①格式为：var data=eva

2016-01-27 12:25:02 3923

原创 CSS样式开发处理技巧

1、怎么让换行文字不换行： white-space:nowap;浏览器支持所有浏览器都支持 white-space 属性。搜索注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。可能的值normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。nowrap 文本不

2016-01-26 11:52:15 684

转载淘宝双飞翼布局，两边固定中间自适应布局。中间内容先显示。

1、淘宝双飞翼的优点： ①、重要的内容先加载； ②、兼容目前所有的主流浏览器，包括IE6。 ③、方便整体样式修改，不同的布局框，可以通过调整.col-sub、.col-extra、.col-main、.col-main .main-wrap的相关CSS属性即可实现。2、实现：淘宝的页面布局中，最经典的应该是它的【子列】【主列】【附加列】这三个概念

2016-01-25 11:55:09 1796

原创 regExp的test方法取得的值变化的原因及处理办法

1、JavaScript 正则表达式对象RegExp的test方法，用于检测一个字符串是否匹配某个模式。字面量定义RegExp对象：var re = /pattern/attributes，其中attributes可以是g,i,m；阅读以下程序： var str = 'abc123'; var re = /^abc/g ;var result1 = re.test(s

2016-01-24 22:48:25 1424

原创关于js清除cookie失败详解

1.清除cookie的原理：给需要删除的cookie设置expires（失效时间）,从而将删除此条数据。代码如下：document.cookie = name +"=data1;expires="+(new Date()).toGMTString();注意事项：(1).name = data1 表示操作的是cookie中Name为data1的这条数据。

2016-01-21 14:25:13 4140

转载减少HTTP请求之合并图片详解（大型网站优化技术）

一、相关知识讲解　　看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。　　减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时

2016-01-20 22:43:50 754

转载 Meta 标签与搜索引擎优化

当谈及到标签对搜索引擎排名的影响，很多人都存在误解。在过去，许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用，哪些没有呢?什么是Meta标签Meta标签给搜索引擎提供了许多关于网页的信息。这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的。你可以在网页的元素中发现标签。在过去,有人曾经问我它是否可

2016-01-19 21:34:07 982

原创 js中删除数组中的某一元素（无下标时）

1、使用filter数组去重；var arr1 = [1,2,3,4,5,6];//待操作数组var j = 2;//待删除元素var noRepeat = function(arr1,arr2){return arr1.flter(function(e){return arr2.indexOf(e);})};var arr2 = [];arr2.pus

2016-01-14 11:27:23 2363

原创 js页面跳转的实现

一、总结可以实现页面跳转和刷新的方法：1、使用超链接，如：2、表单提交，如3、js实现，如1.window.location.href方式 window.location.href="url"; 2.window.navigate方式跳转 window.navigate("url");3

2016-01-13 22:43:29 723

原创 iframe使用利弊以及部分解决方案

1、iframe的优点：①、页面重载是无需重载整个页面，秩序重载iframe中的数据.(减少了请求的数据量)②、易于使用，如导航栏、广告的使用。2、iframe的劣势:①、搜索引擎"蜘蛛"无法读取，影响搜索结果的排列名次。②、链接导航问题:无法后退，只能离开。③、增加HTTP请求(注意：页面的请求次数比请求的数据量相比，前者耗时大得多);④、阻塞主页面的onload事件

2016-01-12 11:36:18 4637

原创 Jquery动态添加节点,绑定事件失效的解决方法

1.事件绑定在append之前时，会出现绑定事件失效。如图：解决方法：使用on绑定事件，给此动态节点的父元素(非动态节点)绑定。即：$("父元素").on("事件",“动态子元素”,function(){执行函数;})如图：闲谈：博客以分享工作中遇到的问题以及个人的解决方法为主，难免会有错误或者不足之处，敬请告知，大家一起成长！谢~个

2016-01-11 21:39:52 7708 1

空空如也

空空如也