Ant Design項目記錄和CSS3的總結和Es6的基本總結

時間 2019-11-18

標籤 ant design 項目記錄 css3 css 總結 es6 基本欄目自動化構建简体版

原文原文鏈接

這裏主要是介紹本身運用ANT框架的一些小總結，之前寫到word裏，如今要慢慢傳上來,javascript

輔助生殖項目總結：從每一個組件的運用的方法和問題來總結項目。php

1.項目介紹

輔助生殖項目主要運用的是Ant.design框架結合React.js和es6語法編寫css

2.項目工具和環境安裝

項目主要運用Visual Studio和開發結合Git和當代碼工具TortoiseCit(也就是小烏龜)工具加上Node.js環境html

這裏要先安裝Git環境，而後安裝TortoiseCit，TortoiseCit至關因而Git的工具，而後安裝node環境，最後安裝VS，安裝成功後就能夠當代碼了。（以上的安裝步驟都很簡單，不在介紹）前端

3.git運用

這裏講的是當代碼的操做：java

http://www.cnblogs.com/hbujt/p/5554038.html -----git學習地址node

git開發流程：react

1：git clone 獲取代碼git

2：本地分支切換至standardes6

3：新建本身的開發分支（從standard），

命名：

業務功能：feature/功能名

bug修改：fix/功能名稱

文檔上傳：doc/文檔名

5：push 分支至服務器

6：提交merge請求（將個人分支合併到develop分支上）

7：管理員（陳）審覈代碼，執行merge

Git提交流程：

1.git commit 和push

2.切換分支switch到standard分支，fetch和pull

3.merge碼雲上的standard-cly分支，而且把standar push到碼雲

4.切換分支到本身的分支standard-cly,（還有一個remotes的那個是碼雲上的，不用切換他）若是沒人操做此分支能夠不用fetch和pull，

5.merge standard分支

6.再次fetch而且pull一下

前端代碼代碼的提交的時候，你們先Fetch..而後Pull...若是報錯，你們看一下是哪個文件衝突了 : (1) 若是這個文件不是多我的同時修改了同一行代碼（增長几行代碼不算同時修改，例如config.js，同時增長不會衝突），而後就能夠commit...，commit的時候會顯示錯誤，提示讓你先pull，再pull一下，而後push，就提交成功了；（2）若是這個文件被多人同時修改了代碼，就把本身本地的代碼備份一下，在Visual Studio上將本身的代碼還原成和碼雲上一致的，而後再pull... 成功以後將本身修改的部分代碼粘過去，再提交。先拉再提交。

詳細操做圖：

4.跑前臺ant項目

這裏簡單介紹寫當下代碼後前臺怎樣跑起來

1）先通VS選中當下來的代碼文件

2）新當下的項目要跑起來都要先輸入npm i （npm i 只是 npm install 的簡寫，一般稱爲node包管理器）這個是安裝項目所須要的包的方法。安裝成功後，輸入npm run dev 啓動項目，啓動成功後會出現The app is running at: http://0.0.0.0:8001/，失敗會有其餘提示，根據提示信息解決就好，下面的圖片是我遇到的問題以及解決方法。

瞭解地址：

1.npm介紹：https://www.jianshu.com/p/19d349796207

5.項目基本組件運用

這裏會把項目中用到的基本組件一一說明，要結合ant的Api來學習，（須要對照這api看，否則會看不懂，由於我只是截取關鍵性代碼）

（這裏只是介紹項目基本組件，複雜組件有須要單獨找我，一塊兒討論）

Ant API地址: https://ant.design/docs/react/introduce-cn

1.select組件

這裏咱們封裝了一個DictSelct組件，裏面的底層仍是select能夠對照api看他的參數和數據規則。

這個組件比較簡單，裏面的參數數據由於數據量少，就是前端本身定義的code。（也能夠後臺傳輸數據，具體方法下面有介紹）

2.樹形的Treeselect框

這裏面也是本身封裝了一個組件，能夠限制不能選中的項，能夠多選

關鍵代碼處理數據：（運用了map方法）

componentDidMount() {

const {transferData, ajax,isornotDisable} = this.props

//isornotDisable字段控制着父級可選不可選，若是不可選，在父級設置此字段爲1

request(ajax).then(d=>{

d.map(transferData);

return arrayToTree(d);

}).then(treeData=>{

const isornot=isornotDisable?true:false;

{isornot && treeData.map((item) => {

const children = item["children"];//第一級

if(children){

item.disabled=true;

children.map((c) => {

const sonchildren = c["children"];//第二級

if(sonchildren){

c.disabled=true;

sonchildren.map((b) => {

const grandchild = b["children"];//第三級

if(grandchild){

b.disabled=true;

}

});

}

});

}

});}

this.setState({treeData})

})

}

return (

<TreeSelect {...tProps}

treeData={treeData}

treeDefaultExpandAll={true}

dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}

getPopupContainer={triggerNode => triggerNode.parentNode}/>

);

3.日期框

1.日期框介紹

這裏介紹經常使用的日期框介紹

在組件中引入這句話可使彈出的日期框不隨着屏幕滾動

getPopupContainer={triggerNode => triggerNode.parentNode}

disabledDate這個參數能夠控制日期選中範圍

disabledDate={this.disabledDate}

其餘的控制日期方法能夠去api裏面查看

2.二次保存問題解決

日期框二次校驗問題解決方法，這裏以chenlixue新增治療基本信息爲例

（下面是個人修改思路，你們能夠根據本身的想法編寫，可是要注意下下面的問題）

1）之前一直覺得這個是由於病歷號失去焦點的驗證有問題或者是點擊保存的時候的表單驗證有問題，可是我把每一個操做都從新檢查了一遍發現沒有問題，後來才肯定到是給日期框賦值的證件號框的校驗有問題

2）之前我們是這麼寫的，我們在驗證證件號的時候給了日期框賦的值，

3）可是在點擊保存的時候，由於是直接把數據賦值到input框，沒有走這個證件號驗證（我debugger試了試），

4)可是在我點擊保存的時候走了這個證件號驗證的方法，而後我排除了其餘的框的問題，最後確認到是在這裏給日期框賦值出的問題，最後把日期框的賦值方法寫到了外面，解決了日期框二次校驗的問題。下面是正確代碼

4.表格組件

表格組件是系統中長用的方法，這裏簡紹一種，和表格裏面常見的操做

1. 經常使用的表格

<Table columns={columns} dataSource={rows} loading={loading} pagination={pagination} onChange={this.handlPageChange}/>}

這裏面columns表明表格表頭結構，dataSource表明表格的數據，

Loading能夠控制表格加載數據時的加載效果，pagination表明表格分頁的參數.

簡答的columns:

