dianhang3622-优快云博客

转载 gulp使用gulp-file-include将header/footer引入页面

前言：gulp将header/footer引入页面这是使用fs、gulp-replace的一个方法，比较麻烦，每新增一个模块，就要写一个引入。也有其他更为简单的方法，gulp-file-include更为的简单简略，使用很久了，感觉不错，记录之。1、引入插件2、写task使用3、页面引入，哪里需要哪里就include。总结1：...

2016-10-10 18:57:00 418

转载移动端高清适配、布局开发解决方案

前言：移动端的适配是个大问题，特别是安卓，国内版本众多，不规则的dpr数不胜数，为了适配各种移动终端，网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢？不同设备下的统一视觉体验。不需要手动设置viewport，根据当前环境计算出最适合的viewport。支持任意尺寸的设计图，不局限于特定尺寸的设计图。支持单一项目，多种设计图尺寸，专为解决大型，长周期项目...

2016-09-20 11:40:00 344

转载 git在window与linux的换行符问题

1：背景。我win7，后端是win10，使用了TortoiseGit工具。我使用ssh，他使用http。仓库是在linux，使用gitLab管理2：问题。仓库是总监之前建好的。后端把文件add后push，我clone本地后没有放进编辑器中也没有做任何的修改，马上commit，提示所有文件已修改，打开对比了，只是结尾的换行有修改3：差异。因为之前没有遇到过这样的问题，不知从何下手，...

2016-09-19 11:19:00 299

转载文件（图片）上传组件

1. 问题：https://zhuwenlong.com/blog/51f6519532ffd70b27000001HTML5 File api 实现断点续传http://www.jianshu.com/p/2a42a0c89640html5 上传本地图片处理各种问题2. 组件：http://fex.baidu.com/web...

2016-09-14 21:48:00 175

转载 ie8、9跨域上传文件（图片）

前言：新的项目，需要将图片跨域上传到专门的图片服务器上面，而且还要支持ie8/9的跨域上传。解决：为了解决这个方案踩了很多坑，特此记录。以前收集了一些上传的组件文件（图片）上传组件，各有优劣。　　1：因为google在将来的版本不在支持flash了，所以不想使用swf支撑的组件上传　　2：尝试了AjaxFileUpload组件，这个在google跨域直接挂掉了。　　...

2016-09-14 21:43:00 244

转载移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，然后所有的元素尺寸都以rem为单位来写。比如将<html>的字体设为100px，如果...

2016-09-14 21:03:00 180

转载 iOS/Android 浏览器(h5)及微信中唤起本地APP

在移动互联网，链接是比较重要的传播媒质，但很多时候我们又希望用户能够回到APP中，这就要求APP可以通过浏览器或在微信中被方便地唤起。这是一个既直观又很好的用户体验，但在实现过程中会遇到各种问题：如何解决未安装APP时的做好引导页如何在微信中唤醒APP在iOS9中如何处理universal link被用户误关的情况如何解决Android...

2016-09-14 20:41:00 243

转载 gulp将header/footer引入页面

前言：在写静态页面的时候，公共的头部和底部or侧边栏一样，每写一个页面，都要复制粘贴，每当修改后，还要对原先的header、footer修改，这及其麻烦；不更新，部分效果又看不到影响总体效果。解决：用gulp的插件可以将header、footer、sidebar的静态页面引入每一个需要的页面，只需要写一段注释，编译时，会在注释内将header、footer、sidebar模板页面插入...

2016-09-14 19:12:00 210

转载几个前端小技巧

1：js在进行小数运算时会有丢失精度问题（其他语言也是），比如：0.1+0.2 //0.30000000000000004有一种比较快捷的方式是先把小数乘以10的整数倍，然后再运算，如：(0.1*10+0.2*10)/10 //0.3但是这种方式也不是100%准确的，乘以整百也可能精度丢失，比如：2177.74*100 //217773.9...

2016-09-14 18:54:00 265

转载 javascript内存管理

