前言

在web开发中，使用ajax请求服务器资源已经是非常普遍的做法了。也许有这样的需求, 在某个系统中的所有访问都是需要进行权限控制的，服务端判断用户权限，如果没有对应资源的访问权限的话那么返回一个约定好的状态码，前端拿到这个状态码进行相应的UI提示。可是，在前端中也许有非常多的这样的请求，没次请求过后都要判断一下状态码然后给出相应的提示，这样会写非常多的重复代码，当改了提示消息的时候就需要到每个ajax回调里面去改，非常不方便。因此我们需要一个统一的方式来接管ajax请求，也就是在执行业务方写的回调的时候，先执行需要验证的前置条件(前面说的状态码).下面就在使用jQuery的时候我们如何来拦截。

来源知乎：https://www.zhihu.com/question/29072028/answer/43095799
我们都知道 JavaScript 有 getElementById() 等方法查找对应的元素，但浏览器底层到底是怎么做的？是一个个遍历对象然后对比相应的 id 或者其他属性来对比区分？

一.属性相关

我们通常把特征(attribute)和属性(property)统称为属性，但是他们确实是不同的概念，
特征(attribute)会表现在HTML文本中，对特征的修改一定会表现在元素的outerHTML中，并且特征只存在于元素节点中；
属性(property)是对于JS对象进行修改，除了浏览器内置的部分特征外，其它的属性操作并不会影响HTML文本。

转眼间，一年的悠悠岁月已如同手中紧抓的沙子，无声无息的流失。然而，沙子流失，可以再抓一把；花儿凋零，可以等到来年春天重绽芳颜；岁月流逝，却永远无法回头再来。

我都不知道该如何回忆这一年，发生了很多事情，大学毕业、第一份工作、女朋友、北漂……。还记得2015年的元旦，那个时候正在成都的一家创业公司上班，公司就只有8个人，还包括两个老板。即使这样，但工作氛围倒也比较可以的，老板对我们员工都还好，平时下班/休息的时候我们还一起打桌上足球很是欢乐。但是越到后来我越是觉得待不下去，那个时候还没毕业，总觉得自己还能找一份更好的工作。临近毕业了，这种想法更是强烈。有一次在某技术群里面聊天，偶然看到司徒正美发的一个关于Qunar网校园招聘的信息，于是就去试着投了简历。后来出乎意料的收到了笔试通知。再后来也就就接到面试邀请了，本来也没抱多大希望的，面试那天表现也不是很好，晚上回学校的时候天上下着雨，也是急匆匆的往回赶，然后，手机丢了……（这样写起来似乎还有因果关系呢），后来我从那个创业公司辞职了，有一种解脱的感觉。

刚刚学习ReactJs不久, 对React中提到的一些概念比较喜欢，比如虚拟Dom，组件化等。

Reactjs 简单介绍

它是facebook 开发的一个框架，现在facebook的 Instagram 网站就是用它来做的。 国内也有好些企业在用，比如teambition 的 简聊。
React 通常和其他的 JavaScript 框架同时被提及，比如很多时候大家使用React和angular相比。Angular是一个完整的框架（它包括一个 view 层, 有数据层，ajax功能，Promise等），但React 并没有,它仅仅是view层，也就是仅仅根据自身的某些状态不同来更新出不同的html结构。
React实现了单向响应的数据流，比传统数据绑定更加简单，也就和平常我们讨论的MVVM不一样，它仅仅是通过数据的变化来反应到view上面。
所谓组件，即封装起来的具有独立功能的UI部件，这是React比较推崇的。，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。React为了更高超的性能，自己实现了一个虚拟DOM，而不是在第一时间直接改变真是DOM状态。

html 结构

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
    <div class="video-box fl">
        <video id="webcam"></video>
        <canvas width="600" height="450" id="canvas"></canvas>
    </div>
    <div class="photo-box fl">
        <img id="photo" src="blob:" alt="">
    </div>
</div>
<div class="control-bar">
    <button id="take-a-picture">拍照</button>
</div>

web开发中，input元素默认的样式比较丑，我们总想美化它。有的用图片来代替，搭配上css3、js等来实现各种切换效果等，反正是各有千秋。当然我们也可以直接使用css来自定义input元素的样式。最主要用到的就是-webkit-appearance:none这个属性设置，它可以重置标签默认样式。还有就是使用了::before，::after这样的伪元素来辅助一些效果。

0、基本的css 和 html结构

这里只做了简单的几个input控件的测试, 一些样式参考了bootstrap的外观。

type=”number” 的css

这个类型的input，我主要是需要自定义那个默认的向上向下箭头，它有::-webkit-inner-spin-button这个为元素,这便是箭头的默认元素啦~~~。 这是如何发现的? 在任意input框上使用chrome 审查元素就可以看到渲染的信息，前提是需要在chrome的settings->General里把 Elements 下面的Show user agent shadow DOM给勾选上。这里需要将他的appearance属性值设置为none,这样我们就看不见默认的箭头了，那么如何才能创建箭头呢？我使::before与::after来模拟，这两个伪元素 创建了两个三角形(关于如何使用元素画出三角形，请自行Google)。代码如下: