前端框架

框架

面向?qū)ο螅?/h2>

面向?qū)ο笫且环N程序開發(fā)的方法,它將對象作為程序的基本單元,將程序和數(shù)據(jù)封裝其中,以提高軟件的靈活性、重用性和擴(kuò)展性。對象是把數(shù)據(jù)及對數(shù)據(jù)的操作方法放在一起,作為一個相互依存的整體。再說一下類與對象,類描述了一組有相同特性和相同行為的對象,具有相同屬性和相同方法的對象的抽象就是類。即,對象的抽象是類,類的實例是對象。在面向?qū)ο蟮木幊讨?,把用類?chuàng)建對象的過程稱為實例化。

面向過程與面向?qū)ο蟮膮^(qū)別

面向過程是一種直接的編程方法,它是按照編程語言的思路考慮問題。通過順序執(zhí)行一組語句來實現(xiàn)一個功能,這些語句的執(zhí)行過程就是整個程序。

面向?qū)ο笫且环N抽象度更高的編程方法。它的目標(biāo)是使模塊的抽象度更高,目的是可復(fù)用。面向?qū)ο笕筇匦裕悍庋b,繼承,多態(tài)。

面向過程可以說是從細(xì)節(jié)方面思考問題

面向?qū)ο罂梢哉f是從宏觀方面思考問題

對象的創(chuàng)建方式有對象字面量,工廠方式,原型方式,構(gòu)造函數(shù),混合模式。

原型,原型鏈:

我們創(chuàng)建的每個函數(shù)都有一個prototype屬性,這個屬性是一個指針,指向一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。那么,prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象。

使用原型的好處是可以讓對象實例共享它所包含的屬性和方法。也就是說,不必在構(gòu)造函數(shù)中添加定義對象信息,而是可以直接將這些信息添加到原型中。使用構(gòu)造函數(shù)的主要問題就是每個方法都要在每個實例中創(chuàng)建一遍。

在JavaScript中,一共有兩種類型的值,原始值和對象值。每個對象都有一個內(nèi)部屬性 prototype ,我們通常稱之為原型。原型的值可以是一個對象,也可以是null。如果它的值是一個對象,則這個對象也一定有自己的原型。這樣就形成了一條線性的鏈,我們稱之為原型鏈。

簡單的說就是在JavaScript 中,每當(dāng)定義一個對象(函數(shù))時候,對象中都會包含一些預(yù)定義的屬性。其中函數(shù)對象的一個屬性就是原型對象 prototype。JS在創(chuàng)建對象(不論是普通對象還是函數(shù)對象)的時候,都有一個叫做proto的內(nèi)置屬性,用于指向創(chuàng)建它的函數(shù)對象的原型對象prototype,我們把這個有proto串起來的直到Object.prototype.proto為null的鏈叫做原型鏈

angularjs:

angular是谷歌開發(fā)的一款js框架,最核心的機(jī)制之一是數(shù)據(jù)雙向綁定,利用臟檢查機(jī)制,原理是Angular 在 scope 模型上設(shè)置了一個 監(jiān)聽隊列,用來監(jiān)聽數(shù)據(jù)變化并更新 view 。每次綁定一個東西到 view 上時 AngularJS 就會往 watch 隊列里插入一條watch ,用來檢測它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時,digest 循環(huán)就會觸發(fā),遍歷所有的watch ,最后更新 dom。Angular還提供了很多服務(wù)供我們使用(可簡單回答下題服務(wù)),另外利用依賴注入在控制器中使用,說到依賴注入它是一種軟件設(shè)計模式,目的是處理代碼之間的依賴關(guān)系,減少組件間的耦合。Angular里面還有過濾器,例如orderby,filter等幫助我們變換輸出形式,它還提供了自定義過濾器,根據(jù)過濾器參數(shù)的不同我們可以根據(jù)實際的需求做不同的返回處理,angular里面還有自定義指令幫助我們在構(gòu)建動態(tài)web應(yīng)用時彌補(bǔ)靜態(tài)文本的不足,還提供了很多插件,例如動畫插件,路由插件,等,路由可以讓我們開發(fā)spa應(yīng)用(可回答路由)

angular服務(wù):

angular里面內(nèi)置了三十多種服務(wù),最常用的就是http用來前后數(shù)據(jù)交互的,其次就是一些location,q等服務(wù),除了內(nèi)置服務(wù),angular還提供了五種自定義服務(wù)供我們使用,有constant

,value,constant和value主要就是用于存放一些數(shù)據(jù)或方法以供使用,區(qū)別是constant一般是存放固定內(nèi)容,value存放可能會被修改的內(nèi)容,然后還有factory,它和constant,value最大的區(qū)別是,factory服務(wù)是有一個處理過程,經(jīng)過這個過程,才返回結(jié)果的. 還有service方法,ervice和factory的區(qū)別在于,它第二個參數(shù)傳入的是一個構(gòu)造函數(shù),最后被注入的服務(wù)是這個構(gòu)造函數(shù)實例化以后的結(jié)果.所以基本上使用service創(chuàng)建的服務(wù)的,也都可以使用factory來創(chuàng)建,還有一種就是provider,它屬于供應(yīng)商服務(wù),設(shè)置里面必須先返回一個$get的構(gòu)造函數(shù),然后再返回值,這種寫法就是可以在config中對設(shè)置的數(shù)據(jù)進(jìn)行二次修改。后三種是我們比較常用的服務(wù),他們?nèi)咧g的關(guān)系大致是這樣的factory 把 service 的方法和數(shù)據(jù)放在一個對象里,并返回這個對象;service 通過構(gòu)造函數(shù)方式創(chuàng)建 service,返回一個實例化對象;provider 創(chuàng)建一個可通過 config 配置的 service。

angular路由:

Angular1.x 中常用 ngRoute 和 ui.router,還有一種為 Angular2 設(shè)計的 new router (面向組件),ngRoute 模塊是 Angular 自帶的路由模塊,而 ui.router 模塊是基于 ngRoute模塊開發(fā)的第三方模塊。ui.router 是基于 state (狀態(tài))的, ngRoute 是基于 url 的,ui.router模塊具有更強(qiáng)大的功能,主要體現(xiàn)在視圖的嵌套方面。使用 ui.router 能夠定義有明確父子關(guān)系的路由,并通過 ui-view 指令將子路由模版插入到父路由模板的 ui-view 中去,從而實現(xiàn)視圖嵌套。而在 ngRoute 中不能這樣定義,如果同時在父子視圖中 使用了ng-view 會陷入死循環(huán)。

混合開發(fā):

混合開發(fā)就是原生+html5構(gòu)建的bybridapp,我們前端開發(fā)人員進(jìn)行混合項目構(gòu)建,常利用的封殼(打包app)平臺有cordova,hbuilder hello5+,兩個平臺的區(qū)別在于cordova需要借助原生的環(huán)境,封裝android類型需要有androidsdk以及java jdk環(huán)境,ios類型需要有xcorde,h5+平臺的話是借助dcloud云端大包平臺,可以直接封裝?;旌蠎?yīng)用相對于原生應(yīng)用來說有很多優(yōu)點,例如一次編譯多平臺運(yùn)行,ui表現(xiàn)一致,更新不需要審查等,同時也有一些缺點,在性能上不如原生,很多硬件功能沒有原生完善,不過可以借助cordova。H5+提供的硬件api進(jìn)行完善。還有就是前段開發(fā)人員與ios或者安卓人員進(jìn)行合作我們需要開發(fā)頁面,實現(xiàn)樣式以及功能交互,然后原生人員在原生殼子中內(nèi)嵌輕量級瀏覽器,通過webview加載我們寫的頁面,這就是原生根h5人員的配合開發(fā)混合項目

react:

