前端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：用户是否可以手动缩放