const columns = [

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artNum"}), dataIndex: 'artNum' },

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artcyNum"}), dataIndex: 'artcyNum' }]

2.表格的合併

1.合併前提

後臺返回數據必須是:相同重複的數據必須是連在一塊兒的，這樣前臺才能經過rowspan方法合併表格數據。（這是前提，後臺須要注意）

2.步驟

1.前臺須要根據後臺返回的數據內容，根據相應參數對前臺數據進行比較合併，（歷史重複數據反饋頁面返回數據的標識參數是flag,）

後臺須要給相同的數據添加一個相同的標識字段，像flag字段，方便前臺合併數據，能夠參照歷史數據反饋頁面編寫，（若是不能返回標識字段，前臺也能夠根據數據裏面相同的字段進行合併）
合併方法：

1）在須要合併的table頁面引入getMergeArr.js方法，這個方法的做用是處理後臺返回數據，把後臺返回的list數據，提取其中須要的字段，拆分紅一個對象字段，具體格式能夠本身前臺console下。（能夠去utils/index.js裏面學習）

調用方法：

2）在columns裏面找到須要合併的字段

合併方法：

這裏的每個flag[text]都是一個數組對象，具體的能夠console出flag總體對照理解,每當index和他對應的數組對象裏面的第一個值相同時，給他賦值上相應的num值,而後行合併，合併長度爲數組長度。

(沒有flag參數，前臺能夠根據json裏面相同的字段值，進行比較合併)

其餘合併的狀況：對於某些列具備相同字段值的合併(瞭解地址：system/userManage)

其餘合併狀況，能夠參照上述兩種狀況進行參數的修改

3.行合併

在columns裏須要合併的列，給子集的id寫在父級的children裏面

3.表格添加加載圖標

1.Table組件添加loading參數，默認爲false，它是控制表格數據加載的圖標，

2.前臺沒有接收到後臺返回數據的時候設置loading爲true,接收數據到或者報異常的時候設置爲false.

3.在table組件配置好參數

4.表格樣式修改

1.表格行選中樣式添加

（能夠去beijing,精子庫質控統計查看例子）

（我們之前頁面上的表格都是在hover時顯示選中效果，如今能夠實現選中時就顯示選中效果）

實現方法：

須要在state中添加，選中參數

在table組件中添加兩個參數配置

3）js中加上選中的方法，

2.表格內部樣式修改：

(這裏只寫了左右樣式其餘樣式本身能夠試一試)

第一種方法：

表格內容居左居右

在columns加上className,由於我們框架index.less的樣式會覆蓋掉所寫樣式因此要改變摸個表格樣式須要在index.less添加樣式

第二種方法：global（能夠理解爲全站樣式）

能夠在須要改變樣式的表格頁面添加相對應的index.less，改變的表格樣式要經過

：global{ }包裹才能生效

（這裏介紹的都只是table組件簡單用法，複雜的表格操做須要子集去看api領會編寫）

5.ajax請求操做

這裏簡單介紹下咱們項目運用的請求方法，截個圖就能夠了，不作介紹，每一個項目的寫法應該差很少

6.Button按鈕組件控制方法

import { Button, Row, Modal } from 'antd';

1.第一種處於index頁面的button修改

參考地址: routes/sperm/statistic/org/donorPrompt

頁面樣式：

具體代碼：

2.在模態框裏面的按鈕控制

參考地址：/routes/sperm/spermBankInfo/list'

頁面樣式：

具體代碼：

7.Popover氣泡組件控制方法

Content表明氣泡裏面的內容，trigger表明顯示氣泡的時機，例子中的是hover

8.Modal組件使用方法

這裏只是寫個例子，理解後本身能夠隨意編寫

其實這個modal框就是定義一個參數，控制modal框顯示與否，具體代碼以下:

這裏根據updateModalVisiable參數的值控制是否顯示modal

Modal框內部代碼

Modal框內部的footer表明modal框的功能按鈕，本身能夠自定義

9.提示框組件

這裏的提示框組件是經過Modal對話框組件實現的

這裏要引入modal和intl,提示框

Api裏面有好幾種，其餘的能夠本身試一試

6.項目中用到的方法

1.數據處理

1.map方法

這個介紹的是最簡單的往原始數據裏面添加新的數據

2. 向數組結尾添加元素方法

3. 向數組頭部添加元素方法

4.splice()數組方法

1.刪除-用於刪除元素，兩個參數，第一個參數（要刪除第一項的位置），第二個參數（要刪除的項數）

2.插入-向數組指定位置插入任意項元素。三個參數，第一個參數（插入位置），第二個參數（0），第三個參數（插入的項）

3.替換-向數組指定位置插入任意項元素，同時刪除任意數量的項，三個參數。第一個參數（起始位置），第二個參數（刪除的項數），第三個參數（插入任意數量的項）

示例：

一、刪除功能，第一個參數爲第一項位置，第二個參數爲要刪除幾個。

array.splice(index,num)，返回值爲刪除內容，array爲結果值。

eg：

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(0,2);

alert(array);//彈出c,d

alert(removeArray);//返回值爲刪除項，即彈出a,b

</script>

</body>

</html>

二、插入功能，第一個參數（插入位置），第二個參數（0），第三個參數（插入的項）

array.splice(index,0,insertValue)，返回值爲空數組，array值爲最終結果值

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,0,'insert');

alert(array);//彈出a,insert,b,c,d

alert(removeArray);//彈出空

</script>

</body>

</html>

三、替換功能，第一個參數（起始位置），第二個參數（刪除的項數），第三個參數（插入任意數量的項）

array.splice(index,num,insertValue)，返回值爲刪除內容，array爲結果值。

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,1,'insert');

alert(array);//彈出a,insert,c,d

alert(removeArray);//彈出b

</script>

</body>

</html>

5. slice()數組方法

定義和用法

slice() 方法可從已有的數組中返回選定的元素。

語法

arrayObject.slice(start,end)

參數	描述
start	必需。規定從何處開始選取。若是是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
end	可選。規定從何處結束選取。該參數是數組片段結束處的數組下標。若是沒有指定該參數，那麼切分的數組包含從 start 到數組結束的全部元素。若是這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。

例子 1

在本例中，咱們將建立一個新數組，而後顯示從其中選取的元素：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write( + "<br />")arr.slice(1)

document.write(arr)

</script>

輸出：

George,John,Thomas

John,Thomas

George,John,Thomas

例子 2

在本例中，咱們將建立一個新數組，而後顯示從其中選取的元素：

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr + "<br />")

document.write( + "<br />")arr.slice(2,4)

document.write(arr)

</script>

輸出：

George,John,Thomas,James,Adrew,Martin

Thomas,James

George,John,Thomas,James,Adrew,Martin

6. JS數組(Array)處理函數整理

一、concat() 鏈接兩個或更多的數組
該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。
例如：

複製代碼代碼以下:

輸出結果：
1,2,3,4,5,11,22,33

二、join()
把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
例如：

複製代碼代碼以下:

list結果：

'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
這是迄今爲止最快的方法！使用原生代碼（如 join()），無論系統內部作了什麼，一般比非原生快不少。——James Padolsey, james.padolsey.com

三、pop() 刪除並返回數組的最後一個元素
pop()方法將刪除數組的最後一個元素，把數組長度減 1，而且返回它刪除的元素的值。
若是數組已經爲空，則pop()不改變數組，並返回undefined值
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
Thomas
George,John

