前兩周因為工作需要開始學習前端，快速的把html5/css3/javascript都過了一遍，也看了一些前端常用的框架，好記性不如爛筆頭睛约，尤其是剛起步，所以把學習過程中遇到的一些瑣碎事記錄下來哲身。
1. 我對網(wǎng)頁開發(fā)的理解：
前端 ＝ 語義 ＋ 視覺 ＋ 動作
后臺 ＝ 邏輯 ＋ 數(shù)據(jù) ＋ 接口
2. 去掉對話框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)默認菜單
window.onload = function () {
document.documentElement.style.webkitTouchCallout = 'none';
};
備注說明：-webkit-touch-callout 是一個不規(guī)范的屬性（unsupported WebKit property）辩涝，它沒有出現(xiàn)在 CSS 規(guī)范草案中。
在iOS上律罢，當你觸摸并按住觸摸的目標膀值，比如一個鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認菜單误辑。
這個屬性可以讓你禁用系統(tǒng)默認菜單沧踏。
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默認Apache環(huán)境：
1. 查看Apache版本：httpd -v
2. 啟動Apache : sudo apachectl start
3. 關(guān)閉Apache : sudo apachectl stop
4. 重啟Apache : sudo apachectl restart
默認根目錄地址：/Library/WebServer/Documents
9. 一些有用的框架和庫：
1. 最接近原生APP體驗的高性能框架－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對象初始化砰苍，var date = new Date(time); 如果time格式為“2016-05-26 12:00:00”潦匈，在部分瀏覽器上會解析出錯，建議使用“2016/05/26 12:00:00”
4. phpMyAdmin顯示創(chuàng)建表的sql語句赚导，可以直接在SQL里面執(zhí)行show CREATE TABLE ＋ 表名
5. 移動端適配茬缩，使用rem