Web开发笔记 - 前端总结(开发篇)

终于从老家回来咯~有时间总结总结啦~这是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属性时。两者各有利弊,需要根据业务需求考虑。

元素显示与隐藏

元素显示与隐藏使用visibilitydisplay属性控制。

顺便提一下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 - 盒子的内容,显示文本和图像

CSS Box Model

超出元素的部分隐藏

使用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字段。
至于其使用,麻烦诶。。就简单用了用,不是专业写前端的话一般懒得用。。


依赖包管理

主要用过bowernpm,很方便。

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

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

文章目录
  1. 1. CSS相关
    1. 1.1. CSS Position
    2. 1.2. CSS Float && The inline-block Value
    3. 1.3. 元素显示与隐藏
    4. 1.4. 改变元素的明暗度
    5. 1.5. CSS Box Model
    6. 1.6. 超出元素的部分隐藏
    7. 1.7. CSS3 transition/transform
    8. 1.8. CSS Enhancer
      1. 1.8.1. 可定义变量
      2. 1.8.2. 模块化思想
      3. 1.8.3. 嵌套
      4. 1.8.4. mixin
      5. 1.8.5. 扩展/继承
      6. 1.8.6. 其它
  2. 2. Bootstrap相关
    1. 2.1. 重中之重-Bootstrap Grid System
  3. 3. JQuery相关
  4. 4. MVC、MVVM框架
  5. 5. 模板引擎
  6. 6. ReactJS
  7. 7. 构建工具
  8. 8. 依赖包管理