简介JavaScript 在变量（对象，字符串等等）创建时分配内存，然后在它们不再使用时“自动”释放。后者被称为垃圾回收。“自动”这个词容易让人混淆，或者说迷惑，并给JavaScript（和其他高级语言）开发者一个印象：他们可以不用考虑内存管理。然而这是错误的。内存生命周期不管什么程序语言，内存生命周期基本是一致的：分配你所需要的内存使用分配到的内存（读、写...

2016-09-14 18:49:00 148

转载深入浅出ES6（十七）：展望未来

作者Jason Orendorff github主页 https://github.com/jorendorff出于对文章长度的考虑，我们还保留了一些尚未提及的新特性，在最后的这篇文章中我会集中介绍一下这些新特性。你就当这是一次奇妙的旅程吧，无意间走进一幢语言大厦，路过形形色色的衣橱，穿梭于楼上奇形怪状的房间之间，偶尔还会看到一两个地下洞穴。如果你从未阅读过此系列中的其它...

2016-07-07 15:19:00 201

转载深入浅出ES6（十六）：模块 Modules

作者Jason Orendorff github主页 https://github.com/jorendorff早在2007年我刚加入Mozilla的JavaScript团队的时候广为流传一个笑话：通常来说JavaScript程序的长度只有一行。那时候Google Maps的诞龄还只有两岁，在它诞生之前，JavaScript主要被用来验证表单，毫无疑问，每一个处理&l...

2016-07-07 15:10:00 167

转载深入浅出ES6（十五）：子类 Subclassing

作者Jason Orendorff github主页 https://github.com/jorendorff在之前的文章《深入浅出ES6（十三）：类 Class》中，我们一起深入探讨了ES6的新特性——类，在这篇文章中我写到“可以使用类来创建一些简易的对象构造函数”，于是我们共同实现了这样一段代码： class Circle { con...

2016-07-07 15:02:00 157

转载深入浅出ES6（十四）：let和const

作者Jason Orendorff github主页 https://github.com/jorendorff回溯到1995年，当Brendan Eich在设计第一版JavaScript时，他搞错了许多东西，当然这也包括曾属于语言本身的一部分，例如Date对象，对象相乘被自动转换为NaN等。然而现在回过头看，语言最重要的部分都是设计合理的：对象、原型、具有词法作用域的一...

2016-07-07 14:55:00 137

转载深入浅出ES6（十三）：类 Class

作者Jason Orendorff github主页 https://github.com/jorendorff你可能觉得之前讲解的内容略显复杂，今天我们就讲解一些相对简单的内容，不再是生成器（Generator）这样前所未闻的全新编码方式，也不是诸如代理（Proxy）这种为JavaScript内部算法工作原理提供钩子的全能对象，更不是能够为开发提供便利的新型数据结...

2016-07-07 14:49:00 141

转载深入浅出ES6（十二）：代理 Proxies

作者Jason Orendorff github主页 https://github.com/jorendorff请看这样一段代码： var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`);...

2016-07-07 14:45:00 200

转载深入浅出ES6（十一）：生成器 Generators，续篇

作者Jason Orendorff github主页 https://github.com/jorendorff欢迎回到深入浅出ES6专栏，望你在ES6探索之旅中收获知识与快乐！程序员们在工作之余应当补充些额外的知识，现在我们继续深入浅出生成器，我已经为你们准备好非常棒的讨论话题。在之前的文章《深入浅出ES6（三）：生成器 Generators》中，我为大家介绍了E...

2016-07-07 14:34:00 208

转载深入浅出ES6（十）：集合

作者Jason Orendorff github主页 https://github.com/jorendorff前段时间，官方名为“ECMA-262，第六版，ECMAScript 2015语言规范”的ES6规范终于结束了最后的征途，正式被认可为新的ECMA标准。让我们祝贺TC39等所有作出贡献人们，ES6终于定稿了！更好的消息是，下次更新不需要再等六年了。委员会现在努...

2016-07-07 14:25:00 253

转载深入浅出ES6（九）：学习Babel和Broccoli，马上就用ES6

作者Jason Orendorff github主页 https://github.com/jorendorff现在，我们将向你分步展示如何做到的这一切。上面提及的工具被称为转译器，你可以将它理解为源代码到源代码的编译器——一个在可比较的抽象层上操作不同编程语言相互转换的编译器。转译器允许我们用ES6编写代码，同时保证这些代码能在每一个浏览器中执行。转译技术拯救...

2016-07-07 14:20:00 148

转载深入浅出ES6（八）：Symbols

作者Jason Orendorff github主页 https://github.com/jorendorff你是否知道ES6中的Symbols是什么，它有什么作用呢？我相信你很可能不知道，那就让我们一探究竟！Symbols并非用来指代某种Logo。它们也不是可以用作代码的小图标。它们不是代替其它东西的文学手法。它们更不可能被用来指代谐音词Cy...

2016-07-07 14:11:00 114

转载深入浅出ES6（七）：箭头函数 Arrow Functions

作者Jason Orendorff github主页 https://github.com/jorendorff箭头符号在JavaScript诞生时就已经存在，当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本，这样可以避免不支持JS的浏览器误将JS代码显示为文本。你会写这样的代码： <script language="javascr...

2016-07-07 14:03:00 146

转载深入浅出ES6（六）：解构 Destructuring

作者Jason Orendorff github主页 https://github.com/jorendorff什么是解构赋值？解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。通常来说，你很可能这样访问数组中的前三个元素： var first = someArray...

2016-07-07 13:54:00 107

转载深入浅出ES6（五）：不定参数和默认参数

作者Jason Orendorff github主页 https://github.com/jorendorff不定参数我们通常使用可变参函数来构造API，可变参函数可接受任意数量的参数。例如，String.prototype.concat方法就可以接受任意数量的字符串参数。ES6提供了一种编写可变参函数的新方式——不定参数。我们通过一个简单的可变参数函数cont...

2016-07-07 13:43:00 165

转载深入浅出ES6（四）：模板字符串

作者Jason Orendorff github主页 https://github.com/jorendorff反撇号（`）基础知识ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外，它们看起来与普通字符串并无二致。在最简单的情况下，它们与普通字符串的表现一致：...

2016-07-07 12:12:00 923

转载深入浅出ES6（三）：生成器 Generators

作者Jason Orendorff github主页 https://github.com/jorendorffES6生成器（Generators）简介什么是生成器？我们从一个示例开始：function* quips(name) { yield "你好 " + name + "!"; yield "希望你能喜欢这篇介绍ES6的译文"; i...

2016-07-07 11:58:00 127

转载深入浅出ES6（二）：迭代器和for-of循环

作者Jason Orendorff github主页 https://github.com/jorendorff我们如何遍历数组中的元素？20年前JavaScript刚萌生时，你可能这样实现数组遍历：for (var index = 0; index < myArray.length; index++) { console.log(myArray[in...

2016-07-07 11:52:00 110

转载深入浅出ES6（一）：ES6是什么

作者Jason Orendorff github主页https://github.com/jorendorffECMAScript发生了什么变化？编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了：语言语法– 语法解析规则、关键字、语句、声明、运算符等。类型– ...

2016-07-07 11:42:00 148

转载父子页面之间跨域通信的方法

　　由于同源策略的限制，JavaScript跨域的问题，一直是一个比较棘手的问题，为了解决页面之间的跨域通信，大家煞费苦心，研究了各种跨域方案。　　先来看看哪些情况下才存在跨域的问题：　　其中编号6、7两种情况同属于主域名相同的情况，可以设置domain来解决问题，今天就不讨论这种情况了。对于其他跨域通信的问题，我想又可以分成两类：　　其一（第一种情况）是a.com下面...

2016-06-17 14:38:00 144

转载编写高性能JavaScript【转】

　　英文链接：Writing Fast, Memory-Efficient JavaScript　　很多JavaScript引擎，如Google的V8引擎（被Chrome和Node所用），是专门为需要快速执行的大型JavaScript应用所设计的。如果你是一个开发者，并且关心内存使用情况与页面性能，你应该了解用户浏览器中的JavaScript引擎是如何运作的。无论是V8，Spider...

2016-06-17 12:08:00 161

转载玩转图片Base64编码

什么是 base64 编码?　图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的（所有才有了 csssprites 技术的应运而生，但是 csssprites 有自身的局限性，下文会提到）。没错，不管如何，图片的下载始终都要向服务器...

