程序員哆啦A夢

程序員哆啦A夢 查看完整檔案

深圳編輯  |  填寫畢業院校web前端開發工程師  |  微信搜_dadaqianduan 編輯 juejin.im/user/5e477d7ce51d4526c550a27d 編輯
編輯

面向JavaScript愛好人員提供:Web前端最新資訊、原創內容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和經驗分享。

達達前端技術社群qq:634382181,我是程序員哆啦A夢,簡書萬粉優秀創作者,掘金優秀作者、CSDN博客專家,云+社區社區活躍作者,個人網站:http://www.dadaqianduan.cn/#/

個人vx: xiaoda0423

個人動態

程序員哆啦A夢 發布了文章 · 2月16日

這是我的第一次JavaScript初級技巧

Github來源:這是我的第一次JavaScript初級技巧 | 求星星 ? | 給個??關注,??點贊,??鼓勵一下作者

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處于喜歡 才會有強大的動力支撐。

每天學習編程,讓你離夢想更新一步,感謝不負每一份熱愛編程的程序員,不論知識點多么奇葩,和我一起,讓那一顆四處流蕩的心定下來,一直走下去,加油,2021加油!歡迎關注加我vx:xiaoda0423,歡迎點贊、收藏和評論

不要害怕做夢,但是呢,也不要光做夢,要做一個實干家,而不是空談家,求真力行。

前言

如果這篇文章有幫助到你,給個??關注,??點贊,??鼓勵一下作者,接收好挑戰了嗎?文章公眾號首發,關注 程序員哆啦A夢 第一時間獲取最新的文章

??筆芯??~

JavaScript工作原理

  1. HTML超文本標記語言 來指定網頁的內容和結構
  2. CSS層疊樣式表 來指定網頁的外觀,CSS用于指定樣式,獨立于網頁結構的方式實現的
  3. JavaScript能夠在網頁中添加行為

JavaScript的變量和值

  1. 聲明變量時,總是以關鍵字var打頭。
  2. 任何情況下,都應該這樣做,盡管省略關鍵字var,JavaScript也不會報錯。
  3. 創建變量時,可以不給它指定初始值,以后再給它賦值。(變量說:沒有值,那我不是沒什么用了,傷害不大,侮辱性極強

變量說,我也是有(名字)的。--- 可不能隨隨便便給我命名呢?

  • 第一,要以字母,下劃線,或者美元符號開頭。
  • 第二,然后可以使用任意數量的字母,數字,下劃線,或者美元符號。

對了,還有不要使用任何內置的關鍵字 哦?。ㄟ_達問:那我怎么知道有哪些關鍵字呢?變量:哈哈!是的,很多關鍵字,我也記不住,但是常用的,多了解的,慢慢就知道了,也不用去記住。讓我變量告訴你哦,所以就別把這些給我命名了哦)

例如以下關鍵字:

break,delete,for,let,super,void,case,do,function,new,switch,
while,catch,package,this,with,class,enum,implements,
else,if,package,private,throw,yield,const,export,import,
protected,true,continue,extends,in,public,try,debugger,
false,instanceof,return,typeof,default,finally,
interface,static,var
達達問:那什么是關鍵字呢?

哪吒:關鍵字就是JavaScript用于特殊目的的,關鍵字是JavaScript保留字。

達達問:如果變量名中包含關鍵字

哪吒:可以的,只要變量名不和關鍵字完全相同就行。

注意寫法規范:第一,每條語句后都要以分號結尾;第二,寫代碼要進行注解,用于你自己或其他開發人員的解釋代碼其作用;第三,JavaScript中是區分大小寫的哦。

布爾運算符

布爾運算符用于結果為truefalse的布爾表達式中。

有兩種布爾運算符:1.比較運算符 和 2.邏輯運算符。

  1. 比較運算符,比較運算符對兩個值進行比較。

下面是一些常見的比較運算符:

< 表示小于
> 表示大于
== 表示等于
=== 表示正好等于
<= 表示小于或等于
>= 表示大于或等于
!= 表示不等于
  1. 邏輯運算符:

邏輯運算符將兩個布爾表達式合而為一,得到一個布爾結果。

|| 表示OR(或),只要至少有一個表達式為true,結果就為true
&& 表示ADN(與),僅當兩個表達式都為true時,結果才為true
! 表示NOT(非),僅當表達式為false時,結果才為true

Math.random

  1. Math.random生成0~1(不包含1)的數字,使用Math.random可生成的最大數字為0.9999...。
  2. Math.floor總是向下取整,如1.2取整為1。

全局變量和局部變量

  1. 如果變量在函數外聲明的,它就是全局變量;
  2. 如果變量是在函數中聲明的,它就是局部變量。

了解局部變量和全局變量的作用域

變量的定義位置決定了其作用域,即變量在代碼的哪些地方可見,哪些地方不可見。

生命周期:

  1. 全局變量是在JavaScript代碼中加載到網頁之后降生的,在網頁消失后死去。重新加載網頁時,將銷毀并重新創建所有的全局變量。
  2. 局部變量一般是在函數結束時消失的,局部變量是在函數被調用后創建的,并一直活到函數返回,無論函數是否有返回值。

注意,別忘記了聲明局部變量哦!因為使用未聲明的變量時,它將會自動被視為全局變量,即使你在函數中首次使用它也是如此。

如果局部變量和全局變量同名,那么引用的都是局部變量,而不是全局變量,全局變量和局部變量不會相互影響,如果修改其中一個,對另一個不會有任何影響,它們是彼此獨立的變量。

示例:

var dada = 12;
function getName(name) {
 var dada = 123;
 // 有一個名為dada的全局變量,還有一個名為dada的局部變量。
}

達達:所以可以將形參和全局變量同名嗎?

哪吒:不可以的,和在函數中聲明了與全局變量同名的局部變量一樣,如果形參與全局變量同名,該形參會遮擋相應的全局變量。

規范:寫代碼是要將局部變量寫在函數開頭聲明,在函數開頭聲明局部變量是一種良好的編程實踐,這可以讓別人閱讀你的代碼時能夠容易找到這些聲明,清楚看到函數使用了哪些變量。

函數的讀取

JavaScript可將函數在使用前還是使用后聲明。

例如:

var dada = 12;
var jeskson = dadaFun(dada);
console.log(jeskson);

function dadaFun(name) {
 run name;
}

實際上瀏覽器讀取分:

  1. 讀取所有的函數定義;
  2. 開始執行代碼。

JavaScript是如何與網頁交互

DOM是瀏覽器在加載網頁時創建的。

  1. 在瀏覽器中加載網頁時,瀏覽器不僅對HTML進行分析并將其渲染到顯示器,還創建一系列表示標記的對象。這些對象存儲在DOM中;
  2. JavaScript代碼可通過與DOM交互來訪問元素及其內容,還可以使用DOM來創建或刪除元素;
  3. JavaScript代碼修改DOM時,瀏覽器將動態地更新網頁,讓用戶能夠在網頁中看到新內容。

getElementById

注意事項:

根據idDOM獲取元素時,如果指定的id不存在,getElementById將返回null,調用getElementById時,檢查返回的是否是null是不錯的主意,可以確保只在返回了一個元素時才訪問其屬性。

JavaScript是區分大小寫的

JavaScript是區分大小寫的語言,關鍵字,變量,函數名和所有標識符都必須采取一致的大小寫形式。

使用注釋

寫代碼時要多使用注解,示例:

// 這是單行注解
/* 這是一段注解 */
/*
* 這是一段注解
* 可以多行
*/

undefined

使用未初始化的變量,訪問不存在的屬性,使用不存在的數組元素時,你都會遇到undefined。

undefined對于任何還沒有值的東西,都會將undefined賦予給它。

示例:

var da;
if (da == undefined) {
 // da未定義
}
// 用于檢查變量是否未定義,需和undefined進行比較

可檢查屬性是否是未定義的,例如:

var daObj = {
 name: 'dadaqianduan.cn'
};

if(daObj.age == undefined) {
 // 獲取對象的age
}
使用undefined,如果你的代碼中需要判斷(如屬性或變量可能沒有值),就需要檢查它是否是undefined。

null與NaN

null用于表示對象不存在。

有些數字在JavaScript中無法表示,提供了一個替代值:NaN。在JavaScript中使用NaN,來表示它無法表示的數值結果。NaN不僅用來表示所有無法表示的數值,還是JavaScript中唯一一個與自己不相等的值。

表示:NaN != NaN

因為NaN與任何東西,包含它自己都不相等,所以不能如下使用:

// 錯誤
if(myNum == NaN) {
 // 錯誤用法
}

可以使用函數isNaN表示:

if(isNaN(myNum)) {
 // 使用函數isNaN,當它傳入的值不是數字時返回true
}

NaN表示:無法表示的數字(理解為NaN是一個數字,但只是沒有辦法表示),所以并非所有無法表示的數字都相同,則NaN與它自己不相等。

示例:0/0的結果為NaN,而10/0的結果為Infinity,在JavaScript中,Infinity指的是任何超過浮點數上限某值,Infinity的類型為數字。將Infinity與它自己相減時,結果為NaN,null的類型結果為object。

null表示不存在的對象

賦值和相等

示例:

var da = 1;
// = 是賦值運算符,用于給變量賦值

da == 2;
// == 是比較運算符,用于對兩個值進行比較,看看它們是否相等

判斷兩個對象是否相等

檢查兩個對象變量是否相等時,比較的是指向對象的引用,對象變量存儲的是指向對象的引用。

只有兩個引用指向的是同一個對象時,它們才相等。

記錄為假的值

表示值為假值:5個假值

undefined, null, 0, 空字符串, NaN

標識符

什么是標識符呢,它就是一個名字,在JavaScript中,標識符用來對變量和函數進行命名,或者用做JavaScript代碼中某些循環語句中的跳轉位置的標記。

JavaScript標識符必須以字母,下劃線,或美元符號開始,后面的字符可以是字母,數字,下劃線,或者美元符號。

字符串

JavaScript中,支持字符串既可作為基本類型,又可作為對象。

字符串屬性:length

屬性length指出了字符串包含多少個字符,為迭代字符串中的字符提供了極大的便利。

方法charAt,將一個整數作為參數,這個參數必須在0和字符串長度減1之間,并返回一個字符串,其中包含指定位置處的字符,可以認為字符串像數組,其中每個字符都有對應的索引,而索引從0開始,如果指定的索引大于或等于字符串的長度,這個方法將返回一個空字符串。

方法indexOf,將一個字符串作為參數,并在字符串中該參數首次出現的位置返回該參數中第一個字符的索引。

第一個參數,目標字符串;第二個參數,它是一個索引,指定從什么位置開始查找;第三,如果沒有找到指定的字符串,將返回索引-1。

方法substring,將兩個索引作為參數,提取并返回這個兩個索引之間的子串。如果省略第二個參數,將提取從指定索引到字符串末尾的子串。

var da = data.substring(1,5);

var da1 = data.substring(1);

方法split,將一個用作分隔符的字符作為參數,并根據這個分隔符分成多個部分。split根據分隔符將字符串分成多個部分,并返回一個包含這些部分的數組。

整理:

  1. toLowerCase,將字符串中的所有大寫字符都轉換為小寫,并返回結果
  2. slice,刪除字符串的一部分,并返回結果
  3. substring,返回字符串的一部分
  4. lastIndexOf,與indexOf類似,但查找最后一個子串
  5. match,在字符串中查找與正則表達式匹配的子串
  6. trim,刪除字符串開頭和末尾的空白字符,為處理用戶輸入提供了極大的便利
  7. replace,查找子串并將它們都替換為另一個字符串
  8. concat,將字符串拼接起來
  9. toUpperCase,將字符串中的所有小寫字符都轉換為大寫,并返回結果

事件

什么是事件,如:用戶單擊按鈕,鼠標位置發生變化,通過網絡獲取數據,窗口大小發生變化,定時器到期,瀏覽器位置發生變化等,都會觸發事件。

創建事件處理程序:

// 處理程序就是一個函數
function da() {
 console.log('dadaqianduan.cn');
}

訪問DOM中的圖片

var image = document.getElementById('dadapic'); // 獲取指向圖像元素的引用
// 只有網頁加載完畢后,我們才能從DOM中獲取圖像
window.onload = init;
function init() {
 var image = document.getElementById('dadapic');
 // 創建init函數,并將其賦給屬性onload,從而確保這些代碼在網頁加載完畢后才執行
}

// 添加圖像處理程序
window.onload = init;
function init() {
 var image = document.getElementById("dadapic");
 image.onclick = dadaFun;
}
// 將一個處理程序賦給從DOM中獲取的圖像對象的onclick屬性
// 編寫函數dadaFun
function dadaFun() {
 var image = document.getElementById("dadapic");
 image.src = "dadaqianduan.jpg";
 // 將圖像元素的src屬性更換圖片
}

事件和隊列

瀏覽器不斷地從這個隊列中取出事件,并調用相應的事件處理程序來處理他們。

mousemove事件:

當鼠標在特定元素上移動時,mousemove事件通知相應的處理程序,要指定處理程序,可使用元素的屬性onmousemove,這樣會給這種事件處理程序傳遞一個event對象,其中包含如下屬性:

clientXclientY,鼠標相對于瀏覽器創建左邊緣和上邊緣的距離,單位為像素。

screenXscreenY,鼠標相對于設備屏幕左邊緣和上邊緣的距離,單位為像素。

