2017年10月_小熊代码加

12月 11月 10月

转载 Vue 2.0 的 virtual-dom 实现简析

Vue版本: 2.3.2virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现，virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题，vdom很好的将dom做了一层映射关系，进而将在我们本需要直接进行dom的一系列操作，映射到了操作vdom，而vdom上定义了关于真实dom的一些关键的信息，vdom完全是

2017-10-31 16:52:12 565

转载前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。Q1 判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒

2017-10-31 16:50:19 1029

转载 jQuery返回顶部插件-toTop

简介jQuery.toTop 是一款轻量级的 jQuery 返回顶部插件，压缩后不到 1KB。同时它也是可定制的，你可以设置是否自动隐藏、滚动时间、位置等等。在线演示及下载在线演示本地下载使用方法引入文件scriptsrc="jsjquery.min.js">script>scriptsrc="

2017-10-31 16:49:27 2447

转载延迟加载(Lazyload)三种实现方式

定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。那么延迟加载有什么好

2017-10-31 16:47:45 2046

转载编写现代CSS代码的建议

本文翻译自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。本文归纳于笔者的Web 前端入门与最佳实践中CSS入门与最佳实践系列，其他的关于CSS样式指南的还有提升你的CSS姿势、Facebook里是怎样提升CSS代码质量的。本文更偏向于样式使用技巧，前两篇偏向于代码风格与规范。明白何谓Margin Collaps

2017-10-31 16:45:52 380

转载 vue-cli#2.0 webpack 配置分析

前言作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接访问 vue-cli 查看目录结构.├── README.md├

2017-10-31 16:44:35 306

转载 Vue.js异步更新DOM策略及nextTick

