前端知识点

存储 loaclaStorage sessionStorage cookie

loaclaStorage： 以键值对(Key-Value)的方式存储，永久存储，永不
                失效，除非手动删除。

sessionstorage：关闭页面后即被清空，而 localStorage 则会一直保           

                存。

cookie：cookie是一小段文本信息，伴随着用户请求在web服务器和浏览

      器之间传递。cookie 将信息存储于用户硬盘，因此可以作为全局变     

      量。由于cookie在http中是明文传递的，其中包含的数据都可以被他人访问

iframe

(1) 优势：解决第三方内容缓慢，并行加载脚本
(2) 缺点：组织页面onlaod时间，即使内容为空，加载也需要时间

网站优化：

（1）文件合并
（2）CDN托管，负载均衡，将用户的请求分配到最近的服务器上

（3）使用缓存

减少页面加载时间

（1）优化图片
（2）图片格式为GIP

（3）优化CSS

（4）写好宽度和高度，否则浏览器会一边下载，一边计算

（5）减少http请求

（6）少用全局变量

（7）存储DOM查询结果

（8）设置样式使用 class

JS延迟加载

（1）defer/ async
（2）动态创建DOM

（3）按需异步加载

内存泄露：

定义：任何对象不需要，仍然存在
（1）闭包

（2）setTimeout()

 (3) 循环引用

页面渲染
为什么要了解：
了解浏览器如何加载，可以在引用外部JS，将其放入合适的位置，还可以构建DOM时候，选择CSS最优的写法，减少reflow，repaint。

(1) 发送一个http请求，浏览器开启一个线程，查询DNS，获取IP地址
(2) 浏览器服务器通过三次TCP握手，建立连接，包括一个同步报文，一个

    同步应答报文，一个应答报文。

(3) TCP/IP连接建立，浏览器发送get请求，服务器找到资源，使用http

    相应返回改资源，状态：200

(4) 请求返回以后，浏览器解析HTMl 生成DOM tree，其次会生成CSSTREE，Js根据DOM API操作DOM

（5）浏览器解析DOM树，深度遍历，CSS解析为 CSSRULE tree， 根据DOM树，构建Render tree

前端安全

(1) xss 跨站脚本攻击
    向web页年注入js代码，然后浏览器解析之行

    预防：页面渲染尽量使用AJAX，提交数据在html转义

（2）csrf 跨站请求伪造

    首先登陆A网站，然后不关闭或者是cookie没有过期，登陆危险网站B

    防止：加入token验证等等

reflow原因

 (1) 页面初始化
（2）操作DOM

（3）某元素尺寸变大了

（4）css变化

（5）减少：不要一条条的修改DOm样式，使用class，不要打DOM属性放在循环

     中，使用一个变量缓存

JS加载

载入后马上执行
会阻塞页面后续的内容，浏览器需要一个稳定的DOM结构

JS执行机制：

1⃣️ 同步：按照顺序去做,做完第一件事情之后,再去做第二件事情

2⃣️ 异步：不完全按照顺序去做,突发情况,第二件事情不能立刻完成,所以等

    待一段时间再去完成

3⃣️ 所有同步任务都在主线程上执行，形成一个执行栈

主线程发起异步请求,相应的工作线程就会去执行异步任务,

主线程可以继续执行后面的代码主线程之外，还存在一个"任务队列"（task 

queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件,

也就是一个消息。一旦"执行栈"中的所有同步任务执行完毕，系统就会读

取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待

状态，进入执行栈，开始执行。主线程把当前的事件执行完成之后,再去读取

任务队列,如此反复重复执行,这样就行程了事件循环。

CSS优化

(1)压缩
(2)属性连写： font ：font-style font-weight font-size

(3)继承：font clolr

(4) CSS放入Head中，减少reflow repaint

Http https

1. HTTP协议以明文方式发送内容，不提供任何方式的数据加密
2. 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超

   文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加

   入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器

   之间的通信加密。

3. HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来

   保证数据传输的安全；另一种就是确认网站的真实性。

4. HTTPS和HTTP的区别主要如下：

　　1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性

　　的ssl加密传输协议。

　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，

　　前者是80，后者是443。

　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构

　　建的可进行加密传输、身份认证的网络协议，比http协议安全。

步骤：

    （1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
　　（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公

　　钥）传送一份给客户端。

　　（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息

　　加密的等级。

　　（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网

　　站的公钥将会话密钥加密，并传送给网站。

　　（5）Web服务器利用自己的私钥解密出会话密钥。

