零基礎(chǔ)如何迅速學(xué)習(xí)前端

給你幾點(diǎn)建議和學(xué)習(xí)路線，參考一下：

為秀英等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及秀英網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、秀英網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1、作為一個(gè)初學(xué)者，你必須明確系統(tǒng)的學(xué)習(xí)方案，我建議一定有一個(gè)指導(dǎo)的人，全靠自己學(xué)，放棄的幾率非常大，在你對(duì)于web前端還沒有任何概念的時(shí)候，需要一個(gè)人領(lǐng)進(jìn)門，之后就都靠自己鉆研，第一步就是確定web前端都需要哪些內(nèi)容，并且在多少時(shí)間內(nèi)學(xué)完，建議時(shí)間6個(gè)月保底。

2、視頻為主，書為輔。很多初學(xué)者在學(xué)習(xí)前端的時(shí)候非常喜歡去買書，但是最后的結(jié)果是什么？看來看去什么都不會(huì)寫，所以在這里給大家提醒，書可以看，但是是在建立于你已經(jīng)對(duì)于某個(gè)知識(shí)點(diǎn)有了具體操作的執(zhí)行后，在用書去鞏固概念，這樣更加利于你對(duì)于知識(shí)的理解。

3、對(duì)于學(xué)習(xí)技術(shù)來講，掌握一個(gè)學(xué)習(xí)方法是非常重要的，其實(shí)對(duì)于學(xué)習(xí)web前端來講，學(xué)習(xí)方法確實(shí)很多都是相通的，一旦學(xué)習(xí)方法不對(duì)，可能就會(huì)造成“方法不對(duì)，努力白費(fèi)”。其實(shí)關(guān)于這方面還是很多的，我就簡(jiǎn)單說個(gè)例子，有的人邊聽課邊跟著敲代碼，這樣就不對(duì)，聽課的時(shí)候就專心聽，做題的時(shí)候就專心做題，這都是過來人的經(jīng)驗(yàn)，一定要聽。根據(jù)每個(gè)人的不同，可能學(xué)習(xí)方法也會(huì)有所出路，找到適合你自己的學(xué)習(xí)法方法是學(xué)習(xí)的前提。

4、不建議自己一個(gè)人瞎學(xué)，在我了解學(xué)習(xí)編程的這些人來看，從零基礎(chǔ)開始學(xué)并且最后成功做這份工作的其實(shí)并沒有幾個(gè)，我覺得大部分原因就是因?yàn)樗麄兌疾涣私鈝eb前端是干什么的，學(xué)什么的，就盲目的買書看，到處找視頻看，最后看著看著就放棄了，所以我建議初學(xué)者在沒有具體概念之前，還是找有經(jīng)驗(yàn)的人請(qǐng)教一下，聊過之后你就會(huì)知道web前端具體是干什么的，該怎么學(xué)，這是我個(gè)人的小建議，可以不采納。

自學(xué)前端的路線：

第1階段：前端頁面重構(gòu)(4周)

內(nèi)容包含了：(PC端網(wǎng)站布局項(xiàng)目、HTML5+CSS3基礎(chǔ)項(xiàng)目、WebApp頁面布局項(xiàng)目)

第2階段：JavaScript高級(jí)程序設(shè)計(jì)(5周)

內(nèi)容包含：(原生JavaScript交互功能開發(fā)項(xiàng)目、面向?qū)ο筮M(jìn)階與ES5/ES6應(yīng)用項(xiàng)目、JavaScript工具庫自主研發(fā)項(xiàng)目)

第3階段：PC端全棧項(xiàng)目開發(fā)(3周)

內(nèi)容包含：(jQuery經(jīng)典交互特效開發(fā)、HTTP協(xié)議、Ajax進(jìn)階與PHP/JAVA開發(fā)項(xiàng)目、前端工程化與模塊化應(yīng)用項(xiàng)目、PC端網(wǎng)站開發(fā)項(xiàng)目、PC端管理信息系統(tǒng)前端開發(fā)項(xiàng)目)

第4階段：移動(dòng)端項(xiàng)目開發(fā)(6周)

