我的阿里梦——淘宝前端必备技能

每天下班路过阿里，看到里面的灯火嘹亮，心里惴惴不安，我也想进阿里，怎么破。

阿里的前端是不是都是大牛？我给他们的差距到底有多大，这个问题困扰我很久，然而，百无聊赖的我习惯性的打开淘宝官网，然后习惯性的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> 标签 说是定义 目录的 。 3、 说是vb函数 返回一个 String，用以表示一个文件名、目录名或文件夹名称，它必须与指定的模式或文件属性、或磁盘卷标相匹配。我不知道阿里想要什么答案，估计第一种较多吧。

 

5：Express

 

这什么东西啊，我不懂

 

Express 是基于 Node.js，高性能、一流的web开发框架。 原来又是一个开发框架，看来我对框架的认识太浅薄了，晚点抽空看看它吧。

 

6、Fork：

 

这个让我想到了fuck ，估计不是那个意思。看看度娘怎么说 ，

计算机程序设计中的分叉函数。返回值： 若成功调用一次则返回两个值，子进程返回0，父进程返回子进程标记；否则，出错返回-1 ，原来说的是一个分叉函数，我还真没怎么用过，晚点慢慢研究吧，先放一放，看下面

 

7、Grunt 这货是啥？

 

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

最近很火的前端自动化小工具，基于任务的命令行构建工具 http://gruntjs.com ， 原来是自动化工作流，就是帮我们完成基本的项目建立与保存的，提高我们工作效率的一个工具，太好了，晚点试试。

 

8、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了，所以我用的也不多，但是多知道点总是不会错的。看下面的——

9、Iconfont

 

这个词 我竟然能看懂，真是太好了， 它的意思不就是  查找图标吗？难道是一个插件？问了下度娘，果然，它是阿里为了方便我们前端专门弄的一个图标搜索网站，尤其是做电子商务这块的，我想肯定会用到它的 。网址：http://iconfont.cn/

 

10、Jsonp

这个词让我想到了 json ，它给json 有关系吗？ 我想肯定是有关系的。

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。 也就是说 jsonp  是 可以跨域的 json ，什么叫跨域？请度娘……

 

11、Kissy

Kiss？太好了，我喜欢，…… 纳尼？后面还多一个y，什么东西？

这个我还是有点了解的，原先在的一家公司就用过这个东西，

KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。也就是阿里专用，比如说你要在阿里上面创建项目的话，那么，恭喜你，中奖了。

12、Localstorage

是不是本地存储？是的，没错，html5 新的api 之一，它的作用就是让你弄个小游戏什么的，记录数据用的，下次你还可以接着玩，太好了。

 

13、Media query

媒体查询？ 那不就是 移动端 web 响应式布局吗？我想很多移动端框架的本质就是用的这个东西，比如说 bootstrap，它的原理就是说根据不同的分辨率引用不同的css代码。

挺好的，挺好的……

14、Npm？

Np ？ 3p ？4p？np？ 是不是这个意思，我擦，我发现我太聪明了。Npm 又是什么东西，下面请看官方解释Network Power Manager（网络管理电源控制器）搞毛啊， 肯定不是这个意思，下面看正解

Node Package Manager

是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

 

Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

 

又是一个基于nodejs 的东西，可惜我对nodejs 了解的还不透彻（废话，仅仅是听说过），所以我想近期是不会用到 npm的 ， 3p 还差不多，打击，打击人啊！

15、Opacity

终于来了一个简单点的， 不用度娘，我就知道这个东西是透明度， 别告诉我 它同时又是一个js 框架，我不想听，还好，它可能真的不是，也许将来可能被别人弄成一个插件了，那也说不定，现在js 大牛太多了，随便开发一个框架啊，类库啊，下面的小弟就要跟着学。

 

16、Prototype

原型琏，返回对象类型原型的引用， 我知道写扩展类的时候一定会用上它，

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

 

niu.prototype.sayName = function (){ 

       alert(this.name);

  }

大概就是这么用的吧，呵呵。

17、Querystring

查询字符串 ，如果你想得到 url 后面的参数的话，那么，就自己封装一个 Querystring 函数吧。

阿里把它写下来，我想，这个函数肯定用到的地方很多，别告诉我 我又说错了。

 

18、Referer

 

HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。

 

 

19、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,"");

　　 }

 

21、Underscore

 

又是一个js框架吧？

Underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。

 

又说错了，人家只是一个库，我还专门看了看源代码，只有1400多行。还好，还好。

 

22、Vim

Vim ，有点像虚拟机，可惜不是。

 

Vim是一个类似于Vi的文本编辑器，不过在Vi的基础上增加了很多新的特性，Vim普遍被推崇为类Vi编辑器中最好的一个。

看了一下界面，有点像写字板 。呵呵……

 

23、Worker

 

工人。程序员是不是也是 worker 啊？ 应该不是吧，程序员是 码农 ，应该算是 farmer

扯远了，阿里肯定不是让我讨论工人的，那么，应该是Web worker 

web worker 是运行在后台的 JavaScript，不会影响页面的性能

它也是html5 api 的一部分。可能将来要用canvas 做游戏开发的时候，会用到 web worker吧。

 

24、 Xss

 

• 跨站脚本攻击 ，我擦，貌似很厉害，让我想到了我一开始学计算机的目的，我要做黑客，到现在已经过了7年了，看看现在的我，离黑客的距离不知道有多少光年，哎！又让我想起了一首歌 
•  
• 好吧 下辈如果子我还记得你
• 你的誓言可别忘记
• 不过一张明信片而已
• 我已随它走入下个轮回里

 

 

25、Yslow

 

这个我以前看一篇文章听说过，它是火狐的一个插件，主要作用是看你撸出来的网页跑的快不快，标准不…… 不过安装它之前要装一个firebug

 

26、Zepto

 

最后一个了，不用想，肯定又是一个框架，

“

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 “

 

好吧，我又错了，人家这次是一个类似于jq 的库。

 

我相信，这些只是人家随便抽出来的一些词，肯定还有其它的，我突然感觉鸭梨山大。

看来我要走的路还很长啊，我的阿里梦，什么时候能实现？

撸成前端大牛——升职加薪——当上总经理——出任CEO ——赢取白富美——走上人生巅峰。

多么美好的愿望，小伙伴们，怎么破？我要不要回家去卖麻辣烫呢？还是继续撸前端。