前端开发学习之——利用模板实现涉及url问题时的bug分析及解决（chrome源码）
例如我们要实现如下页面，其中历史页面列表想来自底层返回的数据，此处用testData代替：
最初我写的实现代码如下：
html文件：
<!doctype html>
<html class="starting-up" i18n-values="dir:textdirection; lang:language">
<head>
<meta charset="utf-8">
<title i18n-content="title"></title>
<link rel="stylesheet" type="text/css" href="last_tabs_list.css">
<link rel="stylesheet" href="cdosbrowser://resources/css/tree.css">
<link rel="stylesheet" href="cdosbrowser://resources/css/widgets.css">
<script src="cdosbrowser://resources/js/cr.js"></script>
<script src="cdosbrowser://resources/js/cr/ui.js"></script>
<script src="cdosbrowser://resources/js/cr/ui/tree.js"></script>
<script src="cdosbrowser://resources/js/util.js"></script>
<script src="cdosbrowser://resources/js/icon.js"></script> </head>
<body>
<div class="container">
<div class="nav_container">
<div class="top_nav">
<p>上次未关闭的页面</p>
</div>
</div> <div class="content">
<div class="content_top">
<div class="select_all_container">
<input type="checkbox" id="check_all"></input>
<span class="select_all">全选</span>
</div>
<div class="open_selected_tabs">
<button class="open_all_selected" id="open_all_selected">打开选中页面</button>
</div>
</div>
<div id="tabs_list" class="tabs_list">
<div class="tab_container" id="tab_{{index}}">
<input type="checkbox" class="check" id="check_{{index}}"></input>
<div class="favicon" style="background-image: {{bgimage}};"></div>
<!--<div class="favicon" style='background-image: {{bgimage}};'></div>-->
<div class="title">
<a href="{{url}}" target="_blank" title="{{title}}" focus-type="title" tabindex="0">{{title}}</a>
</div>
</div>
</div>
</div>
</div>
<script src="last_tabs_list.js"></script
js文件：
var testData =
[ {
title: "历史记录",
url: "cdosbrowser://history-frame/#range=3&offset=3"
},
{
title: "cdosbrowser://help",
url: "cdosbrowser://help/"
},
{
title: "百度一下，你就知道",
url: "https://www.baidu.com/"
},
{
title: "爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看",
url: "http://www.iqiyi.com/"
} ] function checkAll(){
console.log("checkEl.length="+checkEl.length);
if(checkAllEl.checked){
for(var i=0; i<checkEl.length; i++){
checkEl[i].checked = true;
console.log(checkEl.length);
console.log(checkEl[i].checked);
}
}else{
for(var i=0; i<checkEl.length; i++){
checkEl[i].checked = false;
$("open_all_selected").disabled = true;
}
}
updateButtonStatus();
} function tabsListDOM(data){
var tabsListTemplate = $("tabs_list").innerHTML;
var wrap=[];
for(var i=0; i<data.length; i++){
var backgroundImage = cr.icon.getFavicon(data[i].url);
var _tabsListTemplate = tabsListTemplate.replace(/{{index}}/g,i)
.replace(/{{url}}/,data[i].url)
.replace(/{{bgimage}}/,backgroundImage)
.replace(/{{title}}/g,data[i].title); wrap.push(_tabsListTemplate);
}
$("tabs_list").innerHTML = wrap.join('');
//console.log("wrap.join('')="+wrap.join(''));
//console.log("$('tabs_list').innerHTML="+$("tabs_list").innerHTML);
checkEl = $("tabs_list").querySelectorAll(".check");
checkAllEl = $("check_all");
checkAllEl.checked =true;
checkAll();
}
tabsListDOM(testData); function updateButtonStatus(){
var anyChecked = document.querySelectorAll('#tabs_list input:checked') .length!= 0;
$('open_all_selected').disabled = !anyChecked;
console.log("anyChecked="+anyChecked);
} function checkOne(){
var flag = true;
for(var i=0; i<checkEl.length; i++){
if(!checkEl[i].checked){
flag = false;
}
}
if(flag){
checkAllEl.checked = true;
}else{
checkAllEl.checked = false;
}
updateButtonStatus();
} function openAllSelected(){
var selectedUrl=[];
for(var i=0; i<checkEl.length; i++){
if(checkEl[i].checked){
selectedUrl.push(testData[i].url);
console.log(testData[i].url);
}
}
} checkAllEl.addEventListener("click", checkAll); for(var i=0; i<checkEl.length; i++){
checkEl[i].addEventListener("click", checkOne);
} if((!$('open_all_selected').disabled)){
$("open_all_selected").addEventListener("click", openAllSelected);
}
打印结果如下：
其中cr.icon.getFavicon(data[i].url)返回的数据是url("cdosbrowser://favicon/http://www.iqiyi.com/")
wrap.join('')=
<div class="tab_container" id="tab_0">
<input type="checkbox" class="check" id="check_0">
<div class="favicon" style="background-image: url("cdosbrowser://favicon/cdosbrowser://history-frame/#range=3&offset=3");"></div>
<div class="title">
<a href="cdosbrowser://history-frame/#range=3&offset=3" target="_blank" title="历史记录" focus-type="title" tabindex="0">历史记录</a>
</div>
</div>
<div class="tab_container" id="tab_1">
<input type="checkbox" class="check" id="check_1">
<div class="favicon" style="background-image: url("cdosbrowser://favicon/cdosbrowser://help/");"></div>
<div class="title">
<a href="cdosbrowser://help/" target="_blank" title="cdosbrowser://help" focus-type="title" tabindex="0">cdosbrowser://help</a>
</div>
</div>
<div class="tab_container" id="tab_2">
<input type="checkbox" class="check" id="check_2">
<div class="favicon" style="background-image: url("cdosbrowser://favicon/https://www.baidu.com/");"></div>
<div class="title">
<a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道" focus-type="title" tabindex="0">百度一下，你就知道</a>
</div>
</div>
<div class="tab_container" id="tab_3">
<input type="checkbox" class="check" id="check_3">
<div class="favicon" style="background-image: url("cdosbrowser://favicon/http://www.iqiyi.com/");"></div>
<div class="title">
<a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看" focus-type="title" tabindex="0">爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看</a>
</div>
</div>
$('tabs_list').innerHTML=
<div class="tab_container" id="tab_0">
<input type="checkbox" class="check" id="check_0">
<div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" history-frame="" #range="3&offset=3");""></div>
<div class="title">
<a href="cdosbrowser://history-frame/#range=3&offset=3" target="_blank" title="历史记录" focus-type="title" tabindex="0">历史记录</a>
</div>
</div>
<div class="tab_container" id="tab_1">
<input type="checkbox" class="check" id="check_1">
<div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" help="" ");"=""></div>
<div class="title">
<a href="cdosbrowser://help/" target="_blank" title="cdosbrowser://help" focus-type="title" tabindex="0">cdosbrowser://help</a>
</div>
</div>
<div class="tab_container" id="tab_2">
<input type="checkbox" class="check" id="check_2">
<div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" https:="" www.baidu.com="" ");"=""></div>
<div class="title">
<a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道" focus-type="title" tabindex="0">百度一下，你就知道</a>
</div>
</div>
<div class="tab_container" id="tab_3">
<input type="checkbox" class="check" id="check_3">
<div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" http:="" www.iqiyi.com="" ");"=""></div>
<div class="title">
<a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看" focus-type="title" tabindex="0">爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看</a>
</div>
</div>
由上可见background-image的赋值产生了问题，而且神奇的是wrap.join('')打印的结果竟然和$('tabs_list').innerHTML不一样，而且前者看上去好像还是对的，后者已然是乱码。
这是为什么呢？
实际上wrap.join('')将模板拼接的时候还只是进行的字符串的运算，只是把我们组合的内容按部就班的展示给我们，但是赋值给innerHTML的时候就存在一个解析的过程了。
而且其实在wrap.join('')打印的时候就能看出问题所在了，双引号包裹双引号产生的冲突，导致浏览器没办法正常解析。而且即使把外层的双引号改成单引号，打印结果仍然是双引号，不知道是否跟chrome内部有关。
<div class="favicon" style="background-image: {{bgimage}};"></div>
<!--<div class="favicon" style='background-image: {{bgimage}};'></div>-->
解决办法：
法一：将除background-image之外的其他DOM结构构建好，再动态设置其background-image。
法二：将整个模板直接作为变量，实现如下：
<!doctype html>
<html class="starting-up" i18n-values="dir:textdirection; lang:language">
<head>
<meta charset="utf-8">
<title i18n-content="title"></title>
<link rel="stylesheet" type="text/css" href="last_tabs_list.css">
<link rel="stylesheet" href="cdosbrowser://resources/css/tree.css">
<link rel="stylesheet" href="cdosbrowser://resources/css/widgets.css">
<script src="cdosbrowser://resources/js/cr.js"></script>
<script src="cdosbrowser://resources/js/cr/ui.js"></script>
<script src="cdosbrowser://resources/js/cr/ui/tree.js"></script>
<script src="cdosbrowser://resources/js/util.js"></script>
<script src="cdosbrowser://resources/js/icon.js"></script> </head>
<body>
<div class="container">
<div class="nav_container">
<div class="top_nav">
<p>上次未关闭的页面</p>
</div>
</div> <div class="content">
<div class="content_top">
<div class="select_all_container">
<input type="checkbox" id="check_all"></input>
<span class="select_all">全选</span>
</div>
<div class="open_selected_tabs">
<button class="open_all_selected" id="open_all_selected">打开选中页面</button>
</div>
</div>
<div id="tabs_list" class="tabs_list">
</div>
</div>
</div>
<!-- <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> -->
<script src="last_tabs_list.js"></script>
</body>
</html>
js代码如下：
//cr.define('last_tabs_list', function(){
// 'use strict'
var testData =
[ {
title: "历史记录",
url: "cdosbrowser://history-frame/#range=3&offset=3"
},
{
title: "cdosbrowser://help",
url: "cdosbrowser://help/"
},
{
title: "百度一下，你就知道",
url: "https://www.baidu.com/"
},
{
title: "爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看",
url: "http://www.iqiyi.com/"
} ]
function checkAll(){
console.log("checkEl.length="+checkEl.length);
if(checkAllEl.checked){
for(var i=0; i<checkEl.length; i++){
checkEl[i].checked = true;
console.log(checkEl.length);
console.log(checkEl[i].checked);
}
}else{
for(var i=0; i<checkEl.length; i++){
checkEl[i].checked = false;
$("open_all_selected").disabled = true;
}
}
updateButtonStatus();
}
function tabsListDOM(data){
var tabsListTemplate = '<div class="tab_container" id="tab_{{index}}">' +
'<input type="checkbox" class="check" id="check_{{index}}"></input>'+
"<div class='favicon' style='background-image: {{bgimage}};'></div>" +
'<div class="title">' +
'<a href="{{url}}" target="_blank" title="{{title}}" focus-type="title" tabindex="0">{{title}}</a>'+
'</div>' +
'</div>';
var wrap=[];
for(var i=0; i<data.length; i++){
var backgroundImage = cr.icon.getFavicon(data[i].url);
var _tabsListTemplate = tabsListTemplate.replace(/{{index}}/g,i)
.replace(/{{url}}/,data[i].url)
.replace(/{{bgimage}}/,backgroundImage)
.replace(/{{title}}/g,data[i].title);
wrap.push(_tabsListTemplate);
}
$("tabs_list").innerHTML = wrap.join('');
console.log("wrap.join('')="+wrap.join(''));
console.log("$('tabs_list').innerHTML="+$("tabs_list").innerHTML);
checkEl = $("tabs_list").querySelectorAll(".check");
checkAllEl = $("check_all");
checkAllEl.checked =true;
checkAll();
}
tabsListDOM(testData);
function updateButtonStatus(){
var anyChecked = document.querySelectorAll('#tabs_list input:checked') .length!= 0;
$('open_all_selected').disabled = !anyChecked;
console.log("anyChecked="+anyChecked);
}
function checkOne(){
var flag = true;
for(var i=0; i<checkEl.length; i++){
if(!checkEl[i].checked){
flag = false;
}
}
if(flag){
checkAllEl.checked = true;
}else{
checkAllEl.checked = false;
}
updateButtonStatus();
}
function openAllSelected(){
var selectedUrl=[];
for(var i=0; i<checkEl.length; i++){
if(checkEl[i].checked){
selectedUrl.push(testData[i].url);
console.log(testData[i].url);
}
}
}
checkAllEl.addEventListener("click", checkAll);
for(var i=0; i<checkEl.length; i++){
checkEl[i].addEventListener("click", checkOne);
}
if((!$('open_all_selected').disabled)){
$("open_all_selected").addEventListener("click", openAllSelected);
}
//});
//document.addEventListener('DOMContentLoaded', last_tabs_list.onLoad);
前端开发学习之——利用模板实现涉及url问题时的bug分析及解决（chrome源码）的更多相关文章
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- WEB前端开发学习：源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- web前端开发学习路径图
第一阶段 WEB前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限 ...
- 关于web前端开发学习的顺序
学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题.下面简单的说一下.由于在国内大学课程里面,几乎没有前端开发这门课程,无非就是一些网页设计之类的课程,但那些课程无论是老师讲还 ...
- Web前端开发学习误区，你掉进去了没？
从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...
- Web 前端开发学习之路（入门篇）
字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...
- web前端开发学习路线图
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
- web 前端开发学习路线
初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...
随机推荐
- CentOS7.2安装mysql-5.7.19多实例
安装多实例之前首先需要先安装mysql,这里就不介绍如何安装mysql了,参考前面的博客:https://www.cnblogs.com/hei-ma/p/9505509.html 安装多实例之前需要 ...
- TPO-18 C1 Apply for a part-time job on campus
TPO-18 C1 Apply for a part-time job on campus 第 1 段 1.Listen to a conversation between a student and ...
- mongodb windows 4 zip安装
安装mongoDB目的:学习Express,顺带mongodb. 本文目的: 4.0.2的mongodb在windows7上竟然安装不了. 没办法,用压缩包手动安装吧... 安装环境:win7sp1x ...
- Windows和Linux系统如何退出python命令行
python命令行是新手学习python过程中必须要学的一个工具,下面我们来看一下怎么退出python命令行. 第一种方式: 使用python提供的exit()函数,linux平台和windows平台 ...
- ubuntu docker 安装
1.安装环境 Ubuntu16.04 安装 升级docker .docker-compose.docker-machine Docker 有两个版本 docker-ce 社区版和docker-ee企业 ...
- Seven super tips for successful selling on Amazon
Check for orders daily: To ship quickly you need to find out about orders promptly. We will e-mail y ...
- 20181113-7 Beta阶段第1周/共2周 Scrum立会报告+燃尽图 04
作业要求:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2386] 版本控制:[https://git.coding.net/lglr2 ...
- Python：装饰器的简单理解
1.装饰器的本质是函数,主要用来装饰其他函数,也就是为其他函数添加附加功能 2.装饰器的原则: (1) 装饰器不能修改被装饰的函数的源代码 (2) 装饰器不能修改被装饰的函数的调用方式 3.实现装饰器 ...
- 2014-2015 ACM-ICPC, NEERC, Eastern Subregional Contest Problem G. The Debut Album
题目来源:http://codeforces.com/group/aUVPeyEnI2/contest/229669 时间限制:1s 空间限制:64MB 题目大意:给定n,a,b的值 求一个长度为n的 ...
- html个人网页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...