?Sass=scss編程

Sass 是css預(yù)處理器

css預(yù)處理器用編程思維寫一些可以轉(zhuǎn)成css的東西

優(yōu)點(diǎn)：更加簡(jiǎn)潔? 適應(yīng)性更強(qiáng)? 可讀性更佳?? 更易于代碼的維護(hù)

1 .Sass與scss 區(qū)別

??????? 1 .文件擴(kuò)展名不同（后綴名）

??????? 2 .語法不同

Sass語法:???????div????????? color:red

Scss語法：????div{????? color:red;???? }

2 .Cmd命令

1 .ping_??：檢測(cè)你的網(wǎng)絡(luò)通不通

2 .ipconfig_：查看本機(jī)IP

3 .cls_：清屏

4 .D:_ :切換盤符

5 .?Tab:自動(dòng)補(bǔ)全文件名稱

6 .???/?????? 進(jìn)入根源目錄

7 .??./?????? 同級(jí)

8 .??../???? 上一級(jí)

9 .??cd_?????? 進(jìn)入文件夾

10 .?dir_?? 當(dāng)前文件下的所有文件

11 .?path??? 環(huán)境變量

12 .?安裝的文件名_-v??? 查看版本號(hào)

13 .gem?install?? sass???? 安裝sass

3 .將scss裝換為css文件

命令行（1.2.3）

1 .sass_a.scss????? 出現(xiàn)的scss文件

2.sass_a.scss_a.css????? scss裝換為css文件

3 .sass_--watch_a.scss:a.css????? 監(jiān)聽sass文件到css文件

4 .通過編輯器

???? 輸出方式?? （--style?nested）

1 . nested?? 嵌套輸出方式（開發(fā)）??格式：? red构诚；}

2 .? compact??? 緊湊輸出方式??? （代碼在一行）

3 .? expanded???? 展開輸出方式??? （我們常用）

4 .? compressed????? 壓縮輸出方式???? （項(xiàng)目上線時(shí)候用）

5 .軟件編譯

6 .sass聲明變量??? ??（格式??? $a:20;）

1 .調(diào)用變量

?1 .直接調(diào)用（屬性值調(diào)用）

??? 格式：???$width:10;???? div{width:? $width;}

2 .插值使用（選擇器?? 屬性名調(diào)用）

???????????格式:? $width:width;?? .div{#{$width}:100px；}

$box:".box";??? #{$box}{width:100px;}

7 .變量

1 .普通變量（全局變量）格式? $color:red;? div{color:$color;}

2 .局部變量?? 格式? nav{$color:blue;? background: $color;}

3 .默認(rèn)變量? 迅涮！Default（用于sass引入scss文件）格式 $color:red !Default;

8 .嵌套方法（3種） & = 父級(jí)

1 .選擇器嵌套?? 格式nav{ a{color: $color;header &{color:$color;}}}?

2 .屬性嵌套?? 格式 font{ border:{top: 1px solid red;}}

3 .偽類嵌套? 格式.clearfix{&:before,&after{color:red;}&after{background: red;}}?

9 .混合宏? @mixin? a{} div{@include a}

1 .不帶參數(shù)???? 格式 @mixin a{color:red}

2 .帶默認(rèn)參數(shù)???? 格式 @mixin a（$wdith:5px）{width:$wdith}

3 .帶參數(shù)????? 格式 @mixin border($x,$y){border:$x;width: $y;}

調(diào)用參數(shù) .nav{@include

border(50px,100px)}

4 .復(fù)雜的混合宏

格式@mixin

box-shadow($shadow...) {box-shadow: 10px 5px red;}

調(diào)用參數(shù) div{ @include

box-shadow}

10 .sass繼承? （繼承的是代碼塊）

1 .@extend 繼承的是標(biāo)簽名辆影，在css文件中div和p 同存在

格式 div{color:

red;}p{font-size: 12px; @extend div;

2 .sass占位符（%）（%后的代碼不在css文件中出現(xiàn)）

格式? %nav{width: 10px;}? div{@extend %nav;}

%nav 的代碼：不被@extend調(diào)用? 在css中div不出現(xiàn)

???????????：調(diào)用@extend????? 在css中%nav不出現(xiàn)

3 .優(yōu)點(diǎn)：更加干凈簡(jiǎn)潔

11 .混合宏?繼承?? 占位符的區(qū)別

混合宏：不會(huì)合并代碼可傳參??? 格式@mixin a{color: red;}div{@include a}

繼承：可以合并代碼，不能傳參?

占位符：不調(diào)用不產(chǎn)生css代碼 css中%后的代碼不顯示

12 .注釋

1 .//css不編譯

2 ./*?*/? css會(huì)編譯

3 .@charset “utf-8”文件編碼（文字）

13 .sass數(shù)據(jù)類型（6種）

1 .數(shù)字類型 number ：有數(shù)字就為number

2 .字符串 string ：有引號(hào)：“文字”趁仙，無引號(hào)：英文

3 .顏色 color：red?? #.....? rgba（）

4 .布爾類型：true? false

5 .空：null

6 .值列表? ：空格逗號(hào)分開

格式：（1）margin：10px 20px 30px 40px;? （2）font-family：“..”,“..”;

14 . sass運(yùn)算 ?注意空格

1 .加（ + ）：?jiǎn)挝唤y(tǒng)一???????? 格式 width:20px + 8或8px;

2 .減（ - ）：?jiǎn)挝唤y(tǒng)一????????? 格式 width:20px - 8或8px;

3 .乘（ * ）：一個(gè)有單位一個(gè)無單位??????格式 width:20px * 8;

4 .除（ / ）:一個(gè)有單位一個(gè)無單位

????方式一:（）括起來：width:（100px / 2）

????方式二:變量的情況：$x:10px;$y:5;? width:$x / $y

????方式三:有其他運(yùn)算符：width：100px / 2 + 3;

5 .顏色運(yùn)算：只允許16進(jìn)制的顏色運(yùn)算

格式：color:#1b2032 +

#307149桶癣；有一位大于16 就-16

6 .字符串運(yùn)算：

方式一：左邊帶“”表箭，右邊無引號(hào)，css 中帶“”镇匀；

方式二：左邊不帶“”照藻，右邊有引號(hào)，css中無引號(hào)汗侵；

[if !supportLists]15.???[endif]sass控制命令

1 .@if 條件判斷{對(duì)}@else {否}@else if 條件判斷{ }

格式：$w:10px;???? div{ width:$w;@if $w>20px{color:red;}

@else {color:blue;}或 @else if 條件判斷{ }}

2 .@for循環(huán)語句

方式一：@for $i from 1to 2 {.div#{$i}{width:1px}}? From to? :包開始不包結(jié)束

方式二：@for $i from 1through 2 {}??????? From through? 包開始包結(jié)束

3 .@while 語句不滿足不執(zhí)行滿足才執(zhí)行

格式? @while條件{條件為true執(zhí)行}

$i:5;@while $i>0 {div{width:$i *

2px}$i:$i - 1}

4 .@each 便利值列表

??? 格式 @each $i in top幸缕，bottom{div{border-#{$i}:1px; }

16.sass與less的區(qū)別

LESS是基于JavaScript運(yùn)行,所以LESS是在客戶端處理.

Sass是基于Ruby的，是在服務(wù)器端處理的晰韵。

less沒有輸出設(shè)置发乔，sass有4種輸出設(shè)置

sass有if for循環(huán)，less沒有

less定義變量用@

scss定義變量用$

Zepto? 現(xiàn)代高瀏覽器的js 庫 移動(dòng)端事件? （on/off）

格式?? $（“div”）.Tap(function(){

})

1 .Touch

1.Tap????輕觸屏幕

2.singleTap? 單擊

3.doubleTap? 雙擊

4.longTap??長(zhǎng)按 >750ms 觸發(fā)

2 .滑過事件

?????1.swipe? 任意滑

?????2.swipeLeft?? 左滑

?????3.swipeRight? 右滑

?????4.swipeUp???? 上滑

??5.swipeDown?? 下滑

3 .解決bug??

document.addEventListener("touchstart",function(event){event.preventDefault();})

4 .原生js / jq 移動(dòng)端的事件

要用事件綁定? 格式

?????div.addEventlistener(“touchstart”,function(){})

1 .ontouchstart??? 開始觸碰????? /? touchstart

2 .ontouchmove??? 屏幕上移動(dòng)???? /? touchmove

3 .ontouchend???? 觸碰結(jié)束?????? /? touchend

5 .Zepto 與 jq 區(qū)別

1 .zepto針對(duì)移動(dòng)端雪猪，不支持ie10以下

2 . jq Dom操作時(shí)栏尚，不能設(shè)置id，???? zepto可以

3 .jq的width()和height() 會(huì)忽略padding和border浪蹂， zepto是根據(jù)盒模型計(jì)算

?? 格式：var width=$(“img”). width()

4 .zepto的? each()只能遍歷數(shù)組抵栈，不能遍歷對(duì)象

?Swiper

1 .鏈接結(jié)構(gòu)

???????

2 .html結(jié)構(gòu)

class="swiper-container">

class="swiper-wrapper">

class="swiper-pagination">分頁器

?? ?

?? ? 右箭頭

?? ? 滾動(dòng)條

3 .js結(jié)構(gòu)

???? var mySwiper = new Swiper('.swiper-container',{})?

4 .配置選項(xiàng)

?? 1.* loop: true,自動(dòng)循環(huán)播放（true播放? false不播放）

?? 2.*autoplay:3000,? 自動(dòng)播放切換時(shí)間默認(rèn)0

?? 3.* autoplayDisableOnInteraction: true,不執(zhí)行

用戶操作完swiper,是否禁止自動(dòng)播放，false 執(zhí)行

?? 4.autoplayStopOnLast:true,停止自動(dòng)切換

?????????播放到最后一張圖停止? false不停止自動(dòng)切換

?? 5. grabCursor:true,改變鼠標(biāo)的形狀（小手）

?? 6.* direction:vertical垂直輪播默認(rèn)horizontal 水平

?? 7. initialSlide:0,設(shè)定初始的Slide

?? 8.* speed:300, 滑動(dòng)時(shí)間

?? 9.* prevButton:'.swiper-button-prev',左鍵

? 10.* nextButton:'.swiper-button-next',右鍵

? 11.* effect:‘flip’ 3d 翻轉(zhuǎn)‘coverflow’3d流‘cube’方塊‘fade’淡入

? 12. SlidesPerview:2,設(shè)置同時(shí)顯示slide的數(shù)量

? 13.* pagination : '.swiper-pagination',開啟分頁器?

? 14.* paginationClickable :true,手點(diǎn)小原點(diǎn)圖動(dòng)

? 15.paginationElement:‘a(chǎn)’設(shè)置原點(diǎn)的標(biāo)簽

? 16. paginationType:”fraction”,分頁（1/3)‘bullets’原點(diǎn)

‘progress’進(jìn)度條‘custom’自定義

???? 17 .* scrollbar:‘swiper-scrollbar’開啟滾動(dòng)條

? 18. scrollbarDraggable:true,?? 滾動(dòng)條控制slide

5 .回調(diào)函數(shù)

1 .onTouchstart:function(){} 開始觸碰是執(zhí)行函數(shù)

??????Touchmove觸碰屏幕移動(dòng) Touchend 觸碰結(jié)束

?? 2.* onSlideChangeStart:function(){}開始切換時(shí)執(zhí)行函數(shù)

6 .Swipre方法（對(duì)象名.方法）

?? 1.* mySwiper.activeIndex 返回當(dāng)前slide的下標(biāo)

2 .mySwiper.clickedIndex 返回最后點(diǎn)擊的slide的下標(biāo)

?? 3.* muSwiper.slideTo()跳轉(zhuǎn)到某一個(gè)指定的slide上

?? 4.*onlyExternal? 禁止拖動(dòng)? 雙輪播時(shí)需要

IScroll

1 .html結(jié)構(gòu) ??

2 .js 結(jié)構(gòu) ???????var myiscroll=newIScroll("#wrapper",{})

3 .配置參數(shù)

??1. bounce:false,false無彈力效果默認(rèn)true有彈力效果

2.mouseWheel:true,開啟鼠標(biāo)滾輪?false=默認(rèn)關(guān)閉鼠標(biāo)滾輪

3.scrollbars:true,開啟滾動(dòng)條?false=默認(rèn)關(guān)閉滾動(dòng)條

4.interactiveScrollbars:true,拖動(dòng)滾動(dòng)條 false 無拖動(dòng)

5.fadeScrollbars:true,滾動(dòng)條淡入淡出?false無效果

6.scrollY:true,豎著滾動(dòng)???

7.scrollX:true,橫著滾動(dòng)

4 .問題堅(jiān)決方案

當(dāng)內(nèi)容比父元素wrapper小的時(shí)候坤次，就不能滾動(dòng)了，可以動(dòng)態(tài)給內(nèi)容設(shè)置

min-height,讓內(nèi)容的最小高度比父元素大1像素斥赋，參考:

if($("#wrapper>div").height()<$("#wrapper").height()){\????? $("#wrapper>div").css({'min-height':$('#wrapper').height()+1+'px'})}?

5 .方法（對(duì)象.方法）??

?? 1.Scroll.y??? 當(dāng)前位置

?? 2.startY? 開始滾動(dòng)的位置

?? 3.maxScrollY?? 最大滑動(dòng)距離

4 .refresh（）?? 重新加載頁面

?? 5.scrollTo（0缰猴，.maxscrollY）跳轉(zhuǎn)到某一個(gè)位置

node

1 .node.js? ????是運(yùn)行在服務(wù)器的JavaScript.

2 .好處：?? nodejs基于googlede v8引擎.執(zhí)行效率高.速度快性能好

3 .特點(diǎn):

1 .Node.js 異步IO模型? 2 .回調(diào)函數(shù)? 3 .單線程??? 4.跨平臺(tái)

4 .運(yùn)行方式

1 .cmd命令：? node_?到node中??? ctrl+c返回?? node.js_進(jìn)入js文件

2 .在終端上直接寫代碼

3 .通過node打開外部文件

5 .commonJs規(guī)范：

1 .每個(gè)文件就是一個(gè)模塊，有自己的作用域疤剑。在一個(gè)文件里面定義的變量滑绒、函數(shù)、類隘膘，都是私有的疑故，對(duì)其他文件不可見。

2 .每個(gè)模塊內(nèi)部弯菊，module代表當(dāng)前模塊纵势，是一個(gè)對(duì)象，它exports屬性管钳，是對(duì)外的接口钦铁。

7.模塊：

1 .概念：每一個(gè)文件就是一個(gè)模塊

2 .原生模塊（fs,http,path,url,queryString...）

3 .文件模塊??? (自己寫的都叫做文件塊，.js??? .json??.node )

4 .主模塊:????? 會(huì)包含其他模塊才漆，最終運(yùn)行他牛曹。

8 .模塊加載：

1 .require(模塊路徑)??

要注意：模塊路徑直接寫模塊名，代表的是原生模塊醇滥，

如果想引入文件模塊黎比， 那么需要使用相對(duì)路徑或者絕對(duì)路徑的方式

2 .exports(導(dǎo)出對(duì)象)

3 .module(當(dāng)前模塊)

格式

var a=5;

1. exports.num=a;?? //(把a(bǔ)當(dāng)作num的屬性值? 暴露出去)

2. module.exports.num=a;? //(把a(bǔ)當(dāng)作num的屬性值? 暴露出去)

3. module.exports=a;?? //(輸出的是具體的值)

4. exports=a;???? //(輸出的是空對(duì)象)

exports????只能導(dǎo)出對(duì)象?? module.exports?? 可以導(dǎo)出對(duì)象超营，以及具體的值

9 .原理：

exports -> {} <- module.exports（輸出時(shí)，優(yōu)先加載）

10 .模塊初始化：? 一個(gè)模塊被加載阅虫，并執(zhí)行后演闭，會(huì)初始化一次，隨后模塊里的內(nèi)容都會(huì)被緩存起來书妻，下次直接用就可以了???

11 .常用的原生模塊：

???? fs船响、http、url躲履、path见间、queryString

12 .模塊加載：

1 .加載原生模塊 :(直接寫模塊名)???? var fs=require("fs");

2 .加載文件模塊：?? 相對(duì)路徑（同級(jí)目錄要加./）、絕對(duì)路徑

13 .引入一個(gè)包名：

???? 包的概念：一個(gè)文件夾就是一個(gè)包

???? 1工猜、包必須要有：?index.js? .json? .node?(入口文件)

???? 2米诉、package.json（包管理文件）{“main”:“./文件”}

???? 如果直接加載包名，會(huì)去尋找index這個(gè)文件篷帅，如果沒有index史侣，建立一個(gè)package.json文件，并且設(shè)置一個(gè)main屬性（入口文件）????

14 .node_modules目錄

???? 查找模塊的機(jī)制：從當(dāng)前目錄開始查找node_modules魏身，如果沒有惊橱，返回父級(jí)繼續(xù)查找，一直找到根目錄箭昵，如果還沒有税朴，報(bào)錯(cuò)

15 .NPM?? 包的管理工具

npm??包管理工具?? https://www.npmjs.com/

16 .安裝包：

1 .全局安裝? npm install包名 -g

?????????? (不管在哪運(yùn)行，默認(rèn)都會(huì)安裝到c盤的AppData文件夾下)

2 .本地安裝? npm install包名??? (安裝到當(dāng)前目錄下)

3 .卸載包：npm uninstall 包名

4 .查看包：?? npm list?

5 .查看某個(gè)包的版本號(hào)：?? npm list包名

6 .更新： npm updata包名

7 .安裝中國(guó)的npm 方式

npm install -g cnpm

npm install -g cnpm

-registry=https://registry.npm.taobao.org

17 .node.js 文件系統(tǒng)

1 .讀取文件內(nèi)容

格式：varfs=require("fs");??fs.readFile("./a.txt",function(err,data){

?????????? if(err){console.log(err);}???? console.log(data.toString());?? });

2 .打開某個(gè)文件

var fs=require("fs");?fs.open("../3.fs","r+",function(err){//打開某個(gè)文件夾家制，

???? ? if(err){//判斷報(bào)錯(cuò)console.log(err);}??? //讀取文件

???? ?fs.readFile("./a.txt",function(err,data){???? if(err){console.log(err);}

console.log(data.toString()); //輸出文件內(nèi)容轉(zhuǎn)化成字符串??? })正林；})；

3 .寫入文件? 注：寫入的內(nèi)容會(huì)替換掉以前的內(nèi)容

var fs=require("fs");var

str="吃了嗎";

fs.writeFile("./a.txt",str,function(err){

???? ?? if(err){console.log(err);?? }?????console.log("寫入成功");???? });

可以寫成String /Buffer（流）

4 .刪除文件

?varfs=require("fs");???fs.unlink("./a.txtj",function(err){

???? ?? if(err){console.log(err);}??? console.log('刪除完成');??? })

18 .http

1 .http模塊:搭建 HTTP 服務(wù)端???var http =require（“http”）

2 .參數(shù)

1 . request? :客戶端請(qǐng)求 2 .response :服務(wù)端返回3 .端口號(hào)：1024-65535

3 .訪問服務(wù)器：

1颤殴、本地服務(wù)器ip:? http://127.0.0.1:8080

2觅廓、???????? http://localhost:8080

3、通過本機(jī)ip? 192.168.1.75:8080

4 . 創(chuàng)建服務(wù)器

http .createServer（function(req,res){ }）.listen(端口號(hào)涵但，function(){ });

寫法：http.createServer(function(req,res){

???? ??????? res.writeHead()//響應(yīng)頭

???? ??????? res.write()?? //返回?cái)?shù)據(jù)杈绸，可以寫多個(gè)

???? ???????? res.end()? //服務(wù)器返回?cái)?shù)據(jù)并斷開連接，? 必須有且只有一次

}).listen(端口號(hào)贤笆，function(){???? });

??????????????? 端口號(hào)：網(wǎng)絡(luò)（1-1024）??? 本地（1024-65535）

???????????? 5 .方法

?????1 .? res.writeHead(狀態(tài)字蝇棉，文件解釋格式)?????//響應(yīng)頭

????????????????????? res.writeHead(200,{“content-Type”:”text/html ;? charset=utf-8”}

(1).狀態(tài)碼：?jiǎn)卧O(shè)置? StartusCode=200;

200 服務(wù)器成功返回?cái)?shù)據(jù)??? 404：文件沒有找到

500：服務(wù)器錯(cuò)誤? 503：服務(wù)器超時(shí)

2 .文件解釋格式? setHeader?? 只設(shè)置響應(yīng)主體

單設(shè)置? SetHeader=content-Type:text/html? charset=utf-8

Text.html? 解釋標(biāo)簽?? Text/plain? 純文本

?????3 .? res.write ( “設(shè)置響應(yīng)的數(shù)據(jù)” )??//返回?cái)?shù)據(jù)，可以寫多個(gè)

?????4 . res.end()? //服務(wù)器返回?cái)?shù)據(jù)并斷開連接芥永，?必須有且只有一次

5 .req.ur???? 拿到客戶端輸入的地址??? 要注意??????????/代表根目錄

6 .req.method? 拿到客戶端的請(qǐng)求方式? 默認(rèn)都是get

6 .問題

修改服務(wù)器代碼必須要重啟服務(wù)器,重啟的時(shí)候要終止服務(wù)篡殷。?

端口占用：? 1、改端口?? 2埋涧、終止服務(wù)（小紅點(diǎn)）

7 .

http://www.baidu.com:80/main/index.html?user=zf&pass=123#info_cc

http: 協(xié)議名???????????????????????www.baidu.com:服務(wù)器地址

/main/index.html :文件路徑??????user=zf&pass=123:查詢字符串

#info_cc:片段標(biāo)識(shí)符

19 .url模塊

1 .方法

(1).url.parse(url字符串,true);

第二個(gè)參數(shù)為true,可以把query部分轉(zhuǎn)化成對(duì)象

url對(duì)象里面會(huì)有個(gè)pathname屬性板辽，這個(gè)屬性裝的就是文件路徑

[if !supportLists](2) [endif].url.format(對(duì)象)

可以把url對(duì)象轉(zhuǎn)成url字符串????

2 .路由：

[if !supportLists]（1）[endif].通過用戶在地址欄輸入的url,?獲取其中的文件路徑奇瘦，在服務(wù)器中做? 匹配，? 如果? 用戶輸入的文件路徑與服務(wù)器中的文件路徑相同劲弦，就返回對(duì)應(yīng)頁面(通過fs模塊加載頁面并返回)耳标，如果不存在就返回404

????Var?? url?? =require（“url”）

（2）.默認(rèn)? /首頁

search.html?? 搜索頁面??????news.html?? 新聞頁面

（3）.查找路徑的方法

??????? __dirname? 絕對(duì)路徑??? __filename? 當(dāng)前文件的路徑

20 .querystring? 查詢字符串

1 .作用:對(duì)http請(qǐng)求所帶的數(shù)據(jù)進(jìn)行解析

Var querystring =require （“querystring”）

2 .方法

（1）.parse（4個(gè)參數(shù)）字符串轉(zhuǎn)化為對(duì)象

??????? Str:反序列化的字符串?????Separator:設(shè)置分隔符默認(rèn)&

??????? Eq :賦值符? 默認(rèn)=?????Options :maxKeys :number類型最大長(zhǎng)度字符串

（2）. stringify （）?? 對(duì)象轉(zhuǎn)化字符串

??????? Obj:序列化的對(duì)象???separator:字符連接符? 默認(rèn)&

??????? Eq :連接值與字符??options：字符串換成百分比形式

（3）. get 方式

?向服務(wù)器發(fā)送請(qǐng)求時(shí)? 拿數(shù)據(jù)是似地哪里拿不安全一般用 true

[if !supportLists]（4）[endif]. post 在后臺(tái)傳數(shù)據(jù)接數(shù)據(jù)

1 .傳遞? ：拼接字符串

2 . 方法

[if !supportLists]（1）[endif].req.on（“data”,function（data）{ }）

? 不停觸發(fā)data 事件，拿到客戶端傳輸過來的數(shù)據(jù)通過拼接字符串把數(shù)據(jù)組合到一起?

格式：var str=“”邑跪；req.on（“data”,function（chunk）{str+=chunk}）

?????????? 3 .req .on（“end”次坡，function（）{console.log（str）}）傳遞結(jié)束

AJAX

1 .什么是ajax:

?? AJAX全稱為“Asynchronous JavaScript and XML”

?? AJAX =異步 JavaScript 和 XML。

?? 使用XMLHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)通信画畅；

?? 使用JavaScript綁定和處理所有數(shù)據(jù)砸琅。

?? AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換轴踱，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新症脂。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新.

2 .ajax的原理：

?? Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化淫僻，

?? Ajax的原理簡(jiǎn)單來說通過XMLHttpRequest對(duì)象來向服務(wù)器發(fā)送異步請(qǐng)求诱篷，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面雳灵。

3 .ajax的核心：

?? Ajax其核心有JavaScript棕所、XMLHTTPRequest、DOM對(duì)象組成

4 .ajax的優(yōu)缺點(diǎn)：

?? 優(yōu)點(diǎn)：? 1 .無刷新更新數(shù)據(jù)悯辙。???2 .異步與服務(wù)器通信橙凳。

??????? 3 .前端和后端負(fù)載平衡?4 .界面與應(yīng)用的分離

?? 缺點(diǎn)：? 1 .無法后退??? 2.AJAX的安全問題??? 3 .AJAX不能很好支持移動(dòng)設(shè)備。

5 .對(duì)象：

new XMLHttpRequest//? 是對(duì)于現(xiàn)代瀏覽使用的

new ActiveXObject("Microsoft.XMLHTTP")? 是對(duì)IE5\6這兩個(gè)版本使用的

6 .處理兼容可以采用：? 創(chuàng)建對(duì)象

??????? var xhr;

??????? if(window.XMLHttpRequest){

????????????? xhr=newXMLHttpRequest();

??????? }elseif(window.ActiveXObject){

????????????? xhr=newActiveXObject("Microsoft.XMLHTTP");

??????? }else{? alert("你的瀏覽器太垃圾笑撞，趕緊換");???? }

7 .方法： 建立連接

?? xhr.open(method,url,async)? 與服務(wù)器進(jìn)行連接??

??????? method:請(qǐng)求方式???? get?? post

??????? url：請(qǐng)求服務(wù)器上文件的路徑，

??????? async: true（異步） false（同步）

8 .send()? 發(fā)送請(qǐng)求

如果是get方式钓觉，? 參數(shù)放一個(gè)null

如果是post方式茴肥，參數(shù)要放?? 請(qǐng)求的時(shí)候攜帶的數(shù)據(jù)

9 .屬性:

1 .responseText 服務(wù)器返回的數(shù)據(jù)（字符串形式）

??????? responseXML????????? 服務(wù)器返回的數(shù)據(jù)(XML格式)

2 .onreadystatechange?? 當(dāng)XMLHttpRequest的狀態(tài)被改變時(shí)，會(huì)觸發(fā)這個(gè)事件

3 .readystate??? 這個(gè)參數(shù)表示的就是XMLHttpRequest的狀態(tài)0?? 1?? 2??3?? 4

4 .status???? 服務(wù)器的狀態(tài)????????例如200?? 404?? 荡灾。

10 .寫ajax的步驟：

1 .必須new 一個(gè)XMLHttpRequest?? 這么個(gè)對(duì)象

2 .與服務(wù)器進(jìn)行連接?? open()

3 .發(fā)送請(qǐng)求????? send()

4 .監(jiān)聽狀態(tài)有無改變??? ?onreadystatechange

5 .判斷狀態(tài)碼???

11 .post 與 get 的區(qū)別

?? POST是發(fā)送數(shù)據(jù)瓤狐，GET是接受數(shù)據(jù)；

?? POST發(fā)送數(shù)據(jù)的安全性較好批幌，而GET較差础锐；

?? POST發(fā)送數(shù)據(jù)不限制大小，而GET大小受限2~100k

12 .請(qǐng)求方式

如果ajax是get方式：

?? 服務(wù)器直接通過地址欄就可以獲取到對(duì)應(yīng)的參數(shù)

如果是post方式請(qǐng)求

?? ajax這邊需要3個(gè)步驟荧缘，

?GET->POST?? setRequestHeader()??? send(攜帶請(qǐng)求的參數(shù))

服務(wù)器怎么接收參數(shù)：通過req.on("data")??? 和??req.on("end")? 兩個(gè)事件來接受

13 .ajax的post請(qǐng)求：

xhr.open('POST', url, true);//第一步：GET換成POST

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

//第二步：修改請(qǐng)求頭皆警，模仿form提交

xhr.send('user=guoyu&age=28');//第三步：要提交的數(shù)據(jù)放到send方法中

[if !supportLists]14. [endif]josn

1、什么是json?

?? JSON指的是 JavaScript 對(duì)象表示法（JavaScript Object Notation）

?? JSON是輕量級(jí)的文本數(shù)據(jù)交換格式

?? JSON獨(dú)立于語言

?? JSON具有自我描述性截粗，更易理解

2信姓、JSON 語法規(guī)則

?? 遵守鍵值對(duì)

?? 每條數(shù)據(jù)逗號(hào)分隔鸵隧，

?? json中只存在{} 和? []

3、文件后綴名??? .json

4意推、???????? JSON.parse()???? ??? 字符串轉(zhuǎn)對(duì)象

??????? JSON.stringify()??? 對(duì)象轉(zhuǎn)字符串

5豆瘫、JSON與XML的區(qū)別

?? JSON更小更快更易簡(jiǎn)析????????? XML大小不易簡(jiǎn)析

[if !supportLists]15、[endif]JQ? ajax

1.

[if !supportLists]（1）[endif]? 菊值、*url?? 請(qǐng)求文件的地址

[if !supportLists]（2）[endif]外驱、async? 是否同異步?true異步

[if !supportLists]（3）[endif]、beforesend?請(qǐng)求發(fā)送前執(zhí)行的回調(diào)函數(shù)

[if !supportLists]（4）[endif]腻窒、complete??請(qǐng)求之后執(zhí)行的回調(diào)函數(shù)

[if !supportLists]（5）[endif]昵宇、data? 發(fā)送到服務(wù)器的數(shù)據(jù)

[if !supportLists]（6）[endif]、dataType?服務(wù)器返回的數(shù)據(jù)類型? HTML

[if !supportLists]（7）[endif]定页、error :function（）{ }請(qǐng)求失敗

[if !supportLists]（8）[endif]趟薄、success：function（）{ } 請(qǐng)求成功

[if !supportLists]（9）[endif]、type? 請(qǐng)求方式

2.$.get的參數(shù)

[if !supportLists]（1）[endif]典徊、url?? 地址?

[if !supportLists]（2）[endif]杭煎、data? 攜帶的數(shù)據(jù)?

[if !supportLists]（3）[endif]、fn

[if !supportLists]（4）[endif]卒落、type?? 數(shù)據(jù)返回的格式

[if !supportLists]3. [endif]$.post(? )??

4. $.getJSON(?? )

5. $ .each( 數(shù)組羡铲，function（）{} )?

16、跨域??

? 1.是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本儡毕，它是由瀏覽器對(duì)javaScript施加的安全限制

? 2.同源策略 : 協(xié)議名? 域名? 端口相同

? 3.解決跨域

?????（1）也切、Access - Control - Allow - Origin : “*”=

?????（2）、JSONP

var?gulp=require("gulp");

gulp.task(任務(wù)名腰湾，[依賴任務(wù)]雷恃，function)

gulp.src(路徑)? //匹配/找到某個(gè)文件

gulp.dest(路徑)? //在何處生成文件

gulp.watch(要監(jiān)聽的文件路徑，[當(dāng)文件發(fā)生變化時(shí)要執(zhí)行的任務(wù)]);

.pipe(連接的文件)?連接作用