pageXpageY,鼠標相對于網頁左邊緣和上邊緣的距離,單位為像素`

規范

編寫可維護的代碼,很重要,不然被罵得很慘?。?!

  1. 寫代碼,無需原始開發者的幫助,寫代碼要讓任何人一看代碼就知道它是在干什么,以及它是怎么實現的。
  2. 寫代碼?,要符合邏輯,無論操作有多么復雜,代碼中的一切都要順理成章。
  3. 要重點思考,寫代碼,當使用數據發生變化時,也不用重寫。
  4. 要經過設計(代碼架構),能夠支持以后的擴展核心功能。
  5. 要讓自己或別人能夠容易進行調試,能讓代碼可以給出明確的信息,可以通過調試定位問題。
  6. 學習前要注重代碼編寫規范,要讓代碼容易維護,具有可讀性。
  7. 注意寫注解,在函數和方法地方描述其用途,完成任務所用到的算法。在大型代碼塊中,復雜的算法中,加入注解。
  8. 代碼中變量和函數的適當命名對于其可讀性和可維護性至關重要的。如變量名應該是名詞,函數名應該是動詞,返回布爾值的函數常以is開頭,對變量和函數都使用符合邏輯的名稱(長度適當),變量,函數和方法應該以小寫字母開頭,使用駝峰大小寫形式,類名應該首字母 大寫,常量值應該全部大寫并以下劃線相接,名稱要盡量具有描述性和直觀。
ES6之前,初始化方式不適合函數聲明中函數的參數,之后,可以在函數聲明中為參數指定默認值來標明參數類型。

通過標明變量類型的方式是通過初始化。示例:

// 通過初始化標明變量類型
let daBoolean = false; // 布爾值
let daNumber = -1; // 數值
let daString = ""; // 字符串
let daObject = null; // 對象

通過匈牙利表示法,標明變量類型的方式。

JavaScript傳統的匈牙利表示

o 表示 對象
s 表示 字符串
i 表示 整數
f 表示 浮點數
b 表示布爾值

let bDa; // 布爾值
let iDa; // 整數
let sDa; // 字符串

但是這種不好的是使用起來代碼可讀性下降,不夠直觀。

還可以使用類型注釋,但是也不夠優美。

setTimeout工作原理

函數setTimeout創建一個倒計時的定時器,并將其關聯到一個處理程序。當定時器計時到零后,將調用這個處理程序。

  • setInterval返回一個timer對象。要停止該定時器,可將其傳遞給另一個函數clearInterval。
  • 嚴格上說,應寫window.setTimeout,因window是全局對象,可以省略。
  • 調用setTimeout時,可以向處理程序傳遞任意數量的參數:0個,1個或更多。
  • 事件對象主要用于DOM事件處理程序,setTimeout不向處理程序傳遞事件對象,因為時間事件并非由特定的元素觸發。

事件

  1. click,在網頁中單擊時將觸發這個事件。
  2. resize,每當用戶調整瀏覽器窗口的大小時,都將觸發這個事件。
  3. play,用戶單擊網頁中video元素的播放按鈕時,將觸發這個事件。
  4. pause,用戶單擊video元素的暫停按鈕時,將觸發這個世界。
  5. load,瀏覽器加載網頁完畢后觸發的事件。
  6. unload,用戶關閉瀏覽器窗口或切換其他網頁時,將觸發這個事件。
  7. dragstart,用戶拖拽網頁中的元素時,將觸發這個事件。
  8. drop,用戶放下拖拽的元素時,將觸發這個事件。
  9. mousemove,在元素上移動鼠標時,將觸發這個事件。
  10. mouseover,用戶將鼠標指向元素時,將觸發這個事件。
  11. touchstart,在觸摸設備上,用戶觸摸并按住元素時,將觸發這個事件。
  12. touchend,用戶停止觸摸時,將觸發這個事件。
  13. keypress,用戶按下任何鍵都將觸發這個事件。
  14. mouseout,用戶將鼠標從元素上移開時將觸發這個事件。

鴨子方法

代碼示例加描述:

window.onload = dada;
function dada() {
 var image = document.getElementById("dadaqianduan");
 image.onclick = showDa;
}

function showDa() {
 var image = document.getElementById("dadaqianduan");
 image.data-original="dada.jpg";
}
網頁加載時,定義函數dada和showDa;將dada指定為加載事件處理程序,網頁加載事件發生時,調用加載事件處理程序dada,獲取id為dadaqianduan的圖像元素,將該圖像元素的單擊事件處理程序設置為showDa,圖像單擊事件發生時,調用showDa,獲取id為dadaqianduan的圖像元素。將其src屬性設置為dada.jpg。

函數是一等公民

一個標準的函數聲明,由關鍵字function,函數名,形參和代碼塊組成。

示例聲明函數:

function da(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}

// 調用這個函數
da(12);

展示另外一種(指向函數的引用):

var da = function(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}
da(12);
函數聲明 和 函數表達式

分析:在執行任何代碼之前,瀏覽器查找函數聲明,找到函數聲明時,瀏覽器創建相應的函數,并將得到的函數引用賦給與函數同名的變量。

瀏覽器:遇到了一個函數聲明,必須先對其進行處理,再做其他的事情,我們將這個函數存儲起來,以便能夠在它被調用時獲取它。

這個函數名為da,因此創建一個名為da的變量來存儲指向這個函數的引用。

  1. 在處理其他代碼之前,先處理函數聲明。
  2. 函數聲明是完整的語句,而函數表達式只是語句的一部分。
  3. 函數表達式隨其他代碼一起被處理。
  4. 對于函數聲明和函數表達式創建的函數,用相同的方式處理調用它們的語句。
  5. 應盡可能使用函數聲明,因它們先被處理。
  6. 函數聲明不返回指向函數的引用,而是創建一個與函數同名的變量,并將指向函數的引用賦給它。
  7. 函數表達式返回一個引用,該引用指向函數表達式創建的變量。
  8. 可在變量中存儲指向函數的引用。
區別
  1. 使用函數聲明時,函數將在執行代碼前創建
  2. 使用函數表達式時,函數將在運行階段執行代碼時創建
  3. 使用函數聲明時,將創建一個與函數同名的變量,并讓它指向函數
  4. 使用函數表達式時,通常不給函數指定名稱,因此你要么在代碼中將函數賦給一個變量,要么以其他方式使用函數表達式
一等公民特點

第一,將其賦給變量或存儲在數組和對象等數據結構中

第二,將其傳遞給函數

第三,從函數中返回它們

可以將函數賦給變量;可以將函數傳遞給函數;可以從函數返回函數。
  1. 定義函數的方式:使用函數聲明和使用函數表達式
  2. 函數引用是一個指向函數的值
  3. 函數聲明在執行代碼前處理
  4. 函數表達式在運行階段隨其他代碼一起執行
  5. 處理函數聲明時,瀏覽器創建一個函數以及一個與函數同名的變量,并將指向函數的引用存儲到變量中
  6. 處理函數表達式時,瀏覽器創建一個函數,但你必須顯式地處理指向這個函數的引用
  7. 函數引用是作為一等公民的值
  8. 可將作為一等公民的值賦給變量,包含在數據結構中,傳遞給函數或從函數返回

作用域,閉包

瀏覽器分兩次處理JavaScript代碼:

  1. 瀏覽器分析所有的函數聲明,并定義這些函數聲明創建的函數;
  2. 瀏覽器按從上到下的順序執行代碼,并定義函數表達式創建的函數。
使用函數聲明的函數是在使用函數表達式創建的函數之前定義的。

提升:函數聲明放在任何地方,且可在任何地方調用它們。在代碼任何地方,函數聲明創建的函數都是已定義的。

函數表達式,它創建的函數要等到它執行后才被定義,就算你將函數表達式賦給全局變量,也要等到它創建的函數被定義后,才能使用這個全局變量來調用這個函數。

嵌套函數,影響函數的作用域

函數表達式是在它調用的時候,才定義的。

詞法作用域介紹

詞法,表示只需要查看代碼的結構 就 可確定 變量的作用域,而不是等到代碼執行時才明白。

所有的局部變量都存儲在一個環境中,它存儲了在局部作用域內定義的所有變量。

function da() {
 return daString;
} 
return da;

返回這個函數時,返回的不僅僅是函數,還有與之相關聯的環境。(每個函數都有與之相關聯的環境,其中包含它所處作用域內的局部變量)

什么是詞法作用域

JavaScript的作用域規則完全基于代碼的結構,而不是一些動態的運行階段屬性。(只需要查看代碼的結構,就能確定變量是在什么地方定義的)

JavaScript中,只有函數會引入新的作用域。

對于函數中引用的變量,要確定它是在哪里定義的,可以從最里面,既是當前函數中,開始依次向最外面進行查找,直到找到它為止。如果在這些函數中都找不到它,要么是全局,要么未定義。

形參變量包含在環境中,形參視為函數的局部變量,所以它們也在環境中。

閉包

閉包,名詞,指的是函數和引用環境(閉包,一個函數及其環境)

示例:

function makeCounter() {
 var count = 0; // 局部變量
 function counter() { // 創建函數counter,它將變量count+1
  count = count + 1;
  return count;
 }
 return counter; // 返回函數counter
}
將函數傳遞給函數時,也將創建閉包。

示例:

function makeTimer(doDa, n) {
 setTimeout(function() { // 函數setTimeout傳入一個函數表達式
  console.log(doDa);  // 函數表達式使用了自由變量doDa。
 }, n);
}
自由變量:不是在本地定義的變量,這些變量稱為自由變量。

注意:(如果閉包函數外面的代碼修改了變量,閉包函數執行時看到的將是變量的新值。)

點擊事件使用閉包

示例:

window.onload = function() {
 var count = 0;
 var message = "dadaqianduan";
 var div = document.getElementById("message");
 
 var button = document.getElementById("clickme");
 button.onclick = function() {
  count++;
  div.innerHTML = message + count + "瀏覽量";
 };
};

對象

每個對象,都使用對象字面量來指定其所有屬性。

使用對象字面量創建對象

示例:

var dadaqianduan = {
 name: '魔王哪吒',
 age: 'dada',
 name1: 'jeskson',
 name2: 'dada',
}
對象構造函數

構造函數命名時,采用首字母大寫的形式,示例:

function Dadaqianduan(name, name1, name2) {
 this.name = name;
 this.name1 = name1;
 this.name2 = name2;
 this.sayName = function() { // this.sayName 屬性 一個匿名函數
  console.log("dada");
 }
}

使用構造函數示例:

var dada = new Dadaqianduan("dada1", "dada2", "dada3");

變量dada將包含一個指向新對象的引用,有了構造函數后,可以不斷地創建不同對象。

this,存儲了一個引用,指向當前處理的對象。函數執行完畢后,運算符new返回this,指向新創建的對象的引用。

構造函數中返回值,除非返回的是this,否則這將導致構造函數不返回它創建的對象。

注意:調用構造函數來創建對象時,this被設置為一個引用,值向正在創建的新對象,因此構造函數的所有代碼針對的都是這個新對象。

對象創建后,當你對其調用方法時,this被設置為方法被調用的對象。所以,在方法中,this總是表示方法被調用的對象。

對象實例

使用運算符instanceof來確定對象是由哪個構造函數創建的,如果對象是由指定的構造函數創建的,運算符instanceof將返回true。(根據創建對象時,運算符new在幕后存儲了一些信息,隨時都能確定對象是由哪個構造函數創建的)

內置構造函數

  1. Object,可使用構造函數Object來創建對象。
  2. Math,用于執行數學運算任務的屬性和方法。
  3. RegExp,用戶創建正則表達式對象。
  4. Error,在代碼中捕獲錯誤。

創建日期對象,示例:

// 只需要使用其構造函數即可
var now = new Date(); // 表示當前日期和時間的日期對象

// 構造函數Date返回一個表示本地當前日期和時間的Date實例

數組對象示例:

var emptyArray = new Array(); // 創建一個長度為零的空數組

var arrArray = new Array("a", "b", "c");

原型

JavaScript中,對象從其他對象那里繼承行為,稱為原型式繼承或基于原型的繼承。(被繼承的對象稱為原型,繼承既有屬性包括方法,同時在新對象中添加屬性)

JavaScript對象模型基于原型的概念,在這種模型中,可通過**擴展其他
對象**(即原型對象)來創建對象。

原型:對象構造函數。構造函數-繼承原型。

如何在代碼中訪問原型,有一個構造函數Da,示例訪問:

// 構造函數Da,將發現它有一個prototype屬性,這是一個指向原型的引用
Da.prototype

JavaScript中,函數也是對象,實際上,在JavaScript中,幾乎所有的東西都是對象,數組也是。(函數有屬性,而構造函數都包含屬性prototype,來訪問原型對象)

調用對象的方法時,this被設置為方法被調用的對象。即便在該對象中沒有找到調用的方法,而是在原型中找到了它,也不會修改this的值,在任何情況下,this都指向原始對象,即方法被調用的對象,即便該方法位于原型中也是如此。

  1. JavaScript對象系統使用原型式繼承
  2. 使用構造函數創建對象實例時,實例包含自己的自定義屬性,還有構造函數中方法的副本
  3. 給構造函數的原型添加屬性后,使用這個構造函數創建的實例都將繼承這些屬性
  4. 通過在原型中定義屬性,可減少對象包含的重復代碼
  5. 要重寫原型中的屬性,只需在實例中添加該屬性即可
  6. 構造函數有默認的原型,你可通過構造函數的屬性prototype來訪問它
  7. 可將你自己創建的對象賦給構造函數的屬性prototype
  8. 使用自定義的原型對象時,務必將原型的屬性constructor設置為相應的構造函數,以保持一致性。
  9. 要調用函數并指定函數體中this指向的對象,可調用其方法call

JavaScript事件

setTimeout的描述:給定一個回調及n毫秒的延遲,setTimeout就會在n毫秒后運行該回調。

示例:

for (var i = 1; i <= 3; i++) {
 setTimeout(function() {
  console.log(i);
 }, 0);
}
// 4
// 4
// 4

異步函數

JavaScript環境提供的異步函數通??梢苑譃閮纱箢悾?code>I/O函數和計時函數。

從原型到原型鏈

使用構造函數創建一個對象,示例:

// 構造函數首字母大寫
function Da() {
 // 構造函數
}
var da = new Da(); // 實例化對象
da.name = 'jeskson'; // 添加屬性
console.log(da.name); // jeskson

在示例中,Da是一個構造函數,使用new創建一個實例對象da。

記?。好總€函數都有一個prototype屬性,示例:

function Da() {
}
// 每個函數都有prototype屬性
Da.prototype.name = 'jeskson';
var da1 = new Da();
var da2 = new Da();
console.log(da1.name); // jeskson
console.log(da2.name); // jeskson

注意:函數的prototype屬性指向一個對象,這個對象是調用該構造函數而創建的實例原型。

既是構造函數和實例原型之間的關系:Da(構造函數)通過prototype而創建Da.prototype(實例原型)。

每個JavaScript對象,除null外,在創建的時候就會與之關聯另一個對象,這個對象就是 原型。每個對象都會從原型“繼承”屬性。

實例化對象da,實例與實例原型Da.prototype之間的關系:

__proto__,每個JavaScript對象(new構造函數創建對象,如上述的da),除null外,都具有的一個屬性,叫__proto__,這個屬性會指向該對象的原型。

示例:

function Da() {
}

var da = new Da();
console.log(da.__proto__ === Da.prototype); // true

既是:Da構造函數,創建實例化對象da,da對象中都有一個屬性__proto__,這個屬性指向Da.prototype實例原型,而這個實例原型,是通過Da構造函數使用 每個函數中都有一個屬性prototype,指向實例原型(Da.prototype)。

表示:構造函數 和 實例對象,都可以指向 原型。

有人問,那有沒有原型 指向 (構造函數或者實例的),答:指向實例沒有,指向構造函數就有。沒有指向實例是 一個構造函數可以生成多個實例。

記?。好總€原型都有一個constructor屬性指向關聯的 構造函數。

示例:

function Da() {
}
console.log(Da === Da.prototype.constructor); // true

既是關系:

  1. 構造函數Da通過prototype指向實例原型Da.prototype
  2. 構造函數Da創建的實例化對象da,通過da中(對象都有的屬性)__proto__指向實例原型Da.prototype
  3. 實例原型Da.prototype,每個原型中都有的屬性constructor,通過constructor指向構造函數

示例:

function Da() {

}

var da = new Da();

console.log(da.__proto__ == Da.prototype) // true
console.log(Da == Da.prototype.constructor) // true
// 獲取對象的原型
console.log(Object.getPrototypeOf(da) === Da.prototype) // true
實例與原型

當讀取實例的屬性時,如果找不到該屬性,就會去查找與對象相關聯的原型 中 的屬性,如果查找不到, 就會去找 原型 的 原型,一直找到 最頂層為止。

示例:

function Da(){
}
Da.prototype.name = 'jeskson';
var da = new Da();
da.name = 'dadaqianduan';
console.log(da.name); // dadaqianduan
delete da.name;
console.log(da.name); // jeskson
原型的原型

示例:

var obj = new Object();
obj.name = 'jeskson';
console.log(obj.name); // jeskson

關系:構造函數,實例原型,實例化對象,原型的原型Object.prototype,構造函數Object()。

  1. Da(構造函數),通過prototype指向,實例原型Da.prototype
  2. Da構造函數,創建對象da,其da中的屬性__proto__指向,實例原型Da.prototype
  3. 實例原型Da.prototype,中屬性constructor指向,構造函數Da
  4. 實例原型Da.prototype,中原型的原型,(實例原型即是對象)對象中屬性__proto__指向Object.prototype
  5. Object()構造函數,通過prototype指向,Object.prototype原型
  6. Object.prototype原型中屬性constructor指向,構造函數Object()
原型鏈

示例:

// Object.prototype的原型 -> null
console.log(Object.prototype.__proto__ === null); // true
// null 表示 沒有對象,即該處不應該有值。就是說Object.prototype沒有原型,查找到Object.prototype就可以停止查找了
Object.prototype(對象)中的屬性__proto__指向 null

constructor

示例:

function Da() {
}
var da = new Da();
console.log(da.constructor === Da); // true

當獲取da.constructor時,da中其實沒有constructor屬性,當不能讀取到constructor屬性時,會從da的原型中Da.prototype中讀取,找到原型中有該屬性,即表示:

da.constructor === Da.prototype.constructor

proto

大部分瀏覽器支持這個非標準的方法訪問原型,它并不存在于Da.prototype中,而是來自于Object.prototype,與其說是一個屬性,可以說是getter/setter,當使用obj.__proto__時,可以理解為返回了Object.getPrototype(obj)

注意:Function作為一個內置對象,是運行前就已經存在的東西,所以不會根據自己生成自己。

原因:

  1. 為量保持與其他函數一致
  2. 標明是一種關系而已
prototype是函數才會有的屬性,而__proto__是幾乎所有對象都有的屬性。

接下來,說說什么是作用域:作用域指?的是 程序源代碼中定義變量的區域。

作用域規定了如何查找變量,也就是確定當前 執行代碼 對變量 的訪問權限。

詞法作用域

JavaScript中采用的是詞法作用域,函數的作用域在函數定義的時候就決定了。

示例:

var name = 'jeskson'

function da1() {
 console.log(name);
}

function da2() {
 var name = 'dadaqianduan.cn';
 da1();
}

da2();
// 結果是jeskson , 因為采用的是靜態作用域

動態作用域

動態作用域 是 在函數調用的時候才決定的

面試題
var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f();
}
checkscope();
var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f;
}
checkscope()();
其結果都是打?。?code>local scope,因采用的是詞法作用域,函數的作用域 基于 函數 創建的位置。 (函數的作用域在函數定義的時候就決定了)

JavaScript是采用詞法作用域的,表示函數的執行依賴于函數定義的時候所產生的變量作用域。

結果是10,因變量a讀取不到對象o的屬性a。改為console.log(o.a)就可以打印11。

JavaScript設計模式之單例模式

  1. 什么是設計模式:

設計模式是一套被反復使用,多數人知曉的,經過分類編目的,代碼設計經驗的總結

有人說:當封裝一個函數時,你是在復用代碼,當使用一個設計模式時,你是在復用他人的經驗。

  1. 設計模式的分類
  • 創建型模式:單例模式,抽象工廠模式,建造者模式,工廠模式,原型模式。
  • 結構型模式:適配器模式,橋接模式,裝飾模式,組合模式,外觀模式,享元模式,代理模式。
  • 行為型模式:模板方法模式,命令模式,迭代器模式,觀察者模式,中介者模式,備忘錄模式,解釋器模式,狀態模式,策略模式,職責鏈模式,訪問者模式。
  1. 設計模式的好處
  • 行之有效的解決方法
  • 易于修改和維護
  • 便于交流和溝通
  1. 傳統的單例模式

保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。

{} 命名空間,防沖突
惰性單例

深入函數

  1. 函數的定義
// 字面量
function fn() {};
函數聲明
簡潔,直觀
聲明提前

// 構造函數
var fn = new Function();
賦值語句
多此一舉,效率低下
必須在調用語句之前

// 賦值表達式
var fn = function() {};
賦值語句
簡潔,直觀
必須在調用語句之前
  1. 函數的調用
// 普通函數
fn()

// 匿名函數
(function() {})()

// 構造函數
new Object()

// 方法
Obj.method()

// 間接
fn.daFun()
  1. 函數的參數
// 形參
函數定義時括號內的參數
接收實參的值
個數為fn_name.length

// 實參
函數調用時括號內實際傳遞的參數
將值賦值給形參
個數為arguments.length
  1. 函數的返回值
// return
用在函數中
跳出函數

// continue
用在循環中
跳出本次循環

// break
用在循環中
跳出當前循環

js表單驗證案例

用戶注冊時,用戶名,密碼,手機的數據再輸入的時候可能會格式不正確,所以需要對數據進行合法性校驗。

js的正則對象來進行數據的驗證:var reg = /正則表達式/;

js面向對象

面向對象:對代碼的一種抽象,對外統一提供調用接口的編程思想。

基于原型的面向對象方式中,對象則是依靠構造器(constructor)利用原型prototype構造出來的。

  1. 屬性是事物的特性
  2. 方法是事物的功能
  3. 對象是事物的一個實例
  4. 原型 是 js函數中由 prototype 屬性引用了一個對象,即原型對象(原型)
閉包:是一個擁有許多變量和綁定了這些變量的環境的表達式

js字面式對象聲明對象,示例:

var obj = {
 屬性名稱: 屬性值,
 屬性名稱: 屬性值,
 ...
 方法名稱:function() {},
 方法名稱:function() {},
 ...
}

new操作符后跟Object構造函數,示例:

var obj = new Object();

obj.屬性 = 屬性值;
obj.屬性 = 屬性值;
obj.方法 = function(str) {
 方法代碼
};

js中構造函數聲明對象,示例:

function Test([參數列表]) {
 this.屬性 = 屬性值;
 this.方法 = function() {
  // 方法中的代碼
 }
}

var obj = new Test(參數列表);

js中工廠方式聲明對象,示例:

function createObject(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.run = function() {
  // return 
 };
 return obj;
}

var da1 = createObject('dada', 1);
var da2 = createObject('jeskson', 2);

js中原型模式聲明對象,示例:

function test() {

}
test.prototype.屬性 = 屬性值;
test.prototype.屬性 = 屬性值;
test.prototype.屬性 = function() {
 // 執行代碼
}
var obj = new test();

js中混合模式聲明對象,示例:

function test(da1, da2, da3) {
 this.da1 = da1;
 this.da2 = da2;
 this.da3 = da3;
}
test.prototype.方法名稱 = function() {
 // 執行代碼
}
var obj = new Blog(da1, da2, da3);

js遍歷對象的屬性和方法,示例:

var da = {};
da.name = 'jeskson';
da.age = 1,
da.fn = function() {
 console.log('魔王哪吒');
}
for(var i in da) {
 // 遍歷對象 in
 console.log(da[i]);
}
什么是封裝

把對象內部數據和操作細節進行隱藏。

原型和原型鏈
  1. 原型,利用prototype添加屬性和方法
  2. 原型鏈,js在創建對象的時候,都有一個叫做__proto__的內置屬性,用于指向創建它的函數對象的原型對象prototype
原型繼承

利用原型讓一個引用類型繼承另一個引用類型的屬性和方法

構造函數繼承

在子類內部構造父類的對象實現繼承

callapply的用法
  • call,調用一個對象的一個方法,以另一個對象替換當前對象
  • apply,應用某一個對象的一個方法,用另一個對象替換當前對象

傳參方式不同,call是參數列表,apply是數組。

js面向對象的關鍵詞
instanceof, delete, call, apply, arguments, callee, this
  • 通過new function()創建的對象都是函數對象,其他的都是普通對象
  • js中所有的函數對象都有一個prototype屬性這個屬性引用了一個對象,即是原型對象,簡稱原型,普通對象沒有prototype,但有__proto__屬性。

繼承

  1. 構造繼承示例
function parents(name) {
 this.name = name;
 this.say = function() {
  console.log(this.name);
 }
}
function child(name, age {
 this.pobj = parents;
 this.pobj(name);
 this.age = age;
}

var da = new child('魔王哪吒', 1);
  1. 原型繼承示例
var da = function(){
};
da.prototype.say = function() {
 console.log('魔王哪吒');
}
da.prototype.name = 1;

var dada = function() {};
dada.prototype = new da();
dada.prototype.name = 2;
var obj = new dada();
// 子元素的成員屬性name 會覆蓋父元素

變量、作用域和內存問題

  1. 變量:基本類型 和 引用類型
// 基本類型
不可修改
保持在棧內存中
按值訪問
比較時,值相等即相等
復制時,創建一個副本
按值傳遞參數
用typeof檢測類型

// 引用類型
可以修改
保存在堆內存中
按引用訪問
比較時i,同一引用才相等
復制的其實是指針
按值傳遞參數
用instanceof檢測類型
  1. 作用域
  • 作用域:全局作用域和局部作用域
  • 作用域鏈 是用來 查詢變量的
  • js解析機制
  1. 內存問題
  • 離開作用域的值將被標記為 可回收, 將在垃圾收集期間 刪除
  • 標記清除 是 目前主流的垃圾收集算法
  • 標記清除 是給 不用的值加標記,然后進行回收其內存
  • 當變量不用的時候,可以手動解除它的引用
  • 引用計算算法 可能 因為 循環引用的問題而得不到釋放

執行上下文棧

執行代碼順序,示例(函數表達式):

var da = function() {
 console.log("da1");
}
da(); // da1

var da = function() {
 console.log("da2");
}
da(); // da2

函數聲明,先執行,展示:

function da() {
 console.log("da1");
}
da(); // da2

function da() {
 console.log("da2");
}
da(); // da2

代碼是一段一段執行的。在JavaScript中的可執行代碼,運行環境有三種,分全局代碼(全局環境,代碼首先進入的環境),函數代碼(函數被調用時執行的環境),eval代碼。

執行上下文(當執行到一個函數的時候,就會進行準備工作),概念:當代碼運行時,會產生一個對應的執行環境,在這個環境中,所有變量會被事先提出來,有的直接賦值,有的默認值為undefined,代碼從上往下開始執行,就叫做執行上下文。

示例:

function fn() {
 console.log(a); // undefined
 var a = 1;
}
fn();
執行上下文棧,Execution context stack, ECS,(如何管理創建的那么多執行上下文呢),在JavaScript引擎中創建了執行上下文棧來管理執行上下文。

執行上下文生命周期:

創建-執行-執行完畢后出棧,等待被回收。

創建階段:1,生成變量對象;2,建立作用域鏈;3,確定this指向。

執行階段:1,變量賦值;2,函數引用;3,執行其他代碼。

全局執行上下文

全局執行上下文只有一個,在客戶端中一般由瀏覽器創建,也就是window對象,我們能通過this直接訪問到它。

console.log(this);
// window

全局對象window上預定了大量的方法和屬性,我們在全局環境的任意處都能直接訪問這些屬性方法,同時window對象還是var聲明的全局變量的載體。

通過var創建的全局對象,都可以通過window訪問。

函數執行上下文

函數執行上下文可存在無數個,每當一個函數被調用時會創建一個函數上下文,同一個函數被調用多次,都會創建一個新的上下文。

模擬執行上下文棧的行為,定義執行上下文棧數組:

ECStack = [];

JavaScript開始執行代碼的時候,先遇到全局代碼,即初始化的時候先向執行上文棧壓入一個全局執行上下文,globalContext全局執行上下文,只有整個應用程序結束時,ECStack才會清空。即表示ECStack底部永遠有個globalContext。

ECStack = [
 globalContext
];

執行上下文棧,也叫執行棧,或叫 調用棧,執行棧用于存儲代碼期間 創建的 所有上下文。

示例:

function da1() {
 da2();
 console.log(1);
}

function da2() {
 da3();
 console.log(2);
}

function da3() {
 console.log(3);
}

da1(); // 3 2 1

執行棧 與 上下文的關系,執行過程:

// 代碼執行前創建全局執行上下文
ECStack = [
 globalContext
];

ECStack.push("da1 functionContext");

ECStack.push("da2 functionContext");

ECStack.push("da3 functionContext");

// da3 執行完畢,輸出 3 并出棧
ECStack.pop();
// da2
ECStack.pop();
// da1
ECStack.pop();
// 最后執行棧中只剩下一個全局執行上下文
執行上下文創建階段

分:1,創建階段;2,執行階段。

示例創建過程代碼:

ExecutionContext = {
 // 確定this的值
 ThisBinding = <this value>,
 // 創建詞法環境組件
 LexicalEnvironment = {},
 // 創建變量環境組件
 VariableEnvironment = {},
};
模擬寫執行上下文棧的變化

示例1:

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada();
}

da();

// 執行上下文棧
ECStack.push(<da> functionContext);
ECStack.push(<dada> functionContext);
ECStack.pop();
ECStack.pop();

示例2:

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada;
}

da()();

ECStack.push(<da> functionContext);
ECStack.pop();
ECStack.push(<dada> functionContext);
ECStack.pop();

作用域鏈

上述說到:每個執行上下文,都有其三個重要屬性:

  1. 變量對象
  2. 作用域鏈
  3. this

作用域鏈就是:當查找變量的時候,會先從當前上下文的變量對象中查找,如果沒有找到,就會 從父級執行上下文的變量對象中查找,一直找到全局上下文的變量對象為止,就就是全局對象。

像這樣,由多個執行上下文的變量對象構成的鏈表,叫做作用域鏈。

回顧:函數的作用域在函數定義的時候就決定了,詞法作用域。

示例:(函數有一個內部屬性[[scope]]存儲所有父變量對象)


function da1() {
    function da2() {
        ...
    }
}


da1.[[scope]] = [
  globalContext.VO
];

da2.[[scope]] = [
    da1Context.AO,
    globalContext.VO
];

示例2:

var scope = "global scope";
function da(){
    var scope2 = 'local scope';
    return scoped2;
}
da();

// 函數被創建
da.[[scope]] = [
    globalContext.VO
];

// 執行函數
ECStack = [
    daContext,
    globalContext
];

// 創建作用域鏈
daContext = {
    Scope: da.[[scope]],
}

// 用 arguments 創建活動對象
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }
}

// 將活動對象壓入 da 作用域鏈頂端
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

// 開始執行函數
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

// 函數執行完畢
ECStack = [
    globalContext
];

事件

什么是事件呢?它是可以被JavaScript偵測到的行為,通俗的將就是當用戶與web頁面進行某些交互時,解釋器就會創建響應的event對象以描述事件信息。

你知道哪些事件呢:

  1. 用戶點擊頁面上的某項內容
  2. 鼠標經過特定的元素
  3. 用戶滾動窗口
  4. 用戶改變窗口大小
  5. 用戶按下鍵盤某個鍵
  6. 頁面元素加載完成或加載失敗
事件周期
  1. 第一階段:事件捕獲,事件對象沿DOM樹向下傳播,向下
  2. 第二階段:目標觸發,運行事件監聽函數
  3. 第三階段,事件冒泡,事件對象沿DOM樹向上傳播,向上
IE的事件模型中沒有“事件捕獲”階段。

事件的冒泡處理機制(向上)

當處于DHTML對象模型底部對象事件發生時,會依次激活上面對象定義的同類事件處理。

事件句柄

那么什么是事件句柄:事件句柄,稱 事件處理函數,事件監聽函數,指用于響應某個事件而調用的函數。

每一個事件均對應一個事件句柄,在程序執行時,將相應的函數或語句指定給事件句柄,則在該事件發生時,瀏覽器便執行指定的函數或語句。

事件定義

定義監聽函數三種方式:

  1. 直接在HTML中定義元素的事件相關屬性。(應盡可能少用)
  2. JavaScript中為元素的事件相關屬性賦值。
  3. 高級事件處理方式,一個事件可以綁定多個監聽函數。
DOM事件流
  1. 添加事件:addEventListener()

語法:element.addEventListener(event,function,useCapture),用于指定元素添加事件句柄。

參數:

event: 字符串,指定事件名

function:指定要事件觸發時執行的函數

useCapture:指定事件是否在捕獲或冒泡階段執行
  1. 移除事件:removeEventListener()

語法:element.removeEventListener(event,function,useCapture),用于移除addEventListener()方法。

事件列表

一般事件示例
onclick 鼠標點擊時觸發此事件

ondblclick 鼠標雙擊時觸發此事件

onmousedown 按下鼠標時觸發此事件

onmouseup 鼠標按下后松開鼠標時觸發此事件

onmouseover 當鼠標移動到某對象范圍的上方時觸發此事件

onmousemove 鼠標移動時觸發此事件

onmouseout 當鼠標離開某對象范圍時觸發此事件

onkeypress 當鍵盤上的某個鍵被按下并且釋放時觸發此事件

onkeydown 當鍵盤上某個鍵被按下并且釋放時觸發此事件

onkeyup 當鍵盤上某個按鍵被放開時觸發此事件
頁面相關事件
onabort 圖片在下載時被用戶中斷

onbeforeunload 當前頁面的內容將要被改變時觸發此事件

onerror 出現錯誤時觸發此事件

onload 頁面內容完成時觸發此事件

onmove 瀏覽器的窗口被移動時觸發此事件

onresize 當瀏覽器的窗口大小被改變時觸發此事件

onscroll 瀏覽器的滾動條為止發生變化時觸發此事件

onstop 瀏覽器的停止按鈕被按下時觸發此事件或正在下載的文件被中斷

onunload 當前頁面將被改變時觸發此事件
滾動字幕事件
onbounce 在Marquee內的內容移動至Marquee顯示范圍之外時觸發此事件

onfinish 當Marquee元素完成需要顯示的內容后 觸發此事件

onfinish 當Marquee元素完成需要顯示的內容后觸發此事件

onstart 當Marquee元素開始顯示內容時觸發此事件
表單相關事件
onblur 當前元素失去焦點時觸發此事件

onchange 當前元素失去焦點并且元素的內容發生改變而觸發此事件

onfocus 當某個元素獲得焦點時觸發事件

onrest 當表單中reset的屬性被激發時觸發此事件

onsubmit 一個表單被提交時觸發此事件
數據綁定
oncellchange 當數據來源發生變化時
ondetaavailable 當數據接收完成時觸發事件
onafterupdate 當數據完成由數據緣對象的傳送時觸發此事件
onrowexit 當前數據源的數據將要發生變化時觸發的事件
onrowsdelete 當前數據記錄將被刪除時觸發此事件
onrowsinserted 當前數據源將要插入新數據記錄時觸發此事件

小結

  1. 在瀏覽器內部,使用文檔對象模型DOM來表示網頁
  2. 瀏覽器在加載并分析HTML時創建網頁的DOM
  3. JavaScript代碼中,使用document對象來訪問DOM
  4. document對象包含你可以用來訪問和修改DOM的屬性和方法
  5. 方法document.getElementById根據idDOM獲取一個元素
  6. 方法document.getElementById返回一個表示網頁中元素的元素對象
  7. 元素對象包含一些屬性和方法,你可以使用它們來讀取和修改元素的內容
  8. 屬性innerHTML包含元素的文本內容和全部嵌套的HTML內容
  9. 要修改元素的內容,可以修改其屬性innerHTML的值
  10. 要獲取元素的特性值,可使用方法getAttribute
  11. 要設置元素的特性值,可使用方法setAttribute
  12. 可使用window對象的onload屬性給加載事件指定事件處理程序
  13. 網頁加載完畢后,將立即調用window對象的onload屬性指向事件處理程序
  14. undefined是一個值,其undefined的類型是undefined類型,它不是對象,不是數字,字符串或布爾值,也不是任何明確的東西
  15. JavaScript中,類型分兩組,基本類型和對象。不屬于基本類型的值都是對象
  16. 基本類型包含數字,字符串,布爾值,nullundefined,其他的值都是對象
  17. undefined表示變量還沒有初始化
  18. null表示“無對象”
  19. NaN表示的是“非數字”,但應該說在JavaScript中無法表示的數字,NaN的類型為數字
  20. NaN與包含它自己在內的任何值都不相等,因此要檢查一個值是否是NaN,應該使用函數isNaN
  21. JavaScript中總共有5個假值:undefined, null, 0, "", false,其他值都是真值
  22. 要響應事件,可以編寫并注冊一個事件處理程序。如,要指定單擊事件處理程序,可將事件處理程序賦給元素的onclick屬性。
  23. 匿名韓寒是沒有名稱的函數表達式
  24. 函數聲明創建的函數是在執行其他代碼前定義的
  25. 函數表達式是在運行階段與其他代碼一起執行的,因此在函數表達式所在的語句執行前,它創建的函數是未定義的
  26. 可將函數表達式傳遞給函數,還可從函數返回函數表達式
  27. 閉包指的是函數及其引用的環境
  28. 閉包捕獲其創建時所處作用域內的變量的值
  29. 自由變量指的是在函數體內未綁定的變量
  30. typeof返回其操作數的類型,如果向它傳遞一個字符串,它將返回string
  31. 需要創建少量對象時,使用對象字面量;需要創建大量對象時,使用構造函數
  32. 使用構造函數可創建包含相同屬性和方法的一致對象
  33. 使用new來調用構造函數時,將新建一個空對象,并在構造函數中將其賦給this
  34. 在構造函數中,使用this來訪問正在創建的對象,進而給它添加屬性,構造函數 自動返回 它創建的 新對象

回看筆者往期高贊文章,也許能收獲更多喔!

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回復【資料】有我準備的一線大廠資料,本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

查看原文

贊 11 收藏 8 評論 1

程序員哆啦A夢 發布了文章 · 2月6日

html5+css3初級程序員

HTML5元素

html5的簡介

  1. 2014 年 10 月 28 日,W3C 組織公開發布 HTML5 標準規范。
  2. HTML5 針對大量不規范的 HTML 文檔,做到了良好的兼容性。

HTML5 和 HTML4 的區別

  1. DTD 的變化:因為HTML4.01基于SGML,HTML5不基于SGML
  2. HTML5 的語法變化

    某些元素可以省略結束標簽

    (<p> <li> <dt> <dd> 等) 

    沒有結束標簽的元素

    (<br> 等)
    
  3. 屬性值可以不用引號括起來
  4. 標簽不再區分大小寫
  5. 某些標志性的屬性可以省略屬性值,通常為 boolean 類型

HTML5 的優勢

  1. 解決跨瀏覽器,跨平臺問題
  2. 增強了 web 的應用程序(比如以前用 Flash 來播放視頻,現在直接使用 HTML5 來播放視頻,使得手機網頁也能看視頻)

HTML5廢棄的標簽

big center font frame frameset noframes

HTML5新增的元素

<header> 用于定義文檔或節的頁眉
<footer> 用于定義文檔或節的頁腳
<article> 用于定義文檔內的文章
<section> 用于定義文檔中的一個區域(或節)
<aside> 用于定義與當前頁面或當前文章的內容幾乎無關的附屬信息
<nav> 用于定義頁面上的導航鏈接部分

<audio> 定義聲音,比如音樂或其他音頻流
<video> 定義視頻,比如電影片段或其他視頻流

<mark> 用于定義高亮文本
<time> 用于顯示被標注的內容是日期或時間(24 小時制)
<progress> 用于表示一個進度條

<figure> 
用于定義一段獨立的引用,經常與說明(caption)<figcaption>配合使用,通常用在主文中的圖片,代碼,表格等。
<figcaption> 用于表示是與其相關聯的引用的說明/標題,用于描述其父節點
<figure>元素里的其他數據。
<hgroup> 用于對多個<h1>~<h6>元素進行組合

效果

<mark>你好</mark>

<mark>你好</mark>

<figure>
    ![](img/adv1.png)
    <figcaption>圖片標題</figcaption>
</figure>

<!-- 輸入框搜索 -->
<input type="text" list="list">
<datalist id="list">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="山西">山西</option>
</datalist>

效果:

<input type="text" list="list">
<datalist id="list">

<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山西">山西</option>

</datalist>

<!-- 點擊展開 只有谷歌和蘋果瀏覽器支持-->
<details>
    <summary>今天天氣涼快嗎?</summary>
    <p>今天下雨了,天氣很涼快</p>
</details>

效果:

<details>

<summary>今天天氣涼快嗎?</summary>
<p>今天下雨了,天氣很涼快</p>

</details>

### HTML5的表單控件

<form action="" method="get" oninput="x.value=parseInt(a.value)"> 
    0 <input type="range" id="a" value="50"> 100 <br/>
    <output name="x" for="a">50</output>
</form>

### HTML5新增的type類型

color number email
time 生成一個時間選擇器
datetime 生成一個 UTC 的日期時間選擇器
datetimelocal  生成一個本地化的日期時間選擇器
date  顯示一個日期輸入區域,可同時使用日期選擇器,結果值包括年、月、日,不包括時間。谷歌識別

### HTML5新增的表單屬性

placeholder 主要用在文本框,規定可描述輸入字段預期值的簡短的提示信息
autofocus 當為某個表單控件增加該屬性后,當瀏覽器打開這個頁面, 這個表單控件會自動獲得焦點
list 為文本框指定一個可用的選項列表,當用戶在文本框中輸 入信息時,會根據輸入的字符,自動顯示下拉列表提示,供用戶從中選擇
pattern 用于驗證表單輸入的內容,通常 HTML5 的 type 屬性,比如email、tel、 number、url 等,已經自帶了簡單的數據格式驗證功能了,加上 pattern 屬性后, 驗證會更加高效
required 必需在提交之前填寫輸入字段
spellcheck 拼寫檢查,為<input>、<textarea>等元素新增屬性
multiple 一次上傳多個文件
maxlength <textarea>新增<br />maxlength:用于規定文本區域最大字符數。
wrap:是否包含換號符(soft/ hard) 

效果:

<form id="login" action="" method="get">
    用戶名:<input type="text" name="username" placeholder="請輸出用戶名" required><br>
    年齡:<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
    郵箱:<input type="email" name="email"><br>
    生日:<input type="date" name="data"><br>  
    愛好:<select size="2" multiple  name="like">
        <option>籃球</option>
        <option>足球</option>
        <option>羽毛球球</option>
    </select>
    喜歡的顏色:<input type="color" name="color"><br>
    <button type="submit">提交</button>
</form>

<form id="login" action="" method="get">

用戶名:<input type="text" name="username" placeholder="請輸出用戶名" required><br>
年齡:<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
郵箱:<input type="email" name="email"><br>
生日:<input type="date" name="data"><br>  
愛好:<select size="2" multiple  name="like">
    <option>籃球</option>
    <option>足球</option>
    <option>羽毛球球</option>
</select>
喜歡的顏色:<input type="color" name="color"><br>
<button type="submit">提交</button>

</form>

css3選擇器

兄弟選擇器

.box~p: 
.box所有的p都會被選擇,且這些元素和第一個元素擁有同一個父元素(兩個元素之間不一定要相鄰)

屬性選擇器:

E[attribute^=value] 用于選取帶有以指定值開頭的屬性值的元素
E[attribute$=value] 用于選取屬性值以指定值結尾的元素
E[attribute*=value] 用于選取屬性值中包含指定值的元素,位置不限,也不限制整個單詞

偽類選擇器

:root 選擇文檔的根元素,HTML 里,永遠是<html>元素
:last-child 向元素添加樣式,且該元素是它的父元素的最后一個子元素
:nth-child(n) 向元素添加樣式,且該元素是它的父元素的第 n 個子元素
:nth-last-child(n) 向元素添加樣式,且該元素是它的父元素的倒數第 n 個子 元素
:only-child 向元素添加樣式,且該元素是它的父元素的唯一子元素
:first-of-type 向元素添加樣式,且該元素是同級同類型元素中第一個元 素
:last-of-type 向元素添加樣式,且該元素是同級同類型元素中最后一個 元素
:nth-of-type(n) 向元素添加樣式,且該元素是同級同類型元素中第 n 個元 素
:nth-last-oftype(n)向元素添加樣式,且該元素是同級同類型元素中倒數第 n 個元素
:only-of-type 向元素添加樣式,且該元素是同級同類型元素中唯一的元素
:empty 向沒有子元素(包括文本內容)的元素添加樣式

偽元素選擇器

:enabled 向當前處于可用狀態的元素添加樣式,通常用于定義表單的樣式或者超鏈接的樣式
:disabled 向當前處于不可用狀態的元素添加樣式,通常用于定義表單的 樣式或者超鏈接的樣式
:not(selector) 向不是 selector 元素的元素添加樣式
:target 向正在訪問的錨點目標元素添加樣式


css3屬性

background

background-clip 設置背景覆蓋范圍 border-box/padding-box/content-box 
background-origin 設置背景覆蓋的起點 border-box/padding-box/content-box 
background-size 設置背景的大小 cover/contain/長度/百分比 

文字

text-overflow 設置當文本溢出元素框時處理方式 clip/ellipsis 
word-break 只對英文起作用 以字母作為換行依據 normal/break-word 
word-wrap 只對英文起作用 以單詞作為換行依據 normal/break-all/keep-all 
white-space:pre-wrap  只對中文起作用,強制換行

盒子屬性

border-radius
box-shadow
resize

變形

translate(x,y)

表示元素水平方向移動 x,垂直方向移動 y,其中 y 可以省略,表示垂直方向沒有位移

translateX(x):表示元素水平方向移動 x。
translateY(y):表示元素垂直方向移動y。

rotate(angle)

表示元素順時針旋轉 angle 角度,angle 的單位通常為 deg

scale(x,y)

表示元素水平方向縮放比為 x,垂直方向上縮放比為y,其中y可以省略,表示y和 x相同,以保持縮放比。

scaleX(x):表示元素水平方向縮放比為 x。
scaleY(y):表示元素垂直方向上縮放比為 y。

skew(angleX ,angleY)

表示元素沿著 x 軸方向傾斜angleX角度,沿著y軸方向傾斜angleY角度,其中 angleY可以省略,表示 Y 軸方向不傾斜。

skewX(angleX):表示元素沿著 x 軸方向傾斜angleX 角度。
skewY(angleY):表示元素沿著 y 軸方向傾斜 angleY 角度。

transform-origin

表示元素旋轉的中心點

默認值為 50% 50%。

  • 第一個值表 示元素旋轉中心點的水平位置,它還可以賦值 left、right、center、長度、百分比;
  • 第二個值表示元素旋轉中心點的垂直位置,它還可以賦值 top、bottom、 center、長度、百分比。

CSS3 的 3D 變形屬性

transform 增加了三個變形函數:

rotateX:表示元素沿著 x 軸旋轉。
rotateY:表示元素沿著 y 軸旋轉。
rotateZ:表示元素沿著 z 軸旋轉。

transform-style

用來設置嵌套的子元素在 3D 空間中顯示效果。它可以設置兩個屬性值,flat(子元素不保留其 3D 位置,默認值)和 preserve-3d(子元 素保留它的 3D 位置)。

perspective

設置成透視效果,透視效果為近大遠小。該屬性值用來設置 3D 元素距離視圖的距離,單位為像素,已經內置了,我們只需要寫具體數值即可,默認值為 0。當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。

perspective-origin

設置 3D 元素所基于的 x 軸和 y 軸,改變 3D 元素的底部位置,該屬性取值同transform-origin,默認值為 50% 50%。

<style>

.box{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 500px;
}
.con{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -150px;
    animation: rotate 4s infinite;
}
.con .side{
    position: absolute;
    width: 300px;
    height: 300px;
    font-size: 44px;
    line-height: 300px;
    text-align: center;
}
.con .before{
    background-color: rgba(0,0,0,0.4);
}
.con .left{
    background-color: rgba(255,0,0,0.4);
    left: -300px;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin:right;
}
.con .right{
    background-color: rgba(255,255,0,0.4);
    left: 300px;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: left;
}
.con .top{
    background-color: rgba(0,255,0,0.4);
    left: 0;
    top: -300px;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.con .bottom{
    background-color: rgba(0,0,255,0.4);
    left: 0;
    top: 300px;
    transform: rotateX(-90deg);
    transform-origin: top;
}
.con .back{
    background-color: rgba(200,122,0,0.4);
    transform: translateZ(-300px);
}

@keyframes rotate{
    0%{
        transform:rotateX(0) rotateY(0);
    }
    50%{
        transform:rotateX(0) rotateY(360deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}

</style>

<div class="box">

<div class="con">
    <div class="side before">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
</div>

</div>

代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>立方體</title>
    <style>
        
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            perspective: 500px;
        }
        .con{
            position:relative;
            width:300px;
            height:300px;
            transform-style:preserve-3d;
            transform-origin:50% 50% -150px;
            animation:rotate 4s infinite;
        }
        .con .side{
            position:absolute;
            width:300px;
            height:300px;
            font-size:44px;
            line-height: 300px;
            text-align: center;
        }
        .con .before{
            background-color: rgba(0,0,0,0.4);
        }
        .con .left{
            background-color: rgba(255,0,0,0.4);
            left:-300px;
            top:0;
            transform:rotateY(-90deg);
            transform-origin:right;
        }
        .con .right{
            background-color: rgba(255,255,0,0.4);
            left:300px;
            top:0;
            transform:rotateY(90deg);
            transform-origin:left;
        }
        .con .top{
            background-color: rgba(0,255,0,0.4);
            left:0;
            top:-300px;
            transform:rotateX(90deg);
            transform-origin:bottom;
        }
        .con .bottom{
            background-color: rgba(0,0,255,0.4);
            left:0;
            top:300px;
            transform:rotateX(-90deg);
            transform-origin:top;
        }
        .con .back{
            background-color: rgba(200,122,0,0.4);
            transform:translateZ(-300px);
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            50%{
                transform:rotateX(0) rotateY(360deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="con">
        <div class="side before">前</div>
        <div class="side back">后</div>
        <div class="side top">上</div>
        <div class="side bottom">下</div>
        <div class="side left">左</div>
        <div class="side right">右</div>
    </div>
</div>
</body>
</html>

說明

CSS3 perspective 屬性

實例,設置元素被查看位置的視圖:

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

<style>

div1

{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; / Safari and Chrome /
}

div2

{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); / Safari and Chrome /
}
</style>

<div id="div1">
<div id="div2">HELLO</div>
</div>

代碼:

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
<div id="div2">HELLO</div>
</div>

</body>
</html>

瀏覽器支持

目前瀏覽器都不支持 perspective 屬性。

Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

定義和用法

perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。

注釋:perspective 屬性只影響 3D 轉換元素。

提示:請與 perspective-origin 屬性一同使用該屬性,這樣您就能夠改變 3D 元素的底部位置。

過渡動畫

transition:property transition-duration transition-delay transition-timing-function     

transition-delay 設置過渡的延遲時間
transition-duration 設置過渡的過渡時間
transition-timing-function 設置過渡的時間曲線

linear/ease/ease-in/easeout/ease-in-out/

transition-property 設置哪條 CSS 使用過渡
none/all/CSS 屬性名稱列表

@keyframes name{

}

animation:name duration delay count state

animation-name  使用@keyframes 定義的動畫
animation-delay 設置動畫的延遲時間

animation-timing-function 設置動畫的時間曲線
linear/ease/ease-in/easeout/ease-in-out

animation-iteration-count  設置動畫播放次數數字 /infinite
animation-direction 設置動畫反向播放 normal/alternate
animation-play-state 設置動畫播放狀態 paused/running
animation-fill-mode: forwards 動畫保持最終狀態

動畫

<style>

.box{
    position: relative;
    width: 600px;
    height: 400px;
    border:2px solid blue;
    overflow: hidden;
}
.box .main{
    width: 100px;
    height: 100px;
    background-color: red;
    animation:translate 2s 1s 1 linear forwards;
    
}
.box:hover .main{
    animation-play-state: paused;
}

@keyframes translate{
    0%{
        transform: translateX(0) translateY(0);
    }
    25%{
        transform: translateX(500px) translateY(0);
    }
    50%{
        transform: translateX(500px) translateY(300px);
    }
    75%{
        transform: translateX(0) translateY(300px);
    }
    100%{
        transform: translateX(0) translateY(300px);
    }
}

</style>

<div class="box">

<div class="main"></div>

</div>

代碼:

<!DOCTYPE html>
<html>
<head>
<title>過渡動畫</title>
<meta charset="utf-8">
<style>
    .box{
        position: relative;
        width: 600px;
        height: 400px;
        border:2px solid blue;
        overflow: hidden;
    }
    .box .main{
        width: 100px;
        height: 100px;
        background-color: red;
        animation:translate 2s 1s 1 linear forwards;
        
    }
    .box:hover .main{
        animation-play-state: paused;
    }

    @keyframes translate{
        0%{
            transform: translateX(0) translateY(0);
        }
        25%{
            transform: translateX(500px) translateY(0);
        }
        50%{
            transform: translateX(500px) translateY(300px);
        }
        75%{
            transform: translateX(0) translateY(300px);
        }
        100%{
            transform: translateX(0) translateY(300px);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div class="main"></div>
</div>
</body>
</html>

彈性盒子

CSS3 彈性盒,是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

彈性盒模型概念

任何一個容器都可以指定彈性布局

設置 flex 布局以后,子元素的 float,clear,vertical-align 等樣式全部失效

display:flex;或 display:inline-flex;

彈性父元素屬性

display:flex;
flex-direction: row|row-reverse|column| column-reverse
指定了彈性子元素在父容器中的位置。

juestify-content: flex-start|flex-end|center|space-between| space-around 
水平對齊方式

align-items:flex-start | flex-end | center | baseline | stretch 
垂直對齊方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content:
當flex-wrap起作用發生換行時,該屬性控制每行的對齊方式

彈性子元素屬性

order:num 數值小的排在前面??梢詾樨撝?/p>

flex 屬性用于指定彈性子元素如何分配空間

查看原文

贊 1 收藏 1 評論 0

程序員哆啦A夢 發布了文章 · 2月6日

html+css初級開發工程師

html+css初級開發工程師

html簡介

www

  1. 維網(環球信息網)簡稱web
  2. 分為 Web客戶端 和 Web服務器程序
  3. WWW可以讓 Web客戶端(常用瀏覽器)訪問瀏覽 Web服務器上的頁面

W3C

萬維網聯盟

文件名的命名規范:

不能數字開頭,
在項目中不可用漢字命名。
不能出現特殊字符

html

概念:

1.描述網頁的語言
2.超文本標記語言,由一套標記標簽組成
3.不是編程語言

聲明:告訴瀏覽器用什么標準去解析網頁

網頁的組成部分:

結構層,表示層,行為層

標簽:

概念:

1.由<>包圍的關鍵詞
2.標簽通常成對出現,分為標簽開頭和標簽結尾
3.有部分標簽是沒有結束標簽,成為單標簽,單標簽內必須用 / 結尾

組成:

標簽名   標簽內容  標簽屬性

語義化標簽:

概念:根據標簽名就能判斷出標簽內容

作用: 
    1.網頁結構層次更清晰。
    2.更容易被搜索引擎收錄
    3.更容易讓屏幕閱讀器讀出網頁內容。

注:頁面中所有的內容,都要放在 HTML 標簽中

標簽的內容可以是其他標簽

標題標簽

<h1 id="main">標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>    

段落標簽

<p>段落標簽<p>非常棒</p></p>

換行標簽

<br/>

水平線

<hr/>

強調標簽

<em>傾斜</em>
<i>傾斜</i>
<strong>強壯</strong>
<b>加粗</b>

圖片標簽

<img data-original="img/dada.png" alt="dada" title="圖"/>
<img data-original="img/dada.png" alt=""/>

超鏈接

<a  target="_blank">百度</a>
<a href="#main">主題</a>
<a href="mailto:xxxxx@163.com">打開郵箱</a>
<a href="筆記1.html#footer">跳轉到筆記1的底部</a>

列表標簽

<ul>
    <li>
        <a></a>
    </li>
    <li>2</li>
    <li>3</li>
</ul>


<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<dl>
    <dt>第一章</dt>
    <dd>第一節</dd>
    <dd>第二節</dd>
    <dd>第三節</dd>

    <dt>第二章</dt>
    <dd>第一節</dd>
    <dd>第二節</dd>
    <dd>第三節</dd>

    <dt>第三章</dt>
    <dd>第一節</dd>
    <dd>第二節</dd>
    <dd>第三節</dd>
</dl>

表格標簽

<table border="1" width="800">
    <caption>通訊錄</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>姓名</th>
            <th>電話</th>
            <th>備注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td rowspan="2">dada</td>
            <td>123456789</td>
            <td rowspan="2">dada</td>
        </tr>
        <tr>
            <td>123456789</td>
        </tr>
        <tr>
            <td>2</td>
            <td>dada</td>
            <td>123456789</td>
            <td>dada</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" align="right">共2人</td>
        </tr>
    </tfoot>
</table>

表單標簽

<form action="" method="post">
    用戶名:<input type="text" name="username"/><br/>
    密碼:<input type="password" name="password"/><br/>
    性別:
    <input type="radio" name="sex" value="0">男 
    <input type="radio" name="sex" value="1">女
    <br/>
    愛好:
    <select name="like"> 
         <option value="看書">看書</option> 
         <option value="旅游" selected="selected">旅游</option> 
         <option value="運動">運動</option> 
         <option value="購物">購物</option> 
    </select>
    <br/>
    個人簡介:
    <textarea cols="50" rows="10"></textarea>
    <input type="button" name="but" value="按鈕">
    <input type="submit" name="submit" value="提交">
    <input type="reset" name="reset" value="重置">
</form>

無語義標簽

<div></div>
<span></span>

模塊劃分

常見的企業站,多由頭部區,展示圖片區域,主題區域,底部信息區域組成

css的語法和選擇器

css

概念:CSS 全稱為層疊樣式表,它主要是用于定義HTML內容在瀏覽器內的顯示樣式。

引入方式:

1.外部樣式引入
    link
    @import
2.內部樣式
    代碼通常存放在<style></style>標簽內
3.內聯樣式
語法:css 樣式由選擇符和聲明組成,而聲明又由屬性和值組成
    選擇符{屬性:值}例:p{color:red;}
    選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素

選擇器:

  1. 標簽選擇器
  2. 類選擇器
  3. id選擇器
  4. 通配符選擇器
  5. 后代選擇器
  6. 子元素選擇器
  7. 群組選擇器
  8. 偽類選擇器

背景:

背景顏色 background-color
背景圖片 background-image
背景圖片位置 background-position
背景圖片重復 background-repeat
背景圖片定位 background-attachment:scroll/fixed
簡寫:
background:#ff0000 url(bg01.jpg) no-repeat fixed center

重點:

  1. link和@import的區別(無樣式閃爍問題FOUC)

    @import是 CSS 提供的語法規則,只有導入樣式表的作用;link是HTML提供的標簽,不僅可以加載 CSS 文件,還可以定義 RSS、rel 連接屬性等。

    加載頁面時,link標簽引入的 CSS 被同時加載;@import引入的 CSS 將在頁面加載完畢后被加載。

    @import是 CSS2.1 才有的語法,故只可在 IE5+ 才能識別;link標簽作為 HTML 元素,不存在兼容性問題。

  2. 三種引入樣式的優先級
  3. 選擇符的優先級

    通配符* 0
    標簽 1
    類/偽類/屬性 10
    ID 100
    行內樣式 1000
    important 1/0(無窮大)

css樣式

基本樣式:

寬 高 鼠標樣式 可見樣式 溢出隱藏 透明度

字體樣式:

字體 font-family
字號 font-size
字的樣式: font-style
字的粗細:font-weight
font:font-style font-weight 20px/40px "宋體"
字的顏色:color

文本屬性:

行高:line-height
文本修飾:text-decoration:none
縮進:text-indent
字符間距:letter-spacing
空白間距:word-spacing
英文大小寫:text-transform:capitalize/uppercase/lowercase
文字水平對齊方式:text-align
文本所在行高垂直對齊方式:vertical-align

盒模型

/*樣式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
    margin:0;
    padding:0;
}
ul,ol{
    list-style: none;
}

盒模型:

組成部件:外邊距+邊框+內邊距+內容

IE盒模型和標準盒模型切換

box-sizing:border-box/content-box;

元素分類

塊級元素

1、每個塊級元素都從新的一行開始,并且其后的元素也另起一行。<br/>
2、元素的高度、寬度、行高以及頂和底邊距都可設置。<br/>
3、元素寬度在不設置的情況下,是它本身父容器的 100%(和父元素的寬度一致),除非設定一個寬度。

<div> <p> <h1>~<h6>
<ol> <ul> <dl> <li>
<address> <blockquote>
<form>

行內元素

1、和其他元素都在一行上;<br/>
2、元素的高度、寬度、行高及頂部和底部邊距不可設置;<br/>
3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

<a> <span> <br/> <i>
<em> <strong> <label>

行內塊狀元素

1、和其他元素都在一行上;<br/>
2、元素的高度、寬度、行高以及頂和底邊距都可設置。

<img> <input> select
textarea button iframe

元素分類轉換

display

block:將元素轉換為塊級元素
inline:將元素裝換為行級元素
inline-block:將元素轉換為內聯塊元素
none: 將元素隱藏

樣式初始化的原因:

由于瀏覽器內核的不同,對標簽默認樣式的解析不同,導致頁面呈現的樣式不同。

樣式初始化

h1,h2,h3,h5{
    margin:0;
    list-style:none;
}

浮動

浮動原理

  1. 浮動使元素脫離文檔普通流,漂浮在普通流之上的。
  2. 浮動元素依然按照其在普通流的位置上出現,然后盡可能的根據設置的浮動方向向左或者向右浮動,直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止,且允許文本和內聯元素環繞它。
  3. 浮動會產生塊級框(相當于設置了 display:block),而不管該元素本身是什么。

清除浮動的方法

  1. 給浮動元素的后面添加一個空的塊級元素用clear:both;

css定位

相對定位(相對于原位置)

  1. 需要設置 position:relative(相對定位),
  2. 它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。
  3. 相對于原位置移動,移動的方向和幅度由 left、right、top、bottom 屬性確定,偏移前的位置保留不動。
  4. z-index 層級設置

絕對定位(相對于父類)

  1. 需要設置 position:absolute(絕對定位),這條語句的作用將元素從文檔流中拖出來
  2. 使用 left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父類包含塊進行絕對定位。
  3. 如果不存在這樣的包含塊,則相對于 body元素,即相對于瀏覽器窗口。
  4. z-index 層級設置

固定定位(相對于網頁窗口)

與 absolute 定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed 屬性功能相同。

z-index 層級設置

頁面布局

布局思路:

  1. 從外向里
  2. 從上至下
  3. 從左至右

樣式編寫順序:

  1. 定位(float position left right bottom top z-index)
  2. 寬、高、邊距
  3. 文字樣式
  4. 背景樣式
  5. 過渡 動畫

樣式書寫規范:

  1. 0.5可以寫.5,0可以省略
  2. 對于可以簡寫的屬性盡量簡寫 background margin padding border
  3. 給子元素添加樣式前寫父級類名
  4. 盡量使用類,不要使用id

問題:

  1. 亂碼問題 編碼
  2. 樣式引入無效問題(屬性丟失,路徑錯誤)
  3. 清除浮動問題
  4. 定位亂的問題---找絕對定位的父級添加相對定位
  5. a標簽鼠標經過無效問題--a:link a:visited a:hover a:active

兼容性問題(CSS HACK)

概念:CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號。

CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack, Hack主要針對IE瀏覽器。

1、屬性級Hack:

IE6能識別下劃線“_”和星號“*”,
IE7能識別星號“*”,但不能識別下劃線”_ ”,
而firefox兩個都不能認識。

2、選擇符級Hack:

IE6能識別*html .class{},
IE7能識別*+html .class{}或者*:first-child+html .class{}。

3、IE條件注釋Hack:

IE條件注釋是微軟IE5開始就提供的一種非標準邏輯語句。

針對所有IE:&lt;!-[if IE]&gt;&lt;!-您的代碼-&gt;&lt;![endif]&gt;,
針對IE6及以下版本:&lt;!-[if it IE 7]&gt;&lt;!-您的代碼-&gt;&lt;![endif]-&gt;,
這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效。
查看原文

贊 0 收藏 0 評論 0

程序員哆啦A夢 發布了文章 · 2月5日

過年以代碼送出新春祝福

image
image
image

<!DOCTYPE html>
<html>
<head>
    <title>Jeskson達達前端-新年快樂</title>
</head>
<style type="text/css">
body {
    /* 背景顏色*/
    background-color: #c6070c;
    /* 字體顏色 */
    color: #ffe392;
    /* 文字居中 */
    text-align: center;
}
table {
    padding-top: 100px;
    /* 居中 */
    margin: auto;
    /* 寬比例 */
    width: 50%;
}
.pinyin {
    height: 20px;
    /* 字母間距 */
    letter-spacing: 3px;
    font-weight: 400;
}
td {
    font-size: 158px;
    text-align: center;
    font-weight: 700;
    padding: 0px;
}
h2 {
    margin-top: 15px;
    margin-bottom: 100px;
    font-size: 38px;
    text-transform: uppercase;
    font-weight: 700;
    word-spacing: 5px;
}
p {
    font-weight: 700;
    letter-spacing: 1px;
    word-spacing: 2px;
}
button {
    background-color: #ef941a;
    color: #fffbe2;
    width: 200px;
    position: relative;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    line-height: 0.5;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
button:hover,
button:focus {
    background-color: #efa134;
}
button:active {
    transform: translate(0px, 2px);
    -webkit-transform: translate(0px, 2px);
}
</style>
<body>

<table>
    <tr>
        <th class="pinyin" id="pinyin1">xīn</th>
        <th class="pinyin" id="pinyin2">nián</th>
        <th class="pinyin" id="pinyin3">kuài</th>
        <th class="pinyin" id="pinyin4">lè</th>
    </tr>
    <tr>
        <td id="jeskson1">新</td>
        <td id="jeskson2">年</td>
        <td id="jeskson3">快</td>
        <td id="jeskson4">樂</td>
    </tr>
</table>

<h2 id="dadaEnglish">(新年快樂)</h2>

<button type="button" id="button">
    <p>新年現金</p>
</button>

<script type="text/javascript">
var pinyin1 = document.getElementById("pinyin1");
var pinyin2 = document.getElementById("pinyin2");
var pinyin3 = document.getElementById("pinyin3");
var pinyin4 = document.getElementById("pinyin4");

var jeskson1 = document.getElementById("jeskson1");
var jeskson2 = document.getElementById("jeskson2");
var jeskson3 = document.getElementById("jeskson3");
var jeskson4 = document.getElementById("jeskson4");

var dadaEnglish = document.getElementById("dadaEnglish");

var button = document.getElementById("button");
var random = Math.random();

var p1 = [
    "xīn",
    "gōng",
    "dà",
    "wàn",
    "nián",
    "shēn",
    "xīn",
    "gōng"
];

var p2 = [
    "nián",
    "xǐ",
    "jí",
    "shì",
    "nián",
    "tǐ",
    "xiǎng",
    "hè"
];

var p3 = [
    "kuài",
    "fā",
    "dà",
    "rú",
    "yǒu",
    "jiàn",
    "shì",
    "xīn"
];

var p4 = [
    "lè",
    "cái",
    "lì",
    "yì",
    "yú",
    "kāng",
    "chéng",
    "xǐ"
];

var dadasC1 = [
    "新",
    "恭",
    "大",
    "萬",
    "年",
    "身",
    "心",
    "恭"
];

var dadasC2 = [
    "年",
    "喜",
    "吉",
    "事",
    "年",
    "體",
    "想",
    "賀"
];

var dadasC3 = [
    "快",
    "發",
    "大",
    "如",
    "有",
    "健",
    "事",
    "新"
];

var dadasC4 = [
    "樂",
    "財",
    "利",
    "意",
    "餘",
    "康",
    "成",
    "禧"
];
var dadasE = [
    "(新年快樂)",
    "(祝賀你的成功)",
    "(吉星高照)",
    "(愿一萬件事都按你的愿望去做嗎)",
    "(每一年都比你需要的多)",
    "(祝您身體健康)",
    "(愿你心想事成)",
    "(恭賀新禧)"
];
pinyin1.textContent = p1[Math.floor(random * p1.length)];
pinyin2.textContent = p2[Math.floor(random * p2.length)];
pinyin3.textContent = p3[Math.floor(random * p3.length)];
pinyin4.textContent = p4[Math.floor(random * p4.length)];
jeskson1.textContent = dadasC1[Math.floor(random * dadasC1.length)];
jeskson2.textContent = dadasC2[Math.floor(random * dadasC2.length)];
jeskson3.textContent = dadasC3[Math.floor(random * dadasC3.length)];
jeskson4.textContent = dadasC4[Math.floor(random * dadasC4.length)];
dadaEnglish.textContent = dadasE[Math.floor(random * dadasE.length)];
var onClick = function() {
    var random = Math.random();
    pinyin1.textContent = p1[Math.floor(random * p1.length)];
    pinyin2.textContent = p2[Math.floor(random * p2.length)];
    pinyin3.textContent = p3[Math.floor(random * p3.length)];
    pinyin4.textContent = p4[Math.floor(random * p4.length)];
    jeskson1.textContent = dadasC1[Math.floor(random * dadasC1.length)];
    jeskson2.textContent = dadasC2[Math.floor(random * dadasC2.length)];
    jeskson3.textContent = dadasC3[Math.floor(random * dadasC3.length)];
    jeskson4.textContent = dadasC4[Math.floor(random * dadasC4.length)];
    dadaEnglish.textContent = dadasE[Math.floor(random * dadasE.length)];
}

button.addEventListener("click", onClick);
</script>
</body>
</html>
查看原文

贊 2 收藏 1 評論 1

程序員哆啦A夢 發布了文章 · 2月4日

一個合格的初級前端工程師需要掌握的模塊筆記

Github來源:一個合格的初級前端工程師需要掌握的模塊筆記 | 求星星 ? | 給個??關注,??點贊,??鼓勵一下作者

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處于喜歡 才會有強大的動力支撐。

不要害怕做夢,但是呢,也不要光做夢,要做一個實干家,而不是空談家,求真力行。

前言

??筆芯??~

Web模塊

html基本結構

  1. html標簽是由<>包圍的關鍵詞。
  2. html標簽通常成對出現,分為標簽開頭和標簽結尾。
  3. 有部分標簽是沒有結束標簽的,為單標簽,單標簽必須使用/結尾。
  4. 頁面所有的內容,都在html標簽中。
  5. html標簽分為三部分:標簽名稱,標簽內容,標簽屬性。
  6. html標簽具有語義化,可通過標簽名能夠判斷出該標簽的內容,語義化的作用是網頁結構層次更清晰,更容易被搜索引擎收錄,更容易讓屏幕閱讀器讀出網頁內容。
  7. 標簽的內容是在一對標簽內部的內容。
  8. 標簽的內容可以是其他標簽。

標簽屬性

  1. class屬性:用于定義元素的類名
  2. id屬性:用于指定元素的唯一id,該屬性的值在整個html文檔中具有唯一性
  3. style屬性:用于指定元素的行內樣式,使用該屬性后將會覆蓋任何全局的樣式設定
  4. title屬性:用于指定元素的額外信息
  5. accesskey屬性:用于指定激活元素的快捷鍵
  6. tabindex屬性:用于指定元素在tab鍵下的次序
  7. dir屬性:用于指定元素中內容的文本方向,屬性只有ltrrtl兩種
  8. lang屬性:用于指定元素內容的語言

事件屬性

  1. window窗口事件,onload,在網頁加載結束之后觸發,onunload,在用戶從網頁離開時發生(點擊跳轉,頁面重載,關閉瀏覽器窗口等)
  2. form表單事件,onblur,當元素失去焦點時觸發,onchange,在元素的值被改變時觸發,onfocus,當元素獲得焦點時觸發,onreset,當表單中的重置按鈕被點擊時觸發,onselect,在元素中文本被選中后觸發,onsubmit,在提交表單時觸發
  3. keyboard鍵盤事件,onkeydown,在用戶按下按鍵時觸發,onkeypress,在用戶按下按鍵后,按著按鍵時觸發。該屬性不會對所有按鍵生效,不生效的有,alt,ctrl,shift,esc
  4. mouse鼠標事件,onclick,當在元素上發生鼠標點擊時觸發,onblclick,當在元素上發生鼠標雙擊時觸發,onmousedown,當元素上按下鼠標按鈕時觸發,onmousemove,當鼠標指針移動到元素上時觸發,onmouseout,當元素指針移出元素時觸發,onmouseup,當元素上釋放鼠標按鈕時觸發。Media媒體事件,onabort,當退出時觸發,onwaiting,當媒體已停止播放但打算繼續播放時觸發。

文本標簽

  1. 段落標簽<p></p>,段落標簽用來描述一段文字
  2. 標題標簽<hx></hx>,標題標簽用來描述一個標題,標題標簽總共有六個級別,<h1></h1>標簽在每個頁面中通常只出現一次
  3. 強調語句標簽,<em></em>,用于強調某些文字的重要性
  4. 更加強調標簽,<strong></strong><em>標簽一樣,用于強調文本,但它強調的程度更強一些
  5. 無語義標簽<span></span>,標簽是沒有語義的
  6. 短文本引用標簽<q></q>,簡短文字的引用
  7. 長文本引用標簽<blockquote></blockquote>,定義長的文本引用
  8. 換行標簽<br/>

多媒體標簽

  1. 鏈接標簽,<a></a>
  2. 圖片標簽,<img/>
  3. 視頻標簽,<video></video>
  4. 音頻標簽,<audio></audio>

列表

  1. 無序列表標簽,ul,li,<ul></ul>列表定義一個無序列表,<li></li>代表無需列表中的每一個元素
  2. 有序列表,ol,li
  3. 定義列表,<dl></dl>,定義列表通常和<dt></dt><dd></dd>標簽一起使用

表格

  1. 表格標簽<table></table>
  2. 表格的一行<tr></tr>
  3. 表格的表頭<th></th>
  4. 單元格<td></td>
  5. 表格合并,同一行內,合并幾列colspan="2",同一列內,合并幾行rowspan="3"

表單標簽

  1. 表單標簽<form>

<form></form>表單是可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。

<form method="傳送方式" action="服務器文件">

action,瀏覽者輸入的數據被傳送到的地方

method,數據傳送的方式

  1. 輸入標簽<input/>

name:為文本框命名,用于提交表單,后臺接收數據用。

value:為文本輸入框設置默認值。

type:通過定義不同的type類型,input的功能有所不同。

text    單行文本輸入框
password    密碼輸入框(密碼顯示為***)
radio    單選框 (checked屬性用于顯示選中狀態)
checkbox    復選框(checked屬性用于顯示選中狀態)
file    上傳文件
button    普通按鈕
reset    重置按鈕(點擊按鈕,會觸發form表單的reset事件)
submit    提交按鈕(點擊按鈕,會吃飯form表單的submit事件)
email    專門用于輸入 e-mail
url    專門用于輸入 url
number    專門用于number
range    顯示為滑動條,用于輸入一定范圍內的值
date    選取日期和時間(還包含:month、week、time、datetime、datetime-local)
color    選取顏色

button按鈕,下拉選擇框<select></select>

<option value="提交值">選項</option>是下拉選擇框里面的每一個選項
  1. 文本域:<textarea></textarea>,當用戶想輸入大量文字的時候,使用文本域。cols,多行輸入域的列數,rows,多行輸入域的行數。

其他語義化標簽

  1. 盒子<div></div>
  2. 網頁頭部<header></header>,html5新增語義化標簽,定義網頁的頭部,主要用于布局,分割頁面的結構
  3. 底部信息<footer></footer>,html5新增語義化標簽,定義網頁的底部,主要用于布局,分割頁面的結構
  4. 導航<nav></nav>,html5新增語義化標簽,定義一個導航,主要用于布局,分割頁面的結構
  5. 文章<article></article>,html5新增語義化標簽,定義一篇文章,主要用于布局,分割頁面的結構
  6. 側邊欄<aside></aside>,語義化標簽,定義主題內容外的信息,主要用于布局,分割頁面的結構。
  7. 時間標簽<time></time>,語義化標簽,定義一個時間

網頁結構

  1. <!DOCTYPE html> 定義文檔類型,告知瀏覽器用哪一種標準解釋HTML
  2. <html></html>可告知瀏覽器其自身是一個 HTML 文檔
  3. <body></body>標簽之間的內容是網頁的主要內容
  4. <head></head>標簽用于定義文檔的頭部,它是所有頭部元素的容器
  5. <title></title>元素可定義文檔的標題
  6. <link>標簽將css樣式文件鏈接到HTML文件內
  7. <meta>定義文檔的元數據

模塊劃分

  1. 常見的企業網站,多由頭部區,展示圖片區域,主題區域,底部信息區域組成
  2. 網頁拆分原則: – 由上到下 - 由內到外

CSS代碼語法

  1. CSS全稱為層疊樣式表(Cascading Style Sheets),它主要是用于定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。
  2. css代碼通常存放在<style></style>標簽內
  3. css 樣式由選擇符和聲明組成,而聲明又由屬性和值組成
  4. 選擇符{屬性:值}
  5. 選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素

CSS 放置位置

  1. 行內樣式,不建議使用
  2. 內聯式樣式表
  3. 外聯樣式表

CSS的繼承

  1. CSS的某些樣式是具有繼承性的,繼承是一種規則,它允許樣式不僅應用于某個特定html標簽元素,而且應用于其后代。
  2. 不可繼承樣式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
  3. 可以繼承的樣式:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

選擇器的種類

  1. 標簽選擇器:通過標簽的名字,修改css樣式
  2. 通配符選擇器:選擇頁面中所有的元素
  3. 屬性選擇器
  4. 后代選擇器:選擇某個父元素下面所有的元素
  5. 一級子元素選則器:選擇某個父元素的直接子元素,后代選擇器是選擇父元素的所有子孫元素,一級子元素原則器只選擇第一級子元素,不會再向下查找元素
  6. id選擇器:通過id查找頁面中唯一的標簽
  7. class選擇器:通過特定的class(類)來查找頁面中對應的標簽,以 .class名稱
  8. 偽類選擇器::hover鼠標移入某個元素;:before在某個元素的前面插入內容;:after在某個元素的后面插入內容
  9. 群組選擇器:可以對多個不同的選擇器設置相同的樣式

選擇器的優先級

  1. 當有不同的選擇器對同一個對象進行樣式指定時,并且兩個選擇器有相同的屬性被賦予不同的值時。
  2. 通過測算那個選擇器的權重值最高,應用哪一個選擇器的樣式
  3. 權重計算方式:
標簽選擇器:1

class選擇器:10

id選擇器:100

行內樣式:1000

!important 最高級別,提高樣式權重,擁有最高級別

背景樣式

  1. 背景顏色background-color
  2. 背景圖片background-image
background-image:url(bg01.jpg);
  1. 背景圖片位置background-position
background-position:10px 100px;

// 代表坐標x,y軸
  1. 背景圖片重復background-repeat
background-repeat:no-repeat

// no-repeat 設置圖像不重復,常用

// round 自動縮放直到適應并填充滿整個容器

// space 以相同的間距平鋪且填充滿整個容器
  1. 背景圖片定位background-attachment
background-attachment:fixed

// 背景圖像是否固定或者隨著頁面的其余部分滾動

// background-attachment的值可以是scroll(跟隨滾動),fixed(固定)
  1. background縮寫
background:#ff0000 url(bg01.jpg) no-repeat fixed center

字體樣式

  1. 字體族font-family
font-family:"微軟雅黑","黑體";
  1. 字體大小font-size
font-size:12px;
網頁默認字體大小是16px
  1. 字體粗細font-weight
font-weight:400;

normal(默認)
bold(加粗)
bolder(相當于<strong>和<b>標簽)
lighter (常規)
100 ~ 900 整百(400=normal,700=bold)
  1. 字體顏色color
顏色的英文單詞color:red;

十六進制色:color: #FFFF00;

RGB(紅綠藍)color:rgb(255,255,0)

RGBA(紅綠藍透明度)A是透明度在0~1之間取值。color:rgba(255,255,0,0.5)
  1. 字體斜體font-style
font-style:italic

normal 文本正常顯示

italic 文本斜體顯示

oblique 文本傾斜顯示

文本屬性

  1. 行高line-height
line-height:50px;

可以將父元素的高度撐起來

  1. 文本水平對齊方式text-align
left 左對齊
center 文字居中
right 右對齊
  1. 文本所在行高的垂直對齊方式vertical-align
baseline 默認

sub 垂直對齊文本的下標,和<sub>標簽一樣的效果

super 垂直對齊文本的上標,和<sup>標簽一樣的效果

top 對象的頂端與所在容器的頂端對齊

text-top 對象的頂端與所在行文字頂端對齊

middle 元素對象基于基線垂直對齊

bottom 對象的底端與所在行的文字底部對齊

text-bottom 對象的底端與所在行文字的底端對齊
  1. 文本縮進text-indent
text-indent:2em;
通常用在段落開始位置的首行縮進
  1. 字母之間的間距letter-spacing
  2. 單詞之間間距word-spacing
  3. 文本的大小寫text-transform
capitalize 文本中的每個單詞以大寫字母開頭。

uppercase 定義僅有大寫字母。

lowercase 定義僅有小寫字母。
  1. 文本的裝飾text-decoration
none 默認。
underline 下劃線。
overline 上劃線。
line-through 中線。
  1. 自動換行word-wrap
word-wrap: break-word;

基本樣式

  1. 寬度width
width:200px;
定義元素的寬度
  1. 高度height
height:300px
元素默認沒有高度
需要設置高度
可以不定義高度,讓元素的內容將元素撐高
  1. 鼠標樣式cursor

定義鼠標的樣式cursor:pointer

default默認
pointer小手形狀
move移動形狀
  1. 透明度opacity
opacity:0.3
透明度的值0~1之間的數字,0代表透明,1代表完全不透明

透明的元素,只是看不到了,但是還占據著文檔流
  1. 可見性visibility
visibility:hidden;

visible 元素可見

hidden 元素不可見

collapse 當在表格元素中使用時,此值可刪除一行或一列,不會影響表格的布局。
  1. 溢出隱藏 overflow
設置當對象的內容超過其指定高度及寬度時如何顯示內容
visible 默認值,內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,并且其余內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。
  1. 邊框顏色outline

input文本輸入框自帶邊框,且樣式丑陋,我們可以通過outline修改邊框

outline:1px solid #ccc;

outline:none清除邊框

樣式重置

早期的網頁沒有css樣式,為了界面美觀,很多元素自帶margin、padding等樣式,但這些樣式在不同瀏覽器解析的值都不一樣,需要將css樣式重置,保證在不同瀏覽器顯示一致。

清除元素的margin和padding
去掉自帶的列表符
去掉自帶的下劃線

盒模型樣式

  1. 塊狀元素、內聯元素和內聯塊狀元素。

塊級元素:

  • 每個塊級元素都從新的一行開始,并且其后的元素也另起一行。
  • 元素的高度、寬度、行高以及頂和底邊距都可設置。
  • 元素寬度在不設置的情況下,是它本身父容器的100%,除非設定一個寬度。

行內元素:

  • 和其他元素都在一行上
  • 元素的高度、寬度、行高及頂部和底部邊距不可設置
  • 元素的寬度就是它包含的文字或圖片的寬度,不可改變。

行內塊狀元素:

  • 和其他元素都在一行上
  • 元素的高度、寬度、行高以及頂和底邊距都可設置。
  1. 元素分類轉換display

block:將元素轉換為塊級元素

inline:將元素裝換為行級元素

inline-block:將元素轉換為內聯塊元素

none: 將元素隱藏

  1. 描邊border
border:2px solid #f00;

線條的樣式:

dashed(虛線)| dotted(點線)| solid(實線)。

css樣式中允許只為一個方向的邊框設置樣式:

下描邊border-bottom:1px solid red;

上描邊border-top:1px solid red;

右描邊border-right:1px solid red;

左描邊border-left:1px solid red;
  1. 間距margin
div{margin:20px 10px 15px 30px;}
  1. 內填充padding
padding:10px

浮動float

  1. 浮動原理
  • 浮動使元素脫離文檔普通流,漂浮在普通流之上的。
  • 浮動元素依然按照其在普通流的位置上出現,然后盡可能的根據設置的浮動方向向左或者向右浮動,直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止,且允許文本和內聯元素環繞它。
  • 浮動會產生塊級框(相當于設置了display:block),而不管該元素本身是什么。
  1. 清除浮動帶來的影響

clear 清除浮動:

none : 不清除(默認值)。

left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許兩邊有浮動對象
  1. 利用偽類實現清除浮動
.clearFix {
      content="";
      display:block;
      width:0;
      height:0;
      clear:both;
}

定位position

  1. 定位功能可以讓布局變的更加自由。
  2. 層模型--絕對定位(相對于父類)

絕對定位使元素的位置與文檔流無關,因此不占據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對于它在普通流中的位置。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下圖所示:

如果想為元素設置層模型中的絕對定位,需要設置position:absolute(絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。
  1. 層模型--相對定位(相對于原位置)

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位,它將出現在它所在的位置上。然后,可以通過設置垂直或水平位置,讓這個元素“相對于”它的起點進行移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下圖所示:

如果想為元素設置層模型中的相對定位,需要設置position:relative(相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于原位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
  1. 層模型--固定定位(相對于網頁窗口)
position:fixed
absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed屬性功能相同。

瀏覽器默認樣式

  1. 頁邊距

IE默認為10px,通過bodymargin屬性設置

要清除頁邊距一定要清除這兩個屬性值

body { margin:0; padding:0;}
  1. 段間距

IE默認為19px,通過pmargin-top屬性設置

p默認為塊狀顯示,要清除段間距,一般可以設置

p { margin-top:0; margin-bottom:0;}

html5

HTML5 的優勢

  1. 解決跨瀏覽器,跨平臺問題
  2. 增強了 web 的應用程序

HTML5 廢棄元素

frame frameset noframes
acronym applet dir
basefont big center font strike tt

HTML5 新增元素

<header>    用于定義文檔或節的頁眉

<footer>    用于定義文檔或節的頁腳

<article>    用于定義文檔內的文章

<section>    用于定義文檔中的一個區域(或節)

<aside>    用于定義與當前頁面或當前文章的內容幾乎無關的附屬信息

<figure>    用于定義一段獨立的引用,經常與說明(caption)<figcaption>配合使用,通常用在主文中的圖片,代碼,表格等。

<figcaption>    用于表示是與其相關聯的引用的說明/標題,用于描述其父節點<figure>元素里的其他數據。

<hgroup>    用于對多個<h1>~<h6>元素進行組合

<nav>    用于定義頁面上的導航鏈接部分

<mark>    用于定義高亮文本

<time>    用于顯示被標注的內容是日期或時間(24小時制)

<meter>    用于表示一個已知最大值和最小值的計數器

<progress>    用于表示一個進度條

<audio>    定義聲音,比如音樂或其他音頻流

<video>    定義視頻,比如電影片段或其他視頻流

HTML5 表單相關元素和屬性

input新增type類型

color    用來創建一個允 許用戶使用顏色選擇器,或輸入兼容 CSS 語法的顏色代碼的區域

time    生成一個時間選擇器

datetime    生成一個 UTC 的日期時間選擇器

datetime-local    生成一個本地化的日期時間選擇器

date    顯示一個日期輸入區域,可同時使用日期選擇器,結果值包括年、月、日,不包括時間。

month    生成一個月份選擇器,它結果值包括年份和月份, 但不包括日期

week    生成一個選擇的幾周的選擇器

email    生成一個 E-mail 輸入框

number    生成一個只能輸入數字的輸入框

range    生成一個拖動條,通過拖動條,使得用戶只能輸入指定范圍,指定步長的值

search    生成一個專門用于輸入搜索關鍵字的文本框

tel    生成一個只能輸入電話號碼的文本框

url    生成一個 URL 輸入框
HTML5 input新增屬性

placeholder    主要用在文本框,規定可描述輸入字段預期值的簡短的提示信息

autocomplete    為了完成表單的快速輸入,一般瀏覽器提供了自動補全的功能選擇

autofocus    當為某個表單控件增加該屬性后,當瀏覽器打開這個頁面, 這個表單控件會自動獲得焦點

list    為文本框指定一個可用的選項列表,當用戶在文本框中輸 入信息時,會根據輸入的字符,自動顯示下拉列表提示,供用戶從中選擇

pattern    用于驗證表單輸入的內容,通常 HTML5 的 type 屬性,比如 email、tel、 number、url 等,已經自帶了簡單的數據格式驗證功能了,加上 pattern 屬性后, 驗證會更加高效

novalidate    當提交表單時不對其進行驗證

required    必需在提交之前填寫輸入字段

spellcheck    拼寫檢查,為<input>、<textarea>等元素新增屬性

formenctype    規定在發送到服務器之前應該如何對表單數據進行編碼

formtarget    帶有兩個提交按鈕的表單,會提交到不同的目標窗口

multiple    一次上傳多個文件

maxlength wrap    <textarea>新增<br />maxlength:用于規定文本區域最大字符數。<br />wrap:是否包含換號符(soft/ hard)

css3

CSS3 新增選擇器

  1. 兄弟選擇器

元素 1 ~ 元素 2 第1個元素之后,所有的元素2都會被選擇,且這些元素和第一個元素擁有同一個父元素(兩個元素之間不一定要相鄰)。

  1. 屬性選擇器
  • E[attribute^=value] 用于選取帶有以指定值開頭的屬性值的元素
  • E[attribute$=value] 用于選取屬性值以指定值結尾的元素
  • E[attribute*=value] 用于選取屬性值中包含指定值的元素,位置不限,也不限制整個單詞
  1. 偽類選擇器
  • :root 選擇文檔的根元素,HTML 里,永遠是<html>元素
  • :last-child 向元素添加樣式,且該元素是它的父元素的最后一個子元素
  • :nth-child(n) 向元素添加樣式,且該元素是它的父元素的第 n 個子元素
  • :nth-last-child(n) 向元素添加樣式,且該元素是它的父元素的倒數第 n 個子 元素
  • :only-child 向元素添加樣式,且該元素是它的父元素的唯一子元素
  • :first-of-type 向元素添加樣式,且該元素是同級同類型元素中第一個元 素
  • :last-of-type 向元素添加樣式,且該元素是同級同類型元素中最后一個 元素
  • :nth-of-type(n) 向元素添加樣式,且該元素是同級同類型元素中第 n 個元 素
  • :nth-last-of-type(n) 向元素添加樣式,且該元素是同級同類型元素中倒數第 n 個元素
  • :only-of-type 向元素添加樣式,且該元素是同級同類型元素中唯一的元素
  • :empty 向沒有子元素(包括文本內容)的元素添加樣式
  1. 偽元素選擇器
  • :enabled 向當前處于可用狀態的元素添加樣式,通常用于定義表單的樣式或者超鏈接的樣式
  • :disabled 向當前處于不可用狀態的元素添加樣式,通常用于定義表單的 樣式或者超鏈接的樣式
  • :checked 向當前處于選中狀態的元素添加樣式
  • :not(selector) 向不是 selector 元素的元素添加樣式
  • :target 向正在訪問的錨點目標元素添加樣式
  • ::selection 向用戶當前選取內容所在的元素添加樣式

CSS3 新增屬性

  1. 新增背景屬性
  • background-clip 設置背景覆蓋范圍 border-box/paddingbox/content-box
  • background-origin 設置背景覆蓋的起點 border-box/paddingbox/content-box
  • background-size 設置背景的大小 cover/contain/長度/百分比
  1. 新增的字體文本相關屬性
  • text-overflow 設置當文本溢出元素框時處理方式 clip/ellipsis
  • word-wrap 規定單詞的換行方式 normal/break-word
  • word-break 規定自動換行的方式 normal/break-all/keep-all
  1. 新增盒模型屬性
  • box-shadow 陰影 h-shadow v-shadow <br />blur spread color inset
  • resize 調整尺寸 none/both/horizontal
  • outline-offset 輪廓的偏移量 length/inherit

新增變形動畫屬性

  1. transform
  • translate(x,y)
  • rotate(angle)
  • scale(x,y)
  • skew(angleX ,angleY)
  1. transform-origin

表示元素旋轉的中心點,默認值為 50% 50%。

  • 第一個值表示元素旋轉中心點的水平位置,它還可以賦值 left、right、center、長度、百分比
  • 第二個值表示元素旋轉中心點的垂直位置,它還可以賦值 top、bottom、 center、長度、百分比。

3D 變形屬性

  1. transform 3D函數

transform 增加了三個變形函數:

  • rotateX:表示元素沿著 x 軸旋轉。
  • rotateY:表示元素沿著 y 軸旋轉。
  • rotateZ:表示元素沿著 z 軸旋轉。
  1. transform-style用來設置嵌套的子元素在 3D 空間中顯示效果。
  2. perspective設置成透視效果,透視效果為近大遠小。
  3. perspective-origin設置 3D 元素所基于的 x 軸和 y 軸,改變 3D 元素的底部位置,該屬性取值同 transform-origin,默認值為 50% 50%。
  4. backface-visibility用來設置當元素背面面向屏幕時是否可見,通常用于設置 不希望用戶看到旋轉元素的背面。

它的屬性值有visible(背面可見,默認值)、 hidden(背面不可見)兩個。

CSS3 的過渡屬性

  • transition-delay 設置過渡的延遲時間
  • transition-duration 設置過渡的過渡時間
  • transition-timing-function 設置過渡的時間曲線
  • transition-property 設置哪條 CSS 使用過渡
  • transition 一條聲明設置 所有過渡屬性

CSS3 的動畫屬性

  1. animation
  • @keyframes 定義動畫選擇器
  • animation-name 使用@keyframes 定義的動畫
  • animation-delay 設置動畫的持續動畫時間
  • animation-timing-function 設置動畫的時間曲線
  • animation-iteration-count 設置動畫播放次數
  • animation-direction 設置動畫反向播放
  • animation-play-state 設置動畫播放狀態
  • transition 一條聲明設置所有動畫屬性

CSS3 新增多列屬性

  • column-count 設置元素應該被分隔的列數
  • column-width 設置列的寬度
  • columns 一條聲明設置列寬和列數 column
  • column-gap 設置列之間的間隔
  • column-span 設置元素應該橫跨的列數
  • column-rule-style 設置列之間間隔的樣式
  • column-rule-color 設置列之間間隔的顏色
  • column-rule-width 設置列之間間隔的寬度
  • column-rule 一條聲明設置列之間間 隔所有屬性

CSS3新增單位

px、em、rem、vh、 vw和% 移動端長度單位

使用CSS單位px、em、rem、vh、 vw等實現頁面布局。
  • px:絕對單位,頁面按精確像素展示
  • em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px),整個頁面內1em不是一個固定的值。

em會根據父級元素的大小而變化,但是如果嵌套了多個元素,要計算它的大小,是很容易出錯的,這樣就引申出了rem。

  • rem:相對單位,可理解為”root em”, 相對根節點html的字體大小來計算,CSS3新加屬性。
  • %% 百分比,相對長度單位,相對于父元素的百分比值
  • vw、vh、vmin、vmax 主要用于頁面視口大小布局

vw:viewpoint width,視窗寬度,1vw等于視窗寬度的1%。

vh:viewpoint height,視窗高度,1vh等于視窗高度的1%。

  • vmin:vwvh中較小的那個。
  • vmax:vwvh中較大的那個。

彈性盒模型

彈性盒模型的語法基礎概念

任何一個容器都可以指定彈性布局

JavaScript

JavaScript基礎

  1. 外部引入js文件:通過<script data-original="main.js"></script>
  2. 關鍵詞

  1. 變量名大小寫敏感
  2. 命名規范

JavaScript數據類型

  1. 字符串(String)
  2. 數字(Number)
  3. 布爾值(Boolean)
  4. 未定義(Undefined)
//undefined有兩種結果
//1、真的沒定義
alert(typeof dada); //undefined

//2、定義了,但是沒有放東西進去
var dada;
alert(dada); //undefined
undefined,表示未定義或只聲明未給值的變量
  1. 對象(Object)

js中內置了如下的對象:

  • Object 是所有JS對象的超類(基類),JS中的所有對象都是繼承自Object對象的
  • Array 數組對象 定義數組屬性和方法
  • Number 數字對象
  • Boolean 布爾對象 布爾值相關
  • Error 錯誤對象 處理程序錯誤
  • Function 函數對象 定義函數屬性和方法
  • Math 數學對象
  • Date 日期對象
  • RegExp 對象正則表達式對象 定義文本匹配與篩選規則
  • String 字符串對象 定義字符串屬性和方法

算術運算

var y = 3;

強制轉換

  1. 字符串轉數字parseInt() parseFloat() isNaN()
  2. 數字轉為字符串toString()

賦值運算

  1. 復合的賦值運算符 += -= *= /= %=

關系運算

  1. 關系運算:> < <= >= != == === ==和=== !=和!==

“=”、“==”、“===”有什么區別?

  1. = 是賦值符號
  2. == 忽略數據類型的判斷 是否相等
  3. === 數值和數據類型都要相等才判斷為相等

邏輯運算

  • 邏輯與&&
  • 邏輯或 ||
  • 邏輯非 !
  • 復合邏輯表達式

三元運算

條件運算符?:

三元運算符:(比較表達式)?結果1:結果2

分支循環

程序運行的三大結構:順序結構、選擇結構、循環結構
  • 單分支選擇:if語句
  • 雙分支選擇:if-else語句
  • 多分支語句:if-else if-else 語句

switch

語法格式

switch(num){ //表達式
  case 1:
    //執行代碼塊1
    break;  //中斷執行,跳出
    ...
  default:  //默認,其他都不是的情況下執行
      //執行代碼塊
      break;
}

//強調:break非常重要,如果不加break的話,程序會一直繼續往下執行;

while

語法格式:

while循環的特點:不知道具體執行的次數時,使用最合適
while(條件表達式){
     //要重復執行的代碼段 - 循環體
}

do-while

語法格式:

do{
  //循環體
}while(循環條件判斷);
  • do-while是先執行循環體,再檢測循環條件。
  • do-while能保證循環體至少執行一次。
  • 其他循環無法保證循環至少執行一次。

for

for(1循環變量初始化;2循環條件判斷;4循環變量的修改){
  3循環體
}

break和continue

  1. break 退出循環
  2. continue 跳過本次循環,繼續下一次循環

數組

  1. 數組定義
var arr = new Array();
var arr = [];
  1. 字面量方式定義
var arr = ["1","2"];
  1. 向數組賦值
arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);
  1. 數組索引
arr[0]+","+arr[1]
  1. 數組長度
//語法
arr.length

//最后一個元素的索引
arr.length-1

數組方法

  1. indexOf

數組可以通過indexOf()來搜索一個指定的元素的位置,如未找到返回 -1

  1. concat

concat()方法把當前的 數組 和 另一個 數組連接起來,并返回一個新的 數組

var newArr = arr1.concat(arr2,"dada");
  1. push和pop

push()向數組的末尾添加若干元素,pop() 則把 數組的最后一個元素刪除掉

arr.push("a","b");
console.log(arr);

arr.pop();
console.log(arr);

//空數組繼續pop不會報錯,而是返回undefined
  1. unshift和shift

unshift() 向數組前面添加若干元素,shift() 則把數組的第一個元素刪除掉

arr.unshift("a","b");
arr.shift();
  1. slice

slice() 截取數組的部分元素,然后返回一個新的數組

console.log(arr.slice(0,3)); //從索引0開始,到索引3結束,但不包括3

console.log(arr.slice(3));  //從索引3開始到結束
如果不給slice()傳遞任何參數,就會從頭到尾截取所有元素。利用這一點,可以很容易的復制一份新的數組
  1. sort

sort() 可以對當前數組排序

var arr = ["b","c","a"];
arr.sort();
arr;//["a","b","c"]
  1. reverse

reverse() 把整個數組的元素給掉個個

  1. join

join() 方法把數組的每個元素用指定的字符串連接起來

var arr = ["a","b","c"];
arr.join("-"); //"a-b-c"
  1. splice

可以從指定的索引開始刪除若干元素,然后再從該位置添加若干元素

二維數組

var arr = [[1,2,3],["a","b","c"],"dadaqianduan"];
var x = arr[1][1]; //b

字符串

  1. 字符串屬性length-字符串的長度屬性
  2. slice()
slice(start[,end]),start--開始索引 end--結束索引
  1. substr()
substr(start[,length]),start:開始,取length個字符
  1. split()

split([separator[,limit]]),按條件分割字符串,返回數組

  1. indexOf()

在父串中首次出現的位置,從0開始!沒有返回-1

  1. lastIndexOf()

倒序查找

  1. charAt(index)

charAt(index) 指定索引的字符

  1. toLowerCase()

轉小寫

  1. toUpperCase()

轉大寫

正則表達式

創建正則表達式

var reg = new RegExp("a","i");
// 將匹配字母a,第二個參數i,表示匹配時不分大小寫

元字符

模式修飾符

正則方法

  1. test方法

檢索字符串中指定的值。

  1. exec方法

該方法用于檢索字符串中的正則表達式的匹配,該函數返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null。

支持正則的 String方法

js對象

定義對象

//使用new運算符
var obj = new Object();

//字面量
var obj={
    name:"dadaqianduan",
    age:12,
    sex:"男"
}

對象的數據訪問

//用.語法
obj.name

//用[]語法
obj["name"]

JSON

json(JavaScript Object Notation),是一種輕量級的數據交換格式。

var man = {
      "name":"dadaqianduan",
      "age":12,
     "sex":"男"
};

內置對象

  • Object 是所有JS對象的超類(基類),JS中的所有對象都是繼承自Object對象的
  • Array 數組對象
  • Number 數字對象
  • Boolean 布爾對象
  • Error 錯誤對象
  • Function 函數對象
  • Math 數學對象
  • Date 日期對象
  • RegExp 對象正則表達式對象
  • String 字符串對象

Math 方法

  • abs() 絕對值 (去除正負)
  • random() 隨機數,0-1之間的隨機數,1不會出現
  • round() 四舍五入
  • floor(x) 下舍入(向下取整)
  • ceil(x) 上舍入(向上取整)
  • max(x,y)x 和 y 中的最大值
  • min(x,y)x 和 y 中的最小值
  • cos(x)x的余弦
  • sin(x)x的正弦
  • sqrt(x) 返回x的平方根
  • pow(3,4) 返回34次方

Date 方法

  • getFullYear() 返回 年(4位)
  • getMouth() 返回 月(0--11)
  • getDate() 返回 日期
  • getDay() 返回 星期 (0-6)
  • getHours() 返回 小時
  • getMinutes() 返回 分鐘
  • getSeconds() 返回秒
  • getTime() 返回1970年1月1日午夜到指定日期(字符串)的毫秒數
  • setFullYear() 設置 年份
  • setMouth() 設置 月
  • setDate() 設置 天
  • setHours() 設置小時
  • setMinutes() 設置 分鐘
  • setSeconds() 設置 秒
  • setTime() 使用毫秒的形式設置時間對象
//判斷閏年
function runYear(year){
    if(year%4==0 && year%100!=0 || year%400==0){
        return true;
    }
};

面向對象是一種編程思想

  1. 類是一個抽象的概念
  2. 對象:具體的事物
  3. 類是對象的抽象,對象是類的具體實例
  4. 類不占用內存,對象占用內存空間
  5. 對象的訪問 聲明對象
  6. 遍歷對象 – for in 循環

定義對象

  1. 字面量創建
  2. 工廠模式
// 工廠模式中的函數,首字母大寫

function Cat(n,c){
    return {
        name:n,
        color:c,
        say:function(){
          alert("dadaqianduan")
        }
    }
}
  1. 構造函數
Javascript提供了一個構造函數(Constructor)模式。

所謂"構造函數",其實就是一個普通函數,但是內部使用了this變量。

對構造函數使用new運算符,就能生成實例,并且this變量會綁定在實例對象上。

構造函數首字母大寫

構造函數中的this,指向的 實例化的對象

function Cat(n,c){
  this.name=n;
  this.color=c;
}

生成實例對象

var cat1 = new Cat("dadaqianduan","黃色")

// 自動含有一個constructor屬性,指向它們的構造函數
實例:自動含有一個constructor屬性,指向它們的構造函數
alert(cat1.constructor == Cat); //true
  1. Javascript還提供了一個instanceof運算符
驗證 原型對象 與 實例對象 之間的關系。
var txt = 'dadaqianduan';
alert(txt instanceof String); //false

var age = 123123;
alert(age instanceof Number); //false

var res = /\d/;
alert(res instanceof RegExp); //true

var arr = [];
alert(arr instanceof Array); //true

原型和原型鏈

構造函數都有一個prototype屬性,指向 另一個對象 。這個對象的 所有屬性和方法,都會被構造函數的實例繼承。

所有的函數都是 Function 的實例。

在構造函數上都有一個 原型 屬性prototype,prototype也是一個對象;這個對象上有一個 constructor 屬性,該屬性指向的就是構造函數。

實例對象上有一個_proto_屬性,該屬性也指向原型對象,該屬性不是標準屬性,不可以用在編程中,該屬性用于瀏覽器內部使用。

constructor
  1. constructor是構造函數 創建的實例的屬性,該屬性的作用是 指向 創建當前對象的 構造函數。
son.constructor == parent; // true

每個原型都有一個constructor屬性,指向該關聯的構造函數。

function Person() {
}

console.log(Person===Person.prototype.constructor)  //true

關系圖:

區分一下普通對象和函數對象
function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object
  1. JavaScript中,原型是一個對象,原型的作用是 實現對象的繼承。
  2. JavaScript中的所有函數對象中,都存在一個屬性,prototype,該屬性對應當前對象的原型。
  3. 所有的JavaScript對象,都存在一個_proto_屬性,_proto_屬性指向實例對象的構造函數的原型。
var p = new Person(); // 實例對象

console.log(p._proto_ === Person.prototype); // true
p是實例對象, Personp的構造函數。 p_proto_屬性 指向 構造函數 Person的原型。

js是如何通過原型進行繼承的:

var parent = function(name) {
 this.name = name;
}

parent.prototype.getName = function() {
 return this.name;
}

var son = new parent("dadaqianduan");

console.log(son.getName()); // dadaqianduan
son繼承了parent的原型中的函數屬性getName

原型鏈

除了Objectprototype的原型是null外,所有的對象 和 原型 都有自己的原型,對象的原型 指向 原型對象。

在層級多的關系中,多個原型層層相連 則 構成了 原型鏈。

在查找一個對象的屬性時,如當前對象找不到該屬性,就會沿著原型鏈一直往上查找,直到找到為止,如果到了原型鏈頂端,沒找到,則返回undefined

原型

  1. 所有引用類型都有一個__proto__屬性
  2. 所有函數都有一個prototype屬性
  3. 所有引用類型的__proto__屬性指向它構造函數的prototype

構造函數和實例原型之間的關系:

Person(構造函數) 的 prototype 指向 Person.prototype

  1. __proto__

每個對象,除null外,都有的屬性叫__proto__,這個屬性會指向該對象的原型。

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

關系圖:

關系圖:

關系圖:

梳理:

寫一個構造函數Person,一般構造函數區別與普通函數要求首字母大寫:

function Person(){}
prototype原型

原型 是 一個對象,在原型prototype 上定義的屬性,通過“繼承”,實現 實例 也有這個屬性。

繼承 是在 new操作符內部實現的。

構造函數 內部 有個 prototype的屬性,通過這個屬性就能訪問到 原型。

Person是構造函數,Person.prototype是原型。

  1. 實例

有構造函數,可以在原型上創建可繼承的屬性,通過new操作符創建實例:

function Person(){}

person = new Person()

da = person instanceof Person // 檢查person是否是Person的實例

da // true

// 繼承

function Person() {}

Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.name // 實例繼承的屬性

da // 'dadaqianduan.cn'
  1. proto

實例通過_proto_訪問到原型。

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.__proto__ === Person.prototype

da // true
  1. constructor構造函數
原型也可以通過constructor訪問到構造函數
function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person

da = Person.prototype.constructor === Person
da // true
小結
  1. 所有引用類型(函數,數組,對象)都擁有__proto__屬性。
  2. 所有函數擁有prototype屬性。
  3. 每個實例對象(Object)都有一個私有屬性,為__proto__指向它的構造函數的原型對象(prototype)。該原型對象也有一個自己的原型對象__proto__,層層向上直到一個對象的原型對象為null,null 沒有原型,并作為這個原型鏈中的最后一個環節。

常用的JavaScript設計模式

百度百科:

  設計模式(Design pattern)是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。

  使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問,設計模式于己于他人于系統都是多贏的;設計模式使代碼編制真正工程化;設計模式是軟件工程的基石脈絡,如同大廈的結構一樣。

單體模式

單體是一個用來劃分 命名空間并將一批相關的屬性和方法組織在一起的對象,如果它可以被實例化,那么它只能被實例化一次。

特點:

(1)可以來劃分命名空間,從而清除全局變量所帶來的危險。

(2)利用分支技術來來封裝瀏覽器之間的差異。

(3)可以把代碼組織的更為一體,便于閱讀和維護。

工廠模式

工廠模式的定義:

提供創建對象的接口,意思就是根據領導(調用者)的指示(參數),生產相應的產品(對象)。
  1. 創建一個對象常常需要復雜的過程,所以不適合在一個復雜的對象中。
  2. 創建對象可能會導致大量的重復代碼,也可能提供不了足夠級別的抽象。

工廠就是把成員對象的創建工作轉交給一個外部對象,好處在于消除對象之間的耦合(也就是相互影響)。

分類:

簡單工廠模式:使用一個類,通常為單體,來生成實例。

復雜工廠模式定義:將其成員對象的實列化推到子類中,子類可以重寫父類接口方法以便創建的時候指定自己的對象類型。

父類只對創建過程中的一般性問題進行處理,這些處理會被子類繼承,子類之間是相互獨立的,具體的業務邏輯會放在子類中進行編寫。

應用場景:

以下幾種情景下工廠模式特別有用:

(1)對象的構建十分復雜;

(2)需要依賴具體環境創建不同實例;

(3)處理大量具有相同屬性的小對象。

單例模式

單例模式定義了一個對象的創建過程,此對象只有一個單獨的實例,并提供一個訪問它的全局訪問點。也可以說單例就是保證一個類只有一個實例,實現的方法一般是先判斷實例存在與否,如果存在直接返回,如果不存在就創建了再返回,這就確保了一個類只有一個實例對象。

使用閉包方式來實現單例:

var single = (function(){
    var unique;

    function getInstance(){
    // 如果該實例存在,則直接返回,否則就對其實例化
        if( unique === undefined ){
            unique = new Construct();
        }
        return unique;
    }

    function Construct(){
        // ... 生成單例的構造函數的代碼
    }

    return {
        getInstance : getInstance
    }
})();
unique是返回對象的引用,而 getInstance是靜態方法獲得實例。Construct 是創建實例的構造函數。

可以通過 single.getInstance() 來獲取到單例,并且每次調用均獲取到同一個單例。這就是 單例模式 所實現的效果。

應用場景:
  1. 單例模式是一種常用的模式,有一些對象我們往往只需要一個,比如全局緩存、瀏覽器的window對象。
  2. 借助單例模式,可以把代碼組織的更為一致,方便閱讀與維護。

函數

函數的定義

// 使用關鍵字function 定義函數

// 定義函數,吃飯
function dada(){
  console.log("點餐");
  console.log("拿筷子");
  console.log("吃東西");
}

局部變量和全局變量

  1. 變量的作用域
  • 函數體內的變量:局部變量,僅在函數體內可以使用
  • 函數體外的變量:全局變量,對全局可見
  1. 局部變量
function da(){
  var dadada = "dada";//局部變量
  alert(dadada);
}
da(); //調用
alert(dadada); //報錯訪問不到,函數體外對dadada不可見
  1. 全局變量
var da = "我是全局變量";
function home(){
  var da = "我是局部變量";
  alert(da);
}
home();

-----------------------

var a=3;  //全局
function da(){
  alert(a); //3
  var b=5;
  alert(b);//5
}
da();
console.log(b); //報錯,訪問不到

典型錯誤,不使用var聲明的變量也是全局變量(不建議這樣用)

function dada(){         
    da = "123";  //全局變量         
}         
dada();         
alert(da);         

返回值

return的含義

//理解返回值
function getNum(){
 return 2; //return的作用,將函數的結果返回給當前函數名
}
var result = getNum(); //如果希望返回值保存,就放在變量中;
console.log(result);  //2

return使用方法

  • return只能返回一個數據
  • 如果函數中沒有return,則返回undefined

return可以用來結束一個函數

function Fun(){
  console.log("helloweb");
  return;
  console.log("我還會執行嗎?");
}
Fun();
function fn(){
  for(var i=0;i<10;i++){
    if(i == 3){ //循環3次就return
        break;   
    }
    console.log("誰最帥!"); //打印3次
  }
  return "看return會不會執行我"; //return不執行,break執行
}

匿名函數

//使用函數表達式定義函數

//say本質上是一個指向函數對象的變量,我們稱為函數變量
var say = function(){
      console.log("hello");
};
say();

var oBtn = document.getElementById("box");
oBth.onclick = function(){
  alert("你點擊我啦");
}

自運行函數

示例:

function fn(){
  //這里是代碼
}
fn(); //運行fn函數

----------------------

var fn = function(){
  //這里是代碼
}
fn(); //運行fn函數

---------------------

//(fn)() 等價于 fn()
(function(){
      //這里是代碼
})()

閉包

閉包 (closure)有權訪問另外一個函數作用域中的變量的函數。

創建閉包的常見方式有:

  • 在一個函數內部創建另外一個函數,并且把這個函數return出去。
  • 用函數為元素綁定事件,當事件發生時,還可以操作該函數中的變量。
特性
  1. 可以讀取其它函數內部的變量
  2. 讓這些變量的值始終保持在內存中

示例:

//方式1----函數內部return一個函數
function run(){
    var a=10;
    return function(){
        a++;
        console.log(a);
    };
};

var b=run();
//alert(b);   //b是一個函數

b();//可以訪問另外一個作用域中變量的函數
//方式2--函數內部為綁定事件
function addClick(){
    var txt="abcd";
    document.getElementById('box').onclick=function(){
        alert(txt);
    }
};
addClick();
//方式3--函數內部將變量作為回調函數的參數
function play(num,fn){
    if(num>10){
        return fn && fn(num);
    };
};

var ss=play(20,function(n){
    return n+1;
});

console.log(ss);

BOM

BOM概述

BOM(browser object model)瀏覽器對象模型

BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象、載入頁面的相關信息,其核心對象是window對象

BOM 沒有相關標準,每個瀏覽器都定義了自己的屬性,并且,都有其自己對BOM的實現方式

W3C雖然沒有為BOM統一制定標準,但是其中的窗口對象、導航對象等,因功能趨同,實際上已經成為默認的標準

window方法

  • alert() 提示框
  • confirm() 帶有確認 取消 按鈕的提示框
  • prompt() 帶有可輸入內容的文本域的提示框
  • setInterval() 間隔定時器,可按照指定的周期(以毫秒計)來調用函數或計算表達式
  • setTimeout() 超時定時器,在指定的毫秒數后調用函數
  • clearInterval() 清除間隔定時器
  • clearTimeout() 清除超時定時器
  • requestAnimationFrame 幀定時器

frames [ ] 框架集

把瀏覽器窗口分成幾個窗框,每個窗框同時取得多個URL地址,顯示不同網頁內容。

history 歷史記錄

  • window.history.go(1) 前進(跳轉)
  • window.history.go(-1) 后退(跳轉)
  • window.history.forward() 前進
  • window.history.back() 后退

location 定位

  • window.location. 頁面跳轉
  • window.location.reload() 頁面重載

navigator 導航

window.navigator.userAgent 瀏覽器類型、版本、操作系統類型、瀏覽器引擎類型等信息

screen 屏幕

window.screen.width 返回當前屏幕寬度(分辨率值)
window.screen.height 返回當前屏幕高度(分辨率值)

document 文檔

windowdocument的屬性,代表所有html的元素,這部分是js主要操作的部分,因此這部分必須規范,才能進行統一開發。因此,W3C將這部分進行了規范---DOM標準。

DOM

DOM(document object model )文檔對象模型,定義了表示和修改文檔所需的對象、行為和屬性,以及這些對象之間的關系。

DOM對象方法

  • getElementById(id) 通過id獲取DOM對象(對象)
  • getElementsByTagName(tag) 通過標簽獲取DOM對象(“類似數組”對象)
  • getElementsByName(name) 通過name獲取DOM對象(“類似數組”對象)
  • getElementsByClassName(class) 通過class獲取DOM對象(IE8以下不支持)

操作DOM間的關系

  • createElement(tag) 創建元素
  • removeChild(對象) 刪除元素
  • appendChild(對象) 插入元素
  • replaceChild(替換對象,被替換對象) 替換元素
  • insertBefore(對象,目標對象) 前部插入
appendChild replaceChild insertBefore 都具有移動對象的功能

節點屬性:

父節點    parentNode
第一級所以子節點    childNodes
第一個子節點    firstChild
最后一個子節點    lastChild
前一個兄弟節點    previousSbiling
后一個兄弟節點    nextSibling

克隆節點:

cloneNode( 布爾值 ) 

true:復制本節點以及所有子節點 
false:只復制節點本身

DOM節點屬性

  • setAttribute("屬性名",屬性值) 設置屬性
  • getAttribute( 屬性名 ) 獲取屬性
  • removeAttribute( 屬性名 ) 刪除屬性:
  • hasAttributes(屬性名) 判斷屬性是否存在(返回ture/false

事件

var oDiv=document.getElementById('box');
oDiv.onclick=function(){   
    alert('hello world'); 
};
  1. addEventListener( ) 增加事件監聽
  2. removeEventListener( ) 刪除事件監聽

事件分類

  • window事件
  1. onload 加載(某個頁面或圖像被完成)
  2. onunload 用戶退出頁面
  3. onresize 窗口或框架被調整尺寸
  4. onscroll 滾動條事件
  • 鼠標事件
onclick 鼠標點擊
ondblclick 鼠標雙擊
onmousedown 鼠標按鍵按下
onmouseup 鼠標按鍵被松開
onmouseout 鼠標從某元素移開
onmouseover 鼠標被移到某元素之上
onmouseenter 鼠標進入某元素
onmouseleave 鼠標離開某元素
onmousemove 鼠標移動
oncontextmenu 右鍵菜單
  • input事件
onblur 元素失去焦點。
onfocus 元素獲得焦點。input輸入框
onchange 內容改變時觸發。
  • 鍵盤事件
onkeydown 按鍵按下
onkeypress 按鍵按下并釋放
onkeyup 按鍵釋放
  • form事件
onreset 表單重置(重置按鈕)
onsubmit 表單提交(form內有text被聚焦,直接回車可觸發onsubmit)

事件對象

獲取事件數據,不同的事件會有不同數據

oDiv.onclick=function(ev){
 //ev就是事件對象
}

事件流

  1. 對象的默認行為
  2. 阻止默認行為:event.preventDefaut()

事件流

事件流方向:捕獲 → 事件目標→冒泡

  1. 事件捕獲
  2. 事件目標
  3. 事件冒泡 與 阻止事件冒泡

事件目標

ev.targrt
ev.target.nodeName
ev.target.tagName

事件委派(delegate)

原理: 將事件綁定在父級上,利用事件冒泡原理,通過判斷事件的“目標元素”來觸發父級上綁定的事件

作用

  • 不用分別為子元素綁定事件
  • 為未知元素綁定事件

事件監聽

可以為一個元素,同時綁定多個事件
obj.addEventListener(事件,回調函數,冒泡/捕獲) ;
btn.addEventListener("click",function(ev){ //ev 事件對象
 alert('dadaqianduan');
},false)   //false 冒泡階段

jQuery

一款輕量級的js庫
豐富的DOM選擇器
簡單的事件操作
重新封裝方法,讓操作DOM屬性更簡單
鏈式操作
豐富的動畫效果
Ajax操作支持
瀏覽器兼容
插件擴展開發,可擴展性強

不能向后兼容
插件兼容性
多個插件沖突

jQuery 選擇器

  • id選擇器
$('#box')
  • class選擇器
$('.box')
  • 標記選擇器
$('p')
  • * 代表所有標簽

屬性選擇器

  • [attribute] 匹配包含給定屬性的元素
  • [attribute=value] 匹配給定的屬性是某個特定值的元素
  • [attribute!=value] 匹配給定的屬性不是某個特定值的元素
  • [attribute^=value] 匹配給定的屬性是以某些值開始的元素
  • [attribute$=value] 配給定的屬性是以某些值結尾的元素
  • [attribute*=value] 匹配給定的屬性是以包含某些值的元素

位置選擇器

:first匹配第一個元素

:last獲取最后一個元素

:not 去除所有與給定選擇器匹配的元素

:even 匹配所有索引值為偶數的元素,從 0 開始計數

:odd 匹配所有索引值為奇數的元素,從 0 開始計數

:eq 匹配一個給定索引值的元素

:gt 匹配所有大于給定索引值的元素

:lt 匹配所有小于給定索引值的元素

后代選擇器

$("選擇器1 選擇器2 ……")

子代選擇器

$("選擇器1>選擇器2>……")

選擇器對象

$("選擇器").each(function(index){this}) 選擇器對象的遍歷
$("選擇器").find() 找前面選擇器匹配到的元素的子元素
$("選擇器").not() 在前面選擇器匹配到的元素中去除某個或某多個
$("選擇器").add() 在前面選擇器中在追加節點

子元素

:first-child 匹配第一個子元素
:last-child 匹配最后一個子元素
:first-of-type 選擇所有相同的元素名稱的第一個兄弟元素
:last-of-type 選擇所有相同的元素名稱的最后一個兄弟元素

:nth-child 匹配其父元素下的第N個子或奇偶元素
:nth-last-child() 選擇所有他們父元素的第n個子元素。計數從最后一個元素開始到第一個
:nth-last-of-type() 選擇的所有他們的父級元素的第n個子元素,計數從最后一個元素到第一個
:nth-of-type() 選擇同屬于一個父元素之下,并且標簽名相同的子元素中的第n個

:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配
:only-of-type 選擇所有沒有兄弟元素,且具有相同的元素名稱的元素。

表單

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的單行文本框
:password 匹配所有密碼框
:radio 匹配所有單選按鈕

:checkbox 匹配所有復選框
:submit 匹配所有提交按鈕
:image 匹配所有圖像域
:reset 匹配所有重置按鈕

:button 匹配所有按鈕
:file 匹配所有文件域
:hidden 匹配所有隱藏域

表單對象屬性

:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素

:checked 匹配所有選中的被選中元素
:selected 匹配所有選中的option元素

DOM操作

  1. 查找獲取
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容
val() - 設置或返回表單字段的值
  1. 內部插入
append() 向每個匹配的元素內部追加內容
appendTo() 把所有匹配的元素追加到另一個指定的元素集合中

prepend() 向每個匹配的元素內部前置內容
prependTo() 把所有匹配的元素前置到另一個、指定的元素集合中
  1. 外部插入
after() 在每個匹配的元素之后插入內容
before() 在每個匹配的元素之前插入內容

insertAfter() 把所有匹配的元素插入到另一個、指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一個、指定的元素集合的前面
  1. 包裹
wrap() 把所有匹配的元素用其他元素的結構化標記包裹起來
unwrap() 這個方法將移出元素的父元素。

wrapAll() 將所有匹配的元素用單個元素包裹起來
wrapInner() 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
  1. 替換
replaceWith() 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素
  1. 刪除
empty() 刪除匹配的元素集合中所有的子節點
remove() 從DOM中刪除所有匹配的元素
  1. 克隆
clone() 克隆匹配的DOM元素并且選中這些克隆的副本

JQuery 事件

頁面載入

$(document).ready(function(){

})

//簡寫方式
$(function(){

})

事件綁定

$("#box").on("click",function(){
    /**/
})

$("#box").off("click,mousemove");

容器適應

獲取元素的寬高有以下幾種方法:

$(選擇器).width() | innerWidth() | outerWidth()
$(選擇器).height() | innerHeight() | outerHeight()
innerWidth()和innerHeight()是指元素里面內容的寬高加上內邊距的寬高;
outerWidth()和outerHeight()是指元素里面內容的寬高加上內邊距的寬高和邊框;
獲取窗口的寬高的方法如下:
$(window).width()
$(window).height()

標簽樣式操作

$(選擇器).css (樣式屬性名[,值])    方法設置或返回被選元素的一個或多個樣式 屬性

$(選擇器).addClass(類別名)    增加類別樣式

$(選擇器).removeClass(類別名)    去除類別樣式

$(選擇器).toggleClass(類別名)    交替使用類別樣式:有這個類別樣式就去除,沒有就追加;

滑動

show() 顯示元素
hide() 隱藏元素

slidDown() 向下滑動顯示
slideUp() 向上滑動收起隱藏
slideToggle() 交替滑動狀態

fadeIn() 淡入
fadeOut() 淡出
fadeTo() 動畫到指定透明度
fadeToggle() 交替淡出、淡入狀態

自定義動畫

animate() 自定義動畫

stop() 停止所有在指定元素上正在運行的動畫

delay() 設置一個延時來推遲執行隊列中之后的項目

finish() 停止當前正在運行的動畫,刪除所有排隊的動畫,并完成匹配元素所有的動畫

AJAX

$.ajax()
$.get() 通過遠程 HTTP GET 請求載入信息

$.post() 通過遠程 HTTP POST 請求載入信息

$.getJSON() 通過 HTTP GET 請求載入 JSON 數據

工作原理

AJAX = 異步 JavaScript 和 XML

在瀏覽器中輸入url地址請求服務器時,是通過Ajax發送http請求給服務器,服務的響應結果也是先返回給Ajax,先Ajax處理之后在返回給瀏覽器顯示在頁面。

XMLHttpRequest對象

//第一步:
xhr = new XMLHttpRequest();

//第二步
xhr.open("post","test.php");

//第三步:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第四步:
xhr.send("a=1&b=2");

//第五步:
xhr.onreadystatechange=function(){
    if(xhr.status==200 && xhr.readyState==4){
         var result=xhr.responseText;//獲取到結果
    alert(result);
    }
}

XML和HTML的區別

get() 和post()

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
AJAX工作原理

Ajax的基本格式如下:

$.ajax({
    url:'請求的資源',
    type:'請求方式get|post',
    data:'發送數據 名=值&名=值',
    dataType:'回傳值的類型',
    success:function(res){ res接收返回值
    }
})

HTTP

HTTP(超文本傳輸協議)是一種通信協議,它允許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器。

HTTP消息結構

  • request line

請求行:第一行必須是請求行,用來說明請求類型、要訪問的資源以及使用的HTTP版本。

  • header

請求頭:用來說明服務器要使用的附加信息。

  • blank line

空白行:請求頭部與請求體之間必須有一個空白行,必不可少

  • body

請求體:也叫請求正文,可以添加任意的其他數據

狀態行:

Host    接受請求的服務器地址,可以是:IP:端口 或 域名
User-Agent    發送請求的應用程序名稱(瀏覽器信息)
Connection    指定與連接相關的屬性,如:Connection:Keep-Alive
Accept-Charset    客戶端可以接受的編碼格式
Accept-Encoding    客戶端可以接受的數據壓縮格式
Accept-Language    客戶端可以接受的語言
referer    當前請求來自哪個鏈接(防盜連)
content-type    請求的文件類型
cookie    該網站相關的會話信息

url請求過程

  1. 首先客戶端與服務器需要建立連接。
  2. 建立連接后,客戶端發送一個請求給服務器,請求方式的格式為:統一資源標識符(URL)、協議版本號,客戶端信息和可能的內容。
  3. 服務器接到請求后,給予相應的響應信息,其格式為一個狀態行,包括信息的協議版本號、一個成功或錯誤的代碼status Code狀態碼),后邊服務器信息、實體信息和可能的內容。
  4. 客戶端接收完, 服務器所返回的信息后,與服務器斷開連接。
如果在以上過程中的某一步出現錯誤,那么產生錯誤的信息將返回到客戶端。對于用戶來說,這些過程是由HTTP自己完成的,用戶只要用鼠標點擊,等待信息顯示就可以了。

預加載

預加載:將所有所需的資源提前請求加載到本地,后面在需要使用就直接從緩存中存取資源

  1. 使用image對象
<img data-original="" style="display:none"/>
  1. 使用image對象
var image = new Image();
image.data-original="";
  1. 使用XMLHttpRequest對象
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;

xmlhttprequest.open("GET",http://xx.jpg,true);

xmlhttprequest.send();

function callback(){
    if(xmlhttprequest.readyState=4 && xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
    }else{
      console.log("Request was unsuccessful" + xmlhttprequest.status);
    }
}

function progressCallback(e){
      c=e||event;
      if(e.lengthComputable){
        console.log("Received"+e.loaded+"of"+e.total+"bytes");
    }
}

懶加載

首屏加載,技術上顯示要用的技術就是圖片懶加載,即到可視區域再加載。

性能優化

JavaScript代碼優化

  1. 代碼與結構分離
  2. 樣式與結構的分離
  3. 數據與代碼分離
  • AMD:Asynchronous Module Definition,即異步模塊加載機制。
  • CMD:Common Module Definition,即通用模塊定義規范
  • 導出(export)與導入(import)兩個模塊

提升文件加載速度

  1. 合并JavaScript代碼,盡可能少的使用script標簽。
  2. 無堵塞加載JavaScript。
  3. 動態創建script標簽來加載

webpack

webpack是一個module bundler(模塊構建工具),由于 JavaScript 應用程序的復雜性不斷增加,構建工具已成為 web 開發中不可或缺的一部分。它幫助我們去打包、編譯和管理項目需要的眾多資源文件和依賴庫。

webpack支持CommonJS、AMD和ES6模塊系統,并且兼容多種JS書寫規范,可以處理模塊間的依賴關系,所以具有更強大的JS模塊化的功能,它能壓縮圖片,對CSS、js文件進行語法檢查、壓縮、編譯打包。

webpack的特點

  1. 可以很好的用于單頁應用
  2. 同時支持 require()import 模塊語法
  3. 允許非常前沿的 code splitting(代碼分割) 特性
  4. 熱加載可以讓 React、Vue.js 和其它類似框架的本地開發更快
  5. 它是目前最受歡迎的構建工具

webpack的缺點

  1. 不適合 web 開發的初學者
  2. 對于 CSS、圖片和其它非 JS 資源文件時,需要先混淆處理
  3. 文檔不夠完善
  4. 變化很大,不同版本的使用方法存在較大差異

安裝

  1. 全局安裝:
//安裝全局webpack
npm install webpack -g

//安裝全局webpack-cli
npm install webpack-cli -g

webpack基本應用

SPA(single page web application) 單頁應用程序,是webpack打包的典型應用

示例,主要的幾個部分組成:

index.html    主文件
JS文件    可能有多個JS文件,可通過webpack合并打包為一個文件
CSS文件    可能有多個CSS文件,可通過webpack合并打包為一個文件
圖片    可通過webpack壓縮優化

示例:

//a.js
var run=function(){
    console.log("aaa");
};
//node CommonJS模塊
//module.exports.run=run;

//ES6語法
export default {run};
//b.js
var play=function(arg){
    console.log(arg);
};
//node CommonJS模塊
//module.exports.play=play;

//ES6語法
export default {play};
//index.js
//node CommonJS 引入js模塊
//var a=require("./a.js");
//var b=require("./b.js");

//ES6 引入js模塊
import a from "./a.js";
import b from "./b.js";

var txt = "hello world";
a.run();
b.play(txt);
dist文件夾(存放打包后的文件,可以先不創建,打包時可以自動創建)-dis,dist,bulit

打包:

webpack --mode development

配置文件入門

默認的配置文件名為:webpack.config.js

核心概念

一個配置文件的基本結構如下:

//配置項
module.exports={
    //入口  
    entry:".....",

    //輸出配置     
    output:{......},

    //模塊    
    module: {......},

    //解析         
    resolve:{......},        

    //插件(數組)
    plugins:[......],

    //開發服務器    
    devServer:{......}  
};
entry    入口 定義入口文件,默認入口文件:./src/index.js
output    輸出 定義出口文件,默認出口文件:./dist/main.js
resolve    解析 路徑映射、省略后綴名等
module    模塊 定義不同loader,讓 webpack 能夠處理非 JavaScript 模塊
plugins    插件 擴展webpack功能
devServer    開發服務器 用于配置webpack-dev-server選項

設置配置文件自動完成:

// webpack是基于node構建的,只支持CommonJS模塊
module.exports={  
    //入口配置
    entry:'./src/js/main.js',  

    //出口配置
    output:{  
        path:__dirname +'/dist', //輸出目錄  __dirname:本文件所在硬盤路徑(node全局變量)
        filename:'js/main.js' //文件名稱(可以有子目錄)
    }
};

修改webpack.json文件

webpack.json中的"scripts"下增加:

"scripts": {  
    "dev": "webpack --mode development",
    "build": "webpack --mode production"  
  },  

執行打包

npm run dev

entry 和 output

  1. entry 入口配置 是指頁面中的入口文件。也就是打包從哪個文件開始。默認入口文件:./src/index.js
  2. output 出口配置 是指生成的文件輸出到哪個地方去,默認出口文件:./dist/main.js,主要有以下屬性:
path    輸出路徑
filename    輸出文件名

示例:

//入口
entry: {   
    index: './src/js/main.js',  
},
//輸出
output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename:"main.js"http://打包后輸出的文件名
},

module

webpack 只能打包js文件(只理解 JavaScript語法),無法識別其他語法的文件,如果要讓webpack打包其他文件,首先需要讓webpack識別不同文件,這就需要特別的模塊,這種模塊統稱為loader。

loader分類

轉換編譯    script-loader,babel-loader,ts-loader,coffee-loader
處理樣式    style-loader,css-loader,less-loader,sass-loader,postcss-loader
處理文件    raw--loader,url-loader,file-loader
處理數據    csv-loader,xml-loader
處理模板語言    html-loader,pug-loader,jade-loader,markdown-loader
清理和測試    mocha-loader,eslint-loader

常用loader

css-loader    解析css語句
style-loader    將css-loader解析后的文本,添加<style>標簽

babel-loader    將ES6+、JSX語法轉成ES5低版本語法

url-loader    

url-loader對未設置或者小于limit byte設置的圖片以base64的格式進行轉換 
對于大于limit byte的圖片用file-loader進行解析

file-loader    

解析項目中的url引入(包括img的src和background的url) 
修改打包后文件引用路徑,使之指向正確的文件

less-loader    less編譯器

vue-loader    

Vue也推出了自己的vue-loader,可以方便的打包 .vue文件 的代碼
在vue-cli(快速構建單頁應用的腳手架)中得到應用。
css loader
//index.js
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);

//打包css文件
import "./style.css";  //注意:是相對路徑

安裝loaderloader也是依賴包,需要安裝)

npm install css-loader --save-dev
npm install style-loader --save-dev

module中定義ccs模塊相關的配置:

module: {
    rules: [
        {
            test: /.css$/, //正則
            //把css添加到html的style標簽里(style-loader要先加載)
            loader: ['style-loader','css-loader'],  //loader或者use
            exclude: /node_modules/, //正則 排除node_modules目錄
        }
    ]
},
babel loader

babel是一個 js 編譯器,它通過語法轉換器支持最新版本的 JavaScript (包括JSX、TypeScript等新語法)。 這些插件允許你立刻使用新語法,無需等待瀏覽器支持。

使用Babel首先要配置 .babelrc 文件,該文件用來設置轉碼規則和插件(json格式),存放在項目的根目錄下。

tips:在linux系統中,rc結尾的文件通常代表運行時自動加載的文件、配置等等。

.babelrc配置文件中,主要是對預設(presets) 和 插件(plugins) 進行配置。.babelrc配置文件一般為如下:

{
   "presets": [
         ["env",{"modules":false}] //modules是配置項
   ],  
    "plugins": [
        [ "transform-runtime",{"polyfill":false}]  //polyfill是配置項
    ]
}
預設 對js最新的語法糖進行編譯,并不負責轉譯新增的api和全局對象。

插件 控制如何轉換代碼,babel默認只轉換新的js語法,而不轉換新的API

plugins

插件(plugins)可以擴展webpack的功能,loader不能做的處理都能交給plugin來做。

如:HtmlWebpackPlugin 插件簡化了HTML文件的創建,可以通過模板文件,生成一個HTML文件

resolve

resolve(譯:解析)配置webpack如何尋找模塊對應的文件。

alias    (譯:別名)通過別名將原來導入路徑映射成一個新的導入路徑
extensions    (譯:擴展)數組 導入模塊時,可以省略的文件后綴名

resolve: {
    alias: {
        "@": path.join(__dirname,"./src") //將項目根目錄下的src目錄,映射為 @
    },
    extensions:[".js", ".json"]
}

其他配置項示例:

devtool    是否生成以及如何生成sourcemap
devserver    開啟一個本地開發服務器
watch    監聽文件變化并自動打包
watchoption    用來定制watch模式的選項
performance    打包后命令行如何展示性能提示,如果超過某個大小是警告還是報錯

webpack-dev-server

webpack-dev-server是一個小型的web服務器,可以自動監視項目文件的變化,自動刷新瀏覽器,其HMRHot Module Replacement 熱模塊替換)方式只替換更新的部分,而不是重載頁面,大大提高了刷新效率。
需要本地安裝 webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

webpack.config.js配置文件:

let path=require("path");

//HtmlWebpackPlugin插件
let HtmlWebpackPlugin=require('html-webpack-plugin');
let htmlPlugin=new HtmlWebpackPlugin({  
    filename:"index.html", //生成的新文件
    template:__dirname+"/src/index_temp.html",  //模板文件
    minify:{ //壓縮
        removeComments:true,  //刪除注釋
        collapseWhitespace:true  //合并空格
    },
});

//配置項
module.exports = {
    //輸入
    entry:'./src/js/main.js',//主入口文件

    //輸出
    output: {
        path: __dirname + "/dist",    //打包后的文件存放的地方
        filename:"main.js"            //打包后輸出的文件名
    },

    //模塊
    module: {
        rules: [
            {
                test: /.css$/, //正則 解析css文件
                //把css添加到html的style標簽里(style-loader要先加載)
                use: ['style-loader','css-loader'],
                exclude: /node_modules/, //正則 必須要寫exclude??!
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/, //正則 必須要寫exclude??!
            },
        ]
    },
    //插件
    plugins:[
        htmlPlugin        
    ],

    //解析
    resolve: {
        alias: {
            "@": path.join(__dirname,"./src") //將項目根目錄下的src目錄,映射為 "@"
        },
        extensions:['.js', '.json']
    },

    //開發服務器
    devServer: {
        inline:true,    //支持dev-server自動刷新
        port:"8080",    //端口
        open:true,        //自動打開默認瀏覽器
    },
}

webpack-dev-serve.cmd是定義在.bin目錄中的

"scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack --mode production"
}

運行

npm start

vue

MVC模式

MVC模式是移動最廣泛的軟件架構之一,把應用程序強制性地劃分為三部分:模型(Model)、視圖(View)和控制器(Controller)。

MVVM模式

MVVM模式是把MVC模式的Controller改成ViewModel。View的變化會自動更新ViewModel,ViewModel的變化也會自動同步到View上顯示。

基礎語法

示例:

el         把 Vue 實例掛載到DOM元素上,通過id綁定html元素
data         數據對象,Vue實例的數據(注意:數據不要與methods中的方法重名)
methods         事件對象,包含事件所要觸發的函數(注意:方法名不要與data中的數據重名)
computed         計算屬性
watch         監聽器
directives         自定義指令
鉤子(hook)函數(8個)         hook(鉤子)函數,不同生命周期引發的動作
路由鉤子函數(3個)         路由組件在不同狀態時觸發
components         組件容器
template         定義模板,可以是字符串,也可以是”#“選擇器
props         用于接收來自父組件的數據
router         路由
store         vuex 狀態

實例屬性/方法

vm.$el    Vue 實例使用的根 DOM 元素
vm.$data    Vue的data配置項
vm.$options    用于當前 Vue 實例的初始化選項

vm.$props    當前組件接收到的 props 對象
vm.$parent    父實例(如果當前實例有的話)

vm.$root    當前組件樹的根 Vue 實例
vm.$children    當前實例的直接子組件

vm.$refs    原生DOM元素或子組件注冊引用信息
vm.$slots    用來訪問被插槽分發的內容

vm.$router    全局路由(vue-router插件)
vm.$store    vuex 狀態對象(vuex插件)

方法

vm.$emit()    子組件可以使用 $emit 觸發父組件的自定義事件
vm.$set()    Vue.set的別名

設置對象的屬性, 這個方法主要用于避開 Vue 不能檢測屬性被添加的限制

vm.$watch    偵聽數據變化

vm.$on()    監聽當前實例上的自定義事件。事件可以由vm.$emit觸發?;卣{函數會接收所有傳入事件觸發函數的額外參數。

vm.$mount    可以使用 vm.$mount() 手動掛載(Vue 實例化時沒有 el 選項)

vm.$destroy    完全銷毀一個實例。清理它與其它實例的連接,解綁它的全部指令及事件監聽器。

觸發 beforeDestroy 和 destroyed 的鉤子。

屬性綁定指令

v-bind    動態改變dom標簽上的屬性<br />v-bind :class="" 簡寫 :class=""

生命周期

4個階段:創建→掛載→更新→銷毀

beforeCreate    實例創建前    

created    實例創建后    初始化數據(Ajax數據請求,獲取Vuex狀態、路由切換等)

beforeMount    載入前    

mounted    載入后    需要操作DOM時(應用第三方插件等)

beforeUpdate    更新前    

updated    更新后    通過事件修改數據、v-model引發數據變化、AJAX異步更新數據

beforeDestroy    實例銷毀前    

destroyed    實例銷毀后    切換路由(組件將被銷毀)

計算屬性

多次訪問計算屬性會立即返回之前的計算結果,而不必再次執行函數。

計算屬性具有緩存

數組的更新檢查

push()、pop()、shift()、unshift()
splice()、sort()、reverse()    

變異方法,可觸發視圖更新

filter(), concat() 和 slice()    

非變異方法,不觸發視圖更新
它們可以返回新數組,用新數組替換舊數組,就可以刷新視圖

事件對象

event.type    觸發的事件類型
event.target    觸發事件的HTML元素
event.preventDefault( )    阻止事件的默認行為
event.stopPropagation( )    阻止事件冒泡

Vue組件

  1. 創建組件
let myTemp={
template:'#temp', //模板id
data: function(){ //必須為函數(閉包)
    return { //必須有return,返回值為對象{}
        title:"dadaqianduan"
    }
}
  1. 注冊組件
//在components配置項中注冊組件
let app=new Vue({
    el:"#box",
    components:{myTemp}
});

//全局注冊組件,還可以使用Vue.component方法(僅限全局注冊,不建議使用)
Vue.component('myTemp',MyTemp);
  1. 使用組件
<!--在Vue實例中使用組件-->
<div id='box'>
      <!--組件名如果用駝峰定義,改為短橫線命名-->
    <my-temp></my-temp>
</div>
  1. 事件通信
  • 父子組件之間的數據操作,是通過props屬性和$emit()方法來實現的

路由使用

定義路由包括路由路徑(path)、路由名稱(name)、路由組件對象(component
routes: [
    {
      path: '/',        // 路由路徑 
      name: 'home',     // 路由名稱
      component: Home   // 路由組件對象 
    },
    {
      path: '/users',
      name: 'Users',
      component: UserComponent
    },
    {
      path: '/about',
      name: 'about',  
      component: () => import( './views/About.vue')
    }
  ]
  1. 動態路由
routes: [
  {
    path: '/users/:username/post/:postid',
    name: 'Users',
    component: UserComponent,
  }
]
/user/:username    
/user/tom    
{username:'tom'}

/user/:username/post/:postId    
/user/tom/post/3    
{username:'tom',postId:'3'}

路由導航

  1. 路由導航守衛

什么是路由導航守衛可以簡單理解為路由組件的生命周期回調函數。

// 路由導航守衛
// 作用:在第一次進入當前路由組件之前被調用
// 使用場景:獲取ajax數據
beforeRouteEnter(to, from, next) {
    // to:表示要進入的路由組件
    // from:表示將要離開的路由組件
    // next:表示后續操作函數
    // 此時還未進入到組件中,故不能使用this獲取當前組件的實例
    next(function(app) {
        // 進入到當前組件后,才執行的回調
        // 此時回調參數 app 表示當前組件的實例對象
        axios.get('/users/' + app.id).then(res => {
            app.user = res.data.data;
        });
    });
}
beforeRouteUpdate(to, from, next) {
    // 此時,可以使用this表示當前組件對象
    const app = this;
    // 發送ajax請求
    // this表示切換前的狀態
    // to表示要切換到的路由對象 route
    axios.get('/users/' + to.params.id).then(res => {
        app.user = res.data.data;
    });
    // 執行后續
    next();
}
  1. 編程式路由導航
methods: {
    login(){
        if(登陸成功){
            //實現頁面跳轉
            this.$router.push('/');
        }
    }
}
  1. push()
跳轉到指定的路由地址, 并把當前地址寫入到history中,參數可以是字符串路徑或描述地址信息的對象
字符串    router.push('home')
對象    router.push({path:'home'})
命名的路由    router.push({name:user,params:{userId:1}})
  1. replace( ):跳轉到指定路由,它不會向 history 添加新記錄,而是替換掉當前的 history 記錄。
  2. 全局路由導航守衛

示例:

// 全局路由導航守衛
    router.beforeEach((to, from, next) => {  
});

嵌套路由

children: [
    {
        path: "",
        component: 路由名
    },
    {
        path: "路徑名",
        component: 路由名
    }
]

命名視圖

使用<router-view> 可以使用 name 屬性為其設置名稱,即命名路由的視圖簡稱命名視圖。

示例:

<router-view/> 
<router-view name="content"></router-view> 
import About from './views/About.vue';
routes: [  
{
  path: "/about",
  name: "about",
  components: {
    default: About,
    content: UserComponent
  }
}
]

回看筆者往期高贊文章,也許能收獲更多喔!

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回復【資料】有我準備的一線大廠資料,本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

查看原文

贊 18 收藏 13 評論 0

程序員哆啦A夢 發布了文章 · 1月31日

【初級】個人分享Vue前端開發教程筆記 | 打卡每天一份勸退技能

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處于喜歡 才會有強大的動力支撐。

每天學習編程,讓你離夢想更新一步,感謝不負每一份熱愛編程的程序員,不論知識點多么奇葩,和我一起,讓那一顆四處流蕩的心定下來,一直走下去,加油,2021加油!歡迎關注,歡迎點贊、收藏和評論

不要害怕做夢,但是呢,也不要光做夢,要做一個實干家,而不是空談家,求真力行。

前言

如果這篇文章有幫助到你,給個??關注,??點贊,??鼓勵一下作者,接收好挑戰了嗎?文章公眾號首發,關注 程序員哆啦A夢 第一時間獲取最新的文章

??筆芯??~

作為一名Vue開發使用者,必須了解其使用規則。

Vue.js的發展

前端發展的行業非???,大部分學習者趕不上發展的速度,每天都在學習GoogleAngularJS,FackbookReactJS,這些前端MVCMVVM)框架和組件化學習,加上Vue.js的出現,越來越多的前端投入了學習中。??

Vue.js是一個用來開發web界面的前端庫,輕量級,具有響應式編程和組件化的特點。

hello world

引入vue.js

<script data-original="http://cdnjs.xxx"></script> // 使用CDN方法

通過NPM進行安裝:

npm install vue

示例:

<div id="#app">
 <h1>{{message}}</h1>
</div>

var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello world, 我是掘金,魔王哪吒'
 }
})
特點:數據綁定

在瀏覽器控制臺vm.message='hello vue',輸出結果hello vue,表示vm.message和視圖中{{message}}是綁定的。

綁定用戶輸入的數據,視圖會隨著用戶的輸入而變化??

<div id="app">
 <h1>dadaqianduan is {{message}}</h1>
 
 <input type="text" v-model="message">
</div>

vm.message的值會隨著用戶在input中輸入的值的變化而變化,而無需我們手動去獲取DOM元素的值再同步到js中。

特點:組件化

可以自己定義html標簽,在模板中使用它

示例:

<div id="app">
 <message content="dadaqianduan"></message>
</div>

<script type="text/javascript">
 var Message = Vue.extend({
  props: ['content'],
  template: '<h1>{{content}}</h1>'
 })
 
 Vue.component('message', Message);
 
 var vm = new Vue({
  el: '#app',
 })
</script>

命令行工具:

$npm install --global vue-cli

$vue init webpack my-project

$cd my-project

$npm install

$npm run dev

Vue實例

vue.js的使用是通過構造函數Vue({option})創建一個vue的實例:var vm = new Vue({})。

一個Vue實例相當于一個MVVM模式中的ViewModel,做圖如下:

在實例化的時候,可以傳入一個選項對象(數據,模板,掛載元素,方法,生命周期鉤子) 等。

模板

el類型是字符串,DOM元素或者是函數,作用是為實例提供掛載元素。一般來說我們會使用css選擇符,或是原生的DOM元素。

如:el:'#app',指定了el,實例將立即進入編譯過程。

template類型為字符串,默認會將template值替換掛載元素,el值對應的元素,合并掛載元素和模板根節點的屬性。

數據

vue實例中可以通過data屬性定義數據,這些數據可以在實例對應的模板中進行綁定并使用。

示例:

var data = {a:1}


var vm = new Vue({
 data: data
})

vm.$data === data // true
vm.a === data.a // true

vm.a = 2
data.a // 2

data.a = 3
vm.a // 3

在模板中使用{{a}}就會輸出vm.a的值,修改vm.a的值,模板中的值會隨之改變,稱為響應式數據。

組件類型的實例可以通過props獲取數據,同data一樣,也需要在初始化時預設好。

<my-component title="myTitle" content="myContent"></my-component>

var myComponent = Vue.component("my-component",{
 props: ['title','content'],
 template: '<h1>{{title}}</h1><p>{{content}}</p>'
})

方法

methods對象中來定義方法,示例:

<button v-on:click="daBtn">dadaqianduan</button>

new Vue({
 el: '#app',
 data: {a:1},
 methods: {
  daBtn: function(){
   console.log(this.a);
  }
 }
});

生命周期

beforeCreate,在實例開始初始化時同步調用,此時數據觀測,事件等都尚未初始化。

created,在實例創建之后調用,此時已完成數據綁定,事件方法,但尚未開始DOM編譯,即是未掛載到document中。

beforeMount,在mounted之前運行。

mounted,在編譯結束時調用,此時所有指令已生效,數據變化已能觸發DOM更新,但不保證$el已插入文檔。

beforeDestroy,在開始銷毀實例時調用。

destroyed,在實例被銷毀之后調用,此時所有綁定和實例指令都已經解綁,子實例也被銷毀。

updated,在實例掛載之后,再次更新實例并更新完DOM結構后調用。

activated,需要配合動態組件keep-live屬性使用,在動態組件初始化渲染的過程中調用該方法。

文本插值

數據綁定基礎形式是文本插值,使用{{}},為Mustache語法:

<span>hello {{name}}</span>

單次插值:

<span v-once>{{name}}</span>

HTML屬性

示例:

<div v-bind:id="'id-'+id"/></div>

<div :id="'id-'+id"></div>

綁定表達式

放在Mustache標簽內的文本內容稱為綁定表達式。每個綁定中只能包含單個表達式,并不支持JavaScript語句,不支持正則表達式。

過濾器

vue允許在表達式后添加可選的過濾器,以管道符 "|"指示,可以有多個過濾器鏈式使用:

{{time | paramsTime}}

計算屬性

var vm = new Vue({
 el: '#app',
 data: {
  firstName: 'da',
  lastName: '哪吒',
 }
 computed: {
  fullName: function() {
   // this 指向vm實例
   return this.firstName + ' ' + this.lastName
  }
 }
});

<p>{{firstName}}</p><p>{{lastName}}</p><p>{{fullName}}</p>

Setter

示例:

var vm = new Vue({
 el: '#el',
 data: {
  num: 100,
 }
 computed: {
  price: {
   set: function(newValue){
    this.num = newValue * 100;
   },
   get: function() {
    return (this.num/100).toFixed(2);
   }
  }
 }
});

表單控件

輸入框示例:

<input type="text" v-model="message"/>

<span>dadaqianduan {{message}}</span>

單選框示例:

<label><input type="radio" value="male" v-model="gender"> 男 </label>
<label><input type="radio" value="famale" v-model="gender"> 女 </label>

<p>{{gender}}</p>

checkbox復選框,單個勾選框和多個勾選框

<input type="checkbox" v-model="checked"/>

<span>dadaqianduan{{checked}}</span>

多個勾選框,v-model使用相同的屬性名稱,且屬性為數組:

<label><input type="checkbox" value="1" v-model="multiChecked">1</lable>
<label><input type="checkbox" value="2" v-model="multiChecked">2</lable>
<label><input type="checkbox" value="3" v-model="multiChecked">3</lable>
<p>{{multiChecked.join('|')}}</p>

select:

單選:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>dadaqianduan: {{selected}}</span>

多選:

<select v-model="multiSelected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>dadaqianduan: {{multiSelected.join('|')}}</span>

綁定value

表單控件的值同樣可以綁定在vue實例的動態屬性上。

// checkbox
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
選中:vm.checked==vm.a

未選中:vm.hchecked==vm.b

class與style綁定

class屬性,綁定的數據可以是對象和數組

<div class="da" v-bind:class="{'active':active, 'unactive':!active}"></div>

vm實例中需要包含:
data: {
 active: true
}

渲染結果:<div class="tab active"></div>

數組語法

<div v-bind:class="[classA, classB]"></div>

data: {
 classA: 'class-a',
 classB: 'class-b',
}

渲染結果:`<div class="class-a class-b'></div>

