前端技术资源合集

前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
—— From Baidu Baike

HTML5的出现，赋予了前端更多重要的任务，不再停留在平面设计阶段了，更多关注在用户的交互性上和网站的响应速度上。

前端设计

主要是对网页页面视觉效果上的设计，具体通过运用html/css来对页面排版和配色，现在已经有很多成形的框架来帮助前端工程师搭建一个高大上的网站：

bootstrap：http://getbootstrap.com/
foundation：http://foundation.zurb.com/
SemanticUI: http://semantic-ui.com/

以上框架都是响应式布局框架，能够对不同屏幕适配，对比以上三个框架，bootstrap比较简洁大方，更适合做pc网站，而foundation优先支持手机适配，并且可以自定化下载的功能模块，大大缩小框架的大小，对于跑流量的手机网站更为适合，Semantic UI的设计相当的语义化，容易理解也不用同时使用一大堆样式来显示一个div，最适合开发页面（个人认为…），而且对手机页面支持也做得很好。

前端开发

主要提供数据交互和提高用户的交互体验，甚至可以定义路由，主导页面的跳转（没有做前后端分离，页面一般由后端Controller跳转），熟练使用JavaScript语言相当重要。

当然现在也有大量可靠的框架了，最常用框架有Extjs/JQuery/Zepto.js/AngularJs，

Extjs，用过一周，然后就果断抛弃了，Extjs可以用来做通用后台管理系统，用js即可定义一个表单，定义一个Form对象，然后定义表单字段，甚至一个xtype:'htmleditor'即可整合一个在线编辑器到表单中，但是样式也是在js中定义好的，基本上一成不变，很难改变样式，而且页面也是由多个iframe组成，对浏览器渲染很不友好，对话框和按钮也是一层一层嵌套进去，代码中间会产生一个很长的缩进。

JQuery和Zepto.js放一起讲，因为Zepto 的 API 就是完全兼容 jQuery 的，功能上 Zepto 是 jQuery 的子集，定位上 jQuery 桌面为主，Zepto 则从一开始就定位移动设备，所以体积方面有一定优势。也就是说如果你只用了 jQuery 很少且都是核心的功能，比如选择器等，那么可以在不改动任何业务代码的情况下把 lib 切换到 Zepto——其实就是把 $ 对象换掉了。JQuery帮助文档：http://api.jquery.com/

AngularJs，MVVM双向数据绑定框架，目前由Google在维护的框架。Google出品必属精品（比如：安卓平台），AngularJs是一个十分强大的框架，思想十分前卫，为前后端分离做出巨大的贡献，集成了自身一套的模板引擎，通过{{data}}就可以在页面上拿到js模板中$scope(作用域)绑定的数据(data)，可以定义过滤器，也有内置的过滤器，比如时间格式转换{{timestamp|date:'YYYY-MM-DD'}}，可以自定义指令等等……

但是最强大的是Angular提供的模块化(Module)设计，因此Angular社区上有很多强大的开源第三方模块：

ui-router，尽管Angular自带了路由控制的一套机制，但是还是不够完善，ui-router是专门控制路由的模块，支持多层级路由无限的嵌套，帮助文档传送门。

ocLazyLoad，可以配合ui-router按需加载文件到页面上，但是路由跳转后不会删除引入的文件，可以通过Dom操作来删除<script>或<link>节点，使用懒加载不会让所有文件一次性加载，页面也不会显得太过臃肿，帮助文档传送门。

ngCordova，配合cordova开发可以开发出跨平台移动应用，Android/iOS/WinPhone，甚至黑莓OS……，打包成phonegap应用，简直方便到没人性，使用cordova最好对打包的平台有所了解，帮助文档传送门。

后端技术

一个不懂后端的前端不是好前端，半年前我只接触后端的开发，开发过J2EE(SpringMVC+Hibernate)/PHP(ThinkPHP)/Python(半吊子)，了解后端对前端开发十分重要，因为前后端分离后，前端只管ajax向后端要json数据，后端只需要提供相应的api就够了，所以了解后端如何从数据库查数据并且序列化成json数据相当重要。同时要了解HTTP 1.1的协议，了解请求头、请求体、响应头、响应体，方便从调试工具中查看提交的数据和返回的数据，方便对bug的定位。

作为一名前端，使用NodeJs作为后端是一个很不错的选择，nodejs有包管理工具npm，可以很方便的下载到第三方依赖包，可以先用npm安装前端包管理工具bower，然后再用bower下载前端需要的依赖文件，还可以用npm安装grunt，使用ugly对代码进行压缩混淆，防止别人看到代码。

NodeJs(express+mongodb)很适合开发web应用的后端，代码的语法跟JavaScript一样，是前端工程师的不二选择，附送传送门：

MongoDB帮助文档、Express帮助文档

移动终端

严格意义上，移动终端也可以归纳为前端技术，因为移动终端上的开发是客户端开发，都是通过与服务器端数据交互来显示页面。每一个移动终端上的运行的系统一定有个webview组件，提供用户的网页浏览功能。我们可以将webview放大到全屏，并且提供丰富的交互功能，这样是不是就是一个应用了？但是这样还不够，这仅仅实现了页面上的交互，还不能调用系统的组件，例如Android的Toast或iOS上的Core Location。在开发应用时，我们可以把一个原生代码编写成的对象封装成js对象传进webview中调用，这样就可以调用到了。

这么常用的功能，肯定有先驱为我们铺好路滴，Cordova就是用来打破这个屏障的，原称为phonegap（手机代沟？），cordova可以很方便的调用到系统功能，还有很多做好的插件使用，比如扫描二维码等等。帮助文档：http://cordova.apache.org/docs/en/5.4.0/

移动终端上，Angular当然也有提供相应的模块，比如前面提到过的ngCordova。还有ionic框架，ionic是基于Angular专用于开发HybirdApp（混合型App）的移动框架，提供了大量的Angular指令集，可以十分方便的开发HybirdApp，帮助文档：http://ionicframework.com/docs/

转载请注明出处：ZevenFang，O(∩_∩)O谢谢~