操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样： <div ref="test">{{test}} <button @click="handleClick">tet exportdefault{ data

2017-10-31 16:42:54 1098

转载 BetterScroll：在移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。由于它基于原生 JavaScript

2017-10-31 16:41:19 2554

转载举例说明了十大ES6功能

翻译自Top 10 ES6 features by example虽然ES6规范不是最近才发布，但我认为很多开发人员仍然不太熟悉。主要原因是在规范发布之后，Web浏览器的支持可能很差。目前，规范发布已经超过2年了，现在很多浏览器对ES6支持良好。即使您（或您的客户）不使用最新版本的Web浏览器，也可以使用转换器（如Babel），在应用程序的构建过程中将ES6转换为ES5。这

2017-10-31 16:38:34 362

转载企业级前端组件库方案

组件库是前端大规模开发中提升效率的重要一环，同时也是可视化页面搭建、自动化测试等上层建筑的基石。因此设计时要考虑的问题涵盖面非常广。要设计好非常难，但是设计好之后从上层建筑带来的回报会超过你的想象。这篇文章中我们先一起来关注和探讨组件库要解决的问题，最后会推导出一套足够灵活——适用于大团队或社区使用，又足够强大——能支撑起上层建筑的组件库方案。也请读者注意，结论其实很简单，文中思考过程才是

2017-10-31 16:36:15 1774

转载 Javascript模块化编程（三）：require.js的用法

作者：阮一峰这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。

2017-10-30 14:00:56 146

转载 Javascript模块化编程（二）：AMD规范

作者：阮一峰这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。（接上文）七、模块的规范先想一想，为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套

2017-10-30 14:00:08 135

转载 Javascript模块化编程（一）：模块的写法

作者：阮一峰网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"

2017-10-30 13:55:24 158

转载强类型 JavaScript 的解决方案

作者：阮一峰JavaScript 是一种弱类型（或称动态类型）语言，即变量的类型是不确定的。x = 5; // 5x = x + 'A'; // '5A'上面代码中，变量x起先是一个数值，后来是一个字符串，类型完全由当前的值决定，这就叫弱类型。弱类型的好处是十分灵活，可以写出非常简洁的代码。但是，对于大型项目来说，强类型更有利，可以降低系统的复杂

2017-10-30 13:52:42 301

转载 async 函数的含义和用法

作者：阮一峰本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法一、终极解决异步操作是 JavaScript 编程的麻烦事，麻烦到一直有人提出各种各样的方案，试图解决这个问题。从最早的回调

2017-10-30 13:51:06 1271

转载 require() 源码解读

require() 源码解读作者：阮一峰2009年，Node.js 项目诞生，所有模块一律为 CommonJS 格式。时至今日，Node.js 的模块仓库 npmjs.com ，已经存放了15万个模块，其中绝大部分都是 CommonJS 格式。这种格式的核心就是 require 语句，模块通过它加载。学习 Node.js ，

2017-10-30 13:49:08 214

转载浏览器加载 CommonJS 模块的原理与实现

作者：阮一峰就在这个周末，npm 超过了 cpan ，成为地球上最大的软件模块仓库。npm 的模块都是 JavaScript 语言写的，但浏览器用不了，因为不支持 CommonJS 格式。要想让浏览器用上这些模块，必须转换格式。本文介绍浏览器加载 CommonJS 的原理，并且给出一种非常简单的实现。一、原理浏览器不兼容CommonJS的根

2017-10-30 13:33:14 601 1

转载 Node.js 命令行程序开发教程

作者：阮一峰一种编程语言是否易用，很大程度上，取决于开发命令行程序的能力。Node.js 作为目前最热门的开发工具之一，怎样使用它开发命令行程序，是 Web 开发者应该掌握的技能。最近，Npm的网志有一组系列文章，我觉得写得非常好。下面就是我在它的基础上扩展的教程，应该是目前最好的解决方案了。一、可执行脚本我们从最简单的讲起。首先，

2017-10-30 13:31:35 338

转载读懂 ECMAScript 规格

作者：阮一峰一、概述规格文件（specification）是计算机语言的官方标准，详细描述语法规则和实现方法。一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的

2017-10-30 13:30:19 266

转载 Flux 架构入门教程

作者：阮一峰过去一年中，前端技术大发展，最耀眼的明星就是React。React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上，使用 Flux 组织代码和安排内部逻辑，使得你的应用更易于开发和维护

2017-10-30 13:28:37 205

转载跨域资源共享 CORS 详解

作者：阮一峰CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个COR

2017-10-30 13:19:52 160

转载浏览器加载 CommonJS 模块的原理与实现

作者：阮一峰日期： 2015年5月23日就在这个周末，npm 超过了 cpan ，成为地球上最大的软件模块仓库。npm 的模块都是 JavaScript 语言写的，但浏览器用不了，因为不支持 CommonJS 格式。要想让浏览器用上这些模块，必须转换格式。本文介绍浏览器加载 CommonJS 的原理，并且给出一种非常简单的实现。一、原理

2017-10-26 11:02:36 802

转载网页性能管理详解

作者：阮一峰日期： 2015年9月17日你遇到过性能很差的网页吗？这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，那么怎样才能提高性能呢？本文将详细介绍性能问题的出现原因，以及解决方法。一

2017-10-26 10:51:06 147

转载 Flex 布局教程：语法篇作者：阮一峰

Flex 布局教程：语法篇网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式

2017-10-20 09:47:14 611

转载 QD价值体现?

为简化用户使用提供技术支持（交互部分）为多个浏览器兼容性提供支持为提高用户浏览速度（浏览器性能）提供支持为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持为展示数据提供支持（数据接口）

2017-10-18 09:51:30 113

转载性能优化问题？

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。请求带宽：压缩文件，开启GZIP，代码层面的优化用hash-table来优化查找少用全局

2017-10-18 09:49:58 211

转载移动端性能优化？

尽量使用css3动画，开启硬件加速。适当使用touch事件代替click事件。避免使用css3渐变阴影效果。可以用transform: translateZ(0)来开启硬件加速。不滥用Float。Float在渲染时计算量比较大，尽量减少使用不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。合理使用requestAnimationFrame动画代替set

2017-10-18 09:48:21 239

转载 Expires和Cache-Control？

Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。如果max-age和Expires同时出现，则max-age有更高的优先级。 Cache-Control: no-cache, private, max-age=0 ETag: abcde Expires: Thu, 15 Apr 2014 20:

2017-10-18 09:47:24 1046

转载 ETag应用？

Etag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能如下：====第一次请求===1.客户端发起 HTTP GET 请求一个文件；2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840")(假设服

2017-10-18 09:46:36 235

转载快速排序的思想并实现一个快排？

"快速排序"的思想很简单，整个排序过程只需要三步：　　（1）在数据集之中，找一个基准点　　（2）建立两个数组，分别存储左边和右边的数组　　（3）利用递归进行下次比较 function quickSort(arr){ if(arr.length return arr;//如果数组只有一个数，就直接返

2017-10-18 09:44:24 499

转载 jQuery或zepto源码有哪些写的好的地方？

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。 (function( window,

2017-10-18 09:43:18 472

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。

2017-10-18 09:42:45 454

转载 js继承方式及其优缺点？

原型链继承的缺点一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。借用构造函数（类式继承）借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承组合式继承组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构

2017-10-18 09:41:56 439

转载 Http2.0你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。HTTP/2提供更多的加密支持HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

2017-10-18 09:40:40 393

转载渐进增强和优雅降级？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

2017-10-14 00:31:39 339

转载创建ajax过程？

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象. (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息. (3)设置响应`HTTP`请求状态变化的函数. (4)发送`HTTP`请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新. var

2017-10-14 00:30:37 581

转载你对作用域链的理解？

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

2017-10-14 00:29:52 967

转载 TCP和UDP的区别？

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可

2017-10-14 00:29:04 155

转载说说TCP传输的三次握手四次挥手策略？

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。若在握手

2017-10-14 00:28:18 1163

转载你对webpack的看法

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。webpa

2017-10-14 00:25:59 1461