四、push() 向數組的末尾添加一個或更多元素，並返回新的長度
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
4
George,John,Thomas,James

五、unshift() 向數組的開頭添加一個或更多元素，並返回新的長度
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
4
James,George,John,Thomas

六、reverse() 顛倒數組中元素的順序
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
Thomas,John,George

七、shift() 刪除並返回數組的第一個元素
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
George
John,Thomas

八、slice(start,end) 從某個已有的數組返回選定的元素
請注意，該方法並不會修改數組，而是返回一個子數組
例如：

複製代碼代碼以下:

輸出結果：
George,John,Thomas
John,Thomas
George,John,Thomas

九、sort() 對數組的元素進行排序
對數組的引用。請注意，數組在原數組上進行排序，不生成副本
該方法默認是按照字符編碼(ASCII)的順序進行排序的
例如：

複製代碼代碼以下:

輸出結果：
John,George,Thomas
George,John,Thomas

再來看一個例子：

複製代碼代碼以下:

輸出結果：
10,5,40,25,1000,1
1,10,1000,25,40,5

咱們能夠看到，並不是是按照咱們認爲的按數字大小排序，若是想按照數字大小排序，則須要改變默認的排序方式，自行指定排序規則。
以下：

複製代碼代碼以下:

輸出結果：
10,5,40,25,1000,1
1,5,10,25,40,1000
若是想要降序排列呢？
將排序規則改成：
function (a, b) {return b - a;}
就OK了

十、splice() 刪除元素，並向數組添加新元素
splice() 方法與 slice() 方法的做用是不一樣的，splice() 方法會直接對數組進行修改
(1)刪除指定範圍的數組元素：

複製代碼代碼以下:

輸出結果：
George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)從指定下標開始插入指定元素(元素個數不限)：

複製代碼代碼以下:

輸出結果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)刪除指定範圍的數組元素，並用指定元素替換(元素個數不限)：

複製代碼代碼以下:

輸出結果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

7. 例子展現：

1.這裏是按照數據給的某一個參數進行數據比較排序。

後臺數據：

用sort方法進行比較處理，比較參數是：'orgCode'，

這裏是把數據更大的排到了前面，null值能夠在作處理

//比較方法

function compare(property){

return function(a,b){

var value1 = a[property];

var value2 = b[property];

return value1 - value2;

}

//修改數據格式

function cx(){

$.ajax({

url:'${ctx}/system/organization/json',

type:'get',

success:function(data){

var newData=data.sort(compare('orgCode'));

$('#dg').treegrid("loadData",newData);

}

})

}

cx();

比較完的數據格式：

2.兩個數組比較與json parse()方法

背景：就是有一個select，後臺返回45個全部數據，還有一個方法就是加載出已經上報的數據2個，我要去比較給這兩個數組中相同的數據的option背景顏色加深。（給特定的select option選項加背景效果）

這個是後臺返回的上報數據兩個

可是他返回的數據是個json串不是json對象因此我用了JSON.parse（）方法轉換成了json對象

方法：var newData=JSON.parse(data)

下面寫一下個人兩個數組比較方法，和實現效果

實現代碼： $.post('ComQueryService/comQuery.do',params,function(data){

var bToObj=JSON.parse(data);

var bToObjData=bToObj.data.rows;

var h = '';

$.post('FileManage/getOrgCodeOffileUpload.do',params,function(filedata){

var Filedata=JSON.parse(filedata);

console.log(Filedata.data)

var screenData=Filedata.data?Filedata.data:[];

var g=0;

for(var i=0;i<bToObjData.length;i++){

var moubTo=bToObjData[i].DD_NAME;

var isExist = false;

for(var k=0;k<screenData.length;k++){

var scrbTo=screenData[k];

if(moubTo==scrbTo){

isExist =true;

break;

}

if(isExist){

g=g+1

h+='<option style="background-color:#f4bdc6" value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}else{

h+='<option value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}

$("#xxxxxxxxe").html(h);

})

});

實現效果：

2.時間處理

1. JS獲取當前時間及時間戳相互轉換

1.獲取當前時間的 時間戳
　　Date.parse(new Date())

　　結果：1486347562000

2.獲取當前時間

　　new Date()

　　結果：Mon Feb 06 2017 10:19:42 GMT+0800 (CST)

3.將 時間戳 轉換成時間

　　new Date(1486347562000)

　　結果：Mon Feb 06 2017 10:19:22 GMT+0800 (CST)

4.將時間轉換成 時間戳　　

　　Date.parse(new Date("2017-02-06 10:30:50"))

　　結果：1486348250000

2. Js獲取當前日期時間及其它操做

var myDate = new Date();
myDate.getYear();        //獲取當前年份(2位)
myDate.getFullYear();    //獲取完整的年份(4位,1970-????)
myDate.getMonth();       //獲取當前月份(0-11,0表明1月)
myDate.getDate();        //獲取當前日(1-31)
myDate.getDay();         //獲取當前星期X(0-6,0表明星期天)
myDate.getTime();        //獲取當前時間(從1970.1.1開始的毫秒數)
myDate.getHours();       //獲取當前小時數(0-23)
myDate.getMinutes();     //獲取當前分鐘數(0-59)
myDate.getSeconds();     //獲取當前秒數(0-59)
myDate.getMilliseconds();    //獲取當前毫秒數(0-999)
myDate.toLocaleDateString();     //獲取當前日期
var mytime=myDate.toLocaleTimeString();     //獲取當前時間
myDate.toLocaleString( );        //獲取日期與時間

例子1：

//獲取當前時間，格式YYYY-MM-DD

    function getNowFormatDate() {

        var date = new Date();

        var seperator1 = "-";

        var year = date.getFullYear();

        var month = date.getMonth() + 1;

        var strDate = date.getDate();

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        var currentdate = year + seperator1 + month + seperator1 + strDate;

        return currentdate;

例子2：這種方法最簡單有效的

var date;//Tue Jul 16 01:07:00 CST 2013的時間對象

var year=date.getFullYear();//年

var month=date.getMonth()+1;//月份（月份是從0~11，因此顯示時要加1）

var day=date.getDate();//日期

var str=year+'-'+month+'-'+day;

3.數據格式處理

1.字符串轉成數字

1）轉換函數

js提供了parseInt()和parseFloat()兩個轉換函數。前者把值轉換成整數，後者把值轉換成浮點數

parseInt("1234blue"); //returns 1234

2) 強制類型轉換

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56

2.數字轉成字符串

toString() 方法可把一個 Number 對象轉換爲一個字符串，並返回結果。

實例

在本例中，咱們將把一個數字轉換爲字符串：

<script type="text/javascript">

var number = new Number(1337);

document.write (number.toString())

</script>

輸出：

4. 頁面刷新方法

學習地址：http://www.jb51.net/article/14397.htm

Javascript刷新頁面的幾種方法：

複製代碼代碼以下:

1，history.go(0)
2，location.reload()
3，location=location
4，location.assign(location)
5，document.execCommand('Refresh')
6，window.navigate(location)
7，location.replace(location)
8，document.URL=location.href

自動刷新頁面的方法:

1. 頁面自動刷新：把以下代碼加入<head>區域中

複製代碼代碼以下:

其中20指每隔20秒刷新一次頁面.

2. 頁面自動刷新：把以下代碼加入<head>區域中

複製代碼代碼以下:

其中20指隔20秒後跳轉到http://www.jb51.net頁面

3. 頁面自動刷新js版

複製代碼代碼以下:

4. 頁面自動跳轉：把以下代碼加入<head>區域中

5.頁面自動刷新js版

<script language="JavaScript">

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

6.定時器方法

1.倒計時方法

setTimeout(function(){alert("Hello")},3000);

2.循環定時器方法

例子1

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

  var t=new Date()

  document.getElementById("clock").value=t

</script>

</form>

<button onclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

例子2

代碼以下:

var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

頁面每隔1秒記錄一次當前時間（分鐘：秒：毫秒），記錄十次後清除，再也不記錄。考慮到代碼執行時間可能記錄的不是執行時間，但時間間隔應該是同樣的，看看結果

複製代碼代碼以下:

:38:116
:39:130
:40:144
:41:158
:42:172
:43:186
:44:200
:45:214
:46:228
:47:242
:48:256

7.正則方法

簡單介紹下怎麼運用：

const regFormat = /^\d{17}([0-9]|X)$/; //驗證身份證格式

if(regFormat.test(_value) !== true){

form.setFieldsValue({ "femaleBirthdate": "" });

callback('身份證號格式不正確！');

}

項目中總結的正則：

1) 驗證身份證格式:

/^\d{17}([0-9]|X)$/;

2)軍人證

/南字第(\d{8})號|北字第(\d{8})號|沈字第(\d{8})號|蘭字第(\d{8})號|成字第(\d{8})號|濟字第(\d{8})號|廣字第(\d{8})號|海字第(\d{8})號|空字第(\d{8})號|參字第(\d{8})號|政字第(\d{8})號|後字第(\d{8})號|裝字第(\d{8})號|後文字(\d{7})/;

3)港澳通行證

/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/

4)正整數

/^(0|[1-9][0-9]*)$/;

5)36+5這種格式校驗（周+天）

/^\d\d?\+[0-6]$/;

6)郵政編碼格式

/^[1-9]\d{5}$/;

7)手機號格式

/^1[34578][0-9]{9}$/;

8)座機號格式

/^0\d{2,3}-[1-9]\d{6,7}$/

9)最多保留小數點後兩位

/^(0(?!\.0{1,2}$)(\.[0-9]{1,2})?|[1-9][0-9]{0,2}(\.[0-9]{1,2})?)$/;

10)不能輸入中文

/^[a-zA-Z0-9_]{0,}$/;

11)只能輸入大於等於0的整數

/^([1-9]\d{0,}|0)$/

其餘正則網上查

8.截取數據方法

1. JS截取字符串

JS截取字符串可以使用 substring()或者slice()

函數：substring()

定義：substring(start,end)表示從start到end之間的字符串，包括start位置的字符可是不包括end位置的字符。

功能：字符串截取，好比想從"MinidxSearchEngine"中獲得"Minidx"就要用到substring(0,6)

例子：

var src="images/off_1.png";

alert(src.substring(7,10));

//彈出值爲：off

函數：substr()

定義：substr(start,length)表示從start位置開始，截取length長度的字符串。

功能：字符串截取

例子：

var src="images/off_1.png";

alert(src.substr(7,3));

//彈出值爲：off

函數：split()

功能：使用一個指定的分隔符把一個字符串分割存儲到數組

例子：

str="jpg|bmp|gif|ico|png";

arr=theString.split("|");

//arr是一個包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的數組

函數：John()

功能：使用您選擇的分隔符將一個數組合併爲一個字符串

例子：

var delimitedString=myArray.join(delimiter);

var myList=new Array("jpg","bmp","gif","ico","png");

var portableList=myList.join("|");

//結果是jpg|bmp|gif|ico|png

函數：indexOf()

功能：返回字符串中匹配子串的第一個字符的下標

var myString="JavaScript";

var w=myString.indexOf("v");w will be 2

var x=myString.indexOf("S");x will be 4

var y=myString.indexOf("Script");y will also be 4

var z=myString.indexOf("key");z will be -1

函數：lastIndexOf()

定義：lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值（與indexOf相反）

功能：返回字符串索引值

例子：

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

//彈出值依次爲：6,15

9.去掉字符串先後空格

trim=(str)=>{

return str.replace(/(^\s*)|(\s*$)/g, "");

}

10.解決this指向問題

運行上面的代碼會報錯，這是由於setTimeout中的this指向的是全局對象。因此爲了讓它可以正確的運行，傳統的解決方法有兩種：

上面代碼運用的bind方法詳細解釋：

http://blog.csdn.net/vivianhope/article/details/46725559

7.項目解決衝突方法

1. eclipse解決衝突方法

1．直接HEAD Revision

我經常使用的方法，直接把本地的文件替換成沒有修改以前的額樣子，這樣以後能夠直接拉代碼。（右鍵文件Replace With）

2．在local History 裏面找歷史文件

經過這個能夠找到你近期操縱這個文件的歷史，能夠選擇替換回來，

這個能夠解決在你上傳不上代碼，也拉不下代碼時用，能夠先經過這個找回修改以前的代碼，而後先commit上本地git，而後在fetch和pull,這樣就能當下代碼了，最後在把這個文件改好提交上去就能夠了

（右鍵文件Replace With）

8.精華項目經常使用數據處理方法

9.打包項目方法

1.Eclipse打包方法

1.點擊項目右鍵Export

選中Export裏面的War file,

2.右鍵選擇pom.xml

找到項目的pom.xml，選擇Run As裏面的Maven install

10.CSS3介紹

1.邊框

1. border-radius（圓角）

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 屬性容許您向元素添加圓角。</div>

2. box-shadow 用於向方框添加陰影：

<style>

div

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

3.border-image 屬性，您可使用圖片來建立邊框：

（這個屬性不經常使用）

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round; /* Opera */

border-image:url(/i/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */

border-image:url(/i/border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">在這裏，圖片鋪滿整個邊框。</div>

<br>

<div id="stretch">在這裏，圖片被拉伸以填充該區域。</div>

<p>這是咱們使用的圖片：</p>

<p><b>註釋：</b> Internet Explorer 不支持 border-image 屬性。</p>

<p>border-image 屬性規定了用做邊框的圖片。</p>

2.背景

1. background-size 屬性（調整背景圖片的大小：）

1)例子1控制大小

<style>

body

{

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

</style>

</head>

<body>

<p>上面是縮小的背景圖片。</p>

2)例子2經過百分比控制大小

<style>

div

{

background:url(/i/bg_flower.gif);

background-size:35% 100%;

-moz-background-size:35% 100%; /* 老版本的 Firefox */

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div>

<p>這是一個段落。</p>

</div>

2. background-origin 屬性規定背景圖片的定位區域。

<style>

div

{

border:1px solid black;

padding:35px;

background-image:url('/i/bg_flower.gif');

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。

</div>

<p>background-origin:content-box:</p>

</div>

3. 多重背景。

body

{

background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

}

</style>

</head>

<body>

</body>

3.文本效果

1.文本陰影

text-shadow 可向文本應用陰影。

<style>

{

text-shadow: 5px 5px 5px #FF0000;

}

</style>

</head>

<body>

<h1>文本陰影效果！</h1>

</body>

2. 自動換行

在 CSS3 中，word-wrap 屬性容許您容許文本強制文本進行換行 - 即便這意味着會對單詞進行拆分：

<style>

p.test

{

width:11em;

border:1px solid #000000;

word-wrap:break-word;

}

</style>

</head>

<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>

3. 字體粗細

font-weight

參數：normal
bold
100
200
300
400
500
600
700
800
900

4.2D 轉換

1. translate() 方法

經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）位置參數：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:translate(50px,100px);

-ms-transform:translate(50px,100px); /* IE 9 */

-moz-transform:translate(50px,100px); /* Firefox */

-webkit-transform:translate(50px,100px); /* Safari and Chrome */

-o-transform:translate(50px,100px); /* Opera */

}

</style>

</head>

<body>

</body>

值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。

2. rotate() 方法

經過 rotate() 方法，元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:rotate(30deg);

-ms-transform:rotate(30deg); /* IE 9 */

-moz-transform:rotate(30deg); /* Firefox */

-webkit-transform:rotate(30deg); /* Safari and Chrome */

-o-transform:rotate(30deg); /* Opera */

}

</style>

</head>

<body>

</body>

值 rotate(30deg) 把元素順時針旋轉 30 度。

3. scale() 方法

經過 scale() 方法，元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

margin:100px;

transform:scale(2,4);

-ms-transform:scale(2,4); /* IE 9 */

-moz-transform:scale(2,4); /* Firefox */

-webkit-transform:scale(2,4); /* Safari and Chrome */

-o-transform:scale(2,4); /* Opera */

}

</style>

</head>

<body>

</body>

值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高度的 4 倍。

4.skew() 方法

經過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:skew(30deg,20deg);

-ms-transform:skew(30deg,20deg); /* IE 9 */

-moz-transform:skew(30deg,20deg); /* Firefox */

-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

-o-transform:skew(30deg,20deg); /* Opera */

}

</style>

</head>

<body>

</body>

值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。

5. transform合寫

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform: translate(80px,80px) scale(1.5,1.5) rotate(45deg);

}

</style>

</head>

<body>

</body>

6. transform方法介紹

5.3D 看之前作過的例子

6.過渡transition

0. transition介紹

transition: property duration timing-function delay

transition屬性是個複合屬性，她包括如下幾個子屬性：

transition-property ：規定設置過渡效果的css屬性名稱
transition-duration ：規定完成過渡效果須要多少秒或毫秒
transition-timing-function ：指定過渡函數，規定速度效果的速度曲線
transition-delay ：指定開始出現的延遲時間

默認值分別爲：all 0 ease 0

注：transition-duration 時長爲0，不會產生過渡效果

改變多個css屬性的過渡效果時：

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

1.例子1

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<p>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</p>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

</body>

2.例子2

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s, transform 2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

}

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

</style>

</head>

<body>

<div>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</div>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

</body>

3. transition合寫

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width 1s linear 2s;

/* Firefox 4 */

-moz-transition:width 1s linear 2s;

/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;

/* Opera */

-o-transition:width 1s linear 2s;

}

div:hover

{

width:200px;

}

</style>

</head>

<body>

<p>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</p>

<p><b>註釋：</b>這個過渡效果會在開始以前等待兩秒。</p>

</body>

7.動畫@keyframes

註釋：您必須定義動畫的名稱和時長。若是忽略時長，則動畫不會容許，由於默認值是 0。

0. 參數介紹

1. animation-name指定@keyframes的名字，CSS加載時會應用該名字的@keyframes規則來實現動畫

2. animation-duration動畫持續時間，默認是0表示無動畫，單位能夠設s秒或ms毫秒

3. animation-timing-function動畫播放方式，默認值ease，能夠設linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。關於貝塞爾曲線和steps能夠參照上一篇transition，和transition-timing-function相似，很少贅述。

4. animation-delay延遲開始動畫的時間，默認值是0，表示不延遲，當即播放動畫。單位是s秒或ms毫秒。容許設負時間，意思是讓動畫動做從該時間點開始啓動，以前的動畫不顯示。例如-2s 使動畫立刻開始，但前 2 秒的動畫被跳過。

5. animation-iteration-count動畫循環播放的次數，默認值爲1，即放完一遍後不循環播放。除數字外也能夠設關鍵字infinite表示無限循環播放。

6. animation-direction動畫播放的方向，可設normal，alternate，alternate-reverse。默認值是normal表示正常播放動畫。alternate表示輪轉正反向播放動畫，即動畫會在奇數次（1，3，5…）正常播放，而在偶數次（2，4，6…）反向播放。alternate-reverse正好反過來，奇數次反向播動畫，偶數次正向播動畫。

1.普通的

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

</style>

</head>

<body>

</body>

</html>

2.靈活的

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

</style>

</head>

<body>

<p><b>註釋：</b>當動畫完成時，會變回初始的樣式。</p>

</body>

3.多種樣式動畫

改變背景色和位置：

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

</body>

4. 樣式合寫

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation:myfirst 5s linear 2s infinite alternate;

/* Safari and Chrome: */

-webkit-animation:myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation:myfirst 5s linear 2s infinite alternate;

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

</body>

8.多列

1. column-count 屬性規定元素應該被分隔的列數：

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

</head>

<body>

人民網北京2月24日電 (記者劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提升300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提升0.22元和0.25元。

這次國內成品油價格調整幅度，是按照現行國內成品油價格造成機制，根據國際市場油價變化狀況肯定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復甦前景向好以及中東局勢持續動盪等因素影響，國際市場原油價格先抑後揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美圓和115美圓以上。雖然近兩日價格有所回落，但國內油價掛鉤的國際市場三種原油連續22個工做日移動平均價格上漲幅度已超過4%，達到國內成品油價格調整的邊界條件。

通知指出，此次成品油調價後，國家將按照已創建的補貼機制，繼續對種糧農民、漁業（含遠洋漁業）、林業、城市公交、農村道路客運（含島際和農村水路客運）等給予補貼。同時，爲保證市場物價基本穩定，防止連鎖漲價，對與居民生活密切相關的鐵路客運、城市公交、農村道路客運（含島際和農村水路客運）價格不做調整。

通知要求，中石油、中石化、中海油三大公司要組織好成品油生產和調運，保持合理庫存，增強綜合協調和應急調度，保障成品油供應。各級價格主管部門要加大市場監督檢查力度，依法查處不執行國家價格政策，以及囤積居奇、造謠惑衆、合謀漲價、搭車漲價等違法行爲，維護正常市場秩序。

</div>

</body>

把 div 元素中的文本分隔爲三列：

2. column-gap 屬性規定列之間的間隔：

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:30px; /* Firefox */

-webkit-column-gap:30px; /* Safari and Chrome */

column-gap:30px;

}

</style>

</head>

<body>

</div>

</body>

規定列之間 30 像素的間隔：

3.column-rule 屬性設置列之間的寬度、樣式和顏色規則

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

-moz-column-rule:8px outset #ff0000; /* Firefox */

-webkit-column-rule:8px outset #ff0000; /* Safari and Chrome */

column-rule:8px outset #ff0000;

}

</style>

</head>

<body>

這次國內成品油價格調整幅度，是按照現行國內成品油價格造成機制，根據國際市場油價變化狀況肯定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復甦前景向好以及中東局勢持續動盪等因素影響，國際市場原油價格先抑後揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美圓和115美圓以上。

</div>

</body>

9.漸變

1. 線性漸變

1. 線性漸變 - 從上到下（默認狀況下）

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

<p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

2. 線性漸變 - 從左到右

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

<p>從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

3. 線性漸變 - 對角

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to bottom right, red , blue); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

<p>從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

4.線性漸變 – 使用角度

若是你想要在漸變的方向上作更多的控制，你能夠定義一個角度，而不用預約義方向（to bottom、to top、to right、to left、to bottom right，等等）。

語法：

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變。

注意：

可是，請注意不少瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準，即 0deg 將建立一個從左到右的漸變，90deg 將建立一個從下到上的漸變。換算公式 90 - x = y 其中 x 爲標準角度，y爲非標準角度。

下面的實例演示瞭如何在線性漸變上使用角度：

<style>

#grad1 {

height: 100px;

background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(0deg, red, blue); /* 標準的語法（必須放在最後） */

}

#grad2 {

height: 100px;

background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(90deg, red, blue); /* 標準的語法（必須放在最後） */

}

#grad3 {

height: 100px;

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(180deg, red, blue); /* 標準的語法（必須放在最後） */

}

#grad4 {

height: 100px;

background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(-90deg, red, blue); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

<h3>線性漸變 - 使用不一樣的角度</h3>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

5.線性漸變 – 漸變背景

<style>

#grad1 {

height: 55px;

background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

漸變背景

</div>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

6.線性漸變 – 透明度

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法（必須放在最後） */

}

</style>

</head>

<body>

<p>爲了添加透明度，咱們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數能夠是從 0 到 1 的值，它定義了顏色的透明度：0 表示徹底透明，1 表示徹底不透明。</p>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持漸變。</p>

</body>

7.opacity-透明度

<style>

div

{

background-color:red;

opacity:0.5;

filter:Alpha(opacity=50); /* IE8 以及更早的瀏覽器 */

}

</style>

</head>

<body>

<div>本元素的不透明度是 0.5。請注意，文本和背景色都受到不透明級別的影響。</div>

</body>

11.CSS3運用

1.圖片

0. a標籤的target參數

<a> 標籤的 target 屬性規定在何處打開連接文檔。

_blank -- 在新窗口中打開連接
_parent -- 在父窗體中打開連接
_self -- 在當前窗體打開連接,此爲默認值
_top -- 在當前窗體打開連接，並替換當前的整個窗體(框架頁)
一個對應的框架頁的名稱 -- 在對應框架頁中打開

1. 橢圓形圖片

<style>

img {

border-radius: 50%;

}

</style>

</head>

<body>

<h2>橢圓形圖片</h2>

<p>使用 border-radius 屬性來建立橢圓形圖片：</p>

</body>

2. 縮略圖

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

}

</style>

</head>

<body>

<p>咱們使用 border 屬性來建立縮略圖。</p>

</body>

3.縮略圖做爲鏈接

<style>

a {

display: inline-block;

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

transition: 3s;

}

a:hover {

box-shadow: 0 0 2px 5px rgba(0, 140, 186, 0.5);

}

</style>

</head>

<body>

<h2>縮略圖做爲鏈接</h2>

<p>咱們使用 border 屬性來建立縮略圖。在圖片外層添加一個連接。</p>

<p>點擊圖片查看效果：</p>

</a>

</body>

4.響應式圖片

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

<h2>響應式圖片</h2>

<p>響應式圖片會自動適配各類尺寸的屏幕。</p>

<p>經過重置瀏覽器大小查看效果:</p>

</body>

5.img的alt參數

alt 屬性是一個必需的屬性，它規定在圖像沒法顯示時的替代文本。

假設因爲下列緣由用戶沒法查看圖像，alt 屬性能夠爲圖像提供替代的信息：

6. 圖片文本

<style>

.container {

position: relative;

}

.center {

position: absolute;

left: 0;

top: 50%;

width: 100%;

text-align: center;

font-size: 18px;

}

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;

}

.bottomleft {

position: absolute;

bottom: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<p>在圖片中間位置添加文本信息:</p>

</div>

</body>

7.響應式卡片

<style>

body {margin:25px;}

div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

margin-bottom: 25px;

}

div.container {

text-align: center;

padding: 10px 20px;

}

</style>

</head>

<body>

<h2>響應式卡片</h2>

<p>The Troll's tongue in Hardanger, Norway</p>

</div>

<p>Northern Lights in Norway</p>

</div>

</body>

8. 響應式圖片相冊

<style>

div.img {

border: 1px solid #ccc;

}

div.img:hover {

border: 1px solid #777;

}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

* {

box-sizing: border-box;

}

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

}

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

</style>

</head>

<body>

<h2 style="text-align:center">響應式圖片相冊</h2>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

<h4>重置瀏覽器大小查看效果</h4>

</div>

</body>

9. 圖片 Modal(模態)

<style>

#myImg {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (image) */

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

}

/* Caption of Modal Image */

#caption {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

text-align: center;

color: #ccc;

padding: 10px 0;

height: 150px;

}

/* Add Animation */

.modal-content, #caption {

-webkit-animation-name: zoom;

-webkit-animation-duration: 0.6s;

animation-name: zoom;

animation-duration: 0.6s;

}

@-webkit-keyframes zoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

}

@keyframes zoom {

from {transform: scale(0.1)}

to {transform: scale(1)}

}

/* The Close Button */

.close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}

.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

.modal-content {

width: 100%;

}

</style>

</head>

<body>

<h2>圖片模態框</h2>

<p>本實例演示瞭如何結合 CSS 和 JavaScript 來一塊兒渲染圖片。</p><p>

首先，咱們使用 CSS 來建立 modal 窗口 (對話框), 默認是隱藏的。<p>

<p>而後，咱們使用 JavaScript 來顯示模態窗口，當咱們點擊圖片時，圖片會在彈出的窗口中顯示：</p>

</div>

// 獲取模態窗口

