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插件函數