　　（6）Web服务器利用会话密钥加密与客户端之间的通信。

闭包

有权访问另一个函数作用域中的变量的函数，🐷：是函数

function fn {
    var n = 2;
    function fn1 {
        alert(n++)
    }
    return fn1
}
fn() //1
fn() //2
上面的备注是函数，这个 函数fn 最后返回一个函数fn1，这就是闭包，一个好处是，变量n可以不用背外界访问到。

坏处：
（1）由于变量不会自动清除，会占用内存
（2）变量，只会返回最后一个值，闭包只能取得包含函数中任何变量的最后一个值，包含函数，指的不是外层那个函数

function createFunctions(){
    var result = new Array();

    for (var i=0; i < 10; i++){

        result[i] = function(){

return i; };

}

    return result;

}

AJAX

第一步，创建xmlhttprequest对象
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属

性获得服务器的响应。

第四步，onreadystatechange函数

var xhr = new XMLHttpRequest()

xhr.open('GET','url',true)

xhr.onreadyStateChange = function () {

        if (xhr.readState == 4 && xhr.status == 200) {

            return success()

        }

        else {

            return fail()

        }

    }

xhr.send()

}

HTTP请求

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

JS对象

属性

1. Configurable: 表示能否通过 delete 删除属性从而重新定义属性，能否修改属性
   的特性，或者能否把属性修改为访问器属性，设置为false后，在设置除Writable就会      

   有错误。

2. Enumerable: 表示能否通过 for-in 循环返回属性。

3. Writable: 表示能否修改属性的值

4. Value: 包含这个属性的数据值

5. Object.defineProperty()：可以修改以上属性，三个参数:属性所在的对象、属

   性的名字和一个描述符对象。

   var person = {};

    Object.defineProperty(person, "name", {

     writable: false,

     value: "Nicholas"

    });

6.

访问器属性
注意点：

1. 访问器属性不包含数据值;
2. 它们包含一对儿 getter 和 setter 函数(不过，这两个函数都不是必需的)。 

3. 在读取访问器属性时，会调用 getter 函数，这个函数负责返回有效的值;

4. 在写入访问器属性时，会调用 setter 函数并传入新值，这个函数负责决定如何处理数据。

属性

1. Configurable ：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特 性，或者能否把属性修改为数据属性。
2. Enumerable： 表示能否通过 for-in 循环返回属性

3. Get： 在读取属性时调用的函数。默认值为 undefined。

4. Set： 在写入属性时调用的函数

例子：
var book = {

    _year: 2004,

    edition: 1 

};

Object.defineProperty(book, "year", {

    get: function(){

        return this._year;

    },

    set: function(newValue){

        if (newValue > 2004) {

            this._year = newValue;

            this.edition += newValue - 2004;

} }

});

book.year = 2005; 

alert(book.edition); //2

🐷：可以把“years”写成一个对象，{_year: {Value：...}}

创建对象

1. 工厂函数
    function createPerson(name) {

        var o = new Object();

        o.age = age;

        o.sayName = function () {...}

    }

2. 构造函数（this）

    过程：

    (1) 创建一个新对象;

    (2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);

    (3) 执行构造函数中的代码(为这个新对象添加属性);

    (4) 返回新对象。

    注意：

   （1）作为普通函数：属性和方法都被添加给 window 对象

    (2) 构造函数问题：就是每个方法都要在每个实例上重新创建一遍

3. 原型模式

  （1）每个函数都有一个 prototype(原型)属性

  （2）只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 

      prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有

      原型对象都会自动获得一个 constructor (构造函数)属性，这个属性

      包含一个指向 prototype 属性所在函数的指针。

  （3）Object.getPrototypeOf(实例) // 返回实例的原型

  （4）Object.keys() for ...in 便利可数的

   (5) Object.getOwnPropertyNames() //所有的属性，无论是否可数

  （6）缺点：1⃣️ 它省略了为构造函数传递初始化参数这一环节，结果所有实

      例在 默认情况下都将取得相同的属性值

      2⃣️ 引用类型的数据会被所有实例共享

  （7）构造函数模式用于定义实 例属性，而原型模式用于定义方法和共享

      的属性。

4. 动态原型模式(构造函数+原型写在一起)

 function Person（name，age，job）{

    this.name = name;

    this.age = age;

    this.job = job;

    if (typeof this.sayName != "function") {

        Person.prototype.sayName = function() {

            alert(this.name)

        }

    }

 }