內聯樣式綁定

  1. 對象語法:直接綁定符合樣式格式的對象
<div v-bind:style="dada"></div>

data: {
 dada: {
  color: 'green',
  fontSize: '10px'
 }
}
<div v-bind:style="{ fontSize: color: 'green' }"></div>
  1. 數組語法:v-bind:style允許將多個樣式對象綁定到統一元素上。
<div v-bind:style="[ styleObjectA, styleObjectB ]"></div>

模板渲染

前端渲染的優點:

第一,業務分離,后端只需要提供接口,前端在開發時也不需要部署對應得后端環境,通過一些代理服務器工具就能遠程獲取后端數據進行開發,能夠提升開發效率。

第二,計算量得轉移,原本需要后端渲染得任務交給了前端,減輕了服務器得壓力。

后端渲染的優點:

第一,對搜索引擎比較友好。

第二,首頁加載時間端,后端渲染加載完成后就直接顯示html,但前端渲染在加載完成后還需要有段js渲染的時間。

條件渲染

v-ifv-else的作用是根據數據值來判斷是否輸出該DOM元素,以及包含的子元素。

v-else必須緊跟v-if,不然該指令不起作用。

v-show元素的使用會渲染并保存在DOM中。只是切換元素的css屬性display。

v-ifv-show的條件發生變化時,v-if引起了dom操作級別的變化,而v-show僅僅發生了樣式的變化,從切換的角度來說,v-show消耗的性能要比v-if小。