var modal = document.getElementById('myModal');

// 獲取圖片模態框，alt 屬性做爲圖片彈出中文本描述

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

modalImg.alt = this.alt;

captionText.innerHTML = this.alt;

}

// 獲取 <span> 元素，設置關閉模態框按鈕

var span = document.getElementsByClassName("close")[0];

// 點擊 <span> 元素上的 (x), 關閉模態框

span.onclick = function() {

modal.style.display = "none";

}

</script>

</body>

2. 按鈕

1.鼠標懸停按鈕

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

}

.button1:hover {

background-color: #4CAF50;

color: white;

}

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button2:hover {

background-color: #008CBA;

color: white;

}

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button3:hover {

background-color: #f44336;

color: white;

}

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

}

.button5:hover {

background-color: #555555;

color: white;

}

</style>

</head>

<body>

<h2>鼠標懸停按鈕</h2>

<p>咱們可使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。</p>

<p><strong>提示:</strong> 咱們可使用 <code>transition-duration</code> 屬性來設置 "hover" 效果的速度:</p>

<button class="button button1">Green</button>

<button class="button button5">Black</button>

</body>

2.按鈕陰影

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

}

.button1 {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

</style>

</head>

<body>

<p>咱們可使用 box-shadow 屬性來爲按鈕添加陰影:</p>

<button class="button button2">鼠標懸停後出現陰影</button>

</body>

3.禁用按鈕

咱們可使用 opacity 屬性爲按鈕添加透明度 (看起來相似 "disabled" 屬性效果)。

提示: 咱們能夠添加 cursor 屬性並設置爲 "not-allowed" 來設置一個禁用的圖片:

.disabled {

opacity: 0.6;

cursor: not-allowed;//禁用手勢

}

4.按鈕組

<style>

.button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.button:hover {

background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>帶邊框按鈕組</h2>

<p>Add borders to create a bordered button group:</p>

<button class="button">Button</button>

<p style="clear:both"><br>記住要清除浮動，不然下一個 p 元素的按鈕也會顯示在同一行。</p>

</body>

移除外邊距並添加 float:left 來設置按鈕組:

5. 按鈕動畫

<style>

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

}

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button span:after {

content: '»';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button:hover span {

padding-right: 25px;

}

.button:hover span:after {

opacity: 1;

right: 0;

}

</style>

</head>

<body>

<button class="button"><span>Hover </span></button>

</body>

6.按鈕動畫 - "按壓效果"

<style>

.button {

display: inline-block;

padding: 15px 25px;

font-size: 24px;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

//active 選擇器用於選擇活動連接。

//當您在一個連接上點擊時，它就會成爲活動的（激活的）

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

</style>

</head>

<body>

<button class="button">Click Me</button>

</body>

3. CSS3 框大小

CSS3 box-sizing 屬性能夠設置 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)。

默認狀況下，元素的寬度與高度計算方式以下：

width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度

height(高) + padding(內邊距) + border(邊框) = 元素實際高度

這就意味着咱們在設置元素的 width/height 時，元素真實展現的高度與寬度會更大(由於元素的邊框與內邊距也會計算在 width/height 中)。

使用 CSS3 box-sizing 屬性：

CSS3 box-sizing 屬性在一個元素的 width 和 height 中包含 padding(內邊距) 和 border(邊框)。

若是在元素上設置了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在 width 和 height 中:

<html>

<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

}

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="div1">兩個 div 如今是同樣大小的!</div>

<br>

</body>

</html>

從結果上看 box-sizing: border-box; 效果更好，也正是不少開發人員須要的效果。

如下代碼可讓全部元素以更直觀的方式展現大小。不少瀏覽器已經支持 box-sizing: border-box; (可是並不是全部 - 這就是爲何 input 和 text 元素設置了 width: 100%; 後的寬度卻不同)。

全部元素使用 box-sizing 是比較推薦的：

<style>

* {

box-sizing: border-box;

}

input, textarea {

width: 100%;

}

</style>

</head>

<body>

用戶名:<br>

郵箱:<br>

評論:<br>

</textarea>

</form>

<p><strong>提示：</strong> 能夠嘗試移除樣式中的 box-sizing 屬性，看看會發生什麼。注意移除後部分瀏覽器 input, textarea, 和 submit 按鈕的寬度不一致。</p>

</body>

4.彈性盒子(Flex Box)

彈性盒子是 CSS3 的一種新的佈局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。

CSS3 彈性盒子內容:

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。

彈性容器內包含了一個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。

淺談display:flex

display:flex 意思是彈性佈局

首先flex的出現是爲了解決哪些問題呢？

1、頁面行排列布局

像此圖左右兩個div一排顯示

能夠用浮動的佈局方式

html部分

css部分

這種佈局有兩個缺點

1.須要一個空div來清除浮動，固然也能夠選用其餘清除浮動的方法，但此處須要清除浮動才能不影響下面的佈局。

2.當.left,.right 的寬度是固定的，瀏覽器寬度變的過窄時，.right會被擠到下面

用display:flex佈局，能夠解決這兩個缺點

剛吃的html部分不變，css部分

父級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父級元素。佔的比例相同

1:2分時

一樣分爲3份時

flex是所佔的比例，這樣的佈局就方便不少。

2、div上下左右居中

我以前寫過div上下左右居中的幾種方法

其中有一個寫了margin：auto auto；這個方法的使用前提就是先把父元素設爲display:flex

html部分

css部分

在未知div寬高時，用這種方法比較方便

這是我在使用flex佈局時用到的兩個比較常見又好用的例子

5. 多媒體查詢

1. 簡單實例

<style>

body {

background-color: pink;

}

@media screen and (min-width: 480px) {

body {

background-color: lightgreen;

}

</style>

</head>

<body>

<h1>重置瀏覽器窗口查看效果！</h1>

<p>若是媒體類型屏幕的可視窗口寬度小於 480 px ，背景顏色將改變。</p>

</body>

2. 複雜實例

<style>

ul {

list-style-type: none;

}

ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

}

@media screen and (max-width: 400px) and (min-width: 300px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

}

@media screen and (max-width: 600px) and (min-width: 500px) {

ul li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

}

</style>

</head>

<body>

<h1>重置瀏覽器窗口，查看效果!</h1>

<ul>

<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>

</ul>

</body>

12. ES6簡介

https://www.jianshu.com/p/287e0bb867ae

http://www.javashuo.com/article/p-eueyuluo-gn.html

https://www.jianshu.com/p/ebfeb687eb70

1.變量聲明const和let

咱們都是知道在ES6之前，var關鍵字聲明變量。不管聲明在何處，都會被視爲聲明在函數的最頂部(不在函數內即在全局做用域的最頂部)。這就是函數變量提高例如:

function aa() {

if(bool) {

var test = 'hello man'

} else {

console.log(test)

}

以上的代碼其實是：

function aa() {

var test // 變量提高

if(bool) {

test = 'hello man'

} else {

//此處訪問test 值爲undefined

console.log(test)

}

//此處訪問test 值爲undefined

}

因此不用關心bool是否爲true or false。實際上，不管如何test都會被建立聲明。

接下來ES6主角登場：
咱們一般用let和const來聲明，let表示變量、const表示常量。let和const都是塊級做用域。怎麼理解這個塊級做用域？

在一個函數內部
在一個代碼塊內部

說白了 {}大括號內的代碼塊即爲let 和 const的做用域。

看如下代碼：

function aa() {

if(bool) {

let test = 'hello man'

} else {

//test 在此處訪問不到

console.log(test)

}

let的做用域是在它所在當前代碼塊，但不會被提高到當前函數的最頂部。

再來講說const。

const name = 'lux'

name = 'joe' //再次賦值此時會報錯

說一道面試題

var funcs = []

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

funcs.push(function() { console.log(i) })

}

funcs.forEach(function(func) {

func()

})

這樣的面試題是你們常見，不少同窗一看就知道輸出 10 十次
可是若是咱們想依次輸出0到9呢？兩種解決方法。直接上代碼。

// ES5告訴咱們能夠利用閉包解決這個問題

var funcs = []

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

func.push((function(value) {

return function() {

console.log(value)

}

}(i)))

}

// es6

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

func.push(function() {

console.log(i)

})

}

