前端琐碎记

前两周因为工作需要开始学习前端，快速的把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