王二狗

什么是 html2canvs?html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。html2canvas 可以用来做什么从上的面的介绍可以知道， html2canvas 的作用就是根据 DOM 生成对应的图片，所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。如何使用 html2canvaslet h

作者：王二狗博客：掘金、思否、知乎、简书、优快云点赞再看，养成习惯，你们的支持是我持续分享的最大动力????本来将会带大家熟悉常见的JPEG、PNG以及GIF三种图片的不同特性及应用场景，让大家在前端开发过程中更有针对性的去在不同的场景中使用不同格式的图片。JPEGJPEG是一种针对彩色照片而广泛使用的有损压缩图形格式，其常见的扩展名有.jpg .jpeg .jpe不适用场景不适合线...

译者：王二狗博客：掘金、思否、知乎、简书、优快云点赞再看，养成习惯，你们的支持是我持续分享的最大动力????原文链接：https://www.sitepoint.com/shorthand-javascript-techniques/最近一直在不停的造Vue轮子，目前已经完成了Button、网格布局、默认布局、Input等轮子。今天在编写Toast轮子的时候遇到了一个问题，说一说我的思考...

事件的三个阶段捕获 -> 目标 -> 冒泡捕获(IE8及以下版本不支持)，目标，冒泡 捕获阶段给事件截获提供了可行性。三种模型捕获型事件：即事件的发生过程是从最不具体的元素到最具体的元素Netscape 支持捕获型。冒泡型事件：即事件的发生过程是从最具体的元素到最不具体的元素，IE 则支持冒泡型。w3c 模型：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。统一事件的发生过程支持 W3C 标准的

简介这次我们使用 Vue 来完整的开发一个 App，下面展示了我们开发了一个 Web App 的全流程，从而让你真正的了解一个项目从零到一的过程：同时我们会以线上开发环境的要求来完成这次的开发任务，让你真正的了解一些互联网公司是如何开发前端项目的：Vue 介绍前端开发趋势1.旧浏览器逐渐淘汰，移动端需求增加 2.前端交互越来越多，功能越来越复杂 3.架构从传统后台 MVC 向 REST API

webpack 目录结构说明build config： 都是 webpack 配置相关的目录node_modules ： 通过 npm 安装的依赖代码库src： 目录是我们存放的源码bablerc： bable 配置文件，我们通过 bable 把 es6 编译成 es5 - presets：预设，表示bable 转换预先需要安装的插件 - plugins：配置的插件 - comments：表示

将 SVG 转化为图标字体进入网站 IcoMoon 导入自己的 SVG 图片将其转化即可。

测试一下

什么是闭包？简单点说，闭包就是函数嵌套函数，其中内部函数可以引用外部函数的参数和变量。function aaa(a){ var b = 5; function bbb(){ alert(a); alert(b); }}var bbb = aaa(3);bbb();//result : 3 5垃圾回收机制垃圾回收机制：在闭包的情况下,参数 a

Chrome 工具1：jsonView json 可视化工具

什么是前端路由？路由是根据不同的 url 地址展示不同的内容或页面，就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。什么时候使用前端路由？在单页面应用中，大部分页面结构不变，只改变部分内容的使用。前端路由有什么优点和缺点？优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户缺点：使用浏览器的前进，后退键的时候会重新发送请求，没

前后端分离的意义大吗？1、该网站前端变化远比后端变化频繁，则意义大。 2、该网站尚处于原始开发模式，数据逻辑与表现逻辑混杂不清，则意义大。3、该网站前端团队和后端团队分属两个领导班子，技能点差异很大，则意义大。4、该网站前端效果绚丽/跨设备兼容要求高，则意义大。

如何在 PC 端开发的时候，用手机去实时预览？1：在 git 窗口输入 ipconfig 得到你本机的ip地址2：用你得到的ip 地址替换localhost，http://192.168.1.106:8080/#!/goods3：复制当前页面的地址到 草料 生成当页面的二维码，然后用你的手机扫描即可访问，前提是手机和电脑要链接在同一局域网下。这时你在你的手机端也可以实时预览啦，开不开心，哈哈哈移动端

JS 好文章1.10个JavaScript难点值得反复阅读的好文章1.10个JavaScript难点

1.编辑器：Dreamwaver CC 2017 && Adobe Creative Cloud

1.克隆仓库到本地：git clone "url" 2.查看工作区和暂存区的状态：git status 3.提交文件从工作区到暂存区：git add . 4.提交文件从暂存区到版本库：git commit -m "注释" 5.提交文件直接从工作区到版本库：git commit -a -m "注释" 6.提交：git push 7.查看提交历史：git log 8.更新本地仓库 git

随着 web 应用越来越复杂，项目的结构和代码量也变的愈加庞大，前端人员越来越需要在工程化的层面提高开发效率，前端开发是一个飞速发展的领域，市面上现在有各种各样的工具来辅助我们开发，比如说我们在开发过程中就可能会用到下面这些工具：1.包管理器 npm我们在开发项目的过程中，会引入各种各样的依赖，比如说：JS 框架：react CSS 框架：Semantic-UI,Bootstrap如果你的代码

我们使用 npm 来管理我们的项目依赖，但是在这之前我们需要一样东西来描述我们的项目是什么样子的，这个就是 package.json 文件。有了 package.json 文件之后，npm通过查看 package.json 就能够知道我们的项目大概是一个什么样子，所以我们要做的第一件事情就是在我们的项目中建一个 package.json 的文件。下面是几个使用 npm 的命令：npm instal

Babel 是一个 js 编译器，他可以把其它的东西编译成 js，比如说把 es6 的代码编译成 es5 的代码，使用 Babel 其实并没有这么难，只要你明白了四个概念基本上就可以使用 Babel 了。1.第一个概念 babel-corebabel-core 就是 babel 的核心，就像一个空白的操作系统一样，里面没有安装任何软件，babel-core 就相当于 babel运行的底层。2.第二个

要保证事件处理的代码在大多数浏览器下能够一致的运行，只需关注冒泡阶段即可。第一个要创建的方法是 addHandler() ，它的职责是视情况分别使用 DOM0 级方法、DOM2 级方法或 IE 方法来添加事件。这个方法属于一个叫做 EventUtil 的对象，addHandler() 接受三个参数：要操作的元素、事件名称和事件处理程序函数。与 addHandler() 方法相对应的是 removeH

webpack 是一个模块打包器，原来我们在写页面的时候，我们会通过一个 script 标签引入一个 js 文件，当你引入模块化的概念之后， 一个 js 文件就是一个模块，如果各个功能合集独立的封装成一个模块，你会发现你的应用会拆分成非常非常多的模块，webpack 会通过一个入口文件，通过 import/require 静态的分析出你整个应用的模块之间依赖的情况，模块之间的依赖可能是非常混乱的，一

在前端开发中，SEO 也是非常重要的一块，那我们如何写出好的 SEO 代码呢？ 要点如下：合理的 title、description、keywords：搜索对这三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面title要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；

什么是 web 语义化？web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 CSS 命名的语义化。 HTML 标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 。CSS 命名的语义化是指：为 HTML 标签添加有意义的class，id 补充未表达的语义。为什么需要语义化？去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜索引

渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能，同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:所有浏览器都必须能访问基本内容所有浏览器都必须能使用基本功能所有内容都包含在语义化标签中通过外部CSS提供增强的布局通过非侵入式、外部javascript提供增强功能end-user web brows

1.如何阻止事件冒泡？function stopBubble(e){ //如果提供了事件对象，则这是一个非 ie 浏览器 if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; } return false

function stopDefault(e){ //如果提供了事件对象，则这是一个非 ie 浏览器 if(e && e.preventDefault){ //阻止浏览器的默认动作 e.preventDefault(); }else{ //ie 中阻止函数默认动作的方式 window.event.returnVa

1.ctrl + j 赋值并粘贴到新的图层 2.ctrl + e 合并图片 3.ctrl + r 调出辅助线

Emmet 这个就不用介绍了吧

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这