5.寄生构造函数模式:创建一个函数，该函数的作用仅仅是封装创建对象的代

码，然后再返回新创建的对象,稳妥构造函数模式不使用new，不使用this

function Person(name, age, job){

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.sayName = function(){

        alert(this.name);

    };

return o; }

var friend = new Person("Nicholas", 29, "Software Engineer");

friend.sayName();  //"Nicholas"

继承

1. 确定原型和实例的关系
（1）instanceof， 实例 idstanceof Person

（2）isPrototypeOf Person.prototype.isPrototypeOf(p1)

2. 原型链问题：包含引用类型值的原型

3. 构造函数+原型 实线组合继承,会调用两次构造函数

4. 原型式继承

    function object(0) {

        function F() {}

        F.prototype = o;

        return new F()

    }

5. 寄生继承

    function createAnother(original) {

        var clone=object(original); //通过调用函数创建对象

        clone.sayHi = function(){

            alert("hi");

        };

        return clone;

6. 寄生组合式继承

    function inheritPrototype(subType, superType){

    var prototype = object(superType.prototype);

    prototype.constructor = subType;

    subType.prototype = prototype;

    }

React学习

JSX注意点

CSS类名： className替代class
JSX只能使用表达式，不能使用if等语句
类首字母大写

组件创建方式

函数创建（无状态）

    function Compon(props){
        return ({

            <div>{props}</div>

        })

    }

ES6 class创建，此时可以使用state存储数据

class Compon extends React.Component {
    constructor(){

    }   

    fn = () => {}

}

父子组件通信

通过props

父传递给子组件props，子组件通过 this.props获取
```
<Child title={data}>
```
子---> 父
通过事件传递，父组件传递给子组件一个函数，子组件通过
this.props.event(data)返回给父组件
```
父组件：
<Child bindCilck={this.bindChange}>

子组件：

this.props.bindCilck(data)
```
state

给组件内部提供数据，通过setState({ data })进行修改,this.state.data进行数据访问，render中只读取state，不用来设置

组件生命周期

constructor()
初始化数据，初始化state
componeWillMount()
组件被挂载到页面之前调用，不会重复触发渲染，可以使用setState()
render()
渲染组件到页面中,不要在render方法中调用 setState() 方法.
componentDidMount()
组件已经挂载到页面中,可以使用DOM对象，可以使用setState()
componentWillReceiveProps()
每当组件的props改变的时候，都会触发运行阶段的函数。
可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变，可能会陷入无限循环
shouldComponentUpdate()
根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染，返回值为Boolean
componentWillUpdate()
组件将要更新
## 渲染问题
在state中的数据，如果改变了，会立即渲染，前提使用正确修改state方式
setState是异步的，有个一个回调函数。

this绑定

最好是通过箭头函数，简单方便
fn = () => {}

DOM事件

事件冒泡
IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点。

<!DOCTYPE html>
    <html>

    <head>

        <title>Event Bubbling Example</title>

    </head>

    <body>

        <div id="myDiv">Click Me</div>

    </body>

    </html>

     如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播: 

    (1) <div>

    (2) <body>

    (3) <html>

    (4) document

事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
如果仍以前面的 HTML 页面作为演示事件捕获的例子，那么单击
元素就会以下列顺序触发 click 事件。
```
(1) document
(2) <html>

(3) <body>

(4) <div>
```
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
（1）事件捕获阶段
（2）处于目标阶段
（3）事件冒泡阶段
首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
事件处理方式：
（1）DOM0
每个元素(包括 window 和 document)都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示:
```
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){

        alert("Clicked");

    };

    btn.onclick = null; //删除事件处理程序
```
（2）DOM2
用于处理指定和删除事件处理程序的操作:
1⃣️ addEventListener()
2⃣️ removeEventListener()
所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序;如果是 false，表示在冒泡阶段调用事件处理程序。
```
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){

alert(this.id);

}, false);

btn.addEventListener("click", function(){

alert("Hello world!");

}, false);

添加两个，按照顺序触发
```
（3）IE事件处理
attachEvent()和 detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数，只有冒泡。与上面的事件命不同，多一个‘on‘。添加两个，相反的顺序进行。
```
btn.attachEvent("onclick", function(){
    alert("Clicked");

});
```

跨浏览器事件

var EventUtil = {
addHandler: function(element, type, handler){

    if (element.addEventListener){

        element.addEventListener(type, handler, false);

    } else if (element.attachEvent){

        element.attachEvent("on" + type, handler);

    } else {

        element["on" + type] = handler;

    }

},

removeHandler: function(element, type, handler){

    if (element.removeEventListener){

        element.removeEventListener(type, handler, false);

    } else if (element.detachEvent){

        element.detachEvent("on" + type, handler);

    } else {

        element["on" + type] = null;

} }

};

getEvent: function(event){

        return event ? event : window.event;

},

    getTarget: function(event){

        return event.target || event.srcElement;

},

    preventDefault: function(event){

        if (event.preventDefault){

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

},

stopPropagation: function(event){

if (event.stopPropagation){

        event.stopPropagation();

    } else {

        event.cancelBubble = true;

} }

};

自定义事件

var myEvent = new Event('event_name');
window.dispatchEvent(myEvent);

可以通过上面的事件监听

                      参考： JS高级程序设计

BFC块级格式化上下文

规则

内部的Box会在垂直方向，一个接一个地放置。
属于同一个BFC的两个相邻Box的margin会发生重叠。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算

BFC触发原理

根元素
float属性不为none,例如left、right
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible，例如hidden、auto

作用

清除浮动,BFC里面的浮动元素高度也会参与计算

<div class="layout">
    <div></div>
     <div></div>
</div>

如果里面的两个div为浮动，那么设置 .layout {overflow: hidden}

防止margin重叠

总结：

BFC通俗地说：就是一个容器，里外不相互影响，记住：清除浮动的时候，如果使用 overflow： hidden，是存在缺点的，如果超过了范围，那么则被隐藏了
清除浮动正确的方式：

.clearfix:after{
    content: '',
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    line-height:0;//行高为0
}

JS原型链

每一个实例都有自己的原型，可以__proto__访问
构造函数，通过new创建实例
构造函数通过prototype指向原型对象
原型对象通过constructor指向构造函数
如下图所示：
访问对象中的属性，如果不存在，那么会在原型中查找，如果还没有，继续在原型中查找
# 继承
构造函数

function Parent(name) {
    this.name = name
}
function Child(age) {
    Parent.call(this);
    this.age = age
}

2 原型链

child.prototype = new Parent()
缺点：当存在引用类型的时候，一个实例数据的改变，另一个也会改变，例如 P1.friend = ['Jany', 'LiMINg'],当P1增加一个朋友，另外的实例也会增加。

3 组合继承
把公共数据放在Parent中，这样的话就不会公用一个引用类型

function Parent(name) {
    this.name = [‘Jang’，‘Dany’]
}
function Child(age) {
    Parent.call(this);
    this.age = age
}
child.prototype = new Parent()

4 优化组合继承

function Parent(name) {
    this.name = [‘Jang’，‘Dany’]
}
function Child(age) {
    Parent.call(this);
    this.age = age
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

判断原型和实例的关系

1. instance instanceof object，只要是原型链中的都可以
2. object.prototyoe.isprototypeoof(instance)
3. object.prototype.tostring.call(instance)

跨域

同源策略：端口域名协议

1 Jsonp

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'www.baidu.comn&callback=showMessage';
    document.head.appendChild(script);
    function showMessage(res) {
        ...
    }
 </script>

动态的创建script，设置一个带参数的网址，通过callback接受返回数据

2 document.domain + iframe跨域

此时有一个限制：主域相同：
例如： http://www.baidu.com 和 http://a.baiud.com, 那么设置: doncument.domain = 'baidu.comn'

1.）父窗口：(http://a.domain.com/a.html)
    首先获取 子窗口的数据iframe，然后设置document.domain,

<iframe id="iframe" src="http://b.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var iframe  = document.getElementById("iframe")
    var win = iframe.contentWindow(获取到了子窗口：window)
</script>
2.）子窗口：(http://b.domain.com/b.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
  </script>

3 windows.name + iframe

window都有一个name属性，这个属性：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，而且每个页面对window.name都有读写的权限。

A页面：设置 windows.name = "Monday" 
B页面：console.log(windows.name) // Monday

加入A页面需要获取B页面的数据，通过中间iframe实现数据的共享,
A页面使用iframe想要获取到B.html，通过window.name设置的数据，需要将iframe的src设置为www.cnblogs.com/B.html即可.
然后A.html想要得到iframe所获取到的数据，还必须把这个iframe的src设置成跟A.html页面同一个域才行.
不然根据同源策略，A.html是不能访问到iframe中的window.name属性的。 B.html <script> window.name = "message come from B.html" </script> A.html <iframe id="proxy" src="http://www.cnblogs.com/B.html" onload = "getData()"> <script> function getData(){ var iframe = document.getElementById('proxy); iframe.onload = function(){ var data = iframe.contentWindow.name; } iframe.src = 'b.html'; } </script>

4 psotMessage

这个功能是h5中新增加的，接受两个参数，第一个：传递的数据，第二个：协议+主机+端口号

A.html
<iframe id="iframe" src="http://b.html"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'Monday'
        };
        // 向B页面传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://B.html');
    };
</script>
B.html ，如果B发送会A
<script>
    // 接收A的数据，
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
</script>

5 CORS

普通跨域请求：浏览器端写正常的AJAX代码即可，只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

三栏布局-三种方式

浮动布局

分为三个div，另外一个父级包含这三个div，使用float，

注意点：三个div，left --> right ---> center 这种顺序

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

body {

  margin: 0;

  padding: 0;

}

.left {

  float: left;

  width: 300px;

  height: 100px;

  background-color: red;

}

.right {

  float: right;

  width: 300px;

  height: 100px;

  background-color: blue;

}

.center {

  margin: 0px 300px 0px 300px;

  background-color: black;

  height: 100px;

}

</style>

</head>

<body>

<div class="father">

<div class="left">1</div>

<div class="right">2</div>

<div class="center">3</div>

</div>

</body>

</html>

Flex

设置中间盒子FLex：1，这样的话就可以实现自适应，默认水平排列

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

.father {

  display: flex;

}

.left {

  width: 300px;

  height: 100px;

  background-color: red;

}

.center {

  flex:1;

  height: 100px;

  background-color: black;

}

.right {

  width: 300px;

  height: 100px;

  background-color: blue;

}

</style>

</head>

<body>

<div class="father">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>

</body>

</html>

flex相关知识点，一般会使用到的
http://www.runoob.com/w3cnote/flex-grammar.html

1 设置display：flex

2 容器图：

    轴：水平main axis和垂直cross axis

3 容器的属性

    flex-direction：主轴的方向，row | row-reverse | column | column-reverse;

    flex-wrap：换行， nowrap | wrap | wrap-reverse;

    flex-flow：flex-direction和flex-wrap简写

    justify-content：主轴上的对齐方式， flex-start | flex-end | center    

                    | space-between | space-around;

    align-items：交叉轴上如何对齐，flex-start | flex-end | center | 

                baseline | stretch;

4 项目的属性

    order：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

    flex-grow：flex-grow属性定义项目的放大比例

    flex-shrink：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不

                足，该项目将缩小。

    flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间

                （main size）

    flex：flex-grow, flex-shrink 和 flex-basis的简写，默认 0 1 auto

    align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式

绝对定位对齐

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

.one {

  background-color: red;

  position: absolute;

  left: 0;

  width: 300px;

  height: 100px;

}

.two {

  left: 300px;

  right: 300px;

  background-color: blue;

  position: absolute;

  height: 100px;

}

.three {

  right: 0px;

  width: 300px;

  background-color: yellow;

  position: absolute;

  height: 100px;

}

</style>

</head>

<body>

<div class="father">

<div class="one">1</div>

<div class="two">1</div>

<div class="three">1</div>

</div>

</body>

</html>

React开发时候注意点

JSX

使用jsx的使用，用一个{}包裹起来，例如

const method = {<div> 123 </div>}

使用（）小括号，防止分号自动插入

const element = 
(

  <h1>

    Hello, {formatName(user)}!

  </h1>

);

如果使用箭头函数,返回的是一个对象的话，使用（）包围起来
```
    const data = () => {(a:1,b:2)}
    `
```
组件数据传递

通过props

function Comment(props) {
  return (

    <div className="Comment">

      <div className="UserInfo">

        <Avatar user={props.author} />

        <div className="UserInfo-name">

          {props.author.name}

        </div>

      </div>

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

这样的话，就可以通过prop获得到数据，这个数据是只读的，不要修改

子组件向父组件传递数据

父：
bindValue = (e) => { console.log(e)}

<Son onChange = {this.bindValue}>

子：

<input onChange={this.props.onChange}>

这样的话，子--->父 传递便实现了

State

constructor可以初始化state

  constructor(props) {
    super(props);

    this.state = {date: new Date()};

  }

取得state的值，通过 this.state.date
改变state，通过 this.setState（{}），不要忘记里面要使用{}的方式
注意事项

（1）修改方式
```
// Wrong，页面不会重新渲染
this.state.comment = 'Hello';

// Correct

this.setState({comment: 'Hello'});
```
（2）更新是异步的，有时候通过setState设置数据后，打印，输出的值是不对的

绑定函数

由于this默认是不会绑定到Es6类中的，有几种方法

constructor中设置

 constructor (props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)

}

使用箭头函数

handClick = () => {this.handClick()}
不要忘记了后面加入（），得让函数运行，这样的话还一传递参数，如下：

handClick = (e) => {this.handClick(e)}

条件渲染

控制显示和隐藏的时候可以使用 &&

const show = 1
show === 1 && <div>hello React </div>

这样就可以控制是否显示，可以通过一个事件控制show的值

三元表达式

show ？ （<div key='1'> show</div>）: (<div key='2'> hidden </div>)
最后加key，因为页面在渲染的时候会利用重复的元素，不是每一个都要重复渲染，加入key           

就会认为是不同的元素

MVVM MVP MVC 区别认识

MVVM是Model-View-ViewModel的简写，

主要目的是分离视图（View）和模型（Model）；在概念上是真正将页面与数据
逻辑分离的模式，在开发方式上，它是真正将前台代码开发者（JS+HTML）与后台

代码开发者分离的模式（asp,asp.net,php,jsp）

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel

可以绑定到不同的"View"上，当View变化的时候Model可以不变，当

Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重

用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计

人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVC

用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到
一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编

写业务逻辑.它强制性的使应用程序的输入、处理和输出分开

MVP

是从经典的模式MVC演变而来，它们的基本思想有相通的地方：
Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。

作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接

使用Model，它们之间的通信是通过Presenter (MVC中的Controller)

来进行的，所有的交互都发生在Presenter内部，而在MVC中View会从直接

Model中读取数据而不是通过 Controller。

JS模块化

CMD

依赖就近，延迟执行

define(function(require, exports, module) {
var $ = require('jquery');

var Spinning = require('./spinning');

exports.doSomething = ...

module.exports = ...

})

AMD

1.  异步执行，，它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传
到factory中，对于依赖的模块提前执行，依赖前置

2.  AMD采用：require([module], callback);

例如：

    定义：

    　// math.js

　　define(function (){

　　　　var add = function (x,y){

　　　　　　return x+y;

　　　　};

　　　　return {

　　　　　　add: add

　　　　};

　　});

　　使用：

　　require(['math'], function (math) {

　　　　math.add(2, 3);

　　});

CommonJS

1.  服务器端使用
2.  同步

3. 浏览器不兼容的原因：缺少四个NODE变量

module

exports

require

global，入股提供着四个变量，可以使用模块。

var module = {

  exports: {}

};

(function(module, exports) {

  exports.multiply = function (n) { return n * 1000 };

}(module, module.exports))

var f = module.exports.multiply;

f(5) // 5000 

4. 使用

// moduleA.js

module.exports = function( value ){

return value * 2;

}

// moduleB.js

var multiplyBy2 = require('./moduleA');

var result = multiplyBy2(4);

posted @ 2018-08-09 15:46 dfgfgf 阅读(129) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端小站

前端知识点

闭包

AJAX

HTTP请求

JS对象

React学习

JSX注意点

组件创建方式

父子组件通信

state

组件生命周期

this绑定

DOM事件

BFC块级格式化上下文

规则

BFC触发原理

作用

总结：

JS原型链

判断原型和实例的关系

跨域

1 Jsonp

2 document.domain + iframe跨域

3 windows.name + iframe

4 psotMessage

5 CORS

三栏布局-三种方式

浮动布局

Flex

绝对定位对齐

React开发时候注意点

JSX

组件数据传递

State

绑定函数

条件渲染

MVVM MVP MVC 区别认识

JS模块化

公告

前端小站

前端知识点

闭包

AJAX

HTTP请求

JS对象

React学习

JSX注意点

组件创建方式

父子组件通信

state

组件生命周期

this绑定

DOM事件

BFC块级格式化上下文

规则

BFC触发原理

作用

总结：

JS原型链

判断原型和实例的关系

跨域

1 Jsonp

2 document.domain + iframe跨域

3 windows.name + iframe

4 psotMessage

5 CORS

三栏布局-三种方式

浮动布局

Flex

绝对定位对齐

React开发时候注意点

JSX

组件数据传递

State

绑定函数

条件渲染

MVVM MVP MVC 区别 认识

JS模块化

公告

MVVM MVP MVC 区别认识