begin: 20170724
version: 20170724

该文起源于一个fcc项目（个人作品展示页面制作），之前写过一篇（fcc portfolio项目总结），是自己独立搭建这个页面的总结；而本文是阅读其示例项目的源代码的总结。

1.外部文件

• bootstrap3.3.5(css)
• font-awesome4.4.0(css) (以使用font awesome图标)
• bootstrap3.3.5(js)
• jquery2.1.3(js)
• jquery-easing(js)插件，用于扩展jquery动画可用的缓动函数选项
  插件概述，$.animate()方法在使用时，可以指定以easing字符串参数，以指定缓动函数，如jquery默认参数是的是'wing'，直接可有的还有'linear'等，该插件扩展了一些可选的缓动函数，只需以字符串形式指定它们的名字即可如：'easeInCubic'、'easeOutExpo'等。

2.css

弹性盒子

css中用到了弹性盒子，解读如下：

• 在父元素上引用display:flex;，为了兼容之前还有两条规则display:-webkit-box;、display:-ms-flexbox;；这样父元素的空间就可以被子元素分配了；
• flex-flow:row wrap;水平显示，必要时拆行；
• -ms-flex-pack:distribute;、justify-content:around;，空白部分在所有子元素间平均分配；
• -webkit-box-align: start;、-ms-flex-align: start;、align-items:flex-start;，纵轴起始边界对齐；

该属性兼容性不高，上述考虑了兼容的规则ie9中都不行。
相关文章：

• flexbox-CSS3弹性盒模型flexbox布局完整版教程
• A Complete Guide to Flexbox

font awesome

常规用法，在html中使用i标签，添加相应的类，例如

<i class="fa fa-align-justify"></i>

另外一种方式是在css中用unicode编码生成：

.icon:before{
    content: '\f039';
    font-family: FontAwesome;
}

各图标对应的unicode编码可以在官网查到。

3.javascript

尺寸与位置

js文件中大量用到了元素的各种尺寸属性，在此做一个总结：

• 获取浏览器视口宽高
  视口高度:

window.innerHeight || 
document.documentElement.clientWidth || 
document.body.clientWidth

视口宽度:

window.innerHeight || 
document.documentElement.clientHeight || 
document.body.clientHeight

(对于运行在混杂模式下IE，用document.body代替document.documentElement，可参看《js高程》相关代码)

• 获取基于视口的最小高度的文档总宽高
  文档总高度:

Math.max(document.documentElement.scrollHeight || 
    document.documentElement.clientHeight)

文档总宽度:

Math.max(document.documentElement.scrollWidth || 
    document.documentElement.clientWidth)

(混杂模式下IE，还要用document.body代替document.documentElement，可参看《js高程》相关代码)

• 获取文档滚动宽高量

//from MDN
var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollTop;

来自MDN

事件相关

.on()

jquery的.on()方法在把同个函数绑定到多个不同事件时，可以合并写，如：

$('body')
    .on('input propertychange','.form-item',function(event){
        //这里采用jquery实现了多事件绑定，
        //等效于分别绑定到同一个函数
        //propertychange事件用于低版本ie（8-）兼容
        $(this).toggleClass('form-item-filled',!!$(event.target).val());
    })

另外，利用该方法进行事件委托时，第二个参数是选择符，只有在事件冒泡过程中的元素中，存在满足选择符同时是被委托元素的后代的元素，就会触发事件（并不一定需要event.target符合选择符）。

input和propertychange事件

input事件在input 或 textarea元素的值发生改变时触发。该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 keygen和 select 元素.

propertychange事件则用用兼容低版本IE.

几个jquery函数

bootstrap插件函数