內(nèi)容包含：(Touch端項(xiàng)目、微信場(chǎng)景項(xiàng)目、應(yīng)用Angular+Ionic開發(fā)WebApp項(xiàng)目、應(yīng)用Vue.js開發(fā)WebApp項(xiàng)目、應(yīng)用React.js開發(fā)WebApp項(xiàng)目)

第5階段：混合(Hybrid,ReactNative)開發(fā)(1周)

內(nèi)容包含：(微信小程序開發(fā)、ReactNative、各類混合應(yīng)用開發(fā))

第6階段：NodeJS全棧開發(fā)(1周)

內(nèi)容包括：(WebApp后端系統(tǒng)開發(fā)、一、NodeJS基礎(chǔ)與NodeJS核心模塊二、Express三、noSQL數(shù)據(jù)庫)

入門書籍：

《JavaScript DOM 編程藝術(shù)》

超級(jí)前端暢銷書，作為前端程序員必讀兩遍以上的書籍，這本書籍特別適合初學(xué)前端的新人，前端的核心技術(shù)就是JavaScript，同時(shí)也是前端的難點(diǎn)。而這本書非常適合入門，通俗易懂，生動(dòng)的案例可以讓初學(xué)者更好的進(jìn)行理解。所提及的很多編程思想?yún)s適合低中級(jí)層次的前端開發(fā)者學(xué)習(xí)。

《JavaScript權(quán)威指南》

同樣是前端程序員必讀的一本書籍，不僅適合初學(xué)者，還適合那些已經(jīng)在做前端工作的程序員進(jìn)行隨時(shí)翻閱。里面涵蓋了JavaScript的所有內(nèi)容，以及web瀏覽器所實(shí)現(xiàn)的JavaScript API。對(duì)于了解js的基礎(chǔ)知識(shí)，比如對(duì)象，數(shù)組，語法，作用域，閉包等等都很有幫助。

《JavaScript 高級(jí)程序設(shè)計(jì)》

如果你想把JavaScript非常完全的系統(tǒng)學(xué)習(xí)一遍，我強(qiáng)烈推薦這本書，這本書可以一直保留，在用這本書的過程中還可以畫下重點(diǎn)，以后可以作為參考，是工作中非常強(qiáng)力的幫手。面試的時(shí)候也可以很好的應(yīng)用上，我們俗稱的“紅寶書”。

《你不知道的JavaScript》

這本書不適合前端的初學(xué)者，想要深入的了解JavaScript原理，這是每一個(gè)前端程序員必須要研究的一本書籍。要讓不求甚解的JavaScript開發(fā)者迎難而上，深入語言內(nèi)部，弄清楚JavaScript每一個(gè)零部件的用途。如果可以把這本書吃透，那么以后理解任何東西都可以很快的理解和掌握。

《Vue.js權(quán)威指南》

Vue作為現(xiàn)在前端的主流框架，在國內(nèi)應(yīng)用最為廣泛，所以了解Vue原理必須要啃一本Vue的書籍。我之所以推薦這本，是因?yàn)檫@本書對(duì)于引導(dǎo)初用Vue的開發(fā)者有著質(zhì)的提升。從基礎(chǔ)知識(shí)到主流打包以及源碼解析，還有很多實(shí)踐的案例，都是一本不錯(cuò)的實(shí)用性書籍。主要內(nèi)容包括數(shù)據(jù)綁定、指令、表單控件綁定、過濾器、組件、表單驗(yàn)證、服務(wù)通信、路由和視圖、vue-cli、測(cè)試開發(fā)和調(diào)試、源碼解析及主流打包構(gòu)建工具等。該書內(nèi)容全面，講解細(xì)致，示例豐富，適用于各層次的開發(fā)者。

《編程之美》

無論是什么崗位的程序員，必讀的一本書籍，沒有讀過這本書的程序員幾乎都是假程序員。這本書有60道算法和程序設(shè)計(jì)題目，這些題目大部分在近年的筆試，面試中出現(xiàn)過，或者是被微軟員工熱烈討論過。作者試圖從書中各種有趣的問題出發(fā)，引導(dǎo)讀者發(fā)現(xiàn)問題，分析問題，解決問題，尋找更優(yōu)的解法。可以大幅度提高自己的編程思維和對(duì)于這個(gè)行業(yè)的深入思考，最終變成技術(shù)大牛。