v-if切換時,vue.js會有一個局部編譯/卸載的過程,因為 v-if 中的模板也可能包括數據綁定或子組件。v-if 會確保條件塊在切換當中適當地銷毀與中間內部的事件監聽器和子組件。

v-if 是惰性的,如果在初始條件為假時,v-if 本身什么都不會做,而v-show 則仍會進行正常的操作,然后把 css 樣式設置為 display:none。

v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗

列表渲染

示例:

<ul>
<li v-for="item in items">
   <h3>{{item.web}}</h3>
   <p>{{item.da}}</p>
 </li>
</ul>
var vm = new Vue({
el : '#app',
 data: {
   items : [
    { title : 'web-1', description : 'da-1'},
    { title : 'web-2', description : 'da-2'},
    { title : 'web-3', description : 'da-3'},
    { title : 'web-4', description : 'da-4'}
   ]
 }
});

v-for 內置了 $index 變量,輸出當前數組元素的索引,也可以自己指定索引的別名。`<li v-for="(index,item) in items">{{index}} –
{{$index}} – {{item.title}}</li>`

vue.js中提供了$set方法,修改數據的同時進行試圖更新。

vm.$set('item[0]', {title: 'da'})

修飾符

.stop: 等同于調用 event. stopPropagation()。

.prevent: 等同于調用 event.preventDefault()。

