建站
咨詢
售后
建站咨詢
新聞中心
學(xué)習(xí)前端，有什么好書(shū)推薦嗎？
對(duì)于零基礎(chǔ)想小白，想要自學(xué)成為前端人才，可以看看以下書(shū)籍
創(chuàng)新互聯(lián)專注于縉云企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)?？N云網(wǎng)站建設(shè)公司,為縉云等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
《圖解 HTTP》：一本HTTP的神書(shū)，圖文并茂，生動(dòng)形象，非常適合小白學(xué)習(xí)。
《Head First HTML與CSS(第2版)》：入門真的是經(jīng)典書(shū)籍，手把手教學(xué)，豐富的案例讓你從 0 開(kāi)始學(xué)前端。
《鋒利的jQuery》：作為第一本原因是jQuery入門快，你不會(huì)因?yàn)閖s的晦澀難懂而止步不前，因?yàn)閷W(xué)習(xí)jQuery后你可以自己寫一些可以即使看到效果的小項(xiàng)目從而提升興趣。
《Javascript 高級(jí)程序設(shè)計(jì)》：書(shū)中涉及的概念基本涵蓋了js的大部分內(nèi)容，包括作用域鏈、js數(shù)據(jù)類型、OOP對(duì)象在js中的實(shí)現(xiàn)、閉包、BOM和DOM模型、對(duì)變態(tài)IE的系列兼容的解決方案、事件流、還有xml、jason、E4X這些數(shù)據(jù)格式與js的交互操作簡(jiǎn)介、高級(jí)技巧的介紹(比如惰性載入)等等
《高性能JavaScript》：揭示了技術(shù)和策略能幫助你在開(kāi)發(fā)過(guò)程中消除性能瓶頸。你將會(huì)了解如何提升各方面的性能，包括代碼的加載、運(yùn)行、DOM交互、頁(yè)面生存周期等。
《JavaScript 設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》：騰訊前端AlloyTeam團(tuán)隊(duì)出品，綜合講述前端的設(shè)計(jì)模式，設(shè)計(jì)原則，編程技巧，代碼重構(gòu)等等。
《CSS 世界》：CSS和javascript一樣，都是很容易上手，卻很難精通的。這本是前端知名博主張?chǎng)涡竦臅?shū)籍，好評(píng)很多，講的很細(xì)致。
《CSS 揭秘》：CSS進(jìn)階必備書(shū)籍，47 個(gè) css 技巧讓你在面對(duì)各種 css 問(wèn)題的時(shí)候游刃有余。
《深入淺出Node.js》：針對(duì)Node的基本原理做了深入，能讓你了解底層的Node實(shí)現(xiàn)
來(lái)自一位react新手的react入門須知
所有的html，css都可以寫在js中，這就是jsx的用法。
用于驗(yàn)證數(shù)據(jù)的類型是否是滿足你的需要,不過(guò)我在現(xiàn)有的項(xiàng)目中沒(méi)有特意的指定數(shù)據(jù)的propTyoe，因?yàn)檫@些都是前后端約定好的。
此用法如下圖 ：
這個(gè)如同vue組件里面的props中的type：Array這個(gè)一樣
這個(gè)與vue-router差不多，大家可以看文檔。
react-router的中文官網(wǎng) ： 中文官網(wǎng)
因?yàn)閞eact與vue一樣，都是使用vitural-dom，沒(méi)有處理dom節(jié)點(diǎn)，從而大大提高了頁(yè)面的渲染效率。
當(dāng)你想要獲取真實(shí)的dom節(jié)點(diǎn)的時(shí)候，可以使用ref，具體的使用，可以看阮一峰的react入門，我下面的todolist的demo里面也會(huì)涉及到。
不過(guò)在你使用無(wú)狀態(tài)組件申明組件的時(shí)候，ref在這個(gè)組件中是不能使用的。
可以通過(guò)webpack安裝各種依賴，我使用的最爽的一個(gè)就是react-hot-loader，就是熱更新，非常好用。不過(guò)熱更新其他的工具，比如 browser-sync ,下面是一些文檔。
如vue的vue-cli腳手架， create-react-app ]( )，使用以上方法的話，與vue-cli腳手架工具類似
我自己的一些總結(jié)，單單學(xué)react是不難的，難的是要和一些工具混合來(lái)用，往往這個(gè)過(guò)程的成本最高。比如使用webpack構(gòu)建，redux管理狀態(tài)， redux-thunk 或者 redux-saga 來(lái)處理異步action。
還有一個(gè)很大的趨勢(shì)就是前端變化很快，拿 react-router 來(lái)說(shuō)，你做了一個(gè)項(xiàng)目， react-router@2.0.0 是能完美跑起來(lái)的，但是換成了當(dāng)換成了 react-router@3.0.0 ，基本上就跑不起來(lái)了，更何況現(xiàn)在的 react-router 已經(jīng)出到4.0，
相應(yīng)的 webpack 也是這樣，當(dāng)時(shí)一些開(kāi)發(fā)者基于 webpack1.0 開(kāi)發(fā)的，當(dāng)webpack升到2.0的時(shí)候， webpack.config,js 里面的文件要重新配置了。現(xiàn)在 webpack 已經(jīng)更新到了3.0。
2， 阮一峰的文檔： react的入門 ，webpack的入門， react-router
3，react的一些框架和一些輪子：
4，一個(gè)漸進(jìn)的學(xué)react的demo。
里面基本上涉及到了，react入門的所有涵蓋的知識(shí)，他都是自己搭的，沒(méi)有使用腳手架工具。里面也涵蓋了webpack的一些配置，對(duì)于新手學(xué)習(xí)蠻好的。
1，jquery、vue、react的todolist，最簡(jiǎn)單的
2，基于ant-dedign的一個(gè)react簡(jiǎn)單的demo
3,基于react寫的一個(gè)簡(jiǎn)易大眾點(diǎn)評(píng)的demo，里面用到了redux，mock，fetch，es6
async/await 來(lái)處理異步/同步
前面比較啰嗦，希望讀者耐心看完。
async/await可以說(shuō)是一個(gè)老生常談，但是每一個(gè)前端工程師卻又避不開(kāi)的話題。
在JQuery一把梭的時(shí)代，如果遇到下面類似的需求，你要怎么做？
需求：拿到第一個(gè)ajax請(qǐng)求省，拿到省數(shù)據(jù)請(qǐng)求第二個(gè)ajax來(lái)獲得市的數(shù)據(jù)，拿到市的數(shù)據(jù)再請(qǐng)求第三個(gè)ajax來(lái)獲得區(qū)的數(shù)據(jù)。
最常見(jiàn)的寫法莫過(guò)于兩種：
1、回調(diào)地獄式寫法：
簡(jiǎn)直令人發(fā)瘋。
或者是這樣？同步請(qǐng)求
我靠，只要一個(gè)數(shù)據(jù)請(qǐng)求不回來(lái)頁(yè)面就完?duì)僮恿?。這簡(jiǎn)直是噩夢(mèng)。
別笑，我相信身為前端工程師一定這么寫過(guò)。
直到有一天，你發(fā)現(xiàn)vue里沒(méi)有Jquery，只有基于promise寫的axios.
一開(kāi)始在使用axios的時(shí)候，還是脫離不了必須同步請(qǐng)求的變成思想，于是在vue項(xiàng)目中引入了jquery，把項(xiàng)目搞成了四不像。
研究了好久，終于發(fā)現(xiàn)了async/await
async 詞面翻譯 “異步”。 async關(guān)鍵字一般放到function的前面，用來(lái)表示一個(gè)異步函數(shù)。如下
根據(jù)阮一峰e(cuò)s6教程關(guān)于async部分的介紹，能得知async會(huì)返回一個(gè)Promise對(duì)象。所以我們可以通過(guò)then來(lái)調(diào)用。
如果不太明白，那我這么寫你一定會(huì)明白：
詞面意思“等待”，它只會(huì)在async函數(shù)體內(nèi)出現(xiàn)，代表執(zhí)行到這里的時(shí)候，等一下。它后面可以跟任何表達(dá)式，不過(guò)一般會(huì)跟一個(gè)Promise，可以實(shí)現(xiàn)異步函數(shù)同步調(diào)用的效果。
delay是異步函數(shù)，在正常情況下，如果這樣寫：
會(huì)先輸出2，然后1秒后再輸出1.
但是在await的影響下，函數(shù)會(huì)先等待5秒后輸出a，在等待4秒后輸出b。
話題再轉(zhuǎn)回到我們一開(kāi)始說(shuō)的ajax，使用async/await的方法來(lái)寫，是不是感覺(jué)優(yōu)雅多了？
在vue中，我們會(huì)使用axios來(lái)與后臺(tái)做數(shù)據(jù)交互，axios沒(méi)有同步請(qǐng)求，只有異步請(qǐng)求，所以我們可以使用async/await來(lái)模擬一個(gè)同步請(qǐng)求，實(shí)現(xiàn)功能。
學(xué)習(xí)前端有什么書(shū)推薦？
一、《web前端開(kāi)發(fā)最佳實(shí)踐》
這本書(shū)是前端開(kāi)發(fā)領(lǐng)域的經(jīng)典之作，是一本扎實(shí)前端基本功，規(guī)范我們前端代碼的實(shí)踐性書(shū)籍。本書(shū)主要講解了HTML、CSS、JavaScript以及移動(dòng)端開(kāi)發(fā)的最佳實(shí)踐方案，能對(duì)缺乏良好知道的開(kāi)發(fā)者產(chǎn)生很大的幫助。通過(guò)閱讀本書(shū)我們可以掌握如何編寫高可讀性、高維護(hù)性、高性能的HTML、CSS以及JavaScript。
二、《CSS那些事兒》
《CSS那些事兒是2009年電子工業(yè)出版社出版的圖書(shū)，作者是林小志。該書(shū)通過(guò)對(duì)CSS技巧實(shí)例進(jìn)行講解，深入地分析了CSS相關(guān)知識(shí)。
通過(guò)頁(yè)面中的文字、圖片、表格、表單等常見(jiàn)元素的處理及各種頁(yè)面布局方式的使用，使讀者能深入了解如何在頁(yè)面中更好地運(yùn)用CSS布局。尤其是在頁(yè)面布局的部分中，全面分析了多重布局方式，著重分解了兩列等高和三列等高的幾種方式，并相應(yīng)說(shuō)明了等高布局的優(yōu)缺點(diǎn)。
三、《CSS權(quán)威指南》
內(nèi)容介紹：《CSS權(quán)威指南》通過(guò)諸多示例，詳細(xì)講解了如何做到僅在一處建立樣式表就能創(chuàng)建或修改整個(gè)網(wǎng)站的外觀，以及如何得到html力不能及的更豐富的表現(xiàn)效果。同時(shí)展示了如何遵循css最新規(guī)范（css2和css2.1）將層疊樣式表的方方面面應(yīng)用于實(shí)踐。
四、《JavaScript 標(biāo)準(zhǔn)參考教程》阮一峰
內(nèi)容介紹：阮一峰 本書(shū)全面介紹 JavaScript 核心語(yǔ)法，從最簡(jiǎn)單的開(kāi)始講起，循序漸進(jìn)、由淺入深，力求清晰易懂。所有章節(jié)都帶有大量的代碼實(shí)例，便于理解和模仿，可以用到實(shí)際項(xiàng)目中，即學(xué)即用。 本書(shū)適合初學(xué)者當(dāng)作JavaScript語(yǔ)言的入門教程，也適合當(dāng)作日常使用的參考手冊(cè)。
五、JavaScript高級(jí)程序設(shè)計(jì)第三版
內(nèi)容介紹：《全書(shū)從JavaScript 語(yǔ)言實(shí)現(xiàn)的各個(gè)組成部分——語(yǔ)言核心、DOM、BOM、事件模型講起，深入淺出地探討了面向?qū)ο缶幊?、Ajax 與Comet 服務(wù)器端通信，HTML5 表單、媒體、Canvas（包括WebGL）及Web Workers、地理定位、跨文檔傳遞消息、客戶端存儲(chǔ)（包括IndexedDB）等新API，還介紹了離線應(yīng)用和與維護(hù)、性能、部署相關(guān)的最佳開(kāi)發(fā)實(shí)踐。
六、鋒利的jquery
內(nèi)容介紹：《鋒利的jQuery(第2版)》循序漸進(jìn)地對(duì)jQuery的各種函數(shù)和方法調(diào)用進(jìn)行了介紹，讀者可以系統(tǒng)地掌握jQuery的選擇器、DOM操作、事件和動(dòng)畫(huà)、AJAX應(yīng)用、插件、jQuery Mobile、jQuery各個(gè)版本變化、jQuery性能優(yōu)化和技巧等知識(shí)點(diǎn)，并結(jié)合每個(gè)章節(jié)后面的案例演示進(jìn)行練習(xí)，達(dá)到掌握核心知識(shí)點(diǎn)的目的。
七、HTTP權(quán)威指南
內(nèi)容介紹：《HTTP權(quán)威指南》由古爾利所著，《HTTP權(quán)威指南》詳細(xì)解釋了如何用HTTP來(lái)開(kāi)發(fā)基于Web的應(yīng)用程序，核心的[因特網(wǎng)協(xié)議，如何與架構(gòu)構(gòu)建塊交互，如何正確實(shí)現(xiàn)因特網(wǎng)客戶和服務(wù)器等。
《HTTP權(quán)威指南》的中心內(nèi)容是HTTP，本質(zhì)是理解Web的工作原理，以及如何將這些知識(shí)應(yīng)用到Web編程和管理之中，主要涵蓋HTTP的技術(shù)運(yùn)作方式、產(chǎn)生動(dòng)機(jī)、性能和目標(biāo)以及一些相關(guān)技術(shù)問(wèn)題。 《HTTP權(quán)威指南》適合所有想了解HTTP和Web底層結(jié)構(gòu)的人閱讀。
八、高性能網(wǎng)站建設(shè)指南
內(nèi)容介紹：《高性能網(wǎng)站建設(shè)指南》結(jié)合Web2.0以來(lái)Web開(kāi)發(fā)領(lǐng)域的最新形勢(shì)和特點(diǎn)，介紹了網(wǎng)站性能問(wèn)題的現(xiàn)狀、產(chǎn)生的原因，以及改善或解決性能問(wèn)題的原則、技術(shù)技巧和最佳實(shí)踐。重點(diǎn)關(guān)注網(wǎng)頁(yè)的行為特征，闡釋優(yōu)化Ajax、CSS、JavaScript、Flash和圖片處理等要素的技術(shù)，全面涵蓋瀏覽器端性能問(wèn)題的方方面面。
jQuery 的功能
該博客基于阮一峰前輩在2011年所做的分享（原鏈接： ）
jQuery的核心就是：可以選擇某個(gè)網(wǎng)頁(yè)元素,然后對(duì)其進(jìn)行某種操作
我們可知jQuery是一個(gè)構(gòu)造函數(shù)，那么我們就可以通過(guò)選擇表達(dá)式，把選中的元素，放進(jìn)jQuery構(gòu)造函數(shù)（$）當(dāng)中，從而得到選中的元素。
而選擇表達(dá)式可以是CSS選擇器：
也可以是jQuery特有的表達(dá)式：
在jQuery當(dāng)中最終選中網(wǎng)頁(yè)元素以后，可以對(duì)它進(jìn)行一系列操作，并且所有操作可以連接在一起，以鏈條的形式寫出來(lái)，比如：
拆解開(kāi)來(lái)，就是：
這是jQuery最令人稱道、最方便的特點(diǎn)。它的原理在于每一步的jQuery操作所返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起。
jQuery還提供了.end()方法，使得結(jié)果集可以后退一步：
創(chuàng)建新元素的方法非常簡(jiǎn)單，只要把新元素直接傳入jQuery的構(gòu)造函數(shù)就行了：
操作元素在網(wǎng)頁(yè)中的位置移動(dòng)有兩種方法：
（1）直接移動(dòng)該元素；
（2）移動(dòng)其他元素，使得目標(biāo)元素達(dá)到我們想要的位置。
（1）方法是使用.insertAfter()，把div元素移動(dòng)p元素后面：
（2）方法是使用.after()，把p元素加到div元素前面：
表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實(shí)際上，它們有一個(gè)重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據(jù)需要，選擇到底使用哪一種方法。
使用這種模式的操作方法，一共有四對(duì)：
text(?) //讀寫文本內(nèi)容
用于返回內(nèi)容時(shí)，則返回所有匹配元素的文本內(nèi)容（會(huì)刪除 HTML 標(biāo)記）。
用于設(shè)置內(nèi)容時(shí)，則重寫所有匹配元素的內(nèi)容。
html(?) //讀寫HTML內(nèi)容
設(shè)置或返回被選元素的 innerHTML（文本 + HTML 標(biāo)記）
attr('title',?) // 讀寫屬性
設(shè)置或返回被選元素的屬性值。
css({color:'red'}) //讀寫style
設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。
addClass('blue')
向被選元素添加一個(gè)或多個(gè)類。
該方法不會(huì)移除已存在的 class 屬性，僅僅添加一個(gè)或多個(gè) class 屬性。
on('click',fn)
支持動(dòng)態(tài)綁定元素，即頁(yè)面上元素有添加或變化后仍可綁定,前提是selector須是目標(biāo)綁定元素的父元素
off('click',fn)
用于移除通過(guò) on()方法添加的事件處理程序
網(wǎng)站標(biāo)題：jquery阮一峰,阮一峰的前端日志
本文地址：http://www.dlmjj.cn/article/phiehj.html