facebook在構(gòu)建instagram網(wǎng)站的時候遇見兩個問題一個是數(shù)據(jù)綁定的時候,大量操作真實dom,性能成本太高,然后就是網(wǎng)站的數(shù)據(jù)流向太混亂,不好控制,于是就推出了react框架,它是一個重視view層的框架,主要特點是聲明事,自動dom操作。主要利用的就是虛擬dom,主要特點是單向數(shù)據(jù)流,核心方法是組件,組件的優(yōu)勢在于組件將數(shù)據(jù)和邏輯封裝,能夠提高代碼復(fù)用率,組件高內(nèi)聚低耦合,很容易對單個組件進(jìn)行測試。因此降低測試難度,另外就是組件使用直觀的語法可以極大提高可讀性,降低代碼復(fù)雜度。React中提供了屬性和狀態(tài)進(jìn)行數(shù)據(jù)的傳遞,還有生命周期方便對組件的操作,生命周期分為三個階段,初始化,運(yùn)行中,卸載階段,每個階段都提供了鉤子函數(shù)供我們?nèi)ス芾斫M件的操作。利用react與webpack我們可以進(jìn)行模塊化開發(fā),方便對每個組件單獨管理與操作,react中還提供了路由,react-router,通過link 匹配路徑,router history管理路由路徑,route設(shè)置具體的路由路徑,已經(jīng)該路徑要加載的組件,同時還提供了indexRoute方便我們設(shè)置初始加載的組件試圖。React還有兩個比較強(qiáng)大的數(shù)據(jù)流管理框架flux和redux(接下來可以回答下題)

flux,redux:

redux是一個應(yīng)用數(shù)據(jù)流框架,主要是解決了組件間狀態(tài)共享的問題,原理是集中式管理,主要有三個核心方法,action,store,reducer,工作流程是view調(diào)用store的dispatch接收action傳入store,reducer進(jìn)行state操作,view通過store提供的getState獲取最新的數(shù)據(jù),flux也是用來進(jìn)行數(shù)據(jù)操作的,有四個組成部分action,dispatch,view,store,工作流程是view發(fā)出一個action,派發(fā)器接收action,讓store進(jìn)行數(shù)據(jù)更新,更新完成以后store發(fā)出change,view接受change更新視圖。Redux和Flux很像。主要區(qū)別在于Flux有多個可以改變應(yīng)用狀態(tài)的store,在Flux中dispatcher被用來傳遞數(shù)據(jù)到注冊的回調(diào)事件,但是在redux中只能定義一個可更新狀態(tài)的store,redux把store和Dispatcher合并,結(jié)構(gòu)更加簡單清晰

新增state,對狀態(tài)的管理更加明確,通過redux,流程更加規(guī)范了,減少手動編碼量,提高了編碼效率,同時缺點時當(dāng)數(shù)據(jù)更新時有時候組件不需要,但是也要重新繪制,有些影響效率。一般情況下,我們在構(gòu)建多交互,多數(shù)據(jù)流的復(fù)雜項目應(yīng)用時才會使用它們

node:

node.js是一個基于Chrome v8引擎的javascript 運(yùn)行環(huán)境。Node.js使用了一個事件驅(qū)動、非阻塞式 I/O的模型,使其輕量又高效。使用C++語言編寫,特點是快,性能高,開發(fā)效率高,應(yīng)用范圍廣,但是也耗費(fèi)內(nèi)存,比較新,ied不是很完善,中間件少,node可以解析js,沒有瀏覽器安全級別限制,同時也提供了很多系統(tǒng)級別的api,像文件的讀取,進(jìn)程的管理等,我經(jīng)常使用的node里面的模塊有url對地址欄進(jìn)行地址的解析操作,querystring用于解析與格式化 URL 查詢字符串,fs對文件進(jìn)行操作,http,https模塊中的request方法進(jìn)行獲取數(shù)據(jù),發(fā)送數(shù)據(jù)等。。,同時node還提供了路由,可以通過加載不同url顯示不同視圖內(nèi)容,同樣可以模擬后端不同接口存儲不同的數(shù)據(jù)(剩下的可以回答下面幾題)

mongodb:

MongoDB是一個基于分布式文件存儲的數(shù)據(jù)庫。由C++語言編寫。是世界上目前用的最廣泛的nosql數(shù)據(jù)庫,也就是非關(guān)系型數(shù)據(jù)庫,他的特點是高性能、易部署、易使用,存儲數(shù)據(jù)非常方便。