.capture: 使用 capture 模式添加事件監聽器。
.self: 只當事件是從監聽元素本身觸發時才觸發回調。

示例:

<form v-on:submit.prevent="onSubmit"></form> // 阻止表單默認提交事件

<form v-on:submit.stop.prevent="onSubmit"></form> // 阻止默認提交事件且阻止冒泡

<form v-on:submit.stop.prevent></form> // 也可以只有修飾符,并不綁定事件

Vue.extend()

Vue.js 提供了 Vue.extend(options) 方法,創建基礎 Vue 構造器的“子類”

Vue.component('child', Child) // 全局注冊子組件
<child ….></child> // 子組件在其他組件內的調用方式

var Child = Vue.extend({
template : '#child',
data : function() {
   return {
    ….
   }
 }
….
})

內置指令

v-bind用于動態綁定DOM元素屬性attribute,元素屬性實際的值是由vm實例中的data屬性提供的。

![](avatar)
new Vue({
 data: {
  avatar: 'http://'
 }
})

v-text 需要綁定在某個元素上,能避免未編譯前的閃現問題。

v-ref作用于子組件上,實例可以通過$refs訪問子組件。

示例:

<message v-re:title content="title"></message>
<message v-ref:sub-title content="subTitle"></message>

var Message = Vue.extend({
 props: ['content'],
 template: '<h1>{{content}}</h1>'
});
Vue.component('message', Message);

