终于从老家回来咯~有时间总结总结啦~这是Web前端开发篇~

此笔记会不断补充。部分不重要的就不放上来了。

CSS相关

CSS Position

四种定位：static, relative, absolute, fixed

• static position是HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
• fixed position是固定位置，常用于实现固定层效果。
• relative position相对于其正常位置，而 absolute position的元素的位置相对于最近的已定位父元素。

CSS Float && The inline-block Value

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。常用于各区域的水平方向并排化。

横向导航栏也可用 inline-block，可以更好地解决图片的排列问题，或者元素需要多个display属性时。两者各有利弊，需要根据业务需求考虑。

元素显示与隐藏

元素显示与隐藏使用visibility或display属性控制。

顺便提一下display属性，其可以控制显示方式为块级元素和内联元素。区别显而易见，块级元素（如div）占用了全部宽度，在前后都是换行符，而内联元素（如span）相当于内嵌，不强制换行。

而inline-block兼具inline和block的特性，可占有全部宽度而不换行。比起float，inline-block不需要再为after指定clear。当需要控制元素的垂直对齐跟水平排列时，可以使用inline-block。（可代替float）

改变元素的明暗度

改变元素的明暗度可以通过设置一个遮罩层，并改变其透明度来实现。CSS3的opacity属性用来设置元素的不透明级别。

至于IE9 below。。。看着办吧。。

应用：毛玻璃效果（Login界面）、购物导航（hover辅助）、配合HTML5和JS的各种cool效果。

CSS Box Model

• Margin - 清除边框区域。Margin没有背景颜色，它是完全透明的
• Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content - 盒子的内容，显示文本和图像

超出元素的部分隐藏

使用overflow : hidden

CSS3 transition/transform

CSS 3可以直接写过渡(transition)而不需要JQuery等库的帮助，而transform则是做2D、3D转换。

用示例总结：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div {
width: 233px;
height: 233px;
background: green;
transition:width 2s linear, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s linear, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover {
width:233px;
height:233px;
transform:rotate(180deg);  /*旋转180度*/
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

PS:有些东西用JS比CSS 3方便很多，不过还是了解一下的好~况且CSS3动画性能应该比JS要高一些

CSS Enhancer

只用过Sass，Less.js木有用过不了解。
Sass是一个基于Ruby的CSS预处理器，相当于CSS的一个增强版吧。Compass则相当于一个Sass框架，提供了许多mixin的功能。
在Terminal里开compass watch可以实时编译sass/scss文件
总结一下Sass的特性

可定义变量

Sass中可以定义变量，方便统一修改和维护重复、相同的值。

模块化思想

Sass中可以导入其它sass/scss文件，但与CSS 3中的@import意义不同，Sass改写了@import的意义，Sass中的import在预编译时会将所有模块合并，因此性能优于CSS3的import。

1
2
3
4
5
6
7

$headline-font: 微软雅黑,Arial,sans-serif;
@import "compass/reset" //这一句用来覆盖掉浏览器的默认样式
.mian-sec {
    font-family: $headline-font;
}

嵌套

Sass中可以进行选择器的嵌套表示层级关系，更加简便、直观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

顺便再总结一下CSS3中的f4cking 组合选择符：

• 后代选取器(以空格分隔)
• 子元素选择器(以大于号分隔）
• 相邻兄弟选择器（以加号分隔）
• 普通兄弟选择器（以破折号分隔）

写的时候都能晕了有木有。。所以有Sass真是方便的多。

mixin

Sass中可用mixin定义一些代码片段（相当于function），且可传参数，方便日后根据需求调用，这使得写CSS3浏览器兼容时更加便捷。

1
2
3
4
5
6
7
8
9

@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(2px);
}

扩展/继承

Sass可通过@extend来实现代码组合声明，使代码更加简洁优美。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}

其它

Sass中可以进行简单的加减乘除运算。并且Sass提供了许多操作颜色的内建函数，让调色更方便。

Sass可以用命令行编译，也可以用GUI工具编译~用Sublime的话推荐配合使用神器Koala，鹅厂出品，非常方便。
用WebStorm的话都支持自动编译sass/scss文件的，还是InteliJ大法好！

Bootstrap相关

写UI个人比较喜欢用Bootstrap及其各种变种（比如Flat-UI），其实主要还是因为懒（总感觉Bootstrap特别适合给不熟悉前端设计的后端开发者使用。。）

重中之重-Bootstrap Grid System

Bootstrap采用移动设备优先的原则。

Bootstrap网格系统具有响应式的特点，可随着设备大小进行分栏，响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。12个总格位主要有112、26、8+4、34、121这几种分栏方式。

网格系统有四种尺寸:

• xs (for phones <768px)
• sm (for tablets >=768px)
• md (for desktops >=992px)
• lg(for larger desktops >=1200px)

可以一次使用多种尺寸来构建自适应的页面。

网格系统的结构：

First,create a row . Then, add the desired number of columns (tags with appropriate .col-- classes). Note that numbers in .col-- should always add up to 12 for each row.

1
2
3

<div class="row">
  <div class="col-*-*"></div>
</div>

比如分三栏：

1
2
3
4
5

<div class="row">
  <div class="col-sm-4">Fucking Scala</div>
  <div class="col-sm-4">Fucking Scala</div>
  <div class="col-sm-4">Fucking Scala</div>
</div>

另外需要注意响应式的列重置、偏移列及嵌套列问题。
别的暂时没什么好总结的了，查查手册应该就可以解决。重要的是响应式页面的设计。

JQuery相关

项目中用的比较多，内容太多，慢慢填坑。

MVC、MVVM框架

目前常用的MVC/MVP/MVVM/MVW框架主要有BackboneJS（第一代前端MVC框架，仅作了解），EmberJS（MVC框架，和AngularJS思想相似，仅作了解）以及目前特别常用的MVVM框架AngularJS。这里仅总结AngularJS（目前版本为1.4.4，为什么要写版本？因为这货不一定哪一次更新就会deprecate很多旧特性。。）

有的人不明白AngularJS的用途，认为“万事皆可用AngularJS”，这样就没有领悟AngularJS的精髓。AngularJS最适合开发RESTful风格的SPA（国内各种云服务的Dashboard以及Gmail、Twitter都应用了AngularJS)，而如果开发非应用型网站则要看业务需求，用AngularJS不一定是最佳选择。