他有以下優(yōu)點,例如面向文檔儲存的數(shù)據(jù)庫也就是BSON格式存儲,說道bson,BSON基于JSON格式,對JSON進(jìn)行改造的,bson的特點就是便利更快,操作更簡單,同時增加了額外的數(shù)據(jù)類型, 然后mango還具有豐富的查詢指令,支持索引,具有分片系統(tǒng),無模式,同時也有一些缺點占用空間大,不支持事物,目前也不維護(hù)32位系統(tǒng)了,一個芒果里面可以創(chuàng)建很多數(shù)據(jù)庫,數(shù)據(jù)庫事由集合組成,集合就是 MongoDB 文檔組,類似于 RDBMS (關(guān)系數(shù)據(jù)庫管理系統(tǒng):Relational Database Management System)中的表格。那文檔其實就是一個鍵值(key-value)對也就是BSON,常用的操作就是對集合數(shù)據(jù)的增刪改查。

express:

express 是基于node平臺 開發(fā)的一個極其輕量的框架 幫助你快速開發(fā)web以及移動端應(yīng)用,express不對node.js本身的特性進(jìn)行二次抽象 而是在基本功能上進(jìn)行擴(kuò)充,express完全是由路由和中間件構(gòu)成的框架 從本質(zhì)上來說一個express應(yīng)用就是為了調(diào)用各種中間件。中間件是一個函數(shù) --他可以訪問request對象,響應(yīng)對象(res) 以及處于請求--響應(yīng)流程中的中間件,一般被命名為 next 的變量,中間件可以執(zhí)行任何代碼,可以修改請求和響應(yīng)對象,可以結(jié)束請求-響應(yīng)對象,也可以調(diào)用堆棧中的下一個中間件,我們把結(jié)束請求-響應(yīng)流程的方法 稱為是句柄函數(shù)。Express提供很多中間件,方便我們對于系統(tǒng)數(shù)據(jù)視圖的操作與管理,與之配合的是我們常用的ejs模版引擎(答下題)

ejs:

EJS是一個簡單高效的模板語言,通過數(shù)據(jù)和模板,可以生成HTML標(biāo)記文本??梢哉fEJS是一個JavaScript庫,EJS可以同時運(yùn)行在客戶端和服務(wù)器端,客戶端安裝直接引入文件即可,服務(wù)器端用npm包安裝。使用ejs有很多優(yōu)點。例如:可以快速編譯和渲染,使用簡單的模板標(biāo)簽,還可以自定義標(biāo)記分隔符,支持文本包含,支持瀏覽器端和服務(wù)器端,模板靜態(tài)緩存,支持express視圖系統(tǒng)等,ejs常用流程控制標(biāo)簽,可以更好的解析變量,操作邏輯。

vue:

vue是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js借鑒了Angular以及React的一些核心思想,綜合各自的長處進(jìn)行了操作以及性能等方面的優(yōu)化,vue比angular簡單,小,運(yùn)行速快快,都有數(shù)據(jù)雙向綁定,vue與react都使用 virtual DOM虛擬dom,都提供了組件化的視圖組件,都有豐富的插件庫,react使用jsx渲染頁面,vue使用更簡單的模版。Vue也提供了豐富的指令進(jìn)行操作,同時也有生命周期,--所有的生命周期鉤子自動綁定 this 上下文到實例中,因此你可以訪問數(shù)據(jù),對屬性和方法進(jìn)行運(yùn)算。Vue.js 使用了基于 HTML 的模版語法,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。Vue也提供了路由操作,通過router-link設(shè)置路徑,path進(jìn)行路由路徑配置,components進(jìn)行組件模版加載。他還提供了動畫插件,可以結(jié)合animate。Css進(jìn)行動畫設(shè)置。還有自定義指令,過濾器等。