v-pre指令,表示跳過編譯這個元素和子元素,顯示原始的{{}}Mustache標簽,用來減少編譯時間。

v-clock指令相當于在元素上添加一個[v-cloak]的屬性,直到關聯的實例結束編譯??梢院?code>css規則[v-cloak]{display:none}一起使用,可以隱藏未編譯的Mustache標簽直到實例準備完畢。

<div v-cloak>{{msg}}</div>

v-once指令是用于標明元素或 組件只渲染一次,即使隨后發生綁定數據的變化或更新,該元素或組件以及包含的子元素都不會再次被編譯和渲染。

自定義指令

通過Vue.directive(id,definition)方法注冊一個全局自定義指令,接收參數id和定義對象。id是指令的唯一標識,定義對象就是指令的相關屬性以及鉤子函數。

Vue.directive('global-directive', definition)

<div v-global-directive></div>

局部注冊:

var com = Vue.extend({
 directives: {
  'localDirective': {}
 }
});

指令實例屬性

  1. el指令綁定的元素
  2. vm,該指令的上下文ViewModel,可以為new Vue()的實例,也可以為組件實例。
  3. expression,指令的表達式,不包括參數和過濾器
  4. arg,指令的參數
  5. name,指令的名字
  6. modifiers,一個對象,包含指令的修飾符
  7. descriptor,一個對象,包含指令的解析結果

過濾器

vue.js可以在表達式后面添加可選的過濾器,以管道符表示:

{{time | paramsTime }}
過濾器的本質是一個函數,接受管道符前面的值作為初始值,同時也能接受額外的參數,返回值為經過處理后的輸出值。
Vue.filter('date', function(value){
 if(!value instanceof Date) return value;
 return value.toLocalDateString();
})

</div>
 {{ date | date }}
</div>
var vm = new Vue({
 el: '#app',
 data: {
  date: new Date()
 }
})

組件注冊

示例:

var MyComponent = Vue.extend({...})

vue.js提供了兩種注冊方式,分別是全局注冊和局部注冊。

Vue.component('my-component', MyComponent);

使用方法:

<div id="app">
 <my-component></my-component>
</div>

var MyComponent = Vue.extend({
template : '<p>掘金 魔王哪吒</p>'
})

Vue.component('my-component', MyComponent)
var vm = new Vue({
el : '#app'
});

局部注冊

var Child = Vue.extend({
template : '<p>dadaqianduan.cn</p>'
});

var Parent = Vue.extend({
template: '<div> 
   <p>dada</p>
   <my-child></my-child>
   </div>',
 components: {
   'my-child': Child
 }
});
注冊語法糖

示例:

// 全局注冊
Vue.component('my-component', {
template : '<p>dadaqianduan.cn</p>'
})

// 局部注冊
var Parent = Vue.extend({
template: '<div>
    <p>掘金 魔王哪吒</p> 
    <my-child></my-child>
   </div>',
 components: {
   'my-child': {
    template : '<p>dada</p>'
   }
 }
});

組件props

props將父組件的數據傳遞給子組件,子組件在接受數據時,需要顯示聲明props。

示例:

Vue.component('my-child', {
props : ['parent'],
template: '<p>{{ parent }} is from parent'
})
<my-child parent="魔王哪吒"></my-child>

prop: Number,接受的參數為原生構造器,String,Number,Boolean,Function,Object,Array,也可接受null,意味任意類型均可。

多種類型:prop: [Number,String],;參數必需:prop:{type: Number, required: true}。

參數默認:prop: {type: Number, default: 12},

示例:

prop: {
 type: Object,
 default: function() {
  return {a: 'a'}
 }
}

組件間通信

vue.js提供了三個屬性對其父子組件以及根實例進行直接訪問。

  • $parent,父組件實例
  • $children,包含所有子組件實例
  • $root,組件所在的根實例

建議使用props在組件間傳遞數據。

$emit

示例:

events : {
'add' : function(msg) {
   this.todo.push(msg);
 }
}
methods: {
onClick : function() {
   this.$emit('add', 'dada');
 }
}

$dispatch

示例:

父組件:

events : {
'add' : function(msg) {
   this.todo.push(msg);
 }
}

子組件:

methods: {
toParent : function() {
   this.$dispatch('add', 'dada');
 }
}

子組件索引

vue.js提供了直接訪問子組件的方式,除了this.children外,還給子組件綁定一個v-ref指令。

<child-todo v-ref:first></child-todo>

在父組件中就可以通過 this.$refs.first 的方式獲取子組件實例。

組件緩存

keep-alive如果把切換出去的組件保留在內存中,可以保留它的狀態或避免重新渲染。

<keep-alive>
 <component :id="currentView">
 </component>
</keep-alive>

生命周期:

// 組件被創建之前
beforeCreate(){
 console.log("組件被創建之前")
}
created(){
 console.log("組件被創建之后")
}
beforeMount(){
 console.log("組件被渲染之前")
}
mounted(){
 console.log("組件被渲染之后")
}
beforeUpdate(){
 console.log("數據改變渲染之前")
}
updated() {
 console.log("數據改變渲染之后
}
beforeDestory(){
 // 組件銷毀之前
}
destoryed(){
 // 銷毀之后
}

自定義指令和過濾器

// 注冊一個全局自定義指令
Vue.directive('focus', {
 inserted: function(el){
  // 聚焦元素
  el.focus()
 }
})

注冊局部指令,組件中也接受一個directives的選項:

directives: {
 focus: {
  // 指令的定義
  inserted: function(el){
   el.focus();
  }
 }
}

過濾器

vue.js過濾器可以用在兩個地方:雙花括號插值v-bind表達式。

{{message | capitalize}}

<div v-bind:id="rawId | formatId"></div>

可以在一個組件的選項中定義本地的過濾器:

filters: {
 capitalize: function(value) {
  if(!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1);
 }
}
Vue.filter("author",function(value){
 return value+"-dadaqianduan";
})

Vue.filter("money", function(value){
 return "$"+value;
})

axios基礎get請求

axios是一個基于promise的HTTP庫,可以用在瀏覽器和node.js中。

特點:

  1. 從瀏覽器中創建XMLHttpRequests
  2. node.js創建http請求
  3. 支持Promise api
  4. 攔截請求和響應
  5. 轉換請求數據和響應數據
  6. 取消請求
  7. 自動轉換JSON數據
  8. 客戶端支持防御XSRF

安裝:

使用npm

npm install axios

執行GET請求:

axios.get('/user?ID=123')
 .then(function(response){
  console.log(response);
 })
 .catch(function(error){
  console.log(error);
 });

axios.get('/user', {
 paras: {
  ID: 123
 }
})
.then(function(response){
 console.log(response);
})
.catch(function(error){
 console.log(error);
});

執行post請求

axios.post('/user', {
 firstName: 'da',
 lastName: 'jeskson'
})
.then(function(response){
 console.log(response);
})
.catch(function(error){
 console.log(error);
});

執行多個并發請求

function getUserAccount() {
 return axios.get('/user/123');
}
function getUserPermissions() {
 return axios.get('/user/123/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct, perms){
}));

axios api: 可以通過向axios傳遞相關配置來創建請求

// axios(config)
axios({
 method: 'post',
 url: '/user/123',
 data: {
  firstName: 'dada',
  lastName: 'dadaqianduan'
 }
});

axios(url[,config])

// 發送get請求
axios('/user/123');

示例:

created(){
 this.$axios.get("http://xxx")
 .then(res=>{
  this.axiosData = res.data
 })
 .catch(error => {
  console.log(error);
 })
}
}

vue-axios全局配置和攔截器

全局的axios默認值:

axios.defaults.baseURL='http://xxx';

自定義實例默認值:

// 創建實例時設置的默認值
var instance = axios.create({
 baseURL: 'http://xxx'
});

攔截器:在請求或響應被thencatch處理前攔截它們。

// 添加請求攔截器
axios.interceptors.request.use(function(config){
 // 在發送請求之前做些什么
 return config
 },function(error){
  // 對請求錯誤做些什么
 return Promise.reject(error);
});

// 添加響應攔截器
axios.interceptors.response.use(function(response){
 // 對響應數據做點什么
 return response;
 },function(errror){
 // 對響應錯誤做點什么
 return Promise.reject(error);
});

添加請求攔截器

Axios.interceptors.request.use(function(config){
 // 在發送請求之前做些什么
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 console.log(config);
 return config;
},function(error){
// 對請求錯誤做些什么
return Promise.reject(error);
});

vue-axios跨域處理

proxy: {
 host: '127.0.0.1',
 port: 9000,
 auth: {
  username: 'jeskson',
  password: '123'
 }
}

路由基礎

<div id="app">
 <router-view></router-view>
</div>

const User = {
 template: '<div>User</div>`
}

const router = new VueRouter({
 routes: {
  {path: '/user/:id', component: User}
 }
})

router-link