相關(guān)的視頻教程你需要的話，可以加一下我問我要，視頻教程、文檔資料、源碼教程都有。

js的執(zhí)行原理是什么？

JS是解釋執(zhí)行的，即讀取一個(gè)語句就執(zhí)行一個(gè)。以前的嚴(yán)格JS是以分號(hào)為語句的分隔符，但現(xiàn)在一些瀏覽器已經(jīng)接受以換行符為分隔符（似乎是很多人喜歡用基于對(duì)象的編程了，而在JS中寫對(duì)象的函數(shù)是需要加分號(hào)的，所以很多人都愛忘）。

JS本身只提供語法解析與少部分內(nèi)部函數(shù)支持，其他的均由宿主支持。比如在網(wǎng)頁JS中的window, document, navigator等對(duì)象，均是由瀏覽器提供基于其它語言的代碼，這些代碼通常被隱藏，但很大程度上決定了JS的運(yùn)行效率。如果你有興趣，打開Chrome，按F12，調(diào)處Console，然后輸alert（注意沒有()），你就會(huì)發(fā)現(xiàn)[native code]這個(gè)東西。

請(qǐng)說明javascript的繼承機(jī)制和java繼承機(jī)制的區(qū)別

一，先來說說javascript的繼承機(jī)制的幾種方式：

1，原型鏈繼承：

優(yōu)點(diǎn)：從instanceof關(guān)鍵字來看，實(shí)例既是父類的實(shí)例，又是子類的實(shí)例，看起來似乎是最純粹的繼承。

缺點(diǎn)：子類區(qū)別于父類的屬性和方法，必須在Sub.prototype = new Base();這樣的語句之后分別執(zhí)行，無法被包裝到Sub這個(gè)構(gòu)造器里面去。例如：Sub.prototype.name = “sub”；無法實(shí)現(xiàn)多重繼承。

2，構(gòu)造繼承：

優(yōu)點(diǎn)：可以實(shí)現(xiàn)多重繼承，可以把子類特有的屬性設(shè)置放在構(gòu)造器內(nèi)部。

缺點(diǎn)：使用instanceof發(fā)現(xiàn)，對(duì)象不是父類的實(shí)例。

3，實(shí)例繼承：

優(yōu)點(diǎn)：是父類的對(duì)象，并且使用new構(gòu)造對(duì)象和不使用new構(gòu)造對(duì)象，都可以獲得相同的效果。

缺點(diǎn)：生成的對(duì)象實(shí)質(zhì)僅僅是父類的實(shí)例，并非子類的對(duì)象；不支持多繼承。

4，拷貝繼承：

優(yōu)點(diǎn)：支持多繼承。

缺點(diǎn)：效率較低；無法獲取父類不可枚舉的方法。

二，java繼承機(jī)制：

1，java里的類不能多重繼承，如果一個(gè)類一旦繼承了它的父類，那么它就別想再繼承別的類。一個(gè)兒子只能有一個(gè)老爸，原本設(shè)計(jì)是沒錯(cuò)的。可是在實(shí)際應(yīng)用中，就會(huì)出現(xiàn)各種問題。

2，java里有更好的接口，接口從本質(zhì)上來說可以更好的代替繼承。實(shí)現(xiàn)像C++里一樣的宏定義的功能，把你想要的東西都抽象在接口里，讓具體的類去實(shí)現(xiàn)這些功能。

三，綜上可以看出java不能多繼承，javascript可以，但是javascript沒有接口這一說話，也有局限性，各有千秋吧。

JavaScript對(duì)象和原型和構(gòu)造函數(shù)怎么理解？

對(duì)象

對(duì)象對(duì)象是已命名的數(shù)據(jù)集合。其中“已命名的數(shù)據(jù)”指的就是它的屬性和方法，如：

var?a?=?{?val?:?1?,?func:function(){}}

