前两周因为工作需要开始学习前端，快速的把html5/css3/javascript都过了一遍，也看了一些前端常用的框架，好记性不如烂笔头，尤其是刚起步，所以把学习过程中遇到的一些琐碎事记录下来。
1. 我对网页开发的理解：
前端 ＝ 语义 ＋ 视觉 ＋ 动作
后台 ＝ 逻辑 ＋ 数据 ＋ 接口
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禁止触摸弹出系统默认菜单
window.onload = function () {
document.documentElement.style.webkitTouchCallout = 'none';
};
备注说明：-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。
这个属性可以让你禁用系统默认菜单。
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设备：
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环境：
1. 查看Apache版本：httpd -v
2. 启动Apache : sudo apachectl start
3. 关闭Apache : sudo apachectl stop
4. 重启Apache : sudo apachectl restart
默认根目录地址：/Library/WebServer/Documents
9. 一些有用的框架和库：
1. 最接近原生APP体验的高性能框架－MUI
2. 图片延迟加载－lazyload
3. 数据绑定－Vue.js
4. 优秀的php框架－CodeIgniter
5. 响应式布局框架－Bootstrap
10. 一些坑和建议：
1. apache相关配置文件，注释用的“＃”，只能用于开头，放在句中可能出现意想不到的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显示创建表的sql语句，可以直接在SQL里面执行show CREATE TABLE ＋ 表名
5. 移动端适配，使用rem