然后就是Vuex 是一個專為 Vue.js 設(shè)計的狀態(tài)管理模式,vuex解決了組件之間同一狀態(tài)的共享問題。當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時,會需要多個組件依賴于同一狀態(tài),這時候使用vuex就可以很好的解決。主要有五部分組成,module可以進(jìn)行store倉庫分割,方便管理不同數(shù)據(jù),state進(jìn)行整個應(yīng)用數(shù)據(jù)集中管理,mutations是唯一一個能夠修改狀態(tài)值的對象,故通常存放業(yè)務(wù)邏輯進(jìn)行數(shù)據(jù)變更,actions是輔助處理mutations中異步函數(shù)操作的,同時還提供了mapActions輔助我們操作事件,getters是輔助我們對于狀態(tài)的獲取輸出的,同時提供了mapGetters方便我們在組件內(nèi)部通過computed進(jìn)行store中狀態(tài)的調(diào)用與獲取。同時vue可以配合mint –ui這個ui框架快速構(gòu)建移動端應(yīng)用。mint –ui提供了很多漂亮的ui組件設(shè)計,方便我們快讀構(gòu)建開發(fā)項目,還可以配合elementui進(jìn)行pc端項目構(gòu)建。

ionic:

ionic是一個用來開發(fā)混合手機(jī)應(yīng)用的,開源的,免費(fèi)的代碼庫。可以優(yōu)化html、css和js的性能,構(gòu)建高效的應(yīng)用程序,而且還可以用于構(gòu)建Sass和AngularJS的優(yōu)化。ionic是一個專注于用WEB開發(fā)技術(shù),基于HTML5創(chuàng)建類似于手機(jī)平臺原生應(yīng)用的一個開發(fā)框架。綁定了AngularJS和Sass。這個框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用,基于PhoneGap的編譯平臺,可以實現(xiàn)編譯成各個平臺的應(yīng)用程序。她有以下特點1.ionic 基于Angular語法,簡單易學(xué),是一個輕量級框架。完美的融合下一代移動框架,支持 Angularjs 的特性, MVVM ,代碼易維護(hù)。ionic 提供了漂亮的設(shè)計,通過 SASS 構(gòu)建應(yīng)用程序,它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。ionic 專注原生,讓你看不出混合應(yīng)用和原生的區(qū)別,ionic 提供了強(qiáng)大的命令行工具。ionic 性能優(yōu)越,運(yùn)行速度快。

單頁面應(yīng)用:

單頁面應(yīng)用single page web application

一般我們開發(fā)單頁面應(yīng)用有以下幾個優(yōu)點:

  1. 分離前后端關(guān)注點,前端負(fù)責(zé)界面顯示,后端負(fù)責(zé)數(shù)據(jù)存儲和計算,各司其職,不會把前后端的邏輯混雜在一起;

  2. 減輕服務(wù)器壓力,服務(wù)器只用出數(shù)據(jù)就可以,不用管展示邏輯和頁面合成,吞吐能力會提高幾倍;

  3. 同一套后端程序代碼,不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端;

除了優(yōu)點同時還有一些缺點;例如SEO問題,現(xiàn)在可以通過Prerender等技術(shù)解決一部分;前進(jìn)、后退、地址欄等,需要程序進(jìn)行管理;書簽,需要程序來提供支持;

· 使用angular來開發(fā)的話有以下幾個特點:

· 速度:更好的用戶體驗,讓用戶在web app感受native app的速度和流暢,

· MVC:經(jīng)典MVC開發(fā)模式,前后端各負(fù)其責(zé)。

· ajax:重前端,業(yè)務(wù)邏輯全部在本地操作,數(shù)據(jù)都需要通過AJAX同步、提交。

· 路由:在URL中采用#號來作為當(dāng)前視圖的地址,改變#號后的參數(shù),頁面并不會重載。

談?wù)勀銓ebpack的看法

WebPack 是一個模塊打包工具,你可以使用WebPack管理你的模塊依賴,并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、JavaScript、CSS以及各種靜態(tài)文件(圖片、字體等),讓開發(fā)過程更加高效。對于不同類型的資源,webpack有對應(yīng)的模塊加載器。webpack模塊打包器會分析模塊間的依賴關(guān)系,最后 生成了優(yōu)化且合并后的靜態(tài)資源。 webpack****的兩大特色:

<pre>1.code splitting(可以自動完成)</pre>

<pre>2.loader 可以處理各種類型的靜態(tài)文件,并且支持串聯(lián)操作</pre>

webpack 是以commonJS的形式來書寫腳本滴,但對 AMD/CMD 的支持也很全面,方便舊項目進(jìn)行代碼遷移。

