100+ 超全的web開(kāi)發(fā)工具和資源
時(shí)間:2023-05-28 07:48:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-05-28 07:48:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)
100+ 超全的web開(kāi)發(fā)工具和資源:作為Web開(kāi)發(fā)者,這是好的時(shí)代,也是壞的時(shí)代。Web開(kāi)發(fā)技術(shù)也在不斷變化。雖然很令人興奮,但是這也意味著Web開(kāi)發(fā)人員需要要積極主動(dòng)的學(xué)習(xí)新技術(shù)和新的編程語(yǔ)言,并愿意和渴望接受新的挑戰(zhàn),以適應(yīng)變化。新的挑戰(zhàn)可能會(huì)包括一些開(kāi)發(fā)上的要求,如利用適應(yīng)現(xiàn)有的框架來(lái)滿(mǎn)足業(yè)務(wù)需求。測(cè)試一個(gè)網(wǎng)站,能從中知道出了哪些技術(shù)上的問(wèn)題,并且我們針對(duì)這些問(wèn)題進(jìn)行優(yōu)化和消除。便于后端的開(kāi)發(fā)進(jìn)程加快和測(cè)試。所以我們列出了完整的web開(kāi)發(fā)所需要的工具和資源,助力開(kāi)發(fā)者提高開(kāi)發(fā)效率!學(xué)不止步,讓我們努力成為一個(gè)優(yōu)秀的開(kāi)發(fā)者!
Web開(kāi)發(fā)工具和資源整合
在這里說(shuō)聲抱歉,對(duì)于開(kāi)發(fā)者開(kāi)發(fā)使用的工具,我們無(wú)法一一囊括,這里是選取較為熱門(mén)的工具和資源作為范例。我們希望能從中找到適合自己的工具助力自己的開(kāi)發(fā)!
注:工具和資源排序不分先后。
JavaScript庫(kù)
我敢說(shuō)JavaScript語(yǔ)言是目前web開(kāi)發(fā)最流行的編程語(yǔ)言。JavaScript庫(kù)又稱(chēng)JavaScript框架,封裝了很多預(yù)定義的對(duì)象和使用函數(shù)。是網(wǎng)站更容易兼容各式各樣的瀏覽器。那么您就可以使用以下JavaScript庫(kù)來(lái)幫助你的開(kāi)發(fā)更好進(jìn)行。
- jQuery:快y速,小巧,功能豐富的JavaScript庫(kù)。
- BackBoneJS:為復(fù)雜Javascript應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。
- D3.js:D3是基于數(shù)據(jù)的文檔操作javascript庫(kù),D3能夠把數(shù)據(jù)和HTML、SVG、CSS結(jié)合起來(lái),創(chuàng)造出可交互的數(shù)據(jù)圖表。
- React::Facebook的Javascript庫(kù)為構(gòu)建用戶(hù)界面而開(kāi)發(fā)。
- jQuery UI:jQuery UI 是以 jQuery 為基礎(chǔ)的開(kāi)源 JavaScript 網(wǎng)頁(yè)用戶(hù)界面代碼庫(kù)。包含底層用戶(hù)交互、動(dòng)畫(huà)、特效和可更換主題的可視控件。
- jQuery Mobile:基于HTML5用于創(chuàng)建移動(dòng) web 應(yīng)用程序的框架。
- Underscore.js:JavaScript實(shí)用庫(kù),提供了類(lèi)似Prototype.js的一些功能,但是沒(méi)有繼承任何JavaScript內(nèi)置對(duì)象。
- Moment.js:一個(gè) JavaScript 日期處理類(lèi)庫(kù),用于解析、檢驗(yàn)、操作、以及顯示日期。
- Lodash:一個(gè) JavaScript 實(shí)用工具庫(kù),提供一致性,模塊化,性能和配件等功能。
- Vue:Vue.js(讀音 /vju?/, 類(lèi)似于 view)是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
前端框架
通俗的前端由HTML,CSS,JavasScript等構(gòu)成。當(dāng)然為了適應(yīng)Web開(kāi)發(fā)日益增長(zhǎng)的需求,應(yīng)運(yùn)而生許多獨(dú)立的前端框架,例如Bootstrap。一個(gè)優(yōu)秀的框架可以為前端開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中增益,減小開(kāi)發(fā)壓力。
- Bootstrap: Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開(kāi)發(fā)更加快捷。
- Foundation: 迄今為止最好的響應(yīng)式前端框架,更快、更輕、更多功能、更靈活、更強(qiáng)大!
- Semantic UI:SemanticUI 是一款語(yǔ)義化設(shè)計(jì)的前端開(kāi)源框架,其功能強(qiáng)大,使用簡(jiǎn)單,為設(shè)計(jì)師和開(kāi)發(fā)師提供可復(fù)用的完美設(shè)計(jì)方案。
- uikit:UIKit使用的變量基于LESS,具有體積小、模塊化、可輕松地自定義主題及響應(yīng)式界面。
Web應(yīng)用框架
Web應(yīng)用框架作為一個(gè)軟件框架,意在幫助和緩解開(kāi)發(fā)者在進(jìn)行Web應(yīng)用的開(kāi)發(fā)與維護(hù)時(shí)遇見(jiàn)的開(kāi)發(fā)問(wèn)題。例如:AngularJS,您可以在您的項(xiàng)目完全免費(fèi)使用它,詳細(xì)文檔請(qǐng)您參見(jiàn) angularcdn.com.
- Ruby:Ruby on Rails 是使用 Ruby 語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)程序開(kāi)發(fā)框架,目的是為開(kāi)發(fā)者提供常用組件,簡(jiǎn)化網(wǎng)頁(yè)程序的開(kāi)發(fā)。
- React:React 起源于 Facebook 的內(nèi)部項(xiàng)目,React 的設(shè)計(jì)思想極其獨(dú)特,屬于革命性創(chuàng)新,性能出眾,代碼邏輯卻非常簡(jiǎn)單。是現(xiàn)在非長(zhǎng)熱門(mén)的框架。
- Vue:Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。它提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng),具有簡(jiǎn)單、靈活的 API。從技術(shù)上講, Vue.js 集中在 MVVM 模式上的視圖模型層,并通過(guò)雙向數(shù)據(jù)綁定連接視圖和模型。
- AngularJS:AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML,可以構(gòu)建一個(gè)單一頁(yè)面應(yīng)用程序。AngularJS有著諸多特性,最為核心的是:MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴(lài)注入等等。
- Ember.js:一個(gè)用于創(chuàng)建 web 應(yīng)用的 JavaScript MVC 框架,采用基于字符串的Handlebars模板,支持雙向綁定、觀(guān)察者模式、計(jì)算屬性(依賴(lài)其他屬性動(dòng)態(tài)變化)、自動(dòng)更新模板、路由控制、狀態(tài)機(jī)等。
- Express:基于 Node.js 平臺(tái)的 web 應(yīng)用開(kāi)發(fā)框架 基于Node.js 平臺(tái),快速、開(kāi)放、極簡(jiǎn)的 web 開(kāi)發(fā)框架。
- Meteor:Meteor 是一個(gè)構(gòu)建在 Node.js 之上的平臺(tái),用來(lái)開(kāi)發(fā)實(shí)時(shí)網(wǎng)頁(yè)程序。Meteor 位于程序數(shù)據(jù)庫(kù)和用戶(hù)界面之間,保持二者之間的數(shù)據(jù)同步更新。
- Django:Django是一個(gè)開(kāi)放源代碼的Web應(yīng)用框架,由Python寫(xiě)成。采用了MVC的軟件設(shè)計(jì)模式,即模型M,視圖V和控制器C。
- ASP.net:ASP.NET是免費(fèi),高兼容的WEB應(yīng)用框架,能夠提供標(biāo)準(zhǔn)化WEB應(yīng)用構(gòu)建時(shí)所需的解決方案。
- Laravel:一個(gè)免費(fèi),開(kāi)源的PHP Web應(yīng)用程序框架,可以基于MVC模式來(lái)創(chuàng)建Web應(yīng)用程序。
- Zend Framework 2:一款的Web應(yīng)用框架,基于PHP來(lái)創(chuàng)建Web應(yīng)用和服務(wù)端應(yīng)用。
- Phalcon:Phalcon 是開(kāi)源、全功能棧、使用 C 擴(kuò)展編寫(xiě)、針對(duì)高性能優(yōu)化的 PHP 5 框架。
- Symfony:Symfony是一個(gè)基于MVC模式的面向?qū)ο蟮腜HP5框架。Symfony允許在一個(gè)web應(yīng)用中分離事務(wù)控制,服務(wù)邏輯和表示層。
- CakePHP:CakePHP是一個(gè)運(yùn)用了諸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名設(shè)計(jì)模式的快速開(kāi)發(fā)框架。主要目標(biāo)是提供一個(gè)可以讓各種層次的PHP開(kāi)發(fā)人員快速地開(kāi)發(fā)出健壯的Web應(yīng)用,而 又不失靈活性。
- Flask:Flask是一個(gè)使用 Python 編寫(xiě)的輕量級(jí) Web 應(yīng)用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎則使用 Jinja2
- CodeIgniter:CodeIgniter 是一個(gè)簡(jiǎn)單快速的PHP MVC框架。它為團(tuán)隊(duì)提供了足夠的自由支持,允許開(kāi)發(fā)人員更迅速地工作。
任務(wù)批處理工具/包管理器
任務(wù)批量處理工具可將你的工作流程全自動(dòng)化.例如你可以創(chuàng)建一個(gè)任務(wù),使用JavaScript語(yǔ)言編寫(xiě)的工具來(lái)進(jìn)行自動(dòng)化的處理。 然后打包,這樣會(huì)大大提高開(kāi)發(fā)效率。
包管理器它能跟蹤所有已安裝的軟件、自動(dòng)化進(jìn)行安裝和刪除應(yīng)用程序、以及確保所有軟件都保持更新以獲得最新的增強(qiáng)功能和錯(cuò)誤修復(fù)。
- Grunt:Grunt是基于Node.js的項(xiàng)目構(gòu)建工具。它可以自動(dòng)運(yùn)行你所設(shè)定的任務(wù)。
- Gulp:Gulp.js 是基于 Node.js 構(gòu)建的一個(gè)自動(dòng)化構(gòu)建工具,開(kāi)發(fā)者可以使用它在項(xiàng)目開(kāi)發(fā)過(guò)程中自動(dòng)執(zhí)行常見(jiàn)任務(wù)。
- npm:NPM(node package manager),通常稱(chēng)為node包管理器。顧名思義,它的主要功能就是管理node包,包括:安裝、卸載、更新、查看、搜索、發(fā)布等。
- Bower:Bower是一個(gè)客戶(hù)端技術(shù)的軟件包管理器,它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類(lèi)的網(wǎng)絡(luò)資源。
- Webpack:Webpack一個(gè)前端資源加載/打包工具,只需要相對(duì)簡(jiǎn)單的配置就可以提供前端工程化需要的各種功能,并且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流。
編程語(yǔ)言 / 開(kāi)發(fā)平臺(tái)
所有Web開(kāi)發(fā)都需要編程語(yǔ)言的支持.
編程語(yǔ)言(programming language),是用來(lái)定義計(jì)算機(jī)程序的形式語(yǔ)言。它是一種被標(biāo)準(zhǔn)化的交流技巧,用來(lái)向計(jì)算機(jī)發(fā)出指令。一種計(jì)算機(jī)語(yǔ)言讓程序員能夠準(zhǔn)確地定義計(jì)算機(jī)所需要使用的數(shù)據(jù),并精確地定義在不同情況下所應(yīng)當(dāng)采取的行動(dòng)。.當(dāng)然進(jìn)行Web開(kāi)發(fā)不僅僅只有一門(mén)語(yǔ)言來(lái)進(jìn)開(kāi)發(fā)。
- PHP:PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本預(yù)處理器”)是一種通用開(kāi)源腳本語(yǔ)言。語(yǔ)法吸收了C語(yǔ)言、Java和Perl的特點(diǎn),利于學(xué)習(xí),使用廣泛,主要適用于Web開(kāi)發(fā)領(lǐng)域
- NodeJS:Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型,使其輕量又高效。
- Javascript:JavaScript一種直譯式腳本語(yǔ)言,是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言,內(nèi)置支持類(lèi)型。它的解釋器被稱(chēng)為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶(hù)端的腳本語(yǔ)言
- HTML5:標(biāo)記語(yǔ)言,是HTML和XHTML的最新版本。
- Python:Python是一種解釋型、面向?qū)ο蟆?dòng)態(tài)數(shù)據(jù)類(lèi)型的高級(jí)程序設(shè)計(jì)語(yǔ)言。
- Ruby:Ruby,一種為簡(jiǎn)單快捷的面向?qū)ο缶幊蹋嫦驅(qū)ο蟪绦蛟O(shè)計(jì))而創(chuàng)的腳本語(yǔ)言
- Scala:Scala是一門(mén)多范式的編程語(yǔ)言,一種類(lèi)似java的編程語(yǔ)言,設(shè)計(jì)初衷是實(shí)現(xiàn)可伸縮的語(yǔ)言、并集成面向?qū)ο缶幊毯秃瘮?shù)式編程的各種特性。
- CSS3:CSS即層疊樣式表(Cascading StyleSheet)。 在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù),可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。CSS3是CSS的最新版本。
- SQL:結(jié)構(gòu)化查詢(xún)語(yǔ)言(Structured Query Language)簡(jiǎn)稱(chēng)SQL,是一種特殊目的的編程語(yǔ)言,是一種數(shù)據(jù)庫(kù)查詢(xún)和程序設(shè)計(jì)語(yǔ)言,用于存取數(shù)據(jù)以及查詢(xún)、更新和管理關(guān)系數(shù)據(jù)庫(kù)系統(tǒng);同時(shí)也是數(shù)據(jù)庫(kù)腳本文件的擴(kuò)展名。
- Golang:Go是Google開(kāi)發(fā)的一種編譯型,可平行化,并具有垃圾回收功能的編程語(yǔ)言。
- Rust:Rust是Mozilla開(kāi)發(fā)的注重安全、性能和并發(fā)性的編程語(yǔ)言。
- Elixir:Elixir 是一種函數(shù)式編程語(yǔ)言,建立在Erlang虛擬機(jī)之上。它是一種動(dòng)態(tài)語(yǔ)言,靈活的語(yǔ)法與宏支持,利用Erlang的能力來(lái)構(gòu)建并發(fā)、分布式、容錯(cuò)應(yīng)用程序與熱代碼升級(jí)。
數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)(Database)是按照數(shù)據(jù)結(jié)構(gòu)來(lái)組織、存儲(chǔ)和管理數(shù)據(jù)的倉(cāng)庫(kù)。
- MySQL:MySQL是一種關(guān)聯(lián)數(shù)據(jù)庫(kù)管理系統(tǒng),關(guān)聯(lián)數(shù)據(jù)庫(kù)將數(shù)據(jù)保存在不同的表中,而不是將所有數(shù)據(jù)放在一個(gè)大倉(cāng)庫(kù)內(nèi),這樣就增加了速度并提高了靈活性。
- MariaDB:MariaDB數(shù)據(jù)庫(kù)管理系統(tǒng)是MySQL的一個(gè)分支,主要由開(kāi)源社區(qū)在維護(hù),采用GPL授權(quán)許可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能輕松成為MySQL的代替品。
- MongoDB:MongoDB 教程 MongoDB 是一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫(kù)。由 C++ 語(yǔ)言編寫(xiě)。旨在為 WEB 應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲(chǔ)解決方案。
- Redis:Redis是一個(gè)開(kāi)源的使用ANSI C語(yǔ)言編寫(xiě)、支持網(wǎng)絡(luò)、可基于內(nèi)存亦可持久化的日志型、Key-Value數(shù)據(jù)庫(kù),并提供多種語(yǔ)言的API。
- PostgreSQL:ostgreSQL支持大部分 SQL標(biāo)準(zhǔn)并且提供了許多其他現(xiàn)代特性:復(fù)雜查詢(xún)、外鍵、觸發(fā)器、視圖、事務(wù)完整性、MVCC。
CSS 預(yù)處理器
CSS 預(yù)處理器定義了一種新的語(yǔ)言,其基本思想是,用一種專(zhuān)門(mén)的編程語(yǔ)言,為 CSS 增加了一些編程的特性,將 CSS 作為目標(biāo)生成文件,然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。
通俗的說(shuō),“CSS 預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言,進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì),然后再編譯成正常的 CSS 文件,以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性,無(wú)需考慮瀏覽器的兼容性問(wèn)題”,例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等等在編程語(yǔ)言中的一些基本特性,可以讓你的 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳,更易于代碼的維護(hù)等諸多好處。例如:Sass,Less,Stylus。
- Sass: Sass是一種CSS的開(kāi)發(fā)工具,提供了許多便利的寫(xiě)法,大大節(jié)省了設(shè)計(jì)者的時(shí)間,使得CSS的開(kāi)發(fā),變得簡(jiǎn)單和可維護(hù)。
- Less:Lesscss是一種動(dòng)態(tài)樣式語(yǔ)言,屬于CSS預(yù)處理語(yǔ)言的一種,它使用類(lèi)似CSS的語(yǔ)法,為CSS的賦予了動(dòng)態(tài)語(yǔ)言的特性,如變量、繼承、運(yùn)算、函數(shù)等,更方便CSS的編寫(xiě)和維護(hù)。
- Stylus:Stylus 是一個(gè)CSS的預(yù)處理框架,2010年產(chǎn)生,來(lái)自Node.js社區(qū),主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持,所以Stylus 是一種新型語(yǔ)言,可以創(chuàng)建健壯的、動(dòng)態(tài)的、富有表現(xiàn)力的CSS。
如果你是剛剛開(kāi)始使用CSS的預(yù)處理器,你可能要先使用第三方編譯器進(jìn)行開(kāi)發(fā),如下所示。
文本編輯器 / 代碼編輯器
無(wú)論你是做筆記,敲代碼,或者M(jìn)arkdown文檔編寫(xiě),一個(gè)好的文本編輯器都是必須擁有的!
- Atom:Atom 更為先進(jìn)的文本代碼編輯器 - 由 Github 打造的下一代編程開(kāi)發(fā)利器在代碼編輯器、文本編輯器領(lǐng)域,有著不少的「神器」級(jí)的產(chǎn)品。
- Sublime Text:Sublime Text 是一個(gè)代碼編輯器(Sublime Text 2和3是收費(fèi)軟件,但可以無(wú)限期試用),也是HTML和散文先進(jìn)的文本編輯器。
- Notepad++:Notepad++是 Windows操作系統(tǒng)下的一套文本編輯器(軟件版權(quán)許可證: GPL),有完整的中文化接口及支持多國(guó)語(yǔ)言編寫(xiě)的功能。
- Visual Studio Code :微軟推出,一個(gè)運(yùn)行于 Mac OS X、Windows和 Linux 之上的,針對(duì)于編寫(xiě)現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)源代碼編輯器。
- TextMate:TextMate是Mac下的著名的文本編輯器軟件,與BBedit一起并稱(chēng)蘋(píng)果機(jī)上的emacs和vim。
- Coda 2: OS X下快速,簡(jiǎn)潔,功能強(qiáng)大的編輯器【需要付費(fèi)】.
- WebStorm:jetbrains公司旗下一款JavaScript 開(kāi)發(fā)工具。被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。
- Vim:Vim是一個(gè)類(lèi)似于Vi的著名的功能強(qiáng)大、高度可定制的文本編輯器,在Vi的基礎(chǔ)上改進(jìn)和增加了很多特性。
- Brackets:Brackets 是一個(gè)免費(fèi)、開(kāi)源且跨平臺(tái)的 HTML/CSS/JavaScript 前端 WEB 集成開(kāi)發(fā)環(huán)境 (IDE工具)。
- Emacs:著名的集成開(kāi)發(fā)環(huán)境和文本編輯器。Emacs被公認(rèn)為是最受專(zhuān)業(yè)程序員喜愛(ài)的代碼編輯器之一。
Markdown 編輯器
Markdown 是一種輕量級(jí)的「標(biāo)記語(yǔ)言」,它的優(yōu)點(diǎn)很多,目前也被越來(lái)越多的寫(xiě)作愛(ài)好者,撰稿者廣泛使用。
Markdown 十分輕量,學(xué)習(xí)成本也不高。
- MWeb:專(zhuān)業(yè)的 Markdown 寫(xiě)作、記筆記、靜態(tài)博客生成軟件 【付費(fèi)】
- Markeditor:MarkEditor 是最新的一款 Markdown 編輯器,除了基本功能外,還包含了諸如表格編輯、圖表、高亮、公式等等豐富的功能!【付費(fèi)】
- StackEdit:一個(gè)開(kāi)放源碼免費(fèi)使用的 MarkDown 編輯器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 網(wǎng)站的 MarkDown 庫(kù)
- Dillinger:Dillinger 是一款在線(xiàn)的 Markdown 編輯器,支持更換主題,字?jǐn)?shù)統(tǒng)計(jì),云服務(wù)保存,導(dǎo)出 HTML、PDF 等功能。
- Mou: Mac OS X下的免費(fèi)Markdown編輯器【作者貌似已經(jīng)跑路了】
- Texts:Windows和Mac OS X下純文本編輯器。
表示有些付費(fèi)的Markdown編輯器寶寶買(mǎi)不起。
icon圖標(biāo)
幾乎每一個(gè)Web開(kāi)發(fā)者,尤其是前端開(kāi)發(fā)人員都會(huì)需要icon圖標(biāo)來(lái)增色項(xiàng)目。
- Font Awesome:Font Awesome為您提供可縮放的矢量圖標(biāo),您可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改,包括:大小、顏色、陰影或者其它任何支持的效果。
- IconMonster:免費(fèi),高質(zhì)量, 龐大且資源不斷增長(zhǎng)的簡(jiǎn)潔的icon圖標(biāo)庫(kù)。
- IconFinder:Iconfinder提供美麗的圖標(biāo),服務(wù)數(shù)以百萬(wàn)計(jì)的設(shè)計(jì)師,開(kāi)發(fā)商和其他有創(chuàng)意的專(zhuān)業(yè)人員。
- Fontello:一個(gè)目測(cè)有200+個(gè)圖標(biāo)(數(shù)量還在增加)的 Web-font 圖標(biāo)市場(chǎng),對(duì)于廣大設(shè)計(jì)師、前端開(kāi)發(fā)者來(lái)說(shuō)是很棒的資源。
- 阿里媽媽矢量圖標(biāo)庫(kù) :Iconfont.cn是由阿里巴巴UX部門(mén)推出的矢量圖標(biāo)管理網(wǎng)站,也是國(guó)內(nèi)首家推廣Webfont形式圖標(biāo)的平臺(tái)。網(wǎng)站涵蓋了1000多個(gè)常用圖標(biāo)并還在持續(xù)更新中
Git 代理 / 服務(wù)
Git是一款免費(fèi)、開(kāi)源的分布式版本控制系統(tǒng),用于敏捷高效地處理任何或小或大的項(xiàng)目。Git是一個(gè)開(kāi)源的分布式版本控制系統(tǒng),可以有效、高速的處理從很小到非常大的項(xiàng)目版本管。Git 是 Linus Torvalds 為了幫助管理 Linux 內(nèi)核開(kāi)發(fā)而開(kāi)發(fā)的一個(gè)開(kāi)放源碼的版本控制軟件。
- SourceTree:SourceTree 是 Windows 和Mac OS X 下免費(fèi)的 Git 和 Hg 客戶(hù)端。支持創(chuàng)建、克隆、提交、push、pull 和合并等操作。
- GitKraken (Beta):一款自由、直觀(guān)、快捷、美觀(guān)的跨平臺(tái)Git客戶(hù)端。
- Tower 2:一款美麗,高效,強(qiáng)大的Git管理,讓Git版本控制變得容易。
- GitHub Client:有助于無(wú)縫連接GitHub和GitHub的企業(yè)的項(xiàng)目。
- Gogs:Gogs (Go Git Service) 是一款極易搭建的自助 Git 服務(wù)。 開(kāi)發(fā)目的 Gogs 的目標(biāo)是打造一個(gè)最簡(jiǎn)單、最快速和最輕松的方式搭建自助 Git 服務(wù)。
- GitLab: GitLab是利用 Ruby on Rails 一個(gè)開(kāi)源的版本管理系統(tǒng),實(shí)現(xiàn)一個(gè)自托管的Git項(xiàng)目倉(cāng)庫(kù),可通過(guò)Web界面進(jìn)行訪(fǎng)問(wèn)公開(kāi)的或者私人項(xiàng)目。
- Coding:Coding 的代碼托管功能除了基本的 Git 倉(cāng)庫(kù)以外,還有保護(hù)分支,分屏對(duì)比, Code Review 等高級(jí)功能。并且整合了 Pages 服務(wù),質(zhì)量管理,演示平臺(tái)等開(kāi)發(fā)工具,提升研發(fā)效率。
本地開(kāi)發(fā)環(huán)境搭建
根據(jù)您運(yùn)行的是什么操作系統(tǒng)和計(jì)算機(jī)配置,有時(shí)候進(jìn)行測(cè)試的時(shí)候就有可能需要搭建一個(gè)快速的本地開(kāi)發(fā)環(huán)境。自己搭建很是蠻煩,不用擔(dān)心,有很多將Apache,Nginx,MySQL和phpMyAdmin進(jìn)行打包一體化的軟件。這些軟件很是方便我們來(lái)進(jìn)行本地測(cè)試。
- XAMPP:XAMPP(Apache+MySQL+PHP+PERL)是一個(gè)功能強(qiáng)大的建站集成軟件包。
- MAMP PRO:MAMPPro for mac是Mac OS平臺(tái)搭建本地服務(wù)器環(huán)境的組合軟件套裝,包含 Macintosh、Apache、MySQL和PHP 四大開(kāi)發(fā)環(huán)境。
- WampServer:Wamp就是Windows Apache Mysql PHP集成安裝環(huán)境,即在window下的apache、php和mysql的服務(wù)器軟件。
- Vagrant:Vagrant是一個(gè)基于Ruby的工具,用于創(chuàng)建和部署虛擬化開(kāi)發(fā)環(huán)境。它 使用Oracle的開(kāi)源VirtualBox虛擬化系統(tǒng),使用 Chef創(chuàng)建自動(dòng)化虛擬環(huán)境。
- Laragon:Laragon工具就是Laravel的一鍵安裝工具吧,還集成了一整套wamp工具,除去Laravel安裝外,它也是一款不錯(cuò)的wamp工具,干凈簡(jiǎn)單,便捷迅速。Diff Checkers
- Wnmp:WNMP是Windows下便捷,安全的Nginx+MariaDB+PHP開(kāi)發(fā)環(huán)境環(huán)境集成套件包。
文本對(duì)比檢查
Diff checkers 可以幫助您比較文件之間的差異,然后合并更改。幫助我們更直觀(guān)的看見(jiàn)文本之間的差異。
- Diffchecker:Diffchecker 是一款非常好用的在線(xiàn)文本對(duì)比工具,能夠高亮顯示有差異的行和字符。Diffchecker 提供了文件上傳對(duì)比功能,還可以選擇對(duì)比的存儲(chǔ)時(shí)間。
- Beyond Compare:Beyond Compare是一套由Scooter Software推出的軟件,主要用途是對(duì)比兩個(gè)文件夾或者文件,并將差異以顏色標(biāo)示。
當(dāng)然有很多免費(fèi)的文本編輯器,包括我們上面提到的也有插件和擴(kuò)展,可以協(xié)助開(kāi)發(fā)者方便的進(jìn)行文件比較。
代碼共享 / 代碼測(cè)試
前端開(kāi)發(fā)者在公司內(nèi)或者團(tuán)體間需要進(jìn)行協(xié)作,共享代碼,那么一下工具很值得開(kāi)發(fā)者一試。
- JS Bin:JSBin能夠讓你編輯和測(cè)試JavaScript和HTML代碼。你還可以將編輯后的代碼保存到本地,或?qū)RL地址發(fā)給其他人,讓其協(xié)助調(diào)試代碼。
- JSfiddle:jsFiddle是一個(gè)在線(xiàn)的shell編輯器,通過(guò)流行的JS框架創(chuàng)建自定義的環(huán)境,以簡(jiǎn)化JS代碼??梢杂糜跍y(cè)試示例代碼。
- codeshare:與其他開(kāi)發(fā)者實(shí)時(shí)共享代碼。
- Dabblet:Dabblet是一個(gè)開(kāi)源互動(dòng)測(cè)試工具,用于測(cè)試CSS和HTML。Dabblet支持實(shí)時(shí)更新、匿名備份、嵌入網(wǎng)站、與他人共享或者存儲(chǔ)到GitHub。
協(xié)作工具
每一個(gè)很棒的開(kāi)發(fā)團(tuán)隊(duì)需要一種方式來(lái)保持聯(lián)系,協(xié)作,來(lái)幫助提高生產(chǎn)力。
- Slack:Slack 是聊天群組 + 大規(guī)模工具集成 + 文件整合 + 統(tǒng)一搜索。
- Trello:Trello的目標(biāo)是提供簡(jiǎn)潔清晰的團(tuán)隊(duì)協(xié)作工具。不過(guò)彌縫在這里將介紹如果將Trello用來(lái)建立自己的時(shí)間管理系統(tǒng)。
- Glip:Glip:在線(xiàn)團(tuán)隊(duì)辦公協(xié)作平臺(tái)是一個(gè)類(lèi)似于Slack網(wǎng)站的網(wǎng)絡(luò)辦公集合體,內(nèi)置了郵箱、網(wǎng)盤(pán)、即時(shí)通訊應(yīng)用、協(xié)作服務(wù)等,把所有和網(wǎng)絡(luò)辦公有關(guān)的服務(wù)和工具都整合在了一起。
- Asana:Asana是一款團(tuán)隊(duì)任務(wù)管理軟件 方便人們?nèi)ブ贫ê透檲F(tuán)隊(duì)的項(xiàng)目任務(wù)的完成情況
- Jira:JIRA是Atlassian公司出品的項(xiàng)目與事務(wù)跟蹤工具,被廣泛應(yīng)用于缺陷跟蹤、客戶(hù)服務(wù)、需求收集、流程審批、任務(wù)跟蹤、項(xiàng)目跟蹤和敏捷管理等工作領(lǐng)域。
靈感創(chuàng)意
當(dāng)我們進(jìn)行開(kāi)發(fā)時(shí),偶爾迸發(fā)的靈感會(huì)使我們的項(xiàng)目或者產(chǎn)品增色不少。當(dāng)然不僅僅依靠自我的靈感,我們也需要從別人的作品中得到靈感來(lái)保證我們的Web設(shè)計(jì)界面或者產(chǎn)品不落后這個(gè)時(shí)代。
- CodePen:全球web前端開(kāi)發(fā)人員的圣地!可以展示個(gè)人的創(chuàng)意和建立一個(gè)測(cè)試實(shí)例來(lái)解決bug。 來(lái)尋找你的項(xiàng)目設(shè)計(jì)方式和靈感吧。
- Dribble:Dribbble是一個(gè)面向創(chuàng)作家、藝術(shù)工作者、設(shè)計(jì)師等創(chuàng)意類(lèi)作品的人群,提供作品在線(xiàn)服務(wù),供網(wǎng)友在線(xiàn)查看已經(jīng)完成的作品或者正在創(chuàng)作的作品的交流網(wǎng)站。
網(wǎng)站測(cè)速工具
網(wǎng)站的速度是用戶(hù)體驗(yàn)關(guān)鍵因素。網(wǎng)站速度快與慢決定是否能更高的搜索引擎排名,更高的轉(zhuǎn)換率,更低的跳出率,以及更好的整體用戶(hù)體驗(yàn)和。值得高興的是很多免費(fèi)軟件可以用于測(cè)試網(wǎng)站速度,幫助我們找出加載緩慢的問(wèn)題,方便我們?nèi)ソ鉀Q。
- Google PageSpeed Insights:PageSpeed Insights是一款可以分析網(wǎng)頁(yè)速度瓶頸,讓網(wǎng)頁(yè)設(shè)計(jì)人員開(kāi)發(fā)出速度更快的網(wǎng)站的谷歌瀏覽器插件。
- Google Chrome DevTools:Chrome DevTools 是公認(rèn)的優(yōu)秀的前端調(diào)試工具,功能強(qiáng)大,使用起來(lái)有一定的學(xué)習(xí)門(mén)檻,
- WebPageTest:WebPagetest是一款Web應(yīng)用程序,它將一個(gè)URL以及一系列配置參數(shù)作為輸入,并對(duì)那個(gè)URL運(yùn)行性能測(cè)試。
- Pingdom:pingdom全面的網(wǎng)站監(jiān)測(cè)服務(wù)網(wǎng)站,可測(cè)速和ping跟蹤路由,可以免費(fèi)監(jiān)測(cè)1個(gè)站點(diǎn),最短1分鐘監(jiān)測(cè)一次。
- GTmetrix:主要優(yōu)點(diǎn)在于提供了豐富的詳細(xì)的測(cè)量結(jié)果,并建議如何來(lái)優(yōu)化網(wǎng)頁(yè)中每個(gè)元素的,最重要的是會(huì)根據(jù)網(wǎng)站的具體情況,直接告訴你導(dǎo)致網(wǎng)站加載速度變慢的根源在哪里
Web開(kāi)發(fā)社區(qū)
當(dāng)開(kāi)發(fā)者在開(kāi)發(fā)的過(guò)程中有遇到問(wèn)題時(shí),除了詢(xún)問(wèn)他人以外,還可以使用搜索引擎搜索。社區(qū)的重要性就顯而易見(jiàn)了,大部分開(kāi)發(fā)者會(huì)在開(kāi)發(fā)社區(qū)分享他們經(jīng)驗(yàn),如何避過(guò)不必要踩的坑。
國(guó)內(nèi):
- 谷歌開(kāi)發(fā)者社區(qū)(GDG):開(kāi)放 · 分享 · 創(chuàng)新
- segmentfault:是中國(guó)領(lǐng)先的開(kāi)發(fā)者技術(shù)社區(qū)。 為編程愛(ài)好者提供一個(gè)純粹、高質(zhì)的技術(shù)交流的平臺(tái), 與開(kāi)發(fā)者一起學(xué)習(xí)、交流與成長(zhǎng)。【老實(shí)話(huà)我覺(jué)得這名字不好記】
- 全棧社區(qū):中國(guó)最大的全棧開(kāi)發(fā)者社區(qū),致力于打造一個(gè)問(wèn)題解答,技術(shù)文章分享,全棧人員創(chuàng)業(yè)的服務(wù)平臺(tái),讓開(kāi)發(fā)更容易,讓創(chuàng)業(yè)更簡(jiǎn)單.
- 稀土區(qū):專(zhuān)注開(kāi)發(fā)設(shè)計(jì)資源分享,UI模板資源,ICONS資源,HTML模板資源等等.......
國(guó)外:
- Stack Overflow:Stack Overflow是一個(gè)與程序相關(guān)的IT技術(shù)問(wèn)答網(wǎng)站。用戶(hù)可以在網(wǎng)站免費(fèi)提交問(wèn)題,瀏覽問(wèn)題,索引相關(guān)內(nèi)容,在創(chuàng)建主頁(yè)的時(shí)候使用簡(jiǎn)單的HTML。
- Front-end Front:在Front-end Front,前端開(kāi)發(fā)者可以提出問(wèn)題,分享有趣的鏈接,并展示他們的項(xiàng)目作品。
- Hashnode:Hashnode是開(kāi)發(fā)者討論技術(shù)問(wèn)題,分享解決方案,與世界各地的開(kāi)發(fā)者共享資源的聚集地。
- Refind:有著開(kāi)發(fā)者, 黑客, 設(shè)計(jì)師收集和分享最好的資源的社區(qū)。
- Google+ Web Developers Group:Web 開(kāi)發(fā)者,Web設(shè)計(jì)師和Web開(kāi)發(fā).
- Google+ Web Developers Group:Java, PHP, Ruby, JavaScript and Python 資源。
- Facebook WordPress Front-end Developers Group:WordPress 前端開(kāi)發(fā)者的分享社區(qū),可以提問(wèn)題,分享開(kāi)發(fā)者的項(xiàng)目作品,還有討論WP未來(lái)發(fā)展趨勢(shì)。
- LinkedIn Web Design and Development Professionals Group:與專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)師,網(wǎng)頁(yè)開(kāi)發(fā)者共享Web開(kāi)發(fā)資源
- LinkedIn Web Site Development Group: 網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)。
- LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
- LinkedIn WordPress Developers Group: WordPress 開(kāi)發(fā). 使用WP來(lái)創(chuàng)建CMS和CMF.
- Webdeveloper.com:幫助Web開(kāi)發(fā)者和設(shè)計(jì)師學(xué)習(xí)使用HTML,java和javascript開(kāi)發(fā)網(wǎng)站。
- Sitepoint Forums: Web開(kāi)發(fā)者論壇。
- /r/perfmatters: 討論關(guān)于 web 性能
- /r/webdev: 關(guān)于Web開(kāi)發(fā)和開(kāi)發(fā)者的新聞
Web開(kāi)發(fā)新聞聚合閱讀開(kāi)發(fā)和設(shè)計(jì)的技術(shù)干貨,及時(shí)的知道技術(shù)圈內(nèi)更新了什么,保持信息流新鮮,有助于我們更好的開(kāi)發(fā)!
國(guó)內(nèi):
- 掘金:掘金是中國(guó)質(zhì)量最高的技術(shù)分享社區(qū),邀請(qǐng)稀土用戶(hù)作為Co-Editor 來(lái)分享優(yōu)質(zhì)的技術(shù)干貨,從前端到后端開(kāi)發(fā),從設(shè)計(jì)到產(chǎn)品,讓每一個(gè)掘金用戶(hù)都能挖掘到有價(jià)值的干貨。
- 開(kāi)發(fā)者頭條:一個(gè)以程序員為中心,基于學(xué)習(xí)和分享的開(kāi)發(fā)者社區(qū)。你可以閱讀頭條新聞、分享技術(shù)文章、發(fā)布開(kāi)源項(xiàng)目,訂閱技術(shù)極客們創(chuàng)建的學(xué)習(xí)主題和關(guān)注編程牛人。
- 極客頭條:技術(shù)文章聚合站點(diǎn),目測(cè)現(xiàn)在運(yùn)營(yíng)力度減弱。
- 推酷:以技術(shù)為驅(qū)動(dòng),以聚合挖掘?yàn)楹诵?,打造個(gè)性推薦和訂閱,給你一站式的閱讀。 更匯聚優(yōu)質(zhì)公開(kāi)課和線(xiàn)下活動(dòng),讓信息知識(shí)獲取更便捷。
國(guó)外:
- wdrl.info:精心挑選的Web開(kāi)發(fā)相關(guān)資源,每星期進(jìn)行整合報(bào)道。
- webopsweekly.com: 每周進(jìn)行報(bào)道關(guān)于網(wǎng)絡(luò)運(yùn)營(yíng),應(yīng)用部署,網(wǎng)站性能和工具分享類(lèi)的文章。
- web tools weekly:專(zhuān)注于前端開(kāi)發(fā)和網(wǎng)頁(yè)設(shè)計(jì)工具分享。每一個(gè)問(wèn)題都有一個(gè)簡(jiǎn)短的提示或教程,另外每周都會(huì)分享的各種應(yīng)用程序、腳本、插件和其他有用的資源。
- freshbrewed.co:每周為前端開(kāi)發(fā)者和設(shè)計(jì)師提供開(kāi)發(fā)和設(shè)計(jì)類(lèi)的閱讀摘要。
- smashingmagazine.com: Smashing Magazine是一款專(zhuān)門(mén)為個(gè)人前端開(kāi)發(fā)者和設(shè)計(jì)師提供的在線(xiàn)報(bào)紙,每周二都會(huì)定時(shí)的更新有用的資源。
- front-end dev weekly: 每周為前端開(kāi)發(fā)者提供新聞, 包含工具資源,還有靈感。
- friday front-end:郵件訂閱,每日為前端開(kāi)發(fā)者發(fā)關(guān)于開(kāi)發(fā)資源的郵件。
- /dev tips: 收集開(kāi)發(fā)者的問(wèn)題和建議, 用gif呈現(xiàn),會(huì)每周發(fā)郵件通知。
當(dāng)然, 你也可以關(guān)注稀土區(qū),來(lái)找到你需要的文章,順便解決你的問(wèn)題。
備注
如你所見(jiàn),有數(shù)以百計(jì)的網(wǎng)絡(luò)開(kāi)發(fā)工具和資源,可以幫助簡(jiǎn)化你的開(kāi)發(fā)工作流程,幫助開(kāi)發(fā)更高效。我們無(wú)法一一列出所有工具或資源,如果有重要的工具或資源有遺漏,那就要麻煩小伙伴們?cè)谙旅娴脑u(píng)論里進(jìn)行補(bǔ)充,謝謝!
文章是樓主搬來(lái)的找了好久找到了資源 這是地址:100+ 超全的web開(kāi)發(fā)工具和資源
想要學(xué)習(xí)前端看免費(fèi)的直播課程的加一下這個(gè)群
https://jq.qq.com/?_wv=1027&k=45vs1z3里面有很多資源和干貨加群找群主要就好了這是2群了。
發(fā)布于 15:32
二〇一六年的前端入門(mén)指南
JavaScript is supposed to be easy and powerful, for all of us.
年初在 V2EX 看到很多人發(fā)帖問(wèn)前端如何入門(mén),我姑且來(lái)分享一下我的經(jīng)驗(yàn)。
或許你不知道我是誰(shuí),不過(guò)如果你對(duì)前端有興趣,都可以聯(lián)系我?guī)湍?Review 代碼、提供改進(jìn)建議,這有我的 GitHub 地址。
我假設(shè)閱讀者只了解過(guò)簡(jiǎn)單的 HTML/CSS。
HTML
HTML 沒(méi)有了 CSS 就什么都不是,它相當(dāng)于給網(wǎng)頁(yè)各個(gè)區(qū)域命名,然后讓你可以進(jìn)行更多的操作。比如頭部導(dǎo)航欄,你經(jīng)常會(huì)給它起個(gè)名字叫 header。
CSS
CSS 是層疊樣式表(Cascading Style Sheets)的縮寫(xiě),它是用來(lái)定義你的 HTML 的展現(xiàn)形式的一種語(yǔ)言。比如讓你的 HTML 里的文字顯示不同字體,一個(gè)元素顯示不同的高度。
HTML+CSS
HTML 和 CSS 都是語(yǔ)法非常松散的語(yǔ)言,這樣的導(dǎo)致了它們?nèi)腴T(mén)非常簡(jiǎn)單,然而一旦代碼量變大維護(hù)就會(huì)很困難。
模板引擎
假設(shè)你有兩個(gè)網(wǎng)頁(yè),它們共用一個(gè)導(dǎo)航欄(header),然后只有主體(content)部分顯示不同的內(nèi)容,在已有知識(shí)背景下你只能做兩個(gè)網(wǎng)頁(yè),把導(dǎo)航欄的代碼復(fù)制兩次。
于是有了模板引擎,比如 jade,他可以讓你復(fù)用重復(fù)的模板,減少代碼量,提高可維護(hù)性。
CSS 處理器
看下面這段代碼:
.post { font-size: 14px; -webkit-box-shadow: 0 0 1px #ccc; -moz-box-shadow: 0 0 1px #ccc; box-shadow: 0 0 1px #ccc;}.post .post-content { font-size: 16px;}.post .post-content .post-date { color: #999;}
你會(huì)發(fā)現(xiàn)上面的 box-shadow 寫(xiě)了三次,以便支持不同內(nèi)核瀏覽器下的 box-shadow 這個(gè)屬性。
還有隨著代碼量增大像 .post .post-content .post-date 這樣長(zhǎng)的定義會(huì)越來(lái)越長(zhǎng)。
這是有了 CSS 處理器之后的代碼:
.post { font-size: 14px; box-shadow: 0 0 1px #ccc; .content { font-size: 16px; .date { color: #999; } }}
嵌套的風(fēng)格讓作用域更清晰,你同時(shí)可以盡可能地只用標(biāo)準(zhǔn)的 CSS 屬性然后讓 CSS 處理器幫你兼容其它瀏覽器。推薦使用 PostCSS,它本身并不改變你的 CSS 代碼,但它把你的代碼抽象成一個(gè) JavaScript 對(duì)象讓你能夠通過(guò)插件來(lái)隨心所欲地進(jìn)行操作,比如實(shí)現(xiàn)嵌套風(fēng)格以及自動(dòng)加 -moz -webkit 這些前綴。你可以自己寫(xiě)插件同時(shí)它已經(jīng)有大量現(xiàn)成的插件供你使用。
要記住的是,它只是將你自定義的 CSS 風(fēng)格轉(zhuǎn)換成符合瀏覽器標(biāo)準(zhǔn)的 CSS,至于為什么?標(biāo)準(zhǔn)的 CSS 不夠好用唄,比如剛才遇到的問(wèn)題。
HTML+CSS 小結(jié)
現(xiàn)在你知道了 HTML/CSS 在一起使用的時(shí)候能干什么,也知道了用模板引擎、CSS 處理器可以讓你更好地寫(xiě) HTML/CSS。要記住,「更好」也許只是在代碼量增大的情況下更明顯。
那么這些模板引擎和 CSS 處理器是怎么實(shí)現(xiàn)的?很多都是用的 JavaScript。
推薦閱讀: Learn to Code HTML & CSS 正如其松散的特性一樣,你需要多使用才能更好地掌握用法。
JavaScript
JavaScript 是一門(mén)真正的語(yǔ)言,它簡(jiǎn)單且強(qiáng)大。(以下簡(jiǎn)稱(chēng) JS)
正如 HTML/CSS 是用于網(wǎng)頁(yè)的樣式呈現(xiàn),JS (在過(guò)去)則是用于網(wǎng)頁(yè)的交互操作上,比如用戶(hù)點(diǎn)擊了一個(gè)按鈕然后彈出一個(gè)框,這些需要 JS 完成。
JS 本身并不具有「監(jiān)聽(tīng)用戶(hù)點(diǎn)擊」這一功能,在瀏覽器上,現(xiàn)代瀏覽器都內(nèi)置了網(wǎng)頁(yè) DOM API,它提供了一套 JS 接口,讓你可以用 JS 調(diào)用來(lái)實(shí)現(xiàn)相應(yīng)功能,而這些功能本身是基于更低級(jí)的 C/C++ 語(yǔ)言實(shí)現(xiàn)的。
因此,一名及格的前端需要掌握 JS 的基礎(chǔ),比如變量、數(shù)組、函數(shù)這些幾乎所有語(yǔ)言都有的特性,然后就是 DOM API,缺了這個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)交互就是紙上談兵。
推薦閱讀: MDN Web API 非常全,需要更漸進(jìn)的指南建議 Google。
至于學(xué)習(xí) JS 這門(mén)語(yǔ)言,推薦三本眾所周知的,你并不需要全部都看,挑一本或兩本盡量搞清楚就行了:
JavaScript 權(quán)威指南JavaScript 高級(jí)程序設(shè)計(jì)JavaScript 語(yǔ)言精粹
Node.js
剛才說(shuō)過(guò),過(guò)去的 JS 就是 JS 本身加上瀏覽器的 DOM API,于是就有人想到了:能不能把瀏覽器 DOM API 換成用戶(hù)操作系統(tǒng)的 API?這樣 JS 看起來(lái)就更像一門(mén)「真正的語(yǔ)言」,即可以在用戶(hù)本地環(huán)境而不只是在瀏覽器中運(yùn)行。
幸好,谷歌瀏覽器(Chrome)使用的 JavaScript 運(yùn)行環(huán)境(v8)發(fā)展到近幾年已經(jīng)能非常快地將 JS 代碼轉(zhuǎn)為機(jī)器碼,于是 Node.js 的先驅(qū)們就成立了這個(gè)組織,基于 Chrome v8 引擎實(shí)現(xiàn)了一個(gè)跨平臺(tái) JavaScript 運(yùn)行環(huán)境 —— 即現(xiàn)在非常流行的 Node.js。
這樣的感覺(jué)是不是很好? JavaScript 開(kāi)發(fā)者的工具也能用 JavaScript 開(kāi)發(fā)了!這才是副標(biāo)題里描述的「easy and powerful」的前提。
如何學(xué)習(xí) Node.js
大同小異,如果你在之前知道了如何學(xué)習(xí) JavaScript。無(wú)非是 JS 本身加上 Node.js 提供的 API 而已。你可以直接打開(kāi) Node.js 官網(wǎng)查看其 API。
Node.js 只是一個(gè)運(yùn)行環(huán)境,類(lèi)似于 Java 的 JVM,最重要的還是 JavaScript 本身。
ES6
很大的可能你現(xiàn)在都是在用 ES5 標(biāo)準(zhǔn)的 JavaScript 語(yǔ)法,而 ES6 則是 TC39(負(fù)責(zé)制定 JavaScript 語(yǔ)言標(biāo)準(zhǔn)的機(jī)構(gòu)) 在 2015 年新推出的語(yǔ)言標(biāo)準(zhǔn)。
為什么我要學(xué)新的 ES6 標(biāo)準(zhǔn)?
- 你不必。因?yàn)?ES6 及以后的任何一個(gè)新的 JS 標(biāo)準(zhǔn)都是向后兼容的,也就是說(shuō)任何你現(xiàn)在寫(xiě)的代碼也是符合未來(lái)版本的 JS 的標(biāo)準(zhǔn)的。
- 為什么不?試試又不會(huì)懷孕,而且你會(huì)有眼前一亮的感覺(jué)。任何語(yǔ)言都是在進(jìn)化的,特別是前端發(fā)展那么快。
- 轉(zhuǎn)載:二〇一六年的前端入門(mén)指南
- 想入門(mén)前端看免費(fèi)直播課程的加一下群
HTML前端學(xué)習(xí)
- 里面有免費(fèi)的學(xué)習(xí)資料和免費(fèi)的直播課程