工欲善其事,必先利其器

混迹前端已有五年多了,工作重心由最初的切图写页面转向专门写js交互,我深感js博大精深。
做web前端这行其实并不那么容易,原因大致三点:一是前端涉及的面太广,每个知识面都可以进行深入研究;二是前端技术比较开放,各种新技术层出不穷,学习成本很大;三是前端面向用户操作界面,必须得很好地适应各种设备。
以前的开发状态挺糟的,即便学到一些新技术也没精力和时间使用到项目中去。辞职了一段时间后,我开始把以前接触到的,听说过的捋了一遍,体会到了很多新技术带来的便利。
我们前端大致进行的工作是这么一些:

  • 监听请求,对路由进行判断
  • 解读请求,进行数据操作
  • 渲染页面或者API,返回给客户端

开发时都会有一套前端的基础架构:

  • 开发环境
  • 平台工具(框架、库、发布工具等)
  • 相应的开发规范
  • UI组件库
  • 开发文档

每个人的时间都很有限,我们不要重复造轮。这里我介绍一些常见框架和库并把他们分组罗列出来,每个工具都有他具体的职责,了解并组合使用将会大大提高前端的开发效率:

Bower    A package manager for the web
Grunt    The JavaScript Task Runner
gulp    the streaming build system
Yeoman    The web’s scaffolding tool for modern webapps

AngularJs    Superheroic JavaScript MVW Framework
Backbone    a light MVC App framework
Knockout    Simplify dynamic JavaScript UIs with ths Model-View-View Model (MVVM) pattern
ReactJS    A JavaScript library for building user interfaces
Flux An application architecture for React utilizing a unidirectional data flow

Underscore    a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects
lodash    A JavaScript utility library delivering consistency, modularity, performance, & extras

CoffeeScript    a little language that compiles into JavaScript
Jade    a template language
Ractive.js    a template-driven UI library

AMD(Asynchronous module definition) a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired
CommonJS    a group with a goal of building up the JavaScript ecosystem
RequireJS、seaJS a JavaScript file and module loader
Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies

Sass、Less    CSS preprocessor language
Modernizr    a JavaScript library that detects HTML5 and CSS3 features in the user’s browser

众多工具的产生使得前端能够进行模块化开发,每个模块高度解耦,使得系统更易维护。关于模块化开发网上的文章已有很多,这里不再赘述。来说说DSL,DSL指的是领域特定语言,它可以是内部的(使用宿主语言的语法,比如不使用JSX的ReactJS(属于内部DSLs)),也可以是外部的(使用和宿主语言不同的语法,比如本例中在JavaScript内部编写的内联 CSS(属于外部DSLs))。很多时候会被一些库里的语法迷惑,比如CoffeeScript,他属于内部DSLs,会将类似Ruby的语法编译成Javascript。当然任何工具都是有两面性的,编译意味着需要消耗性能,这是无法避免的事情。所以用不用,用哪种工具纯粹是个人喜好问题。

css3新增的五个属性

css3出来已经有一段时间了,由于工作中经常要考虑使用IE的用户,一直没用上css3的属性。最近时间比较充裕,故参考了一些关于css3的资料,决定亲手练练。
下面简单描述一下css3的五个属性:
这是一个未用到任何css3属性的原始设计
1-原图

1.RGBA

浏览器支持: Apple Safari 4, Firefox 3.0.5, Google Chrome 1
RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等.

前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明).
代码中留有rgb或者十六进制的颜色值是提供给其他浏览器使用.

Continue reading →