webpack具有requireJs和browserify的功能,但仍有很多自己的新特性:

<pre>1\. 對 CommonJS 、 AMD 、ES6的語法做了兼容</pre>

<pre>2\. 對js、css、圖片等資源文件都支持打包</pre>

<pre>3\. 串聯(lián)式模塊加載器以及插件機(jī)制,讓其具有更好的靈活性和擴(kuò)展性,例如提供對CoffeeScript、ES6的支持</pre>

<pre>4\. 有獨立的配置文件webpack.config.js</pre>

<pre>5\. 可以將代碼切割成不同的chunk,實現(xiàn)按需加載,降低了初始化時間</pre>

<pre>6\. 支持 SourceUrls 和 SourceMaps,易于調(diào)試</pre>

<pre>7\. 具有強(qiáng)大的Plugin接口,大多是內(nèi)部插件,使用起來比較靈活</pre>

<pre>8.webpack 使用異步 IO 并具有多級緩存。這使得 webpack 很快且在增量編譯上更加快  </pre>

<pre>**es5 vs es6**</pre>

<pre>es5:</pre>

1. strict****模式

嚴(yán)格模式,限制一些用法,'use strict';

2. Array****增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS: 還有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3. Object****方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

Es6

ECMAScript6在保證向下兼容的前提下,提供大量新特性

1.塊級作用域 關(guān)鍵字let, 常量const

2.對象字面量的屬性賦值簡寫(property value shorthand)

3.賦值解構(gòu)

4.函數(shù)參數(shù) - 默認(rèn)值、參數(shù)打包、 數(shù)組展開(Default 、Rest 、Spread)

5.箭頭函數(shù) Arrow functions

6.字符串模板 Template strings

7. Iterators(迭代器)+ for..of

8.生成器 (Generators)

9.Class

Class,有constructor、extends、super,但本質(zhì)上是語法糖(對語言的功能并沒有影響,但是更方便程序員使用)。

10.Modules

ES6的內(nèi)置模塊功能借鑒了CommonJS和AMD各自的優(yōu)點:

(1).具有CommonJS的精簡語法、唯一導(dǎo)出出口(single exports)和循環(huán)依賴(cyclic dependencies)的特點。

(2).類似AMD,支持異步加載和可配置的模塊加載。

11.Map + Set + WeakMap + WeakSet

四種集合類型,WeakMap、WeakSet作為屬性鍵的對象如果沒有別的變量在引用它們,則會被回收釋放掉。

12.Math + Number + String + Array + Object APIs

13. Proxies

使用代理(Proxy)監(jiān)聽對象的操作,然后可以做一些相應(yīng)事情。

14.Symbols

Symbol是一種基本類型。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生,它接收一個可選的名字參數(shù),該函數(shù)返回的symbol是唯一的。

15.Promises

Promises是處理異步操作的對象,使用了 Promise 對象之后可以用一種鏈?zhǔn)秸{(diào)用的方式來組織代碼,讓代碼更加直觀(類似jQuery的deferred 對象)。

一****. Sass/Scss****、****Less****是什么****?

Sass (Syntactically Awesome Stylesheets)是一種動態(tài)樣式語言,Sass語法屬于縮排語法,比css比多出好些功能(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理,函數(shù)等),更容易閱讀。

Sass****與****Scss****是什么關(guān)系****?

Sass的縮排語法,對于寫慣css前端的web開發(fā)者來說很不直觀,也不能將css代碼加入到Sass里面,因此sass語法進(jìn)行了改良,Sass 3就變成了Scss(sassy css)。與原來的語法兼容,只是用{}取代了原來的縮進(jìn)。

Less也是一種動態(tài)樣式語言. 對CSS賦予了動態(tài)語言的特性,如變量,繼承,運(yùn)算, 函數(shù). Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox),也可在服務(wù)端運(yùn)行 (借助 Node.js)。

二****. Sass/Scss****與****Less****區(qū)****別

1.****編譯環(huán)境不一樣

