【WebApp】离线webapp backbone模板，文件加载在不同浏览器中的表现

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_34395205

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量83

点赞数

文章标签： javascript 测试 ViewUI

原文链接：https://my.oschina.net/maomi/blog/115728

版权

为什么80%的码农都做不了架构师？>>>

index.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>webapp</title>
  <link rel="stylesheet" href="./css/todos.css">
    <script src="jquery.min.v1.7.1.js" type="text/javascript"></script>
</head>

<body>
  <div class="loadingHtml"></div>
  <script src="main.js" type="text/javascript"></script>
</body>
</html>

main.js

$.get("./template/item-template.html",function(data){
    console.info(data);
    // alert(data);    // 用于在ie6和8中进行测试
    $(".loadingHtml").append(data);
});

item-template.html

<div id="todoapp">......</div>

---------------------------------------------------------------

【PC端-windows】/如不做特殊说明，皆为在线测试/

safari：可以说最给力了；可以console。info出item-template.html中的html，还可以将html插入到index.html中。见图：

chrome:
/在线测试/正常打印和插入，见safari截图。不多话。
/本地测试/，报错提示如下：XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/Backbone.js%20Todos/template/item-template.html. Origin null is not allowed by Access-Control-Allow-Origin.

firefox：

/在线测试/正常打印和插入，见safari截图。不多话。
/本地测试/打印出Document 对象，无内容插入到index.html中。如图：

ie9:不错，这次跟safari的表现形式一样。可以打印出数据，也可以插入到主页面中。（同safari一样，打印出来的数据，跟html中的结构样式一模一样，连空格和换行都照样搭出来了。）见图：

ie6:有弹出框，可以插入。如图：

ie8：无弹出框，可插入。见图：

---------------------------------------------------------------

【移动端】

/在线测试/
【台电八寸平板】安卓系统、内置uc浏览器。对于台电的外形触感体验等等等等，我无力吐糟。正常弹出和插入数据。截图就懒得上了。（热不住再说一句，这玩意，alert弹出框，内容那么长，竟然只能显示一部分，不可以上下滑动，我勒个去。）
【ipad mini】ios5+系统、内置safari浏览器。正常弹出和插入数据。截图免。
【三星note2】安卓4.0+、uc浏览器和内置浏览器。皆可正常弹出和插入。截图免。

/套在Phonegap中，在真实环境下测试/
【台电八寸平板】安卓系统、内置uc浏览器。无压力，正常显示。

---------------------------------------------------------------

使用backbone时，由于模板太多，所以考虑将模板拆分到不同的html文件。在启用backbone框架之前，先生成模板。具体方法如下：（简略例子）

// 如果是在线webapp应用，则可以直接采用这种方式来获取template模板html文件中的内容
// 已经通过测试。具体测试报告见oschina
// 外层可以直接套backbone框架
// 生成所有模板之后，再启动backbone框架，可以考虑在启动之前加启动动画，等等。
// 后期可以考虑将页面中的js文件全部在main.js中导入进入。可以考虑换成js原生态写法，不依赖插件。
var tempName = ["item","stats"];
var tempStr = {};
var j = 0;
var callback = function(data){
    tempStr[tempName[j]] = data;
    console.info(tempStr[tempName[j]]);
    j++;
    if (tempName[j]){
        $.get("./template/" + tempName[j] + "-template.html",function(data){
            callback(data);
        });
    } else {
        $("body").append("<script src='./mvc/todos.js' type='text/javascript'></script>");
    }
};
$.get("./template/" + tempName[j] + "-template.html",function(data){
    callback(data);
});

转载于:https://my.oschina.net/maomi/blog/115728