2016年12月_旗smile

原创 HTTP图解

本节内容俗话说好的开发，底层知识必须过硬，不然再创新的技术，你也理解不深入，比如python web开发工程师，想要学习任何一个框架，底层都是http和socket，底层抓牢了，学起来会很轻松，所以楼主今天特意写了一篇底层的博客，来源于《HTTP图解》这本书。下载内容在本节末尾，可以自行前去下载观看，比我个人了解得多要全面很多，不过不要忘记点赞哈！！本文只要内容：了解web及网络基础简单的ht

2016-12-30 10:15:02 8783

转载 Vue + Webpack + Vue-loader 功能介绍

Vue-loader 是什么？vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。vue-loader 提供了一些非常酷炫的特性：ES2015默认可用；在每个 Vue 组件内支持其他的 Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。把 <style> 和 <template> 内引用的静态资源作为

2016-12-28 16:58:13 10860

原创探索setTimeout

其实说起JavaScript中的定时器(Timer)中的 setTimeout() 方法，从事开发的同学想必都不会陌生，觉得这些东西很简单很基础。但是有时候恰恰是基础简单的东西，才越容易被忽略。先看一段代码：console.log("start");setTimeout(function(){ console.log("world")},200);setTimeout(function()

2016-12-27 17:22:28 6658

原创前端必会的html知识总结整理

1.浏览器内核ie：trident（三叉戟）内核firefox：gecko（壁虎）内核safari：webkit（浏览器核心）内核opera：以前是presto（急速）内核，现在是和谷歌共同开发的blink（闪烁）内核chrome：blink（基于webkit，谷歌和opera software共同开发）附：浏览器内核的理解浏览器内核分为两部分：渲染引擎和js引擎渲染引擎：负责取得网页

2016-12-27 11:33:58 6431

原创 npm介绍与cnpm介绍

npm介绍说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev] <name>：node插件名称。例：npm install gulp-less --save-dev-g：全局安装。将会安装在C:\Us

2016-12-26 14:13:31 5402

原创 30分钟掌握ES6/ES2015核心内容

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了…在我们正式讲解ES6语

2016-12-23 16:40:18 7028

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewMo

2016-12-22 12:38:07 8644

原创常用 Git 命令清单

git作为常用的版本控制工具，多了解一些命令，将能省去很多时间，下面这张图是比较好的一张，贴出了看一下：关于git，首先需要了解几个名词，如下：Workspace //工作区Index / Stage //暂存区Repository //仓库区（或本地仓库）Remote //远程仓一、新建代码库// 在当前目录新建一个

2016-12-19 16:28:21 7187 2

原创 canvas动画之三 -- 黑客帝国文字掉落效果

今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图其实效果也是比较好实现的，只要计算出每个文字该出现的地方，然后绘制文字就可以了。下面就来说具体的实现方法吧。首先，新建页面写上canvas标签，在js中获取到并设置高宽：<canvas id="canvas"></canvas><script> var canvas = document.getElementById("canvas

2016-12-19 11:19:18 7600 1

翻译在 2017 年将会更加流行的 6 个 Web 开发趋势

原文： https://dzone.com/articles/the-6-web-dev-trends-youre-going-to-see-more-of-in每到年底，人们总喜欢展望下一年，Web 开发领域也不例外。在 Web 开发领域，技术革新的速度堪比光速，未来总是超乎我们的想象，我们只能尽自己所能做一些合理的预测。以下是我们需要关注的一些趋势：1.更加移动优先响应式设计显然是目前 web

2016-12-16 10:19:25 5647 1

原创 JavaScript 变量提升

回归基础: JavaScript 变量提升（Hoisting）变量声明是所有的编程语言中最基础部分之一。然而，JavaScript 有一个怪异点，称之为变量提升（hositing），这个能够让一个看上去无关紧要的声明变成一个小bug。这篇文章解释了变量提升（hositing）是什么，以及你该如何避免这个大坑。JavaScript 是特别灵活的语言，几乎允许你在任何地方声明变量。比如，下方的立即执行函

2016-12-15 09:49:33 4428

原创 canvas动画之二 -- 创建动态粒子网格动画

最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧：首先当然是添加一个canvas了：<canvas id="canvas"></canvas>下面是样式：<style> #canvas{ position: absolute;

2016-12-13 11:50:20 15487 4

转载五个典型的JavaScript面试题

本文转载自：众成翻译译者：cherryvenus 链接：http://www.zcfy.cc/article/1960 原文：https://www.sitepoint.com/5-typical-javascript-interview-exercises/在IT界，需要大量的javascript开发者。如果这个角色能够最佳地展现你的能力，那么你有许多机会换家公司，以及提高薪

2016-12-12 09:39:30 5565 1

转载为什么要使用Node.js

Node.js是什么传统意义上的Jvascript运行在浏览器上，这是因为浏览器内核实际上分为两个部分：渲染引擎和Javascript引擎。前者负责渲染HTML+CSS，后者负责运行Javascript。Chrome使用的Javascript引擎是V8，它的速度非常快。Node.js是一个运行在服务端的框架，它的底层使用了V8引擎。我们知道Apache+PHP以及Java的Servlet都可以用来开

2016-12-11 22:10:57 15620

原创 js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标

2016-12-09 12:06:49 19133 6

原创 canvas动画之一 -- 百分比进度加载

canvas作为H5中重要的新增特性，使开发者可以用它来创作各种令人惊叹的作品。先来看一下浏览器对canvas的支持情况。<canvas> 标签定义图形，比如图表和其他图像，我们使用脚本来绘制图形。先看一下这次动画的结果： gif图可能不完整，可以点击这里查看完整效果。canvas的API较多，这里我们只介绍一下本次使用到的一下API，更多的canvas可以查看这里。beginPath()

2016-12-08 21:59:40 5953 1

原创说一说z-index容易被忽略的那些特性

前言关于z-index，每个人都会用，但大多人都不理解其真正的生效机制。最近做项目有很多用到z-index的地方，才发现以前用的一知半解，所以上网查了一些资料梳理了一下。关于z-index的生效机制并不复杂，但如果不花一点时间研究其特点，有很多关键点容易被忽略。问题HTML文档中有三个div元素，每个div中存在一个span元素，三个span元素分别设置背景颜色为red，green，以及blue。然

2016-12-06 11:27:54 8304 1

原创使用CSS3绘制一个简易的3D相册

使用CSS3绘制一个简易的3D相册，先来看一下完成的静态效果图，：点击这里查看完成的效果关于CSS3中的transform3D的属性已经在学习CSS3 3D转换，制作一个3D立方体这篇文章中讲解了，接下来我们直接来说如何实现一个3D相册。总体布局<div class="container"> <div class="box" id="box"> <div class="i

2016-12-03 21:16:27 8257 5

SweetoDream