個人阿里夢——淘寶前端必備技能

天天下班路過阿里，看到裏面的燈火嘹亮，內心惴惴不安，我也想進阿里，怎麼破。

阿里的前端是否是都是大牛？我給他們的差距到底有多大，這個問題困擾我好久，然而，百無聊賴的我習慣性的打開淘寶官網，而後習慣性的f12，我發現了新大陸……

 

 

 

我仔細看看，很迷茫，看懂的很少，不過，我決定，慢慢來，先搞懂他們都是幹啥的，而後晚點偷偷的學。

下面，讓小屌絲給大家整理下他們都是幹啥用的吧。

 

1： Angula

 

AngularJS誕生於Google是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入，等等。

 

2：Backbone

Backbone（也稱爲 Backbone.js）是由 Jeremy Ashkenas 建立的一個輕量級庫，可用於建立 MVC 類應用程序。Backbone：

• 強制依賴於 Underscore.js，Underscore.js 是一個實用型庫
• 非強制依賴於 jQuery/Zepto
• 根據模型的變動自動更新應用程序的 HTML，有助於代碼維護
• 促進客戶端模板使用，避免了在 JavaScript 中嵌入 HTML 代碼

3：Console

 

這個我仍是懂的，這個廣告就是經過console（控制檯）看到的。如今主流的瀏覽器按f12， 都有這個東西，也能夠用它來調試js代碼。

4：Dir

這個又不懂了，看看度娘怎麼說的吧，看了下，度娘有三種解釋，1，它是計算機DOS下的一個命令，2，html <dir> 標籤 說是定義 目錄的 。 三、 說是vb函數 返回一個 String，用以表示一個文件名、目錄名或文件夾名稱，它必須與指定的模式或文件屬性、或磁盤卷標相匹配。我不知道阿里想要什麼答案，估計第一種較多吧。

 

5：Express

 

這什麼東西啊，我不懂

 

Express 是基於 Node.js，高性能、一流的web開發框架。 原來又是一個開發框架，看來我對框架的認識太淺薄了，晚點抽空看看它吧。

 

六、Fork：

 

這個讓我想到了fuck ，估計不是那個意思。看看度娘怎麼說 ，

計算機程序設計中的分叉函數。返回值： 若成功調用一次則返回兩個值，子進程返回0，父進程返回子進程標記；不然，出錯返回-1 ，原來講的是一個分叉函數，我還真沒怎麼用過，晚點慢慢研究吧，先放一放，看下面

 

七、Grunt 這貨是啥？

 

小牛，看上去很牛逼，看看它的做用吧？

最近很火的前端自動化小工具，基於任務的命令行構建工具 http://gruntjs.com ， 原來是自動化工做流，就是幫咱們完成基本的項目創建與保存的，提升咱們工做效率的一個工具，太好了，晚點試試。

 

八、Haslayout

這個多少仍是瞭解點的，haslayout 是ie渲染引擎的一個內部組成部分，它只在ie6，ie7上生效，高級的i8+ 已經廢棄了， 瞭解它可讓咱們更好的寫出兼容的css 代碼 。 在老版本瀏覽器中，明明寫好的代碼 預覽的時候老是 出現 錯誤，多數是由於這個東西，聽說當你遇到這種bug的時候 不妨 試着激發它 ，看看效果有沒有改變。

如何激發haslayout？

大部分的 IE 顯示錯誤，均可以經過激發元素的 haslayout 屬性來修正。能夠經過設置 css 尺寸屬性(width/height)等來激發元素的 haslayout，使其「擁有佈局」。以下所示，經過設置如下 css 屬性便可。

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

Internet Explorer 7 還有一些額外的屬性(不徹底列表):

* min-height: (任意值)

* max-height: (除 none 外任意值)

* min-width: (任意值)

* max-width: (除 none 外任意值)

* overflow: (除 visible 外任意值)

* overflow-x: (除 visible 外任意值)

* overflow-y: (除 visible 外任意值)

* position: fixed

本屌如今寫代碼基本已經不考慮 ie6，ie7了，因此我用的也很少，可是多知道點老是不會錯的。看下面的——

九、Iconfont

 

這個詞 我居然能看懂，真是太好了， 它的意思不就是  查找圖標嗎？難道是一個插件？問了下度娘，果真，它是阿里爲了方便咱們前端專門弄的一個圖標搜索網站，尤爲是作電子商務這塊的，我想確定會用到它的 。網址：http://iconfont.cn/

 

十、Jsonp

這個詞讓我想到了 json ，它給json 有關係嗎？ 我想確定是有關係的。

Jsonp(JSON with Padding)是資料格式 json 的一種「使用模式」，可讓網頁從別的網域獲取資料。 也就是說 jsonp  是 能夠跨域的 json ，什麼叫跨域？請度娘……

 

十一、Kissy

Kiss？太好了，我喜歡，…… 納尼？後面還多一個y，什麼東西？

這個我仍是有點了解的，原先在的一家公司就用過這個東西，

KISSY 是由阿里集團前端工程師們發起建立的一個開源 JS 框架。也就是阿里專用，好比說你要在阿里上面建立項目的話，那麼，恭喜你，中獎了。

十二、Localstorage

是否是本地存儲？是的，沒錯，html5 新的api 之一，它的做用就是讓你弄個小遊戲什麼的，記錄數據用的，下次你還能夠接着玩，太好了。

 

1三、Media query

媒體查詢？ 那不就是 移動端 web 響應式佈局嗎？我想不少移動端框架的本質就是用的這個東西，好比說 bootstrap，它的原理就是說根據不一樣的分辨率引用不一樣的css代碼。

挺好的，挺好的……

1四、Npm？

Np ？ 3p ？4p？np？ 是否是這個意思，我擦，我發現我太聰明瞭。Npm 又是什麼東西，下面請看官方解釋Network Power Manager（網絡管理電源控制器）搞毛啊， 確定不是這個意思，下面看正解

Node Package Manager

是一個NodeJS包管理和分發工具，已經成爲了非官方的發佈Node模塊（包）的標準。

 

Nodejs自身提供了基本的模塊，可是開發實際應用過程當中僅僅依靠這些基本模塊則還須要較多的工做。幸運的是，Nodejs庫和框架爲咱們提供了幫助，讓咱們減小工做量。可是成百上千的庫或者框架管理起來又很麻煩，有了NPM，能夠很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。

 

又是一個基於nodejs 的東西，惋惜我對nodejs 瞭解的還不透徹（廢話，僅僅是據說過），因此我想近期是不會用到 npm的 ， 3p 還差很少，打擊，打擊人啊！

1五、Opacity

終於來了一個簡單點的， 不用度娘，我就知道這個東西是透明度， 別告訴我 它同時又是一個js 框架，我不想聽，還好，它可能真的不是，也許未來可能被別人弄成一個插件了，那也說不定，如今js 大牛太多了，隨便開發一個框架啊，類庫啊，下面的小弟就要跟着學。

 

1六、Prototype

原型璉，返回對象類型原型的引用， 我知道寫擴展類的時候必定會用上它，

function  niu(age,name){ this.age=age;this.name=name}

 

niu.prototype.sayName = function (){ 

       alert(this.name);

  }

大概就是這麼用的吧，呵呵。

1七、Querystring

查詢字符串 ，若是你想獲得 url 後面的參數的話，那麼，就本身封裝一個 Querystring 函數吧。

阿里把它寫下來，我想，這個函數確定用到的地方不少，別告訴我 我又說錯了。

 

1八、Referer

 

HTTP Referer是header的一部分，當瀏覽器向web服務器發送請求的時候，通常會帶上Referer，告訴服務器我是從哪一個頁面連接過來的，服務器籍此能夠得到一些信息用於處理。

 

 

1九、Seajs

 

不用看，它確定又是一個庫 或者框架。

SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。SeaJS的做者是前淘寶UED,現支付寶前端工程師玉伯。

 

又是淘寶本身弄的一個東西，看來我真的進淘寶了能夠學好多東西啊，天啊，這麼多東西還不會，讓我想到了一首歌，夢想老是高不可攀，是否是應該放棄，花開花落又是雨季，春天啊你在哪裏？

 

20、Trim

 

若是沒有猜錯的話，它是一個去掉先後空格的函數，惋惜的是，這個函數要咱們本身編寫。

function trim(str){ //刪除左右兩端的空格

　　     return str.replace(/(^\s*)|(\s*$)/g, "");

　　 }

　　 function ltrim(str){ //刪除左邊的空格

　　     return str.replace(/(^\s*)/g,"");

　　 }

　　 function rtrim(str){ //刪除右邊的空格

　　     return str.replace(/(\s*$)/g,"");

　　 }

 

2一、Underscore

 

又是一個js框架吧？

Underscore是一個很是實用的JavaScript庫，提供許多編程時須要的功能的支持，他在不擴展任何JavaScript的原生對象的狀況下提供不少實用的功能。

 

又說錯了，人家只是一個庫，我還專門看了看源代碼，只有1400多行。還好，還好。

 

2二、Vim

Vim ，有點像虛擬機，惋惜不是。

 

Vim是一個相似於Vi的文本編輯器，不過在Vi的基礎上增長了不少新的特性，Vim廣泛被推崇爲類Vi編輯器中最好的一個。

看了一下界面，有點像寫字板 。呵呵……

 

2三、Worker

 

工人。程序員是否是也是 worker 啊？ 應該不是吧，程序員是 碼農 ，應該算是 farmer

扯遠了，阿里確定不是讓我討論工人的，那麼，應該是Web worker 

web worker 是運行在後臺的 JavaScript，不會影響頁面的性能

它也是html5 api 的一部分。可能未來要用canvas 作遊戲開發的時候，會用到 web worker吧。

 

2四、 Xss

 

• 跨站腳本攻擊 ，我擦，貌似很厲害，讓我想到了我一開始學計算機的目的，我要作黑客，到如今已通過了7年了，看看如今的我，離黑客的距離不知道有多少光年，哎！又讓我想起了一首歌 
•  
• 好吧 下輩若是子我還記得你
• 你的誓言可別忘記
• 不過一張明信片而已
• 我已隨它走入下個輪迴裏

 

 

2五、Yslow

 

這個我之前看一篇文章據說過，它是火狐的一個插件，主要做用是看你擼出來的網頁跑的快不快，標準不…… 不過安裝它以前要裝一個firebug

 

2六、Zepto

 

最後一個了，不用想，確定又是一個框架，

「

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api。 若是你會用jquery，那麼你也會用zepto。 「

 

好吧，我又錯了，人家此次是一個相似於jq 的庫。

 

我相信，這些只是人家隨便抽出來的一些詞，確定還有其它的，我忽然感受鴨梨山大。

看來我要走的路還很長啊，個人阿里夢，何時能實現？

擼成前端大牛——升職加薪——當上總經理——出任CEO ——贏取白富美——走上人生巔峯。

多麼美好的願望，小夥伴們，怎麼破？我要不要回家去賣麻辣燙呢？仍是繼續擼前端。