2016-06-14 19:22:00 904

转载毫秒必争，前端网页性能最佳实践

你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。网页内容减少http请求次数80%的响应时间花在下...

2016-06-13 14:51:00 91

转载 SVG动画

定义一块画布，然后在上面画一个圆形他看起来应该是这个样子的：现在我们就让这个圆动起来动起来是这个样子的（gif循环之后234三个demo将无法区分，所以这里的gif只循环一次，需要多次查看效果请刷新或者进入demo查看）：我们可以看到圆动起来的时候，circle元素里边不再是空的，多了一个animata的元素，这个animata含有下面几个属性：...

2016-06-07 12:01:00 187

转载 Webpack+Gulp+React+ES6开发

前言webpack是模块加载器+打包工具的集大成者。开发React堪称利器，jsx语法、es6，混淆、模块加载都很智能且功能强大，但是对于css、图片的加载器还不是像grunt/gulp那么丰富易于修改编辑，功能上略微不是那么方便，例如css中的图片地址修改或是需要替换cdn路径，图片压缩在webpack下修改极为不方便。所以用webpack模块加载编译jsx、es6，用gulp压缩...

2016-04-22 21:03:00 196

转载 Webpack+React配合开发

前面两篇关于webpack的基础和进阶，请先务必阅读之前的文章。Webpack教程一Webpack教程二什么是ReactReact是一个由Facebook开发的library，它的口号是“A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES”，用于构建用户界面的库。他的特点是仅仅关注于UI层，和其他的一系列大型的框架（Em...

2016-04-22 20:11:00 126

转载 React vs Angular 2: 冰与火之歌

黄玄·3 个月前本文译自 Angular 2 versus React: There Will Be Blood ，其实之前有人翻译过，但是翻得水平有一点不忍直视，我们不希望浪费这篇好文章。本文由 @李凌豪@黄玄联合翻译，转载请保留原文链接 ;)Angular 2 已经发布 Beta 版，而且似乎很有信心在 2016 年成为热门框架。是时候进行一场巅峰对决了，我们来看看它如...

2016-04-20 14:16:00 160

转载 Webpack教程二

Webpack教程一开发技巧启用source-map现在的代码是合并以后的代码，不利于排错和定位，只需要在config中添加 ... devtool: 'eval-source-map', ...这样出错以后就会采用source-map的形式直接显示你出错代码的位置。配置webpack-dev-server代理既然常用webpack做...

2016-04-16 19:49:00 249

转载 Webpack教程一

比较如果你熟悉原来一系列的构建工具，grunt或者gulp之类的，这里有一篇webpack和他们比较的文章可以读一读。 Webpack Compared安装先装好node和npm，因为webpack是一个基于node的项目。然后npm install -g webpack总览官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系...

2016-04-16 19:11:00 241

转载整个互联网行业都缺前端工程师？

本文来自100offer团队原创，部分内容译自：Why can’t we find Front End developers?前端工程师的缺乏问题几乎蔓延到整个互联网行业，从刚起步的创业公司，到上市公司乃至巨头，这个问题都存在着。没错，优秀的前端工程师简直比大熊猫还稀少。每天，100offer 的 HR 群都有人在吐槽招不到靠谱的前端工程师。实话说对这些需求，100off...

2016-04-16 19:04:00 145

转载 Sublime Text 3 搭建 React.js 开发环境

sublime有很强的自定义功能，插件库很庞大，针对新语言插件更新很快，配合使用可以快速搭建适配语言的开发环境。1.babel支持ES6， React.js, jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里：为什么说Babel将推动JavaScript的发展安装PC：Ctrl+shift+p...

2016-04-11 21:42:00 84

转载 Javascript的9张思维导图学习

思维导图小tips：思维导图又叫心智图，是表达发射性思维的有效的图形思维工具，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接，思维导图充分运用左右脑的机能，利用记忆、阅读、思维的规律，协助人们在科学与艺术、逻辑与想象之间平衡发展，从而开启人类大脑的无限潜能。思维导图因此具有...

2016-04-11 21:06:00 95

空空如也

空空如也