这里内容也太多，先总结思想吧。

AngularJS的一大特点是bi-directional data binding，即数据双向绑定。它和JQuery的思维有着天壤之别。JQuery的思想是先构建好一个页面，再通过各种DOM操作编写动作；而用AngularJS写页面时，对DOM的直接操作是完全没有必要，也是不被提倡的。在AngularJS中用声明式的数据绑定就可以很好地实现JQuery中命令式的功能。并且，我们心中要对整个页面的结构有个把握，页面分成几个组件，每个组件由不同的控制器负责，数据模型应合理设计。有重复的逻辑是否可以抽象出来，提供一个统一的函数，配合回调达到功能的可扩展化。

总之，AngularJS提供了一种类似于后端的思考方式，可以更好地对网页组件进行解耦，方便日后的开发和维护。后面会详细总结AngularJS的开发。

模板引擎

主要是EJS和Jade。Jade的语法，只能说，诡异！！！所以用Node.js构建博客时页面模板引擎果断用了EJS（其实我也不知道哪个性能好些，反正EJS没有那么诡异。。）
待填坑 >_<

ReactJS

ReactJS是一个View层组件，专门负责View层的开发。很喜欢它的Virtual DOM的设计，优化了性能。（比原生DOM性能快，当然也不支持所有的DOM操作）

这个也没有太多实践（毕竟是View层），以后可以试试React Native构建Hybrid App，写个个人博客的管理器还是可以的~

构建工具

前端构建工具主要有流式构建工具Gulp.js及Grunt，用于压缩、合并依赖文件。前端构建工具貌似一直在改进，变化很快（后端也是，比如Java项目构建，从Maven到Gradle），不过万变不离其宗，核心流程是没有变的。
两者用起来比较接近，主要就是package.json + Gruntfile.js(gulp.js)的配置。
以Grunt为例，先npm init生成package.json文件，该文件主要配置项目基本信息及工具插件依赖，以让 Node.js 知道下载哪些插件，重点是devDependencies字段。
至于其使用，麻烦诶。。就简单用了用，不是专业写前端的话一般懒得用。。

依赖包管理

主要用过bower和npm，很方便。

Bower节省了时间，相当于建立了一个本地仓库（类似于Maven的.m2仓库），并且bower.json可以很容易地展现各种依赖关系。给依赖库升级也更加方便了，一句bower update <package-name>完事。Bower的优点是约束比较松散，使用很简单，缺点就是不提供构建工具，需要配合Glup.js或Grunt。

配合Grunt的一些插件

• grunt-bower-concat
• grunt-wiredep
• grunt-bower-requirejs
• grunt-bower-task
• grunt-preen

配合Glup.js的一些插件

• gulp-google-cdn（国内呵呵）
• main-bower-files
• preen
• gulp-bower-normalize

npm 和Browserify配合相当于间接给浏览器提供了npm的功能（Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端）。