2017年11月_小熊代码加

12月 11月 10月

转载关于Promise：你可能不知道的6件事

Promise 是一个非常简单的概念，即使你没有机会使用 Promise，你也可能阅读过一些关于 Promise 的文章。Promise 的价值在于使得异步代码以一个更可读的风格结构化，而不是因异步函数嵌套显得混乱不堪。这篇文章会接触到 6 个你可能不知道的关于 Promise 的事。开始列举之前，先看看怎么创建 Promise：varp =

2017-11-28 14:52:17 1387 1

转载从零搭建 vue2 vue-router2 webpack3 工程

以新手视角，详细介绍各个步骤内容，不深入讲步骤涉及的原理，主要介绍如何操作。本文示例工程 GitHub：https://github.com/qinshenxue/vue2-vue-router2-webpack22017-09-30 升级了 Vue（2.4.4）和 Webpack（3.6.0），github 项目已更新。2017-11-02 修复了 babel 配置为”pre

2017-11-22 11:01:09 529

转载 Vue2 几种常见开局方式

Vue2 加了reader选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件) <div id="app"> <img src="./assets/log

2017-11-22 10:59:19 220

转载实现一个 Swiper

设计一个五图的 Swiper，设计稿如下：Swiper 的功能如下：1.左右切换2.无限轮播3.任意图片数接下来，详细介绍这三个功能的实现过程：左右切换这里指触发左右切换的手指交互，目前主要是以下两种：方案示意图手指拖拽手势判断手指拖拽容易有性能问

2017-11-22 10:58:01 3805

转载懒加载和预加载

懒加载什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。为什么要使用懒加载？很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片

2017-11-22 10:51:30 188

转载移动端常用alert、confirm、toast等弹窗插件，兼容 jQueryZepto

移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。特性支持常见的 alert、confirm、toast、notice 四种类型弹窗可选择使用 IOS 或者 Material Design 风格的弹窗可自定义按钮的文字、样式、回调函数，支持多个按钮多个弹窗状态改变回调函数

2017-11-22 10:49:29 17286 2

转载 HTML5 高级系列：web Storage

前言HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时

2017-11-22 10:48:13 159

转载 HTML5 进阶系列：拖放 API 实现拖放排序

前言HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属

2017-11-22 10:46:42 254

转载 HTML5 进阶系列：文件上传下载

前言HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。FileList 对象和 file 对象HTML 中的 input[type=”file”] 标签有个 multiple 属性，允许用户

2017-11-22 10:45:32 1071

原创面试技巧

面试对基础比较看重，然后需要你有两三个比较好的项目，一面重视面试者对前端基础的把握，还要手写代码，不过不难，二面部门的leader面，这一面比较难，面试官会对你的项目细节进行深挖，所以说项目要牛逼一点，最后还会有一道逻辑题，三面是HR面，如果你想进大公司的话，下面这些技术是肯定要掌握的：html5，css3，JavaScript，略懂一点jQuery源码，Node.

2017-11-16 02:22:44 222

转载 Vue.js插件开发

Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局组件，到为应用添加一些额外的功能、如路由(Vue Router)，存储在应用程序里的不可变数据(Vuex)。一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：Vue 构造器和一个可选的选项对象。尽管，插件系统看起来十分简单，但其仍然可以产生相

2017-11-11 13:14:33 612

转载如何在 Vue.js 中使用第三方库

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.本文将介绍一些在 Vue

2017-11-11 13:13:30 2462

转载 Bootstrap组件福利篇：几款好用的组件推荐

正文前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有

2017-11-11 13:12:14 5489 1

转载如何通过 Vue＋Webpack 来做通用的前端组件化架构设计

目前如果要说比较流行的前端架构哪家强，屈指可数：reactjs、angularjs、emberjs、avalonjs、vuejs。我个人接触使用过：avalonjs、angularjs、vuejs。因为工作以及前端团队能力的问题，所以在不同的公司，在开发工作中选用了不同的前端架构。以下仅仅是代表我个人选用架构的一些看法和理由，如下：angular:我觉得angularjs的

2017-11-11 13:11:01 3344

转载浅析前端开发中的 MVC/MVP/MVVM 模式