對(duì)象 a 擁有兩個(gè)已命名的數(shù)據(jù) val 和 func 。

訪問對(duì)象的成員可以使用 . 或 [ ] ，其中 . 運(yùn)算符要求它右邊必須是合法的標(biāo)示符，而 [ ] 運(yùn)算符，對(duì)它的操作數(shù)并無要求，任何合法的值都可以，如：

a.val?;?//?1

a.func()?;?//?undefined?;

a["x"]?=?2?;?//?a?:?{?val?:?1?,?func:function(){}?,?x?:?2?}

a[null]?=?3?;?//?a?:?{?val?:?1?,?func:function(){}?,?x?:?2?,null?:?3}

2.原型

對(duì)象有一個(gè)私有的屬性 __proto__，持有其原型的引用。

對(duì)象的原型，也是一個(gè)對(duì)象。對(duì)象與它的原型的關(guān)系就是：數(shù)據(jù)共享，這體現(xiàn)在對(duì)象屬性值的查找過程。訪問對(duì)象的屬性，首先在它自定義的數(shù)據(jù)集合中尋找，找到后，立即返回該值；如果沒有找到，則到它的原型中尋找，找到后，立即返回值；....；如果一直到原型鏈（原型還可以有原型）的末端都沒有找到，則返回 undefined。

var?b?=?{?bPro?:?"in?b"?}?;

a.__proto__?=?b?;

alert(?a.bPro?)?;?//?in?b?;

如果一個(gè)對(duì)象沒有顯式的指定原型，那么它的原型默認(rèn)是 Object.prototype ，而 Object.prototype.__proto__ = null ,所以它就是所有原型鏈的結(jié)尾。

為對(duì)象添加了一個(gè)在原型中存在的屬性，則會(huì)覆蓋對(duì)原型屬性的訪問。

a.bPro?=?"in?a"?;

alert(a.bPro)?;?//?"in?a"

alert(a.__proto__.bPro)?;?//?"in?b"

可以看到，修改對(duì)象，并未影響到原型，更不會(huì)影響到共享同一個(gè)原型的其他對(duì)象。

3. 構(gòu)造函數(shù)

任何函數(shù)都可以用作構(gòu)造函數(shù)，只要使用 new 運(yùn)算符進(jìn)行調(diào)用即可。

構(gòu)造函數(shù)的原理，就是創(chuàng)建一個(gè)對(duì)象，并將函數(shù)的屬性 prototype 賦給剛剛創(chuàng)創(chuàng)建的這個(gè)對(duì)象的 __proto__ 屬性、傳遞原型，然后將 this 指向它；執(zhí)行函數(shù)體，函數(shù)體中形如 this.x = y 的代碼都是在給這個(gè)剛創(chuàng)建的對(duì)象添加成員；最后這個(gè)新創(chuàng)建的對(duì)象會(huì)作為 new 表達(dá)式的值返回。如下：

function?obj(xValue){

this.x?=?xValue?;

}

obj.prototype?=?{?pro?:?"in?prototype"?}?;

var?a?=?new?obj(1)?;?//?{?x?:?1?}

alert(a.pro)?;?//?"in?prototype"?

a.__proto__?===?obj.prototype?//?true;

當(dāng)然，函數(shù)也可以返回值。但只有 Object 類的實(shí)例（包括子類實(shí)例）才會(huì)生效，其他的值都會(huì)被忽略，繼續(xù)返回剛創(chuàng)建的對(duì)象（即使函數(shù)體中一個(gè) this 都么有）。

function?func(?ret?){

this.x?=?5?;

return?ret;

}

var?a?=?new?func()?;?//?{?x?:?5?}?

var?b?=?new?func(?null?)?;?//?{?x?:?5?}?

var?c?=?new?func(?{?}?)?;?//?{?}?

var?d?=?new?func(?[]?)?;?//?[]?

var?e?=?new?func(?1?)?;?//?{?x?:?5?}?

var?f?=?new?func(?new?Number(?1?)?)?;?//?Number

4. Bulalalal

后面的我沒看懂，查了查，發(fā)現(xiàn)內(nèi)容也沒啥新鮮的。

