jqm源码解析：$.mobile.media-优快云博客

jqm源码系列：$.mobile.media

思路分析：

动态创建一个div，命名为testDiv，设置id为jquery-mediatest，追加到Body中
动态创建一个style，命名为styleBlock，增加一段css规则：

//传递一个参数query比如："only all"
//给上面创建的id为jquery-mediatest设置一个position
"@media " + query + " {#jquery-mediatest{position:absolute;}}";

插入到html里面，再调用css获取position属性的值是否是absolute
存储到cache对象中，key就是query
注意add的使用，删除动态创建的body和style

TODO:

没有增加window.matchMedia的原生判断

(function($,undefined){
       //定义变量   
       var $window = $(window),
             $html = $("html");

       $.mobile.media = (function(){
               
              var cache = {},
                    testDiv = $("<div id='jquery-mediatest'></div>"),
                    fakeBody = $("<body>").append(testDiv);
 
              return function(query){
                    if(!(query in cache)){
                          //创建一个style对象取名styleBlock
                          var styleBlock = document.createElement("style"),
                                cssrule = "@media " + query + " {#jquery-mediatest{position:absolute;}}";

                          //IE必须设置type
                          styleBlock.type = "text/css";
                          //初始创建的styleBlock.styleSheet返回的undefined
                          if(styleBlock.styleSheet){

                          }else{
                                 //createTextNode创建文本节点，然后追加到styleBlock里面去
                                 styleBlock.appendChild(document.createTextNode(cssrule))
                          }

                           //把fakeBody追加到html，再把styleBlock追加到html
                           $html.prepend(fakeBody).prepend(styleBlock);

                           //获取一下testDiv的position是否是absolute
                           //cache[query]存储的是true或者false
                           cache[query] = testDiv.css("position") === "absolute";

                           //记得删除styleBlock
                           fakeBody.add(styleBlock).remove();
                            

                    }

                     //返回true或者false
                     return cache[query];
              };

       })();

})(jQuery);

上一个部分流程的图：