您的位置：首页 > Web前端

【web前端培训之前后端的配合（中）】继续昨日的故事

2013-06-06 00:23 381 查看

前言

接着昨天的写：【web前端培训之前后端的配合（上）】以我们熟悉的Datalist说明问题吧

经过昨天晚上的学习，我们形成了一个伪datalist，但是他没有事件绑定，甚至每个datait还多出了一个无意义的div！！！

其实datalist多出一个div我是可以接受的，但是dataitem多出一个我这里就不太能接受了，所以里面还有很多东西可以继续深入。

昨天说了那么久也没有扯到和后端的配合，今天需要补足，于是进入今天的学习吧。

题外话

今天碰到一个有趣的东西，也许各位已经知道了，但是我这里还是提出来，老夫脸皮厚是不怕人笑话的哟。

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

构造HTML DOM模型。

加载图片等外部文件。

页面加载完毕。

其中图片会最后加载，无论如何都会最后加载，我当时想最开始就加载我一个广告（这个广告是个卷轴，会慢慢展开，会有黑色的层遮盖）。

我当时虽然将它放到了最前面，却给他的display设置为none了，于是我满以为他会最先加载的，结果却是最后加载（因为我js在最后控制的显示）。

我这里就犯了一个错误，因为在display为none的情况下，图片是不会加载的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试页面</title>
</head>
<body>
<div style=" background-image: url(http://pic002.cnblogs.com/images/2012/294743/2012032201481631.png); display: none;"></div>
</body>
</html>

PS：注意，我这里的说的都是背景，不是img标签，img标签都会加载的。

以上代码开始不会加载背景图片，但是当显示时候起图片便会加载了。所以我们若是有些隐藏的dom元素需要加载而且里面含有大量背景图片。而我们加载时候又不想其感觉加载很慢，就需要做特殊处理啦。

完了，这里还有其它问题：

在动画执行过程中因为下面还有几个js文件需要加载，加载时候动画效果会偶尔出现一点点卡的现象，这块需要处理，我想的是采用异步加载余下js的方法，但是感觉为一个广告又不太划算，不知道各位有什么看法没有。

好了进入今日的正题。

剔除多余的div

首先上一章昨天的图：

/// <reference path="jquery-1.7.1.min.js" />
var DataItem = function () {
this.data = null;
this.el = null;
this.id = '';
this.parentObj = null;
this.idPrefix = '_item_'; //id前缀
this.className = '';
this.event = {};
this.elementEvent = {};
};

DataItem.prototype.load = function (index, data) {
this.data = data;
var parentEl = this.parentObj.el; //注意此处是parent已经赋值
var parentId = this.parentObj.id
var id = parentId + this.idPrefix + index; //生成唯一id
this.id = id;
//注意啦，这里根据html片段开始生成最终数据了哦
var templateObj = this.templateObj; //此处的膜拜已经过处理
var tmpHtm = '';
$.each(templateObj, function (i, item) {
if (item.field) {
tmpHtm = tmpHtm + item.html + data[item.field]
} else {
tmpHtm = tmpHtm + item.html;
}
});
var el = $(tmpHtm);
//    var el = $('<div></div>'); //形成dom
//为了避免id重复，这里对id必须进行处理，我们同时不允许为元素设置id
if (!el[0]) {
el = $('<div/>');
el.html(tmpHtm);
}
el.attr('id', id);
if (this.className)
this.el.attr("class", this.className);
parentEl.append(el);
this.el = el;
//增加相应事件绑定
this.bindEvent();
this.bindElementEvent();
};

DataItem.prototype.bindEvent = function () {
var scope = this;
var el = scope.el; //获取当前元素
var data = scope.data; //当前行数据
var events = scope.event;
$.each(events, function (k, v) {
var type = v.eventType;
var func = v.funcName;
var sender = v.sender; //最初调用对象
if (func && typeof func == 'function') {
if (type == 'ready') {
func.call(scope, data, sender);

} else {
el.unbind(type).bind(type, function (e) {
func.call(scope, data, e, sender);
});
}
}
});
};
//绑定item里面的某一个标签
DataItem.prototype.bindElementEvent = function () {
var scope = this;
var data = scope.data; //当前行数据
var events = scope.elementEvent;
$.each(events, function (k, v) {
var elementkey = v.elementkey; //元素选择器
var type = v.eventType;
var func = v.funcName;
var sender = v.sender;
var id = '#' + scope.id + ' ' + elementkey;
var el = $(id);
if (func && typeof func == 'function') {
if (type == 'ready') {
func.call(scope, data, el, sender);
} else {
el.unbind(type).bind(type, function (e) {
func.call(scope, data, el, e, sender);
});
}
}
});
};

var Datalist = function () {
this.id = new Date().getTime().toString();
this.items = []; //所具有的dataitem的项目
this.dataSource = null; //各位对他熟悉吧
this.container = $("body"); //我们的datalist的容器，没有指定的话就放在body里面
this.style = {}; //可以为其设置样式这里考虑的好像有点多了
this.attribute = {}; //为其设置属性
this.className = '';
this.itemClass = ''; //子元素的class
this.tag = '<div></div>';
this.template = ''; //可以在此设置，也可以指定容器id，然后由容器寻找

this.itemEvent = {};
this.itemElementEvent = {};
};

//好了，我们第一步需要
Datalist.prototype.formatTemplate = function () {
var template = this.template;
if (template.length < 10) {
template = $('#' + template);
if (template[0]) template = template.val();
}
var reg = /\{%[\w]*\%}/;
var para = reg.exec(template);
var html = template;
var templateObj = [];
while (para && para.length > 0) {
var len = para.index;
var tmp = {};
tmp.html = html.substr(0, len);
tmp.field = para[0].substr(2, para[0].length - 4);
templateObj.push(tmp);
html = html.substr(len + para[0].length);
para = reg.exec(html);
}
tmp = {};
tmp.html = html;
templateObj.push(tmp);
this.templateObj = templateObj; //注意我们的datalist多了一个东西了哦
};

Datalist.prototype.bind = function () {
//初始化属性等操作，我们暂时忽略之
//...............
this.initElement(); //初始化元素
this.formatTemplate();
var scope = this;
var itemIndex = 0;
var container = this.container;
container.append(this.el); //将datalist装入容器

$.each(this.dataSource, function (k, v) {
var item = new DataItem(); //实例化了一个item了哦
item.parentObj = scope;
item.templateObj = scope.templateObj;
item.event = scope.itemEvent;
item.elementEvent = scope.itemElementEvent;
item.load(itemIndex, v);
scope.items.push(item);
itemIndex++;
});
};

Datalist.prototype.initElement = function () {
var el = $(this.tag);
el.attr('id', this.id);
this.el = el;
this.initAttribute();
this.initStyle();
};

Datalist.prototype.initAttribute = function () {
var scope = this;
var element = scope.el;
$.each(scope.attribute, function (key, value) {
if (typeof (value) == "string")
if (value && value.length > 0) {
element.attr(key, value);
}
});
};

Datalist.prototype.initStyle = function () {
var scope = this;
var element = this.el;
var style = this.style;
$.each(style, function (key, value) {
if (value && value.length > 0) {
element.css(key, value);
}
});
};

结语

本来今天想结束的，结果不知不觉时间就没有了，看来的加快点速度啊。。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航