前端web学习记录

对象属性无序，数组属性有序。

正则表达式中 \s 可以过滤所有空格 

lodash语法get

判断js和css是否加载完成

• 发现在OSC上面用MD写代码比较爽 忍不住试啦一下
• 判断CSS是否加载完成
  1. 在head标签内插入 引入css的link标签
  2. 如果是ie浏览器直接使用onload事件 其它浏览器用setTimeout循环轮询判断下面属性
  3. 如果是webkit内核判断 link节点上的sheet属性
  4. 其它浏览器判断节点上的sheet.cssRules属性

以下是完整代码

 function loadCss(src,fn){            var node=document.createElement('link');            node.rel='stylesheet';            node.href=src;            document.head.insertBefore(node,document.head.firstChild);            if(node.attachEvent){                node.attachEvent('onload', function(){fn(null,node)});            }else{               setTimeout(function() {                 poll(node, fn);               }, 0); // for cache            }            function poll(node,callback){                var isLoaded = false;                if(/webkit/i.test(navigator.userAgent)) {//webkit                    if (node['sheet']) {                        isLoaded = true;                      }                }else if(node['sheet']){// for Firefox                    try{                        if (node['sheet'].cssRules) {                              isLoaded = true;                        }                      }catch(ex){                        // NS_ERROR_DOM_SECURITY_ERR                        if (ex.code === 1000) {                             isLoaded = true;                        }                    }                }                if(isLoaded){                    setTimeout(function(){                        callback(null,node);                    },1);                }else{                    setTimeout(function(){                        poll(node,callback);                    },10);                }            }            node.onLoad=function(){                fn(null,node);            }        }

• 判断javascript是否加载完成
  1. 如果支持onload事件使用onload事件 否则使用onreadystatechange事件
  2. onreadystatechange事件回调很不稳定 有时候出现一次 有时候两次

 function loadScript(src,fn){            var node = document.createElement("script");            node.setAttribute('async','async');            var timeID            var supportLoad = "onload" in node            var onEvent = supportLoad ? "onload" : "onreadystatechange"            node[onEvent] = function onLoad() {                if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {                    timeID = setTimeout(onLoad)                    return                }                if (supportLoad || timeID) {                    clearTimeout(timeID)                    fn(null,node);                }            }            document.head.insertBefore(node, document.head.firstChild);            node.src=src;            node.onerror=function(e){                fn(e);            }        }

npm安装package.json时  直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： 

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> 

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 
height：和 width 相对应，指定高度。 
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 
maximum-scale：允许用户缩放到的最大比例。 
minimum-scale：允许用户缩放到的最小比例。 
user-scalable：用户是否可以手动缩放