2.模板字符串

es6模板字符簡直是開發者的福音啊，解決了ES5在字符串功能上的痛點。

第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。

//es5

var name = 'lux'

console.log('hello' + name)

//es6

const name = 'lux'

console.log(`hello ${name}`) //hello lux

第二個用途，在ES5時咱們經過反斜槓(\)來作多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。

// es5

var msg = "Hi \

man!

// es6

const template = `<div>

<span>hello world</span>

</div>`

對於字符串es6固然也提供了不少厲害的方法。說幾個經常使用的。

// 1.includes：判斷是否包含而後直接返回布爾值

let str = 'hahay'

console.log(str.includes('y')) // true

// 2.repeat: 獲取字符串重複n次

let s = 'he'

console.log(s.repeat(3)) // 'hehehe'

//若是你帶入小數, Math.floor(num) 來處理

3.函數

1.函數默認參數

在ES5咱們給函數定義參數默認值是怎麼樣？

function action(num) {

num = num || 200

//當傳入num時，num爲傳入的值

//當沒傳入參數時，num即有了默認值200

return num

}

但細心觀察的同窗們確定會發現，num傳入爲0的時候就是false，此時num = 200 與咱們的實際要的效果明顯不同

ES6爲參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。

function action(num = 200) {

console.log(num)

}

action() //200

action(300) //300

2. 箭頭函數

這個恐怕是ES6最最經常使用的一個新特性了，用它來寫function比原來的寫法要簡潔清晰不少:

function(i){ return i + 1; } //ES5

(i) => i + 1 //ES6

簡直是簡單的不像話對吧...
若是方程比較複雜，則須要用{}把代碼包起來：

function(x, y) {

x++;

y--;

return x + y;

}

(x, y) => {x++; y--; return x+y}

除了看上去更簡潔之外，arrow function還有一項超級無敵的功能！
長期以來，JavaScript語言的this對象一直是一個使人頭痛的問題，在對象方法中使用this，必須很是當心。例如：

class Animal {

constructor(){

this.type = 'animal'

}

says(say){

setTimeout(function(){

console.log(this.type + ' says ' + say)

}, 1000)

}

var animal = new Animal()

animal.says('hi') //undefined says hi

運行上面的代碼會報錯，這是由於setTimeout中的this指向的是全局對象。因此爲了讓它可以正確的運行，傳統的解決方法有兩種：

第一種是將this傳給self,再用self來指代this

says(say){

var self = this;

setTimeout(function(){

console.log(self.type + ' says ' + say)

}, 1000)

2.第二種方法是用bind(this),即

says(say){

setTimeout(function(){

console.log(this.type + ' says ' + say)

}.bind(this), 1000)

但如今咱們有了箭頭函數，就不須要這麼麻煩了：

class Animal {

constructor(){

this.type = 'animal'

}

says(say){

setTimeout( () => {

console.log(this.type + ' says ' + say)

}, 1000)

}

var animal = new Animal()

animal.says('hi') //animal says hi

當咱們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，它的this是繼承外面的，所以內部的this就是外層代碼塊的this。

4.拓展的對象功能

對象初始化簡寫

ES5咱們對於對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如：

function people(name, age) {

return {

age: age

};

}

鍵值對重名，ES6能夠簡寫以下：

function people(name, age) {

return {

name,

age

};

}

ES6 一樣改進了爲對象字面量方法賦值的語法。ES5爲對象添加方法：

const people = {

getName: function() {

console.log(this.name)

}

ES6經過省略冒號與 function 關鍵字，將這個語法變得更簡潔

const people = {

getName () {

console.log(this.name)

}

ES6 對象提供了Object.assign()這個方法來實現淺複製。Object.assign()能夠把任意多個源對象自身可枚舉的屬性拷貝給目標對象，而後返回目標對象。第一參數即爲目標對象。在實際項目中，咱們爲了避免改變源對象。通常會把目標對象傳爲{}

const obj = Object.assign({}, objA, objB)

5.更方便的數據訪問--解構

數組和對象是JS中最經常使用也是最重要表示形式。爲了簡化提取信息，ES6新增了解構，這是將一個數據結構分解爲更小的部分的過程

ES5咱們提取對象中的信息形式以下：

const people = {

age: 20

}

const name = people.name

const age = people.age

console.log(name + ' --- ' + age)

是否是以爲很熟悉，沒錯，在ES6以前咱們就是這樣獲取對象信息的，一個一個獲取。如今，解構能讓咱們從對象或者數組裏取出數據存爲變量，例如

//對象

const people = {

age: 20

}

const { name, age } = people

console.log(`${name} --- ${age}`)

//數組

const color = ['red', 'blue']

const [first, second] = color

console.log(first) //'red'

console.log(second) //'blue'

6.Spread Operator 展開運算符（俗稱三個點）

ES6中另一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展現一下它的用途。

組裝對象或者數組

//數組

const color = ['red', 'yellow']

const colorful = [...color, 'green', 'pink']

console.log(colorful) //[red, yellow, green, pink]

//對象

const alp = { fist: 'a', second: 'b'}

const alphabets = { ...alp, third: 'c' }

console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

}

有時候咱們想獲取數組或者對象除了前幾項或者除了某幾項的其餘項

//數組

const number = [1,2,3,4,5]

const [first, ...rest] = number

console.log(rest) //2,3,4,5

//對象

const user = {

username: 'lux',

gender: 'female',

age: 19,

address: 'peking'

}

const { username, ...rest } = user

console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

}

對於 Object 而言，還能夠用於組合成新的 Object 。(ES2017 stage-2 proposal) 固然若是有重複的屬性名，右邊覆蓋左邊

const first = {

a: 1,

b: 2,

c: 6,

}

const second = {

c: 3,

d: 4

}

const total = { ...first, ...second }

console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。