06 2017 档案
摘要：前言 在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Orientation 这个参数并不
阅读全文
摘要：阅读目录 一、问题追踪 二、效果预览 三、源码解析 1、源码各个方法解释 2、对于上述抛出的ie和谷歌的兼容性问题的解析 3、项目中的使用 4、扩展 四、总结 阅读目录 一、问题追踪 二、效果预览 三、源码解析 1、源码各个方法解释 2、对于上述抛出的ie和谷歌的兼容性问题的解析 3、项目中的使用
阅读全文
摘要：在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1、float的值不是none。2
阅读全文
摘要：你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。 CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个
阅读全文
摘要：1. 讲个笑话 JavaScript 是一门编程语言 2. 异步编程 JavaScript 由于某种原因是被设计为单线程的，同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程，这也就需要线程不能进行阻塞。 所以在后续的发展过程中基本都采用异步非阻塞的编程模式。 简单来说，异步编程
阅读全文
摘要：开发产品功能的时候ui往往会给出虚线边框的效果图，于是乎，我们往往第一时间想到的是用css里的border，可是border里一般就提供两种效果，dashed或者dotted，ui这时就不满意了，说虚线太密了。废话不多说，下面直接给解决方案（参考css揭秘）： 基本效果如下：
阅读全文
摘要：索引 现代前端框架都引入了数据的响应式系统：模型层（Model）只是普通的 JavaScript 对象，修改它则自动更新视图（View），这让状态管理简单而直观。 Vue、Meteor Tracker、Mobx 中的数据响应式系统原理基本相同，本文将对其进行解析，并从零开始一步步实现一个与框架解耦的
阅读全文
摘要：本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://github.com/AmosXu/red-packet-rain 1. 效果展示 图片依次是倒计时页
阅读全文
摘要：开始我们需要先了解什么是calc() ，calc()是一个CSS函数，你可以使用calc()给元素的margin、pading、width等属性设置 而且你还可以在一个calc()内部嵌套另一个calc() clac()的语法就非常简单了 ， 使用数学表达式来表示： expression 一个数学表
阅读全文
摘要：前言 本文代码浅显易懂，思想深入实用。此属于react进阶用法，如果你还不了解react，建议从文档开始看起。 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法，只不过传入的参数变成了react组件，并返回一个新的组件. A higher-order component is a functi
阅读全文
摘要：在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型 节点类型：元素 1 ，属性 2 ，文本 3 ，注释 8，文档 9。 一、添加和删除节点（HTML
阅读全文
摘要：一直恐惧读源码，哪怕是一个简单的库也是读百来行遇到难点就放弃了。对于新的东西也仅仅是知道它拿来干什么，社区资源在哪里，要用时就突击文档资源使用即可。未有过深入之心，亦或者有过深入之心两三天就废掉。 这两日安静下来思考，觉得自己毛病不少，却还是不甘于平庸。那么只能选择面对自己做出改变，越是恐惧，越是应
阅读全文
摘要：效果图 communication.gif communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 需要注意，_number 可以为普通参数、this.xxx 参数、也可以是 this.state.xxx 参数，其中this.state.xxx参数若
阅读全文
摘要：感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟： linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并
阅读全文
摘要：闲扯两句 最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标签数量较多时操作a标签导致性能问题，于是svg就成了一个不错的选择。 标签初始化 这里实现的核心主要是参考了前面的那篇
阅读全文
摘要：H5JS二维动画制作！two.js的基本操作class2 上一节我们讲到如何创建图形与建立组，这节我们具体讲解如何构建动画效果 var elem = document.getElementById('draw-animation'); var two = new Two({ width: 285,
阅读全文
摘要：概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is component)。 V4汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用react，那么一定
阅读全文
摘要：写在最前 在平时的前端开发中我们经常会遇到这种操作。明明我代码更新了，咋刷出来还是以前的呢？是不是缓存了？快清下缓存看看！你看页面是304，怪不得没更新！等等很多情况。作者起初也不是很了解，因为这个不由前端来控制，都是后端的操作。故这次使用node也来写一个控制缓存的服务来真正搞明白这里的道道。欢迎
阅读全文
摘要：6月20号webpack推出了3.0版本，官方也发布了公告。根据公告介绍，webpack团队将未来版本的改动聚焦在社区提出的功能需求，同时将保持一个快速、稳定的发布节奏。本文主要依据公告内容，简单介绍一下webpack3的新特性，以及在实际项目中的应用。 升级到webpack3 升级到webpack
阅读全文
摘要：背景 用过Vue Router的童鞋应该对路由传参的方式多多少少有些印象，Vue Router支持两种传参方式：query与params；其中query方式就是动态地在路由url后面追加参数，就是http的get请求方式；那Vue Router与location的search和hash有什么关系呢？
阅读全文
摘要：Q 问: 现在有一个容器，其中放有两个div，HTML和CSS代码如下所示。我们需要这两个div并排在一行，并使左边的div宽度确定， 右边的div宽度能够自适应剩余的容器宽度 。请写出你能想到的所有可能。 @-v-@ <div class="cont"> <div class="left-item
阅读全文
摘要：Dropdown.js 前言 在SPA(Single Page Application)盛行的时代，jQuery插件的轮子正在减少，由于我厂有需求而开发了这个插件。如果觉得本文对您有帮助，请给个赞,以表对我的鼓励和支持。(๑•ᴗ•๑)如果觉得有什么问题，可以到 Github 提Issue，欢迎大家提
阅读全文
摘要：最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没
阅读全文
摘要：react-router v4 是完全重写的，所以没有简单的迁移方式，这份指南将为您提供一些步骤，以帮助您了解如何升级应用程序。 注意: 这份迁移指南适用于react-router v2和v3，但为简洁起见，对以前版本的引用仅提及v3。 The Router Routes 路由嵌套 on* 属性 S
阅读全文
摘要：通信方式1（单向绑定）： Props down, Events up （建议使用） Props down, Events up 是指 使用props向子组件传递数据，父组件属性发生变化时，子组件可实时更新视图；子组件发生变化，可以使用$emit发送事件消息，以此向父组件传递变化消息。 props 是
阅读全文
摘要：DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象。 其次，看到的是网页文档的内容，即document文档。 首先看一下w3c提供的docu
阅读全文
摘要：导语 web缓存是web开发逃不开的一个话题，在减少网络带宽消耗、降低服务器压力和提高页面打开速度方面有广泛应用。本文从实际web应用项目中缓存相关问题出发，较为全面地分析了html5缓存机制的原理与应用以及移动端应用webView对html5缓存机制的支持方式，以供web开发的同学们参考。 正文
阅读全文
摘要：vue有着完整的组件化开发机制，但是官网只给了开发的方式，对于开发规范以及组件化开发的最佳实践，还需要我们来摸索。本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题。 边界把握 边界把握其实很好理解。在模块化编程中，我们通常要定义好一个模块的功能边界，做什么，不做什么，从外部接收什么，
阅读全文
摘要：开车之前，先介绍一些npm的命令： ：D进入D盘 mkdir webapp 创建webapp文件夹 cd webapp 进入webapp文件夹 mkdir webapp && cd webapp 以上两步创建和进入文件夹可以合并为一步 npm init -y 快速生成package.json文件 n
阅读全文
摘要：什么是面向对象编程（OOP）？用对象的思想去写代码，就是面向对象编程。 面向对象编程的特点 抽象：抓住核心问题 封装：只能通过对象来访问方法 继承：从已有对象上继承出新的对象 多态：多对象的不同形态 对象的组成 属性：对象下面的变量叫做对象的属性 方法：对象下面的函数叫做对象的方法 var arr
阅读全文
摘要：此文主要对使用可视化图表对 Webpack 2 的编译与打包进行统计分析进行了详细地讲解，供您更加直观地参考。 在之前更新的共十七章节中，我们陆续讲解了 Webpack 2 从配置到打包、压缩优化到调试状态等情况都进行了详细地讲解，在这一小节，我们通过可视化的图表对 Webpack 2 的打包编译过
阅读全文
摘要：之前看一个美女写的：elememtui(有关权限的那些事) 小颖也想试试怎么根据不同的用户，给不同的访问菜单权限，昨天下午小颖试了好久，都没弄好，用户刚登陆进去菜单栏是好的，但是当页面一刷新，左侧的菜单就不见了，但当小颖点击了别的地方后，左侧的菜单栏又能出来了，阿西吧擦，昨天折腾了小颖一下午，在下班
阅读全文
摘要：刚开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以让我们快速起飞。 接下来我们就聊聊ES6那些可爱的新特性吧。 1.变量声明const和let 我们都是知道在ES6以前，va
阅读全文
摘要：正则表达式之前学习的时候，因为很久没怎么用，或者用的时候直接找网上现成的，所以都基本忘的差不多了。所以这篇文章即是笔记，也让自己再重新学习一遍正则表达式。 其实平时在操作一些字符串的时候，用正则的机会还是挺多的，之前没怎么重视正则，这是一个错误。写完这篇文章后，发觉工作中很多地方都可以用到正则，而且
阅读全文
摘要：Promise 对象 转载：http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象。所谓 Promise 对象，就是代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 A
阅读全文
摘要：http://www.cnblogs.com/coco1s/p/6992177.html CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside sha
阅读全文
摘要：组件是Vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明，于是自己试着进行了实现。先看下简单的通信效果： 就是点
阅读全文
摘要：setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不
阅读全文
摘要：现在网上抄的沸沸扬扬的VUE看来是个很NB的东西啊，看了一下，确实相对于angular1来说简化了不少东西，性能方面也比angular1要好很多，所以现在用的人越来越多了，于是作为前端，学习一下新东西不至于被淘汰那是必须的~在网上看了一下，感觉还不错，打算用它写个单页面应用。于是……坑就跟着来了……
阅读全文
摘要：1.数组循环遍历方法 javascript传统的数组遍历有for循环，while循环，以及for-in。本篇文章要比较的是以下几种循环遍历方法： 2.代码： 3.实验步骤 实验环境 ,操作系统 windows server 2016, node 8.0，cpu E5-1630 v3 @ 3.7GHz
阅读全文
摘要：本文将一步步介绍如何使用React或anu创建 一个弹出层。 React时代，代码都是要经过编译的，我们很多时间都耗在babel与webpack上。因此本文也介绍如何玩webpack与babel。 我们创建一个ui目录，里面添加一个package.json。内容如下，里面已经是尽量减少babel插件
阅读全文
摘要：网站是毕业设计的作品，开发这个网站的目的主要用于记录一些笔记，以及聚合一些资讯信息，也算自己在网络世界中的一块静地吧，可以在这里一些技术上想法的实践。 网站最初前端使用vue开发，在前段时间由于项目的开发进度已经不是那么紧急，有了一些空闲时间。而对没有使用过React又一直耿耿于怀，索性就使用Rea
阅读全文
摘要：都说Vue2简单，上手容易，但小马过河，自己试了才晓得，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前随便拿全局变量和修改dom的锤子不能用了，变换到关注数据本身。vue的官方文档还是不错的，由浅到深，但是当你用vue-cli构建一个工程的时候，发现官方文档还是不够用，得
阅读全文
摘要：js创建对象的多种方式及优缺点 在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染。所以最好的方式就是存储到对象中。下面能我就给大家介绍几种创建对象的方式,并且给大家说一下他们的优缺点 方式一:对
阅读全文
摘要：webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。 webpack原理 在深入实战前先要知道webpack的运行原理
阅读全文
摘要：anu, 读作［安努］，原意为苏美尔的主神。 anu是我继avalon之后又一个新框架（github仓库为https://github.com/RubyLouvre/anu, 欢迎加星与试用） 此框架的创立之意有三： 提升性能， 虽然React的性能相对于传统的MVVM框架是很厉害了，但近几年冒出来
阅读全文
摘要：单 大家对命令菜单(Command Menu)应该都不陌生。目前主流的编辑器中都内置了对该功能的支持。在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ctrl + Shift + P 呼出命令菜单（在 Mac 上是 Cmd + Shift + P）。 在
阅读全文
摘要：我们知道的，常见的数据绑定的实现方法 1、数据劫持(vue)：通过Object.defineProperty() 去劫持数据每个属性对应的getter和setter2、脏值检测(angular)：通过特定事件比如input，change，xhr请求等进行脏值检测。3、发布-订阅模式(backbone
阅读全文
摘要：作者注：[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的，代码来自于2015年12月。但是，它仍能针对下面几个问题深入探讨： vuex 是 vue.js 作者开发的一个原型库，它帮助你创建更大、维护性更强的应用，类似于 Facebook 的 flux 库（以及由社区维
阅读全文
摘要：RxJS 简介：可观察对象、观察者与操作符 对于响应式编程来说，RxJS 是一个不可思议的工具。今天我们将深入探讨什么是 Observable（可观察对象）和 observer（观察者），然后了解如何创建自己的 operator（操作符）。 如果你之前用过 RxJS，想了解它的内部工作原理，以及 O
阅读全文
摘要：CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。CreateJS主要包含如下四个类库： EaselJS – 简化处理HTML5画布（核心） TweenJS – 用来帮助调整HTML5和Javasc
阅读全文
摘要：omi-cli omi-cli omi-cli命令 omi框架 用户指南 文件目录 npm 脚本 npm start npm run dist 代码分割 兼容 IE8 插入 CSS 插入组件局部 CSS 局部CSS使用图片 插入 Less 插入组件局部 Less 导入组件 导入图片、字体、SVG 等
阅读全文
摘要：var Toast = {}; //避免重复install，设立flag Toast.installed = false; Toast.install = function(Vue, options) { if(Toast.installed) return; let opt = { // 默认显示位置 defaultType: "center", // 默认...
阅读全文
摘要：vuex是解决vue组件和组件间相互通信而存在的，vuex理解起来稍微复杂，但一旦看懂则即为好用： 安装： 引入 vuex的几个参数的介绍 State 储存初始化数据 Getters 对State 里面的数据二次处理（对数据进行过滤类似filter的作用）比如State返回的为一个对象，我们想取对象
阅读全文
摘要：这篇依然是跟 dom 相关的方法，侧重点是操作 dom 的方法。 读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.ea
阅读全文
摘要：总结一下最近用react写项目时，遇到的一些坑，恩，真的还蛮坑的，主要是设置状态的时候特别不好控制，下面我们一起来看下，这里自己做了几个demo，分别看下， 主页面代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
阅读全文
摘要：打包工具的角色 所谓打包工具在web开发中主要解决的问题是： （1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。 （2）资源加载管理。web本质就是html、js和css的文件组合，文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）也是打包工具重点要解
阅读全文
摘要：前言 ES6是即将到来的新版本JavaScript语言的标准，他给我们带来了更“甜”的语法糖（一种语法，使得语言更容易理解和更具有可读性，也让我们编写代码更加简单快捷），如箭头函数（=>）、class等等。用一句话来说就是： ES6给我们提供了许多的新语法和代码特性来提高javascript的体验
阅读全文
摘要：这是昨天对一个新来有两月妹纸的一个小测试，总体来说都很简单常规，但结果有点儿不理想，今天把它总结总结记下来。12个常规面试题，包含了html,css,javascript的基础知识 1.简述一下你对HTML语义化的理解？并写出一段语义化的HTML？ 语义化是指根据内容的结构化（内容语义化），选择合适
阅读全文
摘要：扩展运算符格式扩展运算符格式很简单，就是三个点(...) 扩展运算符作用？？？扩展运算符允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。 下面开始通过四个例子来深刻理解扩展运算符 在上例中，没有使用扩展运算符。middle作为数组放入另一
阅读全文
