前兩周因?yàn)楣ぷ餍枰_始學(xué)習(xí)前端，快速的把html5/css3/javascript都過了一遍，也看了一些前端常用的框架，好記性不如爛筆頭，尤其是剛起步，所以把學(xué)習(xí)過程中遇到的一些瑣碎事記錄下來。

1. 我對(duì)網(wǎng)頁開發(fā)的理解：

前端 ＝ 語義 ＋ 視覺 ＋ 動(dòng)作
后臺(tái) ＝ 邏輯 ＋ 數(shù)據(jù) ＋ 接口

2. 去掉對(duì)話框IP地址：

function apiAlert(message) {
    var iframe = document.createElement("IFRAME");
    iframe.style.display = "none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    window.frames[0].window.alert(message);
    iframe.parentNode.removeChild(iframe);
}

function apiConfirm(message) {
    try {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        var alertFrame = window.frames[0];
        var iwindow = alertFrame.window;
        if (iwindow == undefined) {
            iwindow = alertFrame.contentWindow;
        }
        if(iwindow.confirm(message)) {
            iframe.parentNode.removeChild(iframe);
            return true;
        } else {
            iframe.parentNode.removeChild(iframe);
            return false;
        }
    } catch (exc) {
        return window.confirm(message);
    }
}

3. 屏蔽掉微信下拉彈性效果：

var overscroll = function (el) {
    el.addEventListener('touchstart', function () {
        var top = el.scrollTop;
        var totalScroll = el.scrollHeight;
        var currentScroll = top + el.offsetHeight;
        if (top === 0) {
            el.scrollTop = 1;
        } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1;
        }
    });
    el.addEventListener('touchmove', function (evt) {
        if (el.offsetHeight < el.scrollHeight)
            evt._isScroller = true;
    });
}
overscroll(document.querySelector('.mui-slider-group'));
document.body.addEventListener('touchmove', function (evt) {
    if (!evt._isScroller) {
        evt.preventDefault();
    }
});

4. ios禁止觸摸彈出系統(tǒng)默認(rèn)菜單

window.onload = function () {
    document.documentElement.style.webkitTouchCallout = 'none';
};

備注說明：-webkit-touch-callout 是一個(gè)不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。
在iOS上，當(dāng)你觸摸并按住觸摸的目標(biāo)，比如一個(gè)鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。
這個(gè)屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。

5. 獲取屏幕高度：

var height = document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;

6. 判斷是否為pc端：

function isPcDevice() {
    var system = {
        win: false,
        mac: false,
        xll: false,
        ipad: false
    }
    var platform = navigator.platform;
    system.win = platform.indexOf("Win") == 0;
    system.mac = platform.indexOf("Mac") == 0;
    system.x11 = (platform == "X11") || (platform.indexOf("Linux") == 0);
    system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
    if (system.win || system.mac || system.xll || system.ipad) {
        return true;
    } else {
        return false;
    }
}

7. 判斷是否為iphone設(shè)備：

function isIphoneDevice() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var isIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    if (isIphoneOs) {
        return true;
    } else {
        return false;
    }
}

8. Mac默認(rèn)Apache環(huán)境：

1. 查看Apache版本：httpd -v
2. 啟動(dòng)Apache : sudo apachectl start
3. 關(guān)閉Apache : sudo apachectl stop
4. 重啟Apache : sudo apachectl restart

默認(rèn)根目錄地址：/Library/WebServer/Documents

9. 一些有用的框架和庫：

1. 最接近原生APP體驗(yàn)的高性能框架－MUI
2. 圖片延遲加載－lazyload
3. 數(shù)據(jù)綁定－Vue.js
4. 優(yōu)秀的php框架－CodeIgniter
5. 響應(yīng)式布局框架－Bootstrap

10. 一些坑和建議：

1. apache相關(guān)配置文件，注釋用的“?！?，只能用于開頭，放在句中可能出現(xiàn)意想不到的bug
2. 使用viewport指定頁面寬度及縮放：
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
3. javascript中Data對(duì)象初始化，var date = new Date(time); 如果time格式為“2016-05-26 12:00:00”，在部分瀏覽器上會(huì)解析出錯(cuò)，建議使用“2016/05/26 12:00:00”
4. phpMyAdmin顯示創(chuàng)建表的sql語句，可以直接在SQL里面執(zhí)行show CREATE TABLE ＋ 表名
5. 移動(dòng)端適配，使用rem