如果一個(gè)擁有返回值，且返回的是 Object 類的實(shí)例（包括子類實(shí)例），那么使用不使用 new 運(yùn)算符的結(jié)果都是一樣的。同其他語言中一樣，具有這樣功能函數(shù)，都叫做工廠函數(shù)，更復(fù)雜的創(chuàng)建過程可能不叫這個(gè)名字，但也一定會(huì)包括"工廠"二字。

function?obj(x?,?y?){

return?{?proX?:?x?,?proY?:?y?}?;

}

雖然說懂了原理，其他的都是形式問題。但其實(shí)我也覺得有必要深入了解一下，畢竟和人交流的時(shí)候，不能讓一些其實(shí)沒多大意義的名詞給難住、影響溝通效果。

只是我有點(diǎn)累了，手指頭快麻了，我去瞅瞅別的東西了。（還有，我已不做程序員好多年，新東西學(xué)不動(dòng)了）

參考文章：對(duì)象? 推薦你將函數(shù)那一章也看看。

在javascript中什么是事件委托 原理是什么

要了解委托的原理，首先要理解DOM事件的過程。

Dom事件分為兩個(gè)階段，如圖：

事件捕獲階段（紅色箭頭順序）

事件冒泡階段（綠色箭頭順序）

在事件捕獲階段，事件源依次從defaultView（可以理解為整個(gè)頁面）一直傳播到具體的目標(biāo)（target）。從廣泛到具體。

在事件冒泡階段，事件源依次從target傳播到defaultview。從具體到廣泛，范圍越來越大，像冒泡過程一樣，氣泡越來越大（范圍越來越大）

而事件委托就是利用的DOM事件的事件捕獲階段。把具體dom上發(fā)生的事件，委托給更大范圍的dom去處理。好比送信員，如果每次都把信件送給每一戶，非常繁瑣。但是如果交給一個(gè)大范圍的管理者，比如小區(qū)的傳達(dá)室，那么事情會(huì)變得非常簡(jiǎn)單。事件委托就類似這種原理，我頁面中有很多按鈕，如果不使用事件委托，我只能在每個(gè)按鈕上注冊(cè)事件。非常麻煩。但如果我把事件注冊(cè)在一個(gè)大范圍的div（假設(shè)所有的按鈕都在這個(gè)div中），那么我只要注冊(cè)一次事件，就可以處理所有按鈕（只要按鈕包含在上述div中）事件的響應(yīng)了。

JavaScript 中原型繼承（prototype-based inheritance）的原理是怎樣的？

構(gòu)造函數(shù)=function(){};

原型對(duì)象={屬性甲:1,屬性乙:2};

構(gòu)造函數(shù).prototype=原型對(duì)象;

新建對(duì)象=new 構(gòu)造函數(shù)();

新建對(duì)象.屬性甲=0;

這樣新建對(duì)象就繼承了原型對(duì)象，并在自身內(nèi)覆蓋了一層私有屬性，但并不改變?cè)蛯?duì)象的任何屬性。

此時(shí)新建對(duì)象本身相當(dāng)于{屬性甲:0}（算上隱藏的不可枚舉屬性是{屬性甲:0,constructor:構(gòu)造函數(shù)}），但是如果訪問新建對(duì)象.屬性乙這個(gè)自身不存在的屬性，則會(huì)上溯到其原型對(duì)象的同名屬性。

原型對(duì)象的屬性改變會(huì)對(duì)所有包括之前創(chuàng)建的新建對(duì)象統(tǒng)一有效。方便管理且節(jié)省空間。

原型對(duì)象亦可層層繼承（原型對(duì)象本身也可以是基于更上層原型的對(duì)象構(gòu)造的）。而沒有繼承任何對(duì)象的最頂層對(duì)象（也即是={}這種最常見的定義形式，等同于=new Object()）的constructor就是Object這個(gè)原生超級(jí)根對(duì)象構(gòu)造器。

網(wǎng)站名稱：javascript原理,javascript工作原理
新聞來源：http://chinadenli.net/article16/dsidogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站排名、企業(yè)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)