前言

公司在做项目的时候，可能一个页面要同时支持H5模式，在操作上要根据手机浏览器进行自适应

传统模式

1. 动态加载JS

传统的css及js动态加载方式使用

//动态加载js
    function loadJs(url,callback){
         var script=document.createElement('script');
         script.type="text/javascript";
         if(typeof(callback)!="undefined"){
             if(script.readyState){
                 script.onreadystatechange=function(){
                  if(script.readyState == "loaded" || script.readyState == "complete"){
                  script.onreadystatechange=null;
                  callback();
                  }
                }
             }else{
                 script.onload=function(){
                  callback();
                 }
             }
         }
         script.src=url;
         document.body.appendChild(script);
    }
 
 
     //动态加载css
    var node = document.createElement('link');
    node.rel = 'stylesheet';
    node.href = 'css/viewH5.css';
    document.getElementsByTagName('head')[0].appendChild(node);

2.使用jquery加载js

$.getScript("examH5.js")
 .done(function() {
  /* success */
 })
 .fail(function() {
  /* error */
});

// 缓存问题：不需要缓存可以在JS地址后面加时间戳，需要全局缓存的话
jQuery.ajaxSetup({
  cache: true
});
jQuery.ajax({
      url: "examH5.js",
      dataType: "script",
      cache: true
}).done(function() {
    /* success */
})

3.RequireJS 动态加载js

// 模块定义[核心就两行搞定]: (放在config.js页面内)
define('mobile', {
    load: function(name, require, callback, config){
        // 判断版本,这里懒得写UA判断了.在每个页面置入一个<!--[if lt IE 9]><meta name="ltie9"><![endif]-->
        // var ltIE9 = document.querySelector('meta[name="ltie9"]');
        var isMobile = false;
        var sUserAgent = navigator.userAgent.toLowerCase();
        if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
            isMobile = true;
        }

        // 异步加载依赖(name为叹号后面的路径),成功后,谁请求的,返给谁
        return !isMobile  ? callback() : require([name], callback);
    }
});

//应用js 符合isMobile的才会去加载examH5的js
(function(factory){
    define("index1",['jquery','mobile!examH5'], factory);
})(function($){
     /* do something */
});