<router-link>組件支持用戶在具有路由功能的應用中導航,通過to屬性指定目標地址,默認渲染成帶有正確鏈接的<a>標簽,可以通過配置tag屬性生成別的標簽。另外,當目標路由成功激活時,鏈接元素自動設置一個表示激活的css類名。

<router-link>比起寫<a href="...">會好一些。

  1. 無論是html5 history模式還是hash模式,它的表現行為一致,所以,當你要切換路由模式,或者在ie9降級使用hash模式,無須作任何變動。
  2. html5 history模式下,router-link會守衛點擊事件,讓瀏覽器不在重新加載頁面。
  3. 當你在html5 history模式下使用base選項之后,所有的to屬性都不需要寫基路徑了。
路由嵌套

要在嵌套的出口中渲染組件,需要在VueRouter的參數中使用children配置:

const router = new VueRouter({
 routes: [
  {path: '/user/:id', component:User,
  children: [
   {
    path: 'profile',
    component: UserProfile
   },
   {
    path: 'posts',
    components: UserPosts
   }
 ]
})

路由參數傳遞:

<router-link :to="{name: 'dada', params: {id:'111', count: 12} }">魔王哪吒</router-link>

vue框架對比

vue:

  1. 模板和渲染函數的彈性選擇
  2. 簡單的語法以及項目創建
  3. 更快的渲染速度和更小的體積

react:

  1. 更適用于大型應用和更好的可測試性
  2. 同時適用于web端和原生app
  3. 更大的生態圈帶來的更多的支持和工具

vue核心思想

數據驅動 和 組件化

nodejs和npm的安裝和環境搭建

  1. Webpack代碼模塊化構建打包工具
  2. Gulp基于流的自動化構建工具
  3. GruntJavaScript世界的構建工具
  4. Babel是使用最新的規范來編寫js
  5. vue是構建數據驅動的web界面的漸進式框架
  6. Express是基于Node.js平臺,快速,開放,極簡的web開發框架

下載地址:https://nodejs.org/en/download/

vue環境搭建以及vue-cli使用

vue多頁面應用文件引用:

<script data-original="https://unpkg.com/vue/dist/vue.js"></script>

vue-cli構建spa應用

npm install -g vue-cli

vue init webpack-simple demo

vue init webpack demo2
a vue.js project

npm install

npm run dev

npm run build

vue基礎語法

模板語法:Mustache語法:{{msg}}

  • html賦值:v-html=""
  • 綁定屬性:v-bind:id=""
  • 使用表達式:{{ok?'yes':'no'}}
  • 文本賦值:v-text=""
  • 指令v-if=""
  • 過濾器:{{message | capitalize}}

classstyle綁定

  • 對象語法:v-bind:class="{active: isActive, 'text-danger': hasError}">
  • 數組語法:<div v-bind:class="[activeClass,errorClass]">
  • style綁定對象語法:v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"
vue組件
  1. 全局組件和局部組件
  2. 父子組件通訊-數據傳遞
  3. Slot

Vue-router

什么是前端路由:就是根據不同的url地址展示不同的內容或頁面

vue-router用來構建spa

<router-link></router-link>或者this.$router.push({path:''})

<router-view></router-view>
  • 動態路由匹配
  • 嵌套路由
  • 編程式路由
  • 命名路由和命名視圖
什么是動態路由匹配

示例:

import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods/:goodsId',
   name: 'GoodsList',
   component: GoodsList
  }
 ]
})

<template>
 <div>
  <span>{{$route.params.goodsId}}</span>
 </div>
</template>
什么是嵌套路由
// App.vue
<template>
 <div id="app">
  ![](./assets/logo.png)
  <router-view></router-view>
 </div>
</template>
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods',
   name: 'GoodsList',
   component: GoodsList,
   children: [
    {
      path: 'title',
      name: 'title',
      component: Title
     },
     {
      path: 'img',
      name: 'img',
      component: Image
     }
   ]
  }
 ]
})

<template>
 <div>
  <span>{{$route.params.goodsId}}</span>
  
  <router-link to="/goods/title">顯示商品標題</router-link>
  <router-link to="/goods/image">顯示圖片</router-link>
  
  <div>
   <router-view></router-view>
  </div>
 </div>
</template>
什么是編程式路由

通過js來實現頁面的跳轉。

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods',
   name: 'GoodsList',
   component: GoodsList,
   children: [
    {
      path: 'title',
      name: 'title',
      component: Title
     },
     {
      path: 'img',
      name: 'img',
      component: Image
     }
   ]
  },
  {
   path: '/cart',
   component: Cart
  }
 ]
})

<template>
 <div>
  <span>{{$route.params.goodsId}}</span>
  
  <router-link to="/goods/title">顯示商品標題</router-link>
  <router-link to="/goods/image">顯示圖片</router-link>
  
  <div>
   <router-view></router-view>
  </div>
  
  <router-link to="/cart">購物車</router-link>
  <button @click="jump">跳轉購物車</button>
 </div>
</template>

...

methods: {
 jump() {
  this.$router.push("/cart");
  // ({path: '/cart?id=123'});
 }
}

命令路由和命名視圖

給路由定義不同的名字,根據名字進行匹配

給不同的router-view定義名字,通過名字進行對應組件的渲染

<router-link v-bind:to="{name: 'cart'}">跳轉到購物車頁面</router-link>

<router-link v-bind:to="{name: 'cart', params:{cartId:123}}">跳轉到購物車頁面</router-link>

路由:
{
 path: '/cart/:cartId",
 name: 'cart',
 component: Cart
}

app.vue代碼如下:

<template>
 <div id="app">
  ![](./assets/logo.png)
  <router-view></router-view>
  <router-view name="title"></router-view>
  <router-view name="img"></router-view>
 </div>
</template>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'

Vue.use(Router);

export default new Router({
 routers: {
  {
   path: '/',
   name: 'GoodsList',
   components: {
    default: GoodsList,
    title: Title,
    img: Image
   }
  },
  {
   path: '/cart/:cartId',
   name: 'cart',
   components: Cart
  }
 }
})

Vue-resource和Axios

下載安裝方式:

<script data-original="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

npm install vue-ressource -save

vue-resource的請求api是按照rest風格設計的,提供7個請求api:

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [option])

全局攔截器interceptors

Vue.http.interceptors.push{(request, next) => {
 // 請求發送前的處理邏輯
 next((response) => {
  // 請求發送后的處理邏輯
  return response
 })
})

vue-resource.html(全局攔截器)

mounted() {
 Vue.http.interceptors.push(function(request,next){
  next(function(response){
   return response;
  });
 });
}

axios的使用

<script data-original="https://unpkg.com/axios/dist/aios.min.js"></script>

npm install axios -save

示例:

function getUserAccount(){
 return axios.get('/user/12345');
}

function getUserPermissions(){
 return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function(acct, perms){

}));
mounted: function(){
 axios.interceptors.request.use(function(config){
  return config;
 })
 axios.interceptors.response.use(function(response){
  return response;
 })
}

ES6常用命令

函數的Rest參數和擴展,Promise使用,module.exportses6 import/export的使用

let checkLogin = function () {
 return new Promise(function(resolve,reject){
  let flag = document.cookie.indexOf("userId") > -1 ? true:false
  
  if(flag) {
   resolve({
    status: 0,
    result: true
   })
  }else{
   reject("error");
  }
 })
};

checkLogin().then(function(res){
if(res.status==0){
 console.log("login success");
}
}).catch((error)=>{
 console.log(`error:${error}`);
})

一旦有了名字就要大塊來接收

export let sum = (x,y)=>{
 return x+y;
}

export let minus  = (m,n) => {
 return m-n;
}

import {sum, minus} from './util'
sum()

console.log(`sum:${sum(1,2)}`);
import * as util from './util'

// util.sum(1,2)

AMD,CMD,CommonJS和ES6

  • AMDRequireJS在推廣過程中對模塊定義的規范化產出
  • CMDSeaJS在推廣過程中對模塊定義的規范化產出
  • CommonJS規范-module.exports

示例:

exports.area = function(r){
 return Math.PI * r * r;
};

腳手架

Vue基礎:環境搭建,模板,計算屬性,類與樣式,條件,列表渲染,事件處理,深入了解組件,路由基礎,Vuex基礎。

vue-cli@3
vue@2.5

// 第一種搭建
npm install -g @vue/cli

// 第二種搭建
yarn global add @vue/cli

v-bind縮寫

// 完整語法
<a v-bind:href="url">...</a>

// 縮寫
<a :href="url">...</a>

v-on縮寫

// 完整語法
<a v-on:click="doSomething">...</a>

// 縮寫
<a @click="doSomething>...</a>

自定義指令

聲明自定義指令的名稱,通過vue.directive聲明,設置鉤子函數,在什么時機做什么事情:

// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
 // 當被綁定的元素插入到DOM中時
 inserted: function(el){
  // 聚焦元素
  el.focus()
 }
})
鉤子函數

一個指令定義對象可以提供如下幾個鉤子函數:

(初始化的操作)
bind,只調用一次,指令第一次綁定到元素時調用,在這里可以進行一次性的初始化設置。

inserted,被綁定元素插入父節點時調用,(僅保證父節點存在,但不一定已被插入文檔中)。

update,所在組件的VNode更新時調用,但是可能發生在其子VNode更新之前。指令的值可能發生了改變,也可能沒有,但是你可以通過比較更新前后的值來忽略不必要的模板更新。

componentUpdated,指令所在組件的VNode及其子VNode全部更新后調用。

unbind,只調用一次,指令與元素解綁時調用。

指令鉤子函數會被傳入以下參數

el,指令所綁定的元素,可以用來直接操作DOM。

binding,一個對象,包含以下屬性:

  1. name,指令名,不包含v-前綴
  2. value,指令的綁定值,例如,v-my-directive="1+1"中,綁定值為2
  3. oldValue,指令綁定的前一個值,僅在updatecomponentUpdated鉤子中可用,無論值是否改變都可用。
  4. expression,字符串形式的指令表達式,例如v-my-directive="1+"中,表達式為"1+1"
  5. arg,傳給指令的參數,可選。例如v-my-directive:foo中,參數為"foo"
  6. modifiers,一個包含修飾符的對象,例如:v-my-directive.foo.bar中,修飾符對象為{foo:true,bar:true}
  7. vnode,vue編譯生成的虛擬節點。
  8. oldVnode,上一個虛擬節點,僅在updatecomponentUpdated鉤子中可用。
除了el外,其它參數都應該是只讀的,切勿進行修改。如果需要在鉤子之間共享數據,建議通過元素的dataset來進行。

計算屬性

示例:

<div id="jeskson">
 <p>{{message}}</p>
 <p>{{reversedMessage}}</p>
</div>

應用場景:具有依賴關系的數據監聽。

事件

  • 事件的定義以及縮寫
  • 事件傳參和事件對象
  • 快速結合鍵盤事件提升效率
事件修飾符

在事件處理程序中調用event.preventDefault()event.stopPropagation()是非常常見的需求。

vue.jsv-on提供了事件修飾符:

.stop

.prevent

.capture

.self

.once

.passive

深入了解組件

props, 組件的參數傳遞;slot,插槽在組件抽象設計中的應用;自定義事件,父子組件的通信方式。

生命周期鉤子

  1. beforeCreate組件創建前
  2. created組件創建前
  3. beforeMount組件掛載前
  4. mounted組件掛載完畢
  5. beforeUpdate組件更新之前
  6. updated組件更新完畢
  7. beforeDestory組件銷毀前
  8. destory組件銷毀完畢

示例:

<div id="app">
 <h1>{{dada}}</h1>
 <button v-on:click="updateInfo">修改數據</button>
 <button v-on:click="destoryComponent">銷毀組件</button>
</div>