Sass的安裝需要Ruby環(huán)境,是在服務(wù)端處理的,而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器,也可以在開發(fā)環(huán)節(jié)使用Less,然后編譯成css文件,直接放到項目中,也有 Less.app、SimpleLess、CodeKit.app這樣的工具,也有在線編譯地址。

2.變量符不一樣,Less是@,而Scss是$,而且變量的作用域也不一樣。

3.輸出設(shè)置,Less沒有輸出設(shè)置,Sass提供4中輸出選項:nested, compact, compressed 和 expanded。

4.Sass支持條件語句,可以使用if{}else{},for{}循環(huán)等等。而Less不支持。

5. 引用外部CSS文件

scss引用的外部文件命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、test3.scss文件分別設(shè)置的h1 h2 h3。文件名如果以下劃線開頭的話,Sass會認(rèn)為該文件是一個引用文件,不會將其編譯為css文件.

6.Sass和Less的工具庫不同

Sass有工具庫Compass, 簡單說,Sass和Compass的關(guān)系有點像Javascript和jQuery的關(guān)系,Compass是Sass的工具庫。在它的基礎(chǔ)上,封裝了一系列有用的模塊和模板,補(bǔ)充強(qiáng)化了Sass的功能。

Less有UI組件庫Bootstrap,Bootstrap是web前端開發(fā)中一個比較有名的前端UI組件庫,Bootstrap的樣式文件部分源碼就是采用Less語法編寫。

不管是Sass,還是Less,都可以視為一種基于CSS之上的高級語言,其目的是使得CSS開發(fā)更靈活和更強(qiáng)大,Sass的功能比Less強(qiáng)大,基本可以說是一種真正的編程語言了,Less則相對清晰明了,易于上手,對編譯環(huán)境要求比較寬松??紤]到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國內(nèi)訪問不了,個人在實際開發(fā)中更傾向于選擇Less。

1.GIT****是分布式的,SVN不是

GIT跟SVN一樣有自己的集中式版本庫或服務(wù)器。但,GIT更傾向于被使用于分布式模式,也就是每個開發(fā)人員從中心版本庫/服務(wù)器上chect out代碼后會在自己的機(jī)器上克隆一個自己的版本庫??梢赃@樣說,如果你被困在一個不能連接網(wǎng)絡(luò)的地方時,就像在飛機(jī)上,地下室,電梯里等,你仍然能夠提交文件,查看歷史版本記錄,創(chuàng)建項目分支,等

同樣,這種分布式的操作模式對于開源軟件社區(qū)的開發(fā)來說也是個巨大的恩賜,你不必再像以前那樣做出補(bǔ)丁包,通過email方式發(fā)送出去,你只需要創(chuàng)建一個分支,向項目團(tuán)隊發(fā)送一個推請求。這能讓你的代碼保持最新,而且不會在傳輸過程中丟失

2.GIT****把內(nèi)容按元數(shù)據(jù)方式存儲,而SVN是按文件

所有的資源控制系統(tǒng)都是把文件的元信息隱藏在一個類似.svn,.cvs等的文件夾里。如果你把.git目錄的體積大小跟.svn比較,你會發(fā)現(xiàn)它們差距很大。因為,.git目錄是處于你的機(jī)器上的一個克隆版的版本庫,它擁有中心版本庫上所有的東西,例如標(biāo)簽,分支,版本記錄等。

3.GIT****分支和SVN的分支不同

分支在SVN中一點不特別,就是版本庫中的另外的一個目錄。如果你想知道是否合并了一個分支,你需要手工運(yùn)行像這樣的命令svn propget svn:mergeinfo,來確認(rèn)代碼是否被合并

然而,處理GIT的分支卻是相當(dāng)?shù)暮唵魏陀腥?。你可以從同一個工作目錄下快速的在幾個分支間切換。你很容易發(fā)現(xiàn)未被合并的分支,你能簡單而快捷的合并這些文件。

4.GIT****沒有一個全局的版本號,而SVN有

5.GIT****的內(nèi)容完整性要優(yōu)于SVN

GIT的內(nèi)容存儲使用的是SHA-1哈希算法。這能確保代碼內(nèi)容的完整性,確保在遇到磁盤故障和網(wǎng)絡(luò)問題時降低對版本庫的破壞

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容