MVC，MVP和MVVM都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。要了解MVC、MVP和MVVM，就要知道它们的相同点和不同点。不同部分是C(Controller)、P(Presenter)、VM(

2017-11-11 13:10:25 277

转载 Vuejs技术栈从CLI到打包上线实战全解析

前言本文是自己vue项目实践中的一些总结，针对Vue2及相关技术栈，实践中版本为2.3.3。开发前须知vue-cli在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读英文文档，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。一般来说我们都是先利用vu

2017-11-11 13:09:19 405

转载为 webApp 提供转场特效的开源 Vue 插件

VUEG为vue-router添加转场效果，只需要Vue.use(vueg)，即可获得转场效果，并能够根据url深度(/)和历史记录判断是前进和后退。效果图live demo | GitHub项目实战效果：使用方法0、安装npm i vueg -G1、引入插件

2017-11-11 13:08:00 3845

转载 Git常用命令大全，迅速提升你的Git水平

初始化本地git仓库（创建新仓库）git init 配置用户名git config --global user.name "xxx" 配置邮件git config --global user.email "

2017-11-11 13:05:33 266

转载 VueJS 开发常见问题集锦

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。主要写一些官方手册上没有写，但是实际开发中会遇到的问题，需要一定知识基础。涉及技术栈CLI: Vue-CLIUI: ElementHTML: Pug(Jade)CSS: LessJavaScript: ES6polyfill 与 transform-

2017-11-11 13:04:46 1226

转载 Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是

2017-11-11 13:01:27 235

转载 vue.js 组件之间传递数据

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。组件组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。父子组件父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

2017-11-10 23:55:04 399

转载 VUE实现一个分页组件

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。在已知每页显示数据量pageS

2017-11-10 23:54:18 2099

转载如何写出漂亮的React组件

本文翻译自Make-Your-React-Components-Pretty。欢迎转载，注明出处。本文从属于笔者的Web前端入门与最佳实践中的React入门与最佳实践系列，同类型文章还包括React 代码风格约定。在Walmart Labs的产品开发中，我们进行了大量的Code Review工作，这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我

2017-11-10 23:52:51 687 2

转载 vue-router源码分析-整体流程

在现在单页应用这么火爆的年代，路由已经成为了我们开发应用必不可少的利器；而纵观各大框架，都会有对应的强大路由支持。Vue.js 因其性能、通用、易用、体积、学习成本低等特点已经成为了广大前端们的新宠，而其对应的路由 vue-router 也是设计的简单好用，功能强大。本文就从源码来分析下 Vue.js 官方路由 vue-router 的整体流程。本文主要以 vue-router 的

2017-11-10 23:52:08 441

转载 VirtualDOM与diff(Vue实现)

VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但

2017-11-10 23:51:09 665

转载 Vue2原理浅谈

本文重点讲述Vue2渲染的整体流程，包括数据响应的实现（双向绑定）、模板编译、virtual dom原理等，希望读者看完有所收获。前言此部分内容初步介绍前端主流框架部分特点，来提高大家对框架的认识，从而最后导出对vue2原理的整体介绍参考尤雨溪的live 不吹不黑聊聊前端框架有兴趣的同学可以听听现代主流框架均使用一种数据=>视图的方式，隐藏了繁琐的dom操作

2017-11-10 23:48:45 11263

转载界面之下：还原真实的MV*模式

前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这方面的讨论比较杂乱，各种MV模式之间的区别分不清，甚至有些描述都是错误的。本文追根溯源，从最经典的Smalltalk-80 MVC模式开始逐步还原图形界面之下最真实的MV模式。GUI程序所面临的问题图形界面的应用

2017-11-10 23:46:39 349

转载浏览器兼容性问题解决方案 · 总结

普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。Normalize.css不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.

2017-11-10 23:45:29 604

转载精通 gulp 常用插件的功能和用法

匹配符 *、**、！、{}gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js

2017-11-10 12:18:34 368

转载【vuejs路由】vuejs 路由基础入门实战操作详细指南

官方文档https://router.vuejs.org/zh-cn/用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。hash

2017-11-10 12:17:56 377

转载如何在vue里面优雅的解决跨域，路由冲突问题

当我们在路由里面配置成以下代理可以解决跨域问题proxyTable: { '/goods/*': { target:'http://localhost:3000' }, '/users/*': {

2017-11-09 14:38:49 2049

转载 Flexbox 实战：使用 Flexbox 轻松实现下拉导航菜单

CSS3弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。浏览器对Flexbox的支持越来越好。使用它可以轻松实现一些复杂的UI用户界面，不需要任何的CSS或

2017-11-09 14:37:55 1840

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

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

2017-11-09 14:36:41 461

转载移动端日期选择组件

移动端日期选择组件，压缩后只有几KBUsageimport： import Picker from 'picker.min.js' @import"picker.css" 直接引入： <link href="picker.css"rel="stylesheet">

2017-11-09 14:35:03 3796

转载图像延迟加载库Echo.js

简介和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。在线演示及下载在线演示本地下载兼容性Echo.js 使用

2017-11-09 14:34:10 243

转载移动端效果之Picker

写在前面接着前面的移动端效果的研究，这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里：github核心解析基本HTML结构<!-- 说明： 1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉 2. 类 picker-sl

2017-11-09 14:32:40 1827

转载 SVG 快速入门

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。如何书写<svg x="0px"y="0px"

2017-11-09 14:31:01 4394

转载函数中的this的四种绑定形式

正文javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this一谈到this，很多让人晕晕乎乎的抽象概念就跑出来了，这里我就只说最核心的一点——函数中的this总指向调用它的对象，接下来的故事都将围绕这一点展开（提醒前排的筒子们准备好茶水和西瓜，我要开始讲故事啦！！）【故事】有一个年轻人叫”迪斯”（thi

2017-11-09 14:29:17 6884 1

转载 Vue.js响应式原理

关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持E8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个se

2017-11-09 14:27:39 544

转载 jsonp原理详解

什么是JSONP？先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，着用自己的方式来阐释一下这个问题，看看是否有帮助。1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现

2017-11-09 14:26:58 287