var vm = new Vue({
 el: '#app',
 data: {
  info: 'dadaqianduan.cn‘
 },
 beforeCreate: function(){
  console.log("beforeCreated,組件創建前");
  console.log(this.$el);
  console.log(this.$data);
 },
 created: function(){
  console.log("created,組件創建完畢");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeMount: function() {
  console.log("beforeMounted,組件掛載前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 mounted: function(){
  console.log("mounted,組件掛載完畢");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeUpdate: function(){
  console.log("beforeUpdate,組件更新前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 updated: function(){
  console.log("updated,組件更新完畢");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeDestroy: function(){
  console.log("beforeDestory,組件銷毀前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 destroyed: function(){
  console.log("destoryed,組件銷毀完畢");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
})
組件創建前-beforeCreate:組件創建前,組件需要掛載的DOM元素el和組件的數據data都未被創建。
el: undefined

data: undefined
組件創建完畢-created:組件的數據已經創建完畢,但是DOM元素的el還沒被創建
el: undefined

data: {info: 'dadaqianduan.cn’}
組件掛載前-beforeMount:DOM元素被創建,而data中的數據還沒有
el有值,data有值,info沒值
組件掛載完畢-mounted:data中的數據有值。el,data,info都有值。

組件更新前-beforeUpdate:data數據已經更新,dom元素的內容也同步更新。

組件更新完畢-updated:data數據已經更新,dom元素的內容也同步更新。

組件銷毀之前-beforeDestroy:銷毀前,不再受vue管理,但是可以繼續更新數據,但模板已經不再更新了。

組件銷毀之前-destroyed:組件銷毀完畢,不再受vue管理。

生命周期階段

  1. new Vue(),新建vue實例
  2. 初始化,事件和生命周期
  3. beforeCreate
  4. 初始化,注入和校驗
  5. created
  6. 是否指定el選項,是直接走判斷(是否指定template選項),否-當調用vm.$mount(el)函數時(是否指定template選項)
  7. 是否指定template選項-(是:將template編譯到render函數中,否:將el外部的html作為template編譯)
  8. beforeMount
  9. 創建vm.$el并用其替換el
  10. mounted
  11. 掛載完畢(如當data被修改時,調用beforeUpdate-,進入虛擬DOM重新渲染并應用更新,調用updated。
  12. 當調用vm.$destroy()函數時。
  13. beforeDestroy
  14. 解除綁定,銷毀子組件以及事件監聽器

15.銷毀完畢-destroyed

父子組件通信

父組件可以通過props傳遞給子組件,子組件可以通過$parent,$emit傳遞父組件。

// 組件引用
<dada></dada>

// 引入
import Dada from './components/Dada'
export default {
 name: 'App',
 // 注冊
 components: {Dada}
}

流程:引入,注冊,使用。

props

示例:

Vue.component('da-da', {
 props: ['textTitle'],
 template: '<h2>{{textTitle}}</h2>'
})

// 使用
<da-da text-title="dadaqianduan.cn"></da-da>

prop類型如下:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise
}
傳遞靜態或動態prop
<da-da title="dadaqianduan.cn"></da-da>

prop可以通過v-bind動態賦值:

// 動態賦值
<da-da v-bind:title="dada.title"></da-da>

<da-da
 v-bind:title="dada.title+'da da'+dada.author.name">
</da-da>

父組件prop的更新會向下流動到子組件中,但是反過來則不行,這樣會防止從子組件意外變更父級組件的狀態,表示你不應該在一個子組件內部改變prop,否則vue會在瀏覽器的控制臺中發出警告。

這個 prop 用來傳遞一個初始值;這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下,最好定義一個本地的 data property 并將這個 prop 用作其初始值

示例:

props: ['dada'],
data: function () {
  return {
    counter: this.dada
  }
}
以一種原始的值傳入且需要進行轉換。

示例:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

prop驗證

示例:

Vue.component('my-component', {
  props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
類型檢查

type可以是下列原生構造函數中的一個:通過 instanceof 來進行檢查確認。

String
Number
Boolean
Array
Object
Date
Function
Symbol
$emit

子組件通過$emit向父組件傳遞通信。

vm.$emit(eventName,[...args])

參數:
1. {string} eventName
2. [...args]

觸發當前實例上的事件,附加參數都會傳給監聽器回調。

子組件中執行$emit(eventName)時,就會觸發父組件中對應的event。

'$parent:$parentvue`的一個實例屬性,它表示的是當前組件的父實例

假如父組件中有一個方法為sayDa,在子組件中可以直接使用this.$parent.sayDa去調用父組件的方法。

Vuex項目實戰

  1. Vuex的基本使用步驟
  2. Vuex的核心概念
  3. Vuex實現業務功能
Vuex概述

組件之間共享數據的方式

如果父組件要向子組件傳值,使用v-bind屬性綁定

如果子組件要向父組件傳值,使用v-on事件綁定

兄弟組件之間共享數據:EventBus

  • $on接收數據的那個組件
  • $emit發送數據的那個組件
Vuex是什么

vuex是實現組件全局狀態數據管理的一種機制,可以方便的實現組件之間數據的共享。

使用vuex統一管理狀態的好處

1.能夠在vuex中集中管理共享的數據,易于開發和后期維護

2.能夠高效地實現組件之間的數據共享,提高開發效率

3.存儲在vuex中的數據都是響應式的,能夠實時保持數據與頁面的同步

什么樣的數據可以存儲到vuex中

一般情況下,只有組件之間共享的數據,才有必要存儲到vuex中,對于組件中私有的數據,存儲在組件自身的data中。

vue的基本使用

  1. 安裝vuex依賴包
npm install vuex --save
  1. 導入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
  1. 創建store對象
const store = new Vuex.Store({
 // state中存放的是全局共享的數據
 state: {count:0}
})
  1. 將store對象掛載到vue實例中
new Vue({
 el: '#app',
 render: h=>h(app),
 router,
 // 將創建的共享數據對象,掛載到Vue實例中
 // 所有的組件,就可以直接從store中獲取全局的數據
 store
})

vuex的核心概念

組件訪問state中數據的第一種方式:

this.$store.state.全局數據名稱

組件訪問state中的數據第二種方式:

// 從vuex中按需導入mapState函數
import {mapState} from 'vuex'

通過剛導入的mapState函數,將當前組件需要的全局數據,映射為當前組件的computed計算屬性:

// 將全局數據,映射為當前組件的計算屬性
computed: {
 ...mapState(['count'])
}
Mutation用于修改store的數據
  1. 只能通過mutation變更Store數據,不可以直接操作Store中的數據。
  2. 通過這種方式雖然操作起稍微繁瑣一些,但是可以集中監控所有數據的變化。
// 定義Mutation

const store = new Vue.store({
 state: {
  count: 0
 },
 mutations: {
  add(state) {
   // 變更狀態
   state.count++
  }
 }
})
// 觸發mutation

methods: {
 handle1() {
  // 觸發mutations的第一種方式
  this.$store.commit('add')
 }
}

可以在觸發mutations時傳遞參數:

// 定義Mutation
const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  addN(state,step){
   // 變更狀態
   state.count += step
  }
 }
})
// 觸發mutation
methods: {
 handle2() {
  // 在調用commit函數
  // 觸發mutations 時攜帶參數
  this.$store.commit('addN',1)
 }
}
this.$store.commit()是觸發mutations的第一種方式,第二種如下:
// 從vuex中按需導入mapMutations函數
import {mapMutations} from 'vuex'

將需要的mutations函數,映射為當前組件的methods方法:

methods: {
 ...mapMutations(['add','addN'])
}
不要在mutations函數中,執行異步操作

Action 用于處理異步任務。

如果通過異步操作變更數據,必須通過Action,而不能使用Mutation,但是在Action中還是通過觸發Mutation的方式間接變更數據。

// 定義Action
const store = new Vuex.store({
 mutations: {
  add(state){
   state.count();
  }
 },
 actions: {
  addAsync(context){
   setTimeout(()=>{
    context.commit('add')
   },1000)
  }
 }
// 觸發Action
mothods: {
 handle() {
  // 觸發actions的第一種方式
  this.$store.dispatch('addAsync');
 }
}

觸發action異步任務時攜帶參數:

this.$store.dispatch('addNAsync',5)

觸發actions的第二種方式:

// 從vuex中按需導入mapActions函數
import {mapActions} from 'vuex'

將需要的actions函數,映射為當前組件的methods方法:

methods: {
 ...mapActions(['addAsync','addNASync'])
}
import {mapState,mapMutations,mapActions} from 'vuex
computed: {
 ...mapState(['count'])
},
methods: {
 ...mapMutations(['sub','subN']),
 ...mapActions(['subAsync']),
 btnHandler1(){
  this.sub()
 },
 btnHandle2(){
  this.subN()
 }
}

getter

vuex中的getter

Getter用于對Store中的數據進行加工處理形成新的數據
  1. Getter可以對Store中已有的數據加工處理后形成新的數據。
  2. Store中數據發生變化,Getter的數據會跟著改變
const store = new Vuex.store({
 state: {
  count: 0
 },
 getters: {
  showNum: state => {
   return state.count
  }
 }
})

使用getters的第一種方式:

this.$store.getters.名稱

使用getters的第二種方式:

import { mapGetters } from 'vuex'

computed: {
 ...mapGetters(['showNum'])
}

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回復【資料】有我準備的一線大廠資料,本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

查看原文

贊 8 收藏 3 評論 0

程序員哆啦A夢 發布了文章 · 1月30日

localStorage和sessionStorage本地存儲 | 打卡每天一份勸退技能

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處于喜歡 才會有強大的動力支撐。

每天學習編程,讓你離夢想更新一步,感謝不負每一份熱愛編程的程序員,不論知識點多么奇葩,和我一起,讓那一顆四處流蕩的心定下來,一直走下去,加油,2021加油!

不要害怕做夢,但是呢,也不要光做夢,要做一個實干家,而不是空談家,求真力行。

前言

如果這篇文章有幫助到你,??關注+點贊??鼓勵一下作者,接收好挑戰了嗎?

筆芯??~

知識點

使用HTML5中的Web Storage API, 可以在客戶端存儲更多的數據,,可以實現數據在多個頁面中共享甚至是同步,對于復雜的數據,可以使用 Web SQL Database API 來實現。

掌握 localStorage 和 sessionStorage 存儲方式, 存儲 JSON 對象的數據, 使用 Web SQL Database 的基本操作。

Web Storage

Web Storage API 的屬性,方法,事件。

cookie 可用于傳遞少量的數據, 是一個在服務器和客戶端 之間來回傳送文本值的內置機制,服務器可以根據 cookie 追蹤 用戶在不同頁面的訪問信息。

cookie 的特點:

第一,大小的限制,cookie 的大小 限制 在 4KB 以內。

第二,帶寬的限制,cookie 數據 會在服務器和瀏覽器 之間來回傳送,所以訪問哪個頁面,都會消耗網絡的帶寬。

第三,安全風險,因為 cookie 會頻繁在網絡中傳送, 所以在網絡上是可見的,在不加密的情況下,是由安全風險的。

第四,操作復雜,在客戶端的瀏覽器中,使用 JavaScript 操作 cookie數據是比較復雜的。

所以,如果對于較小的數據,并且需要在服務器和客戶端之間頻繁傳送時,才有 cookie 存在的意義。

什么是 web storage

Web Storage 可以在客戶端保存大量的數據,Web Storage本地存儲的優勢:

第一,存儲容量大。

第二,零帶寬。Web Storage 中的數據僅僅存儲在本地,不會與服務器發生任何交互行為,不存在網絡帶寬的占用問題。

第三,編程接口。提供了一套豐富的接口,使得數據操作更加方便。

第四,獨立的存儲空間。每個域都有獨立的存儲空間,各個存儲空間是完全能獨立的,不會造成數據的混亂。

localStorage 和 sessionStorage

Web Storage 本地存儲 包括 sessionStorage 會話存儲 和 localStorage 本地存儲。

cookie 和 session 完全是服務器端可以操作的數據,sessionStorage 和 localStorage 完全是瀏覽器端操作的數據。

cookie 和 session 完全繼承同一個 Storage API, 所以 sessionStorage 和 localStorage 的編程接口是一樣的。

sessionStorage 和 locatlStorage 區別在于 數據存在時間范圍頁面范圍。

sessionStorage: 數據只保存到存儲它的窗口或標簽關閉時,數據在構建它們的窗口或標簽內也可見

localStorage: 數據的生命周期比窗口或瀏覽器的生命周期長,數據可被同源的每個窗口或者標簽共享。

監測是否支持 Web Storage

示例:

function CheckStorageSupport() {
 // 監測 sessionStorage
 if(window.sessionStorage) {
  console.log(“瀏覽器支持sessionStorage”);
 }else{
  console.log("瀏覽器不支持sessionStorage");
 }
 
 // 監測localStorage
 if(window.localStorage) {
  console.log("瀏覽器支持localStorage");
 }else {
  console.log("瀏覽器不支持localStorage");
 }
}

設置和獲取Storage數據

保存數據到sessionStorage

window.sessionStorage.setItem("key”,"value");

setItem()表示保存數據的方法

sessionStorage中獲取數據:

value = window.sessionStorage.getItem("key");

getItem()為獲取數據的方法

保存數據的寫法:

window.sessionStorage.key = "value";

window.sessionStorage["key"] = "value"

獲取數據的方法更加直接:

value = window.sessionStorage.key;

value = window.sessionStorage["key"]

使用sessionStorage 和 localStorage

示例:

function DaDa() {
 window.localStorage.setItem("localKey", "localVlaue");
 
 // 獲取
 console.log(window.localStorage.getItem("localKey"));
 
 window.sessionStorage.setItem("sessionKey", "sessionValue");
 
 // 獲取
 console.log(window.sessionStorage.getItem("sessionKey"));
}

Storage接口

示例:

interface Storage{
 readonly attribute unsigned long length;
 DOMString ? key(unsigned long index);
 getter DOMString getItem(DOMString key);
 setter creator void setItem(DOMString key, DOMString value);
 deleter void removeItem(DOMString key);
 void clear();
}
  1. length屬性,表示當前storage對象中存儲的鍵/值對的數量。

Storage對象是同源的,length屬性只能反映同源的鍵/值對數量

  1. key方法,獲取指定位置的鍵。
  2. getItem方法,根據鍵返回相應的數據值。
  3. setItem方法,將數據存入指定鍵對應的位置。
  4. removeItem方法,從存儲對象中移除指定的鍵/值對。
  5. clear方法,清除Storage對象中所有的數據,如Storage對象是空的,則不執行任何操作。

使用Storage對象保存頁面的內容

示例:

// 保存數據到sessionStorage

function SaveStorage(frm) {
 var storage = window.sessionStorage;
 
 storage.setItem("name",frm.name.value);
 
 storage.setItem("age", frm.age.value);
}

遍歷顯示sessionStorage中的數據

function Show(){
 var storage = window.sessionStorage
 var result = "";
 for(var i=0; i<storage.length; i++){
  var key = storage.key(i);
  var value = storage.getItem(key);
  result += key + ":" + value + ";";
 }
}

存儲JSON對象的數據

Storage 是以字符串保存數據的,所以在保存 JSON 格式的數據之前,需要把 JSON 格式的數據轉化為字符串,這個操作叫序列化。

使用JSON.stringify()序列化json格式的數據為字符串數據:

var dada = JSON.stringify(jsonObject);

把數據反序列化為JSON格式:

var jsonObject = JSON.parse(stringData);

web Storage建立一套會在數據更新時觸發的事件通知機制,無論監聽的窗口是否存儲過該數據,只要與執行存儲的窗口是同源的,都會觸發web Storage事件。

window.addEventListener("storage", EventHandle, true);

StorageEvent事件接口:

interface StorageEvent:Event {
 readonly attribute DOMString key;
 readonly attribute DOMString ? oldValue;
 readonly attribute DOMString ? newValue;
 readonly attribute DOMString ? url;
 readonly attribute Storage? storageArea;
}

key屬性:包含了存儲總被更新或刪除的鍵;oldValue屬性:包含了更新前鍵對應的數據。

newValue屬性:包含了更新后的數據;url屬性:指向Storage事件的發生源。

storageArea屬性:該屬性是一個引用,指向值發生改變的localStorage或sessionStorage。

web SQL Database

Web SQL Database 使用的是 SQLite 數據庫,允許應用程序通過一個異步的 JavaScript 接口訪問數據庫。SQLite是一款輕型的數據庫。

  1. openDatabase() 方法,使用現有的數據庫或新建數據庫來創建數據庫對象。
  2. transaction() 方法,允許設計者控制事務的提交或回滾。
  3. executeSql() 方法,用于執行真實的SQL查詢。

操作Web sql數據庫

var db = openDatabase("TestDB", "1.0", "測試", xxxx)

共5個參數:

  1. 數據庫名
  2. 版本號
  3. 數據庫的描述
  4. 數據庫的大小
  5. 創建回調函數

創建數據表

transaction()方法用于進行事務處理,executeSql()方法用于執行sql語句。

創建數據表:

db.transaction(function (tx) {
 tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');
});
transaction()方法傳遞給回調函數的tx是一個transaction對象,使用transaction對象的executeSql()方法可以執行SQL語句。

添加數據到數據表:

db.transaction(function (tx){
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));
});

讀取數據庫中的數據:

db.transaction(function (tx){
 tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){
  var len = results.rows.length;
  for (var i=0; i<len; i++){
   console.log(results.rows.item(i).Name);
  }
 },null);
});

html5幾種存儲形式

  1. 本地存儲-localStorage, sessionStorage
  2. 離線緩存 application cache
  3. indexedDB 和 webSQL

localStorage 和 sessionStorage

  • localStorage永久存儲,永不失效除非手動刪除
  • sessionStorage瀏覽器重新打開后就消失了

大小,每個域名是5M,cookie第一是由大小限制,大概4K左右,第二,ie6域名下有個數限制。

HTML API

在瀏覽器的API有兩個,localStorage和sessionStorage

window對象中:localStorage對應window.localStorage,sessionStorage對應window.sessionStorage。

localStorage只要在相同的協議、相同的主機名、相同的端口下,就能讀取或修改到同一份localStorage的數據。

sessionStoragelocalStorage更嚴格,除了協議、主機名、端口外,還要求在同一窗口下

方法及含義:

setItem(‘key’,‘value’)    儲存數據

getItem(‘key’)    讀取數據

removeItem(‘key’)    刪除數據

clear()    清空數據

使用方法詳解:

//儲存數據
window.localstage.setItem('key','value')
// key : 數據的名稱
// value : 數據
// 所存儲的是數據必須是string類型

//讀取數據
window.localstage.getItem('key')
// key : 數據的名稱
// 如果數據不存在,返回null (一般用它做判斷)

//刪除數據
window.localstage.removeItem('key')
// key : 數據的名稱
// 刪除本地存儲中的指定數據

//清空數據
window.localstage.clear()
// 清空本地存儲中的所有數據

什么是localStorage和sessionStorage?

localStorage(長期存儲)、sessionStorage(會話存儲)是H5中的本地web存儲提供的兩個接口, 相當于前端一個小型的本地數據庫,用于在本地存儲一些不敏感的數據,隸屬于window對象。

localStorage和sessionStorage的異同?

相同點:兩者的API完全相同,都是在瀏覽器端存儲數據。

不同點:

  1. localStorage存儲的數據是永久性數據,頁面刷新,即使瀏覽器重啟,甚至操作系統重啟也不會丟失,并且存儲的數據在同源(協議、域名、端口號一致)下的標簽頁和window窗口之間共享。
  2. sessionStorage存儲的數據有些苛刻,頁面刷新仍然有效,選項卡關閉時數據丟失。但是在相同標簽頁打開的多個iframe之間數據可以共享(同源的情況下)。
兩者都是在瀏覽器端存儲數據,localStorage存儲的數據被限制在同源下,可跨窗口通信,不可跨瀏覽器,跨域;sessionStorage存儲的數據被限制在標簽頁(頁卡關閉丟失)。

localStorage的局限

局限:

1.各個瀏覽器的支持的大小不一樣,業界認為是5M,并且在不同的瀏覽器不同版本支持度不一樣

2.localStorage的數據不能被爬蟲抓取

近期推薦

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回復【資料】有我準備的一線大廠資料,本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

查看原文

贊 6 收藏 3 評論 3

程序員哆啦A夢 關注了用戶 · 1月29日

騰訊位置服務 @tengxunweizhifuwu

立足生態,連接未來

關注 20

程序員哆啦A夢 發布了文章 · 1月28日

HTML5中的拖放功能

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處于喜歡 才會有強大的動力支撐。

每天學習編程,讓你離夢想更新一步,感謝不負每一份熱愛編程的程序員,不論知識點多么奇葩,和我一起,讓那一顆四處流蕩的心定下來,一直走下去,加油,2021加油!歡迎關注加我vx:xiaoda0423,歡迎點贊、收藏和評論

不要害怕做夢,但是呢,也不要光做夢,要做一個實干家,而不是空談家,求真力行。

前言

如果這篇文章有幫助到你,??關注+點贊??鼓勵一下作者,接收好挑戰了嗎?文章公眾號首發,關注 程序員哆啦A夢 第一時間獲取最新的文章

筆芯??~

知識點

拖拽的體驗,你享受過嗎,在HTML5之前,可以使用事件mousedown,mousemove,mouseup巧妙實現頁面的拖放操作,但注意拖放的操作范圍只是局限在瀏覽器內部。

HTML5的拖放API功能直接實現拖放操作,而且拖放的范圍已經超出瀏覽器的邊界,HTML5提供的文件api支持拖拽多個文件并上傳。

要學會掌握html5中的拖放api和 文件api,光標拖放事件,從web網頁上訪問本地文件系統。

拖放api

html5中的拖放api重點:

第一,為頁面元素提供了拖放特性;

第二,為光標增加了拖放事件;

第三,提供了用于存儲拖放數據的DataTransfer對象

draggable特性

draggable特性用于定義元素是否允許用戶拖放:提供了三個值

true,false,auto

把元素變成可以拖放的:

<div draggable="true"></div>
img元素和a元素默認是可以拖放的

光標拖放事件

html5中提供了7個與拖放相關的光標事件:

按照時間的順序:

第一,開始拖拽時觸發的事件,事件的作用對象是被拖拽的元素-dragstart事件

第二,拖放過程中觸發的事件,事件的作用對象是被拖拽的元素-drag事件

第三,在拖放的元素進入本元素的范圍內時觸發,事件的作用對象是拖放過程中光標經過的元素-dragenter元素

第四,在拖放的元素正在本元素的范圍內移動時觸發,事件的作用對象是拖放過程中光標經過的元素-dragover元素

第五,在拖放的元素離開本元素的范圍時觸發,事件的作用對象是拖放過程中光標經過的元素-dragleave元素

第六,在拖放的元素被拖放到本元素中時觸發,事件的作用對象是拖放的目標元素-drop元素

第七,在拖放操作結束時觸發,事件的作用對象是被拖拽的元素-dragend事件

DataTransfer對象

html5中提供了DataTransfer對象,用來支持拖拽數據的存儲。

實現拖放的過程中數據交換。

DataTransfer對象:

屬性

第一,dropEffect屬性:用來設置或獲取拖拽操作的類型 和 要顯示的光標類型。

如果該操作的效果與起初設置的effectAllowed效果不符,則拖拽操作失敗??梢栽O置修改,包含值可為:none, copy, link, move

第二,effectAllowed屬性:用來設置或獲取數據傳送操作可應用于操作對象的源元素,指定值:none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized

第三,type屬性:獲取在dragstart事件出發時為元素存儲數據的格式,如果是外部文件的拖拽,則返回Files。

第四,files屬性:獲取存儲在DataTransfer對象中的正在拖放的文件列表FileList,可以使用數組的方式去遍歷。

方法

第一,clearData()方法:清除DataTransfer對象中存放的數據:

clearData([sDataFormat])
[sDataFormat]為可選參數,取值可能為:Text,URL,File,HTML,Image,設置后,可刪除指定格式的數據,如果省略該參數,則清除全部數據。

第二,setData()方法:向內存中的DataTransfer對象添加指定格式的數據:

setData([sDataFormat],[data])

第三,getData()方法:從內存的DataTransfer對象中獲取數據

getData([sDataFormat])

第四,setDragImage()方法:設置拖放時跟隨光標移動的圖片

setDragImage([imgElement],[x],[y])
[imgElement]表示圖片對象,[x],[y]分別表示相對于光標位置的橫坐標和縱坐標

第五,addElement()方法:添加一起跟隨拖放的元素,如果想讓某個元素跟隨被拖動元素一起被拖放,則使用此方法

addElement([element])
[element]表示一起跟隨拖動的元素對象

示例

// 源元素
<div id="dragSource" draggable="true">
 拖動
 ![](images/dadaqianduan.png)
</div>

// 目標元素
<div id="dropTarget"></div>

添加ondragstart監聽事件,給拖放的源元素添加ondragstart監聽事件,在事件觸發時把源元素里的內容追加至dataTransfer對象中。

最后,把添加監聽事件的處理函數DragStart()追加到window.onload事件中。

function DragStart() {
 var source = document.getElementById("dragSource"); // 拖放源元素
 // 監聽dragstart事件,作用在源元素上
 source.addEventListener("dragstart", function(e){
  e.dataTransfer.setData('text/plain', e.target.innerHTML);
  // 向dataTransfer對象中追加數據
  e.dataTransfer.effectAllowed="copy";
 },false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load",DragStart,false);

添加dragover監聽事件,給拖放的目標元素添加dragover監聽事件,在事件觸發時改變目標元素的樣式,并屏蔽瀏覽器的默認處理事件。

把添加監聽事件的處理函數DragOver()追加到window.onload事件中,對于目標元素preventDefault(),必須取消瀏覽器的默認處理,否則將無法實現拖放功能。

function DragOver() {
// 拖放目標元素
 var target = document.getElementById('dropTarget');
 // 監聽dragover事件,作用在目標元素上
 target.addEventListener("dragover", function(e){
 // 改變樣式
  this.className = "dragover";
  // 取消瀏覽器的默認處理
  e.preventDefault();
 },false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load", DragOver, false);

給拖放的目標元素添加ondrop監聽事件,事件觸發時獲取dataTransfer對象中的數據,并追加到目標元素中,同時還還原了樣式。

把添加監聽事件的處理函數Drop()追加到window.onload事件中。

function Drop(){
// 拖放目標元素
 var target = document.getElementById('dropTarget');
 // 監聽drop事件,作用在目標元素上
 target.addEventListener('drop',function(e){
  var data = e.dataTransfer.getData('text/plain');
  //取得dataTransfer對象中的數據
  this.innerHTML += data;
  e.dataTransfer.dropEffect = "copy";
  // 還原樣式
  this.className=""
 },false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load",Drop, false);

文件api

html5中提供了關于文件操作的文件api,通過編程方式選擇和訪問文件數據。

如:FileList對象,File對象,Blob接口,FileReader接口

增加的標簽特性

html5file類型的表單元素增加了multiple特性和accept特性

multiple特性

multiple特性可允許用戶同時選擇多個上傳文件。

<input type="file" multiple/>
得到一個FileList對象,是一個File對象的列表

accept特性

規定了可通過文件上傳提交的文件類型,實現了打開文件窗口時,默認選中指定的文件類型:

<input type="file" accept="image/gif"/>

FileList對象和File對象

FileList對象里的每一個文件又是一個File對象

示例:

<form action="" method="post">
 <input type="file" id="files" multiple/>
 <input type="button" value="顯示文件" onclick="showFiles()"/>
 <p id="msg"></p>
</form>

function ShowFiles(){
// 獲取FileList對象
 var fileList = document.getElementById("files").files;
 var msg = document.getElementById("msg");
 var file;
 for(var i=0; i<fileList.length; i++){
  file = fileList[i];
  msg.innerHTML += file.name + ";<br/>";
 }
}

Blob對象

Blob對象表示原始二進制數據,該Blob接口有兩個屬性:size和type

第一,size屬性,表示Blob對象的字節長度,可以借助

FileReader接口讀取Blob對象的二進制數據,如果Blob對象沒有字節數,則為0

第二,type屬性,表示Blob對象的MIME類型,未知 類型,則返回一個 空字符串。

第三,slice()方法,使用slice()方法可以實現文件的切割,并返回一個新的Blob對象。

File對象 和 Blob對象

File對象 繼承了 Blob對象,所以 File對象 也可以使用 Blob對象的屬性和方法(File對象可以使用size屬性 和 type屬性)

獲取文件的大小和類型

示例:

<form action="" method="post">
 <input type="file" id="files" multiple accept="image/*"/>
 <input type="button" value="顯示文件數據" onclick="ShowType()"/>
 <p id="msg"></p>
</form>

function ShowType(){
// 獲取FileList對象
 var files = document.getElementById("files").files;
 var msg = document.getElementById("msg");
 var file;
 for(var i=0; i<files.length; i++){
  file=fileList[i];
  msg.innerHTML += "字節長度:"+file.size+";<br/>";
  msg.innerHTML += "文件類型:"+file.type+";<br/>";
 }
}

FileReader接口卡

FileReader接口 提供了 一些 讀取文件的方法一個波愛護讀取結果的 事件模型。

FileReader接口 主要把 文件讀入內存, 并讀取文件中 的數據。

提前檢測瀏覽器是否支持,實現該接口FileReader

if(typeof FileReader == "undefined"){
 console.log();
} else {
 var reader = new FileReader();
}

FileReader接口三個屬性:

  1. 返回讀取文件的狀態
  2. 數據
  3. 讀取時發生的錯誤
readyState屬性,只讀

讀取文件的狀態:

  1. EMPTYP,值為0, 表示新的FileReader接口已經構建,且 沒有調用 任何讀取方法 時的默認狀態。
  2. LOADING,值為1,表示有讀取文件的方法正在讀取 File 對象 或 Blob 對象,且沒有錯誤發生。
  3. DONE,值為2,表示讀取文件結束,可能整個 File對象 或 Blob對象 已經完全 讀入內存 中,在文件讀取的過程中出現錯誤,或在讀取過程中使用了 abort()方法 強行中斷。
result屬性,只讀

獲取已經讀取的文件 數據。 如是 圖片,將返回 base64 格式的圖片數據。

error屬性,只讀

獲取讀取文件過程中出現的錯誤:4種類型

  1. NotFoundError,找不到讀取的資源文件。

FileReader接口 會 返回 NotFoundError 錯誤,同時讀取文件 的方法也會 拋出 NotFoundError 錯誤異常

  1. SecurityError,發生安全錯誤。

FileReader 接口 會返回 SecurityError 錯誤,同時讀取文件的 方法也會拋出 SecurityError 錯誤異常

  1. NotReadableError,無法讀取的錯誤。

FileReader 接口會 返回 NotReadableError 錯誤,同時讀取文件 的方法 也會拋出 NotReadableError 錯誤異常

  1. EncodingError,編碼限制的錯誤。

通常是數據的URL表示的網址 長度受到 限制

FileReader接口的方法

第一,readAsArrayBuffer() 方法,將文件讀取為 數組緩沖區

readAsArrayBuffer(<blob>);

其中的<blob>表示一個Blob對象的文件。

readAsArrayBuffer()方法 會把該 Blob 對象 的文件讀取為 數組緩沖區

第二,readAsBinaryString()方法,將文件讀取為二進制字符串。

readAsBinaryString(<blob>);

其中的<blob>表示一個Blob對象的文件。

readAsBinaryString()方法 會把該 Blob 對象 的文件讀取為二進制字符串

第三,readAsText() 方法,將文件讀取為二進制字符串

readAsText(<blob>,<encoding>);

// 讀取為文本,encoding 為文本的編碼方式

第四,readAsDataURL()方法 將文件讀取為 DataURL 字符串:

readAsDataURL(<blob>);

// 讀取為DataURL字符串

第五,abort()方法,中斷讀取操作

abort() // 沒有參數
接口的事件
  1. loadstart事件,當開始讀取數據時 觸發的事件
  2. proress事件,當正在讀取數據時觸發的事件
  3. load事件,當成功完成數據讀取時觸發的事件
  4. abort事件,當中斷讀取數據時觸發的事件
  5. error事件,當讀取數據發生錯誤時觸發的事件
  6. loadend事件,當結束讀取數據時觸發的事件,數據讀取可能成功也可能失敗

FileReader接口

示例:

// 讀取文件
function ReadAs(action){
 var blob = document.getElementById("files").files[0];
 if(blob){
  var reader = new FileReader(); // 聲明接口對象
  // 讀取文件的方法
  switch(action.toLowerCase()){
   case "binarystring":
    reader.readAsBinaryString(blob);
    break;
   case "arraybuffer":
    reader.readAsArrayBuffer(blob);
    break;
   case "text":
    reader.readAsText(blob);
    break;
   case "dataurl":
    reader.readAsDataURL(blob);
    break;
  }
  
  reader.onload = function(e){
   // 訪問FileReader 的接口屬性 result,把讀取到內存里的內容獲取出來
   var result = this.result;
   // 如果是圖文件
   if(/image\/\w+/.test(blob.type) && action.toLowerCase() == "dataurl"){
    document.getElementById("result").innerHTML = "![]()";
   } else {
    document.getElementById("result").innerHTML = result;
   }
  }
 }
}

FileReader接口的事件

示例:

<form action="" method="post">
 <input type="file" id="files" multiple accept="image/*"/>
 <input type="button" value="讀取文件" onclick="FileReaderEvent()"/>
 <p id="message"></p>
</form>

var blob = document.getElementById("files").files[0];
var message = document.getElementById("message");

var reader = new FileReader();
// 添加 loadstart 事件
reader.onloadstart = function(e){

}
// 添加 progress 事件
reader.onprogress = function(e){

}
// 添加 load 事件
reader.onload = function(e){

}
// 添加 abort 事件
reader.onabort = function(e){

}
// 添加 error 事件
reader.onerror = function(e){

}
// 添加 loadend 事件
reader.onloadend = function(e){

}

圖片拖入瀏覽器

示例:

定義一個拖放的 drop 事件處理函數 dropHandle()

定義一個用于加載單個 文件的函數 loadImg()

// 目標元素的變量
var target;
// drop 事件處理函數
function dropHandle(e){
// 獲取拖拽的文件
 var fileList = e.dataTransfer.files,
 fileType;
 // 遍歷
 for(var i=0; i<fileList.length; i++){
  fileType = fileList[i].type;
  if(fileType.indexOf('image') == -1) {
   alert('');
   return;
  }
  // 加載單個文件
  loadImg(fileList[i]);
 }
}

// 加載
function loadImg(file){
// 聲明接口對象
var reader = new FileReader();
// 添加load事件處理
reader.onload = function(e){
 var oImg = document.createElement("img");
 oImg.src = this.result;
 target.appendChild(oImg);
}
// 讀取文件
reader.readAsDataURL(file);
}

頁面加載完成后,可獲取target目標容器,是用于存放拖放進的圖片。

target容器添加 dragover事件處理 和 drop 事件處理

window.onload = function() {
 // 獲取目標元素
 target = document.getElementById('dropTarget')
 // 給目標元素添加 dragover 事件處理
 target.addEventListener('dragover', function(e){
  e.preventDefault();
 },false);
 
 target.addEventListener('drop', dropHandle, false);
}

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回復【資料】有我準備的一線大廠資料,本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

查看原文

贊 5 收藏 4 評論 1

程序員哆啦A夢 發布了文章 · 1月25日

了解Vuex狀態管理模式的理解強化指南

file

1

Vuex是什么呢?它是Vue的狀態管理模式,在使用vue的時候,需要在vue中各個組件之間傳遞值是很痛苦的,在vue中我們可以使用vuex來保存我們需要管理的狀態值,值一旦被改變,所有引用該值的地方就會自動更新。是不是很方便,很好用呢?

vuex是專門為vue.js設計的狀態管理模式,集中式存儲和管理應用程序中所有組件的狀態,vuex也集成了vue的官方調式工具,一個vuex應用的核心是store,一個容器,store包含了應用中大部分狀態。

那么我們在什么時候應用vuex呢?vuex也不是隨便亂用的,小型簡單的應用就不那么合適了,因為用了Vuex是繁瑣多余的,更適合使用簡單的store模式;對于vuex更加適用于中大型單頁應用:多個視圖使用于同一狀態,不同視圖需要變更同一狀態。

傳參的方法對于多層嵌套的組件來說,是非常繁瑣的,并且對于兄弟組件間的狀態傳遞無能為力;采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝,通常會導致無法維護的代碼。

npm install vuex --save //yarn add vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

在創建vuex實例的地方引入vue,vuex

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

Vue.use(Vuex); //使用 vuex

import store from './store' //引入狀態管理 store

new一個Vuex.Store實例,并注冊state,mutations,actions,getters到Vuex.Store實例中:

import Vue from 'vue';
import Vuex from 'vuex'; // 引入vuex
import store from './store' // 注冊store

Vue.use(Vuex); // 使用vuex

export default new Vuex.Store({
 state: {...},
 mutations: {...},
 actions: {...},
 getters: {...}
})

// 當代碼量大額時候寫個js文件即可
store
action.js
index.js
mutation.js
// 引入到store/index.js注冊到vuex實例中
import mutations from './mutations' // 引入mutations
import actions from './action' // 引入action
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex

Vue.use(Vuex);
// 創建state
const state = {
 count: 0
};

export default new Vuex.Store({
 state, // 注冊state
 action, // 注冊actions
 mutations // 注冊mutations
})

創建好vuex.store后,需要在入口文件main.js中引入store并注冊到vue實例中,這樣就可以在任何組件使用store了。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入狀態管理store

Vue.config.productiontip = false
new Vue({
 router,
 store, // 注冊store
 render: h => h(App)
}).$mount('#app')

在組件中使用,引入vuex中各屬性對應的輔助函數:

import {mapActions, mapState,mapGetters} from 'vuex' 
//注冊 action 、 state 、getter
2

創建一個vue項目,輸入vue int webpack web,安裝vuex,命令:npm install vuex --save。

store,index.js

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 使用vuex
Vue.use(Vuex);
// 創建Vuex實例
const store = new Vuex.store({
})
export default store // 導出store

main.js

import Vue from 'Vue'
import App from './App'
import router from './router'
import store from '.store'

Vue.config.productiontip = false

new Vue({
 el: '#app',
 store,
 router,
 components: {App},
 ...
})

State,可以在頁面通過this.$store.state來獲取我們定義的數據:

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 使用vuex
Vue.use(Vuex);

// 創建Vuex實例:
const store = new Vuex.Store({
 state: {
  count: 1
 }
})
export default store // 導出store
{{this.$store.state.count}}

Getters相當于vue中的computed計算屬性,getter的返回值根據它的依賴被緩存起來,且只有當它的依賴值發生改變時才會重新計算。

Getters可以用于監聽,state中的值的變化,返回計算后的結果。

{{this.$store.getSateCount}}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
  count: 1;
 },
 getters: {
  getStateCount: function(state){
   return state.count+1;
  }
 }

Mutations

{{this.$store.state.count}}
<button @click="addFun">+</button>
<button @click="reductionFun">-</button>

methods: {
 addFun() {
  this.$store.commit("add");
 },
 reductionFun() {
  this.$store.commit("reduction");
 }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 創建Vuex實例
const store = new Vuex.store({
 state: {
  count: 1
 },
 getters: {
  getStateCount: function(state){
   return state count+1;
  }
 },
 mutations: {
  add(state) {
   state.count = state.count+1;
  },
  reduction(state){
   state.count = state.count-1;
  }
 }
})
export default store // 導出store

Actions:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
  count: 1;
 },
 getters: {
  getStateCount: function(state){
   return state.count+1;
  }
 }
 mutations: {
  add(state) {
   state.count = state.count+1;
  },
  reduction(state) {
   state.count = state.count-1;
  }
 },
 actions: {
  addFun(context) {
   context.commit("add");
  },
  reductionFun(context) {
   context.commit("reduction");
  }
 }
// vue
methods: {
 addFun() {
  this.$store.dispatch("addFun");
  // this.$store.commit("add");
 },
 reductionFun() {
  this.$store.dispatch("reductionFun");
 }
}

傳值:

methods: {
 addFun() {
  this.$store.dispatch("addFun");
  // this.$store.commit("add");
 },
 reductionFun() {
  var n = 10;
  this.$store.dispatch("reductionFun", n);
 }
}
 mutations: {
  add(state) {
   state.count = state.count+1;
  },
  reduction(state,n) {
   state.count = state.count-n;
  }
 },
 actions: {
  addFun(context) {
   context.commit("add");
  },
  reductionFun(context,n) {
   context.commit("reduction",n);
  }
 }

mapState、mapGetters、mapActions

this.$stroe.state.count
this.$store.dispatch('funName')
<div style="border:1px solid red; margin-top: 50px;">
 {{count1}}
</div>

import {mapState,mapActions,mapGetters} from 'vuex';

computed: {
 ...mapState({
  count1:state=> state.count
 })
}
3

state是最底層的初始數據,getters就相當于vue中的計算屬性,是對state數據進行處理和擴展的,mutations是當需要修改state時,定義的mutations,actions時當需要很多很多的mutations進行處理時,在actions進行mutations派發的,異步處理也是在這里定義的。

vuex時一個為vue.js應用程序開發的狀態管理模式,它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證以一種可預測的方式發生變化。

那么狀態管理模式是怎樣的書寫格式:

new Vue({
 // state 初始狀態(數據)
 data() {
  return {
   count: 0
  }
 },
 template: `<div>{{count}}</div>`,
 methods: {
  increment() {
   this.count++
  }
 }
})

多個數組共享狀態時:

多個視圖依賴于同一狀態,來自不同視圖的行為需要變更同一狀態。

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {  //狀態
    count: 0
  },
  mutations: {  //變化
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

state初始狀態,getter相當于計算屬性,mutation狀態變更,action行動,module模塊。

Vue.use(Vuex)

const app = new Vue({
  el: '#app',
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態,必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。

const store = new Vuex.Store({

  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todos.done)
    }
  }
  
})
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

mapGetters 輔助函數是將 store 中的 getter 映射到局部計算屬性

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation

mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

this.$store.commit('xxx') 提交 mutation

mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用

import { mapMutations } from 'vuex'
export default {
  methods: {
  
    ...mapMutations([
      'increment',
      // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
      // `mapMutations` 也支持載荷:
      'incrementBy' 
      // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    
  this.incrementBy(); 調用
  
    ...mapMutations({
      add: 'increment' 
      // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
    
  }

}

Action 提交的是 mutation變化,而不是直接變更狀態。Action 可以包含任意異步操作。

store.dispatch('increment')

使用 mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
  
    ...mapActions([
      'increment', 
      // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷:
      'incrementBy' 
      // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    
    ...mapActions({
      add: 'increment' 
      // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
  }
}

vue

安裝vue-cli
cnpm install -g vue-cli

安裝webpack模板 :
vue init webpack myProject

安裝依賴
cnpm install

安裝路由
cnpm install vue-router --save-dev

安裝 axios http
cnpm install axios --save

4

vue和單純的全局對象區別:

vuex的狀態存儲時響應式的,改變store中的狀態的唯一途徑就是顯式地提交commit, mutation。

Vuex的核心是store,store包含著應用中大部分的狀態 (state)。

一個最簡單的store包含state與mutation,可以通過 store.state 來獲取狀態對象,以及通過 store.commit 方法觸發狀態變更。

State,存儲著應用中的所有基礎“全局對象”,this.$store.state.XXX可訪問到。
mapState:使用此輔助函數幫助我們生成計算屬性,獲得多個state值。

Getter從 store 中的 state 中派生出一些狀態,接受 state 作為第一個參數,第二個參數可傳值計算,會暴露為 store.getters 對象,可以以屬性的形式訪問這些值。

Vuex 中的 mutation ,每個 mutation,事件類型 (type) 和 一個 回調函數 (handler)

Action 提交的是 mutation,不是直接變更狀態,可以包含任意異步操作,通過 store.dispatch 方法觸發。

5

vuex的出現是為了解決哪些問題呢?我們知道在組件之間的作用域是獨立的父組件和子組件的通訊可以通過prop屬性來傳參,但是兄弟組件之間通訊就不那么友好了。

首先要告訴它們的父組件,然后由父組件告訴其他組件,一旦組件很多很多的時候,通訊起來就不方便了,vuex解決了這個問題,讓多個子組件之間可以方便的通訊。

|-store/ // 存放vuex代碼
| |-actions.js
| |-getters.js
| |-index.js
| |-mutations.js
| |-state.js
|-store/ // 存放vuex代碼
| |-Module1
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-Module2
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-index.js // vuex的核心,創建一個store

vuex是什么?

Vuex是一個專門為vue.js應用程序開發的狀態管理模式,它是采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex也集成到Vue的官方調式工具devtools extension,提供了諸如零配置的time-travel調試,狀態快照導入導出等高級調試功能。

什么是“狀態管理模式”?

new Vue({

  // state
  data () {
    return {
      count: 0
    }
  },
  
  // view
  template: `
    <div>{{ count }}</div>
  `,
  
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
  
})

state,驅動應用的數據源;
view,以聲明方式將 state 映射到視圖;
actions,響應在 view 上的用戶輸入導致的狀態變化。

file

我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞:

多個視圖依賴于同一狀態。
來自不同視圖的行為需要變更同一狀態。

file

核心概念:State,Getter,Action,Module

Vuex 和單純的全局對象有以下兩點不同:

1.Vuex 的狀態存儲是響應式的。
2.不能直接改變 store 中的狀態。

創建一個 store

// 如果在模塊化構建系統中,請確保在開頭調用了 Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    count: 0
  },
  
  mutations: {
    increment (state) {
      state.count++
    }
  }
  
})

通過 store.state 來獲取狀態對象,通過 store.commit 方法觸發狀態變更

store.commit('increment')

console.log(store.state.count) // -> 1

用一個對象包含了全部的應用層級狀態,每個應用將僅僅包含一個 store 實例。單一狀態樹。Vuex 的狀態存儲是響應式的,讀取狀態方法,即是在計算屬性中返回。

// 創建一個 Counter 組件

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

Vuex 通過 store 選項

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項,這可以把 store 的實例注入所有的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})


const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

使用 mapState 輔助函數幫助我們生成計算屬性

// 在單獨構建的版本中輔助函數為 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態,必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}


computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
]

mapState 函數返回的是一個對象。

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

需要從 store 中的 state 中派生出一些狀態

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。

const store = new Vuex.Store({

  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
  
})

Getter 會暴露為 store.getters 對象

store.getters.doneTodos 

// -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作為第二個參數:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) 
// -> { id: 2, text: '...', done: false }

mapGetters 輔助函數是將 store 中的 getter 映射到局部計算屬性:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
mapGetters({
  // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Vuex 的 store 中的狀態的唯一方法是提交 mutation

每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)

向 store.commit 傳入額外的參數,即 mutation 的 載荷(payload):

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

在大多數情況下,載荷應該是一個對象

可以包含多個字段并且記錄的 mutation

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

store.commit({
  type: 'increment',
  amount: 10
}

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

Action

簡單的 action:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
}

store.dispatch('increment')

store.dispatch 可以處理被觸發的 action 的處理函數返回的 Promise

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
store.dispatch('actionA').then(() => {
  // ...
}

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

// 假設 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

文件:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
store.js 文件:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  }
})

main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    }
  }
}
</script>

想要獲得vuex里的全局數據,可以把vue看做一個類

file

file

file

file

file

file

模塊化:

const moduleA = {
  namespaced: true,
  state: {
    name: ''
  },
  getters: {},
  mutations: {},
  actions: {}
}
export default moduleA;
const moduleB = {
  namespaced: true,
  state: {
    name: ''
  },
  getters: {},
  mutations: {},
  actions: {}
}
export default moduleB;
import moduleA from './moduleA.js';
import moduleB from './moduleB.js';
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
export default store;
this.$store.state.a.name // -> moduleA 的狀態name
this.$store.state.b.name // -> moduleB 的狀態name
computed: {
    ...mapState('a', {
      name: state => state.name
    }),
    ...mapState('b', {
      name: state => state.name
    })
}

file

file

state示例

const state = {
  name: 'weish',
  age: 22
};
 
export default state;
getters.js 示例

export const name = (state) => {
  return state.name;
}
 
export const age = (state) => {
  return state.age
}
 
export const other = (state) => {
  return `My name is ${state.name}, I am ${state.age}.`;
}

參考官方文檔:https://vuex.vuejs.org/


若本號內容有做得不到位的地方(比如:涉及版權或其他問題),請及時聯系我們進行整改即可,會在第一時間進行處理。

查看原文

贊 3 收藏 2 評論 0

認證與成就

  • 獲得 766 次點贊
  • 獲得 4 枚徽章 獲得 0 枚金徽章, 獲得 0 枚銀徽章, 獲得 4 枚銅徽章

擅長技能
編輯

開源項目 & 著作
編輯

(??? )
暫時沒有

注冊于 2017-02-04
個人主頁被 16.4k 人瀏覽

一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>