React知识汇总
react - JSXReact 背景介绍
React 入门实例教程
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
什么是React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
用来构建UI的 JavaScript库
React 不是一个 MVC 框架，仅仅是视图（V）层的库
React官方网站
React中文文档
特点
1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新
3 HTML仅仅是个开始
123456> JSX --TO--> EveryThing- JSX --> HTML- JSX --> native ios或android中的组件（XML）- JSX --> VR- ...
webpack + TypeScript + Vue2.0 从零开始搭建项目
github可下源码
先创个空白文件夹：
12mkdir learn-vuecd learn-vue
新建一个页面index.html：
1234567891011121314151617181920212223<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>learn-vu ...
前端常见知识点总结
一直想着多总结工作当中的经验。苦于没时间，一直耽搁了，记着的知识点全都放在电脑，总觉得它会一直在磁盘里又跑不掉，忘记了翻翻总会记得。可是，好记性不如烂笔头，是时候总结一篇文章，记录一下经常记不住又容易混淆的前端知识点！本文参考了 郑州卓越 的简书。
session、cookie、sessionStorage、localStorage等区别？session 会在一定的时间内存储在服务器端，用来保存用户的对象信息，session 不能区分路径，同一个用户在访问一个网站期间，所有的 session 在任何一个地方都可以访问到；
cookie、sessionStorage、localStorage的相同点是都存储在客户端，不同点分别表现在存储大小、有效时间、数据与服务器的交互方式
1）存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2）有效时间
localStorage :存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。sessionStorage : ...
Thank you for your effort！！
只有学习，才能进步。首先感谢BYQiu的这篇深度好文。其次感谢徐代龙同学以及此作品的原创者HyG的无私贡献。
浅谈正则表达式中的分组和引用
由正则表达式如何匹配相同字符出发，讲讲正则表达式中的选择、分组和引用。
问题在外刊君读者群中看到有人提出这样的一个需求：
把字符串切成连续相同字符的正则怎么写？比如abbcccdddd切成a,bb,ccc,dddd
之前我对正则表达式也是略有研究，想尝试一下。其实我对正则表达式的学习基本完全来源于犀牛书的第10章，真正看懂这一章，我觉得操作正则表达式应该不在话下。
我的答案先给出我的答案吧：
1'abbccddd'.match(/(\w)\1*/g) // ["a", "bb", "cc", "ddd"]
说明拿到这个问题，首先要匹配字符[a-zA-Z0-9]，这里直接使用\w。然后是全局匹配，在最后加上g。难点在于怎么判断重复。
翻看了犀牛书后，又读了一遍分组和引用的部分。使用小括号()将字符作为一个最小单元，同时小括号还能记忆这个组合相匹配的字符串。再使用反斜杠\引用前面分组的表达式，数字1表示第一个小括号。这时完成了2个字符重复的要求。最后再使用*来匹配出现0次或n次。这个正则 ...
对这个 jekyll 博客主题的改版和重构
本文主要说明对这个博客主题的改版和代码重构的过程。这个简洁高雅的博客主题受到了很多朋友的喜欢。在写第一版界面时，我对前端并不是很熟悉，对Jekyll也不熟悉。现在距离当时也一年了，对自己当时写的代码也不太满意了，同时Jekyll如今也已经升级了，目前最新版为3.1.2。因此我在临近毕业尚未入职前做一下博客主题的代码重构和改版吧。
主要想做这些事情有：添加归档，添加标签，添加分类页面，主页显示文章摘要，代码去除 jQuery 和 BootStrap，优化移动端显示，将所有变量写入配置文件_config.yml中等。再优化一些细节吧。希望更多人会喜欢。
改版重构说明
使用 GitHub 风格的代码块 Markdown 写法 (Fenced code blocks)。
即 GFM(github flavored markdown) 的方式。
Jekyll 已经升级至 3.1.2（2016-03），其中有一些新的要注意的地方，比如官网上说使用了 Rouge 去做代码高亮而不是默认的 Pygments，因为 Jekyll 本身是基于 Ruby 的，因此我看到官方说希望不再使用基于 Pyt ...
前端处理动态 url 和 pushStatus 的使用
起因起因是这样的，在尝试前后端分离的这条道路上，我自己也在不断摸索，感觉要把大部分的坑都踩踩了。目前我用的技术是：
webpack 自动构建
AMD 模块化 js
Sass 预处理 CSS
使用前端模板引擎 handlebars 解决动态操作将 html 拼接在 js 中的问题
但最近写了一个项目类似知乎这样的多页网站。前端 url 的处理让我觉得不够优雅。我使用的是 hash 的方式处理动态 url 的，为此我专门在知乎上提了一个问题：前端如何处理动态url？
这里我将问题描述如下：
前后端彻底分离的情况下，页面跳转页全部由前端控制。那么如何更好的处理动态url地址？例如本问题的url为https://www.zhihu.com/question/38802932这肯定是用后台路由处理的url
纯前端怎么处理？用hash吗，如下:https://www.zhihu.com/question#38802932那如果本页跳转，只改变hash的话，页面不会刷新。使用location.reload()倒是可以解决。
但总觉得这样处理不够优雅。大家在工作中是如何处理此类场景的？还是用传统 ...
在低版本 IE 中点击空 block 元素的问题
content{:toc}
问题描述当我们点击一个空的、没有任何内容的 div 或者其他块级元素时。在 IE11 以下，是没有反应的。
使用场景这类问题使用场景还是很普遍的。比如 UI 给了一张大图，要点击图上的某一块位置的时候。可以用一个空的 div 定位到相应的位置，然后对它进行绑定事件。
解决办法解决方法很简单，即给这个块级元素填充任意颜色，然后将其透明度设置为0。代码如下：
background-color: #fff;
opacity: 0;
filter:alpha(opacity=0);
JavaScript 阶段总结
做了一张思维导图。总结这几个月对 JavaScript 的学习吧，也是一个复习。也是我目前的技能树。
Weinre --WebApp 调试工具
content{:toc}
什么是 weinre？weinre官网 上有两句有意思的介绍：
weinre is WEb INspector REmote. Pronounced like the word “winery”. Or maybe like the word “weiner”. Who knows, really.
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
上面说 weinre 是一个远程 web 调试器。说到了它的发音，还挺幽默，哈哈。
远程 web 调试器。先说调试器，就像火狐中的 FireBug，Chrome 中的调试器一样。就是在浏览器中按下 ...
Web App 相关技术
往前推2到3年，前端工程师还在忧心忡忡地想，移动互联网时代下，前端是不是没有生存空间了。但今天一看，在我们团队，前端工程师超过一半的工作都是在做移动端的Web或者APP的开发。移动Web或者APP在技术本质上是和做桌面端Web没有本质区别，但是移动端的坑那是非常的多，通过学习这部分内容，让你成为一名桌面移动通吃的前端开发工程师。
概念
参考： 移动 Web 开发入门
上面这个 slide 资料讲的非常好，算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面：
基本概念
Native
本地应用 使用 Java \ Objective-C \ Swift 开发
WebApp
网页应用 html5 开发
Hybrid
混合应用 ooxx(native, web)
对比
视觉
设备的像素
文字单位使用 rem
viewport 属性
横屏竖屏
Flex 伸缩布局
响应式设计
软键盘
隐藏地址栏
苹果设备添加到主屏图标
交互
Touch
click 延迟
Scroll
Gestures(hammer —A ja ...
JavaScript 面向对象
本文为慕课网 JavaScript深入浅出 JavaScript 面向对象笔记。
概念
面向对象程序设计（Object-oriented programming，OOP）是一种程序设计范型，同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性。
——维基百科
一般面向对象包含：继承，封装，多态，抽象
基于原型的继承function Foo() {
this.y = 2;
}
console.log(typeof Foo.prototype); //object
Foo.prototype.x = 1;
var obj3 = new Foo();
console.log(obj3.y); //2
console.log(obj3.x); //1
创建函数 Foo 的时候，就会有一个内置的 Foo.prototype 属性，并且这个属性是对象。
在使用 new Foo(); 创建对象实例时。this 会指向一个对象，并且这个对象的原型会指向 Foo.prototype 属性 ...
JavaScript 中的闭包
content{:toc}
本文为慕课网 JavaScript深入浅出 JavaScript 中的闭包笔记。
闭包的例子function outer() {
var localVal = 30;
return localVal;
}
console.log(outer()); //30
function outer2() {
var localVal = 30;
return function() {
return localVal;
};
}
var func = outer2();
console.log(func()); //30
对于第一个普通的函数，在执行过之后，它的局部变量就可以被释放。
对于第二个函数，localVal 是不能被释放的。因为调用 outer2() 后，返回的是匿名函数，匿名函数可以访问外部的 outer2() 中的局部变量，并返回了这个局部变量 localVal。当 outer2() 赋值给 func 后，再次调用 func()，仍 ...
JavaScript 中的 this
content{:toc}
本文为慕课网 JavaScript深入浅出 JavaScript 中的 this笔记。
全局的 this全局 this 一般指向全局对象，浏览器中的全局对象就是 window。
例如：
12345console.log(this.document === document); //trueconsole.log(this === window); //truethis.a = 91;console.log(window.a); //91
一般函数的 this1234function f1 () { return this;}console.log(f1() === window);//true, global object
可以看到一般函数的 this 也指向 window，在 nodeJS 中为 global object
12345function f2 () { "use strict";//使用严格模式 return this;}console.log(f1() === ...
