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

简介:
前言

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

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

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

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

题外话

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

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML DOM模型。
加载图片等外部文件。
页面加载完毕。
其中图片会最后加载,无论如何都会最后加载,我当时想最开始就加载我一个广告(这个广告是个卷轴,会慢慢展开,会有黑色的层遮盖)。

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

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

复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4     <title>测试页面</title>
5 </head>
6 <body>
7     <div style=" background-image: url(http://pic002.cnblogs.com/images/2012/294743/2012032201481631.png); display: none;"></div>
8 </body>
9 </html>
复制代码
PS:注意,我这里的说的都是背景,不是img标签,img标签都会加载的。

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

完了,这里还有其它问题:

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

好了进入今日的正题。

剔除多余的div

首先上一章昨天的图:



最外层div为datalist的,我这里可以接受,但是内层的div,我这里真不能接受了!所以我们想法改变一下,这里也需要考虑到这种场景:

若是外层datalist使用的不是div,而是ul或者dl我们也是必须支持的,因为里面的item是可能出现li的

我们这里做一点简单的处理,若是模板不能形成dom,我们便为之添加div,若是能的话就不需要div了:

复制代码
 1 DataItem.prototype.load = function (index, data) {
 2     this.data = data;
 3     var parentEl = this.parentObj.el; //注意此处是parent已经赋值
 4     var parentId = this.parentObj.id
 5     var id = parentId + this.idPrefix + index; //生成唯一id
 6     this.id = id;
 7     //注意啦,这里根据html片段开始生成最终数据了哦
 8     var templateObj = this.templateObj; //此处的膜拜已经过处理
 9     var tmpHtm = '';
10     $.each(templateObj, function (i, item) {
11         if (item.field) {
12             tmpHtm = tmpHtm + item.html + data[item.field]
13         } else {
14             tmpHtm = tmpHtm + item.html;
15         }
16     });
17     var el = $(tmpHtm);
18     //    var el = $('<div></div>'); //形成dom
19     //为了避免id重复,这里对id必须进行处理,我们同时不允许为元素设置id
20     if (!el[0]) {
21         el = $('<div/>');
22         el.html(tmpHtm);
23     }
24     el.attr('id', id);
25     if (this.className)
26         this.el.attr("class", this.className);
27     parentEl.append(el);
28 };
复制代码
 View Code
 



现在这种结构式可以接受的。。。好啦,我们现在来为我们里面的元素绑定事件吧:

事件绑定

无论是我们的datalist还是我们的dataitem,他们都是拥有事件的,我们应该可以像.net那样可以找到各自里面的某个标签,并且操作他呢,我们并且也可以datalist嵌套的。

首先我们为datalist添加两个参数,一个用于自己的事件,一个用于定义其item的事件,因为他的item事件应该大致相同:

复制代码
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 = {};
};
复制代码
注意最后我们新增加的方法哦,itemEvent用于datalist的item的,比如上面的li标签,后面的用于其中item里面的元素,比如h3标签。

我们在.net中定义事件好像也是放出来的呢,我们这先看看怎么使用吧:

复制代码
 1 $(document).ready(function () {
 2     var _url = 'Ajax.aspx?sql=select * from bigType';
 3     $.getJSON(_url, function (data) {
 4         var d = new Datalist();
 5         d.tag = '<ul/>'
 6         d.template = 'tmp';
 7         d.dataSource = data;
 8         d.itemEvent.clickLi = {
 9             eventType: 'click',
10             funcName: function (data, e, sender) {
11 
12                 var s = '';
13             }
14         };
15         d.bind();
16     });
17 });
复制代码
复制代码
 1 DataItem.prototype.bindEvent = function () {
 2     var scope = this;
 3     var el = scope.el; //获取当前元素
 4     var data = scope.data; //当前行数据
 5     var events = scope.event;
 6     $.each(events, function (k, v) {
 7         var type = v.eventType;
 8         var func = v.funcName;
 9         var sender = v.sender; //最初调用对象
10         if (func && typeof func == 'function') {
11             if (type == 'ready') {
12                 func.call(scope, params, e, original);
13             } else {
14                 el.unbind(type).bind(type, function (e) {
15                     func.call(scope, data, e, sender);
16                 });
17             }
18         }
19     });
20 };
复制代码


我们看到这里基本上达到了我们的要求了,而且传了很多有意义的参数回来,接下来我们再加一点东西便来试试吧:

这里贴上完整代码啦:

js:

 View Code
html:

 View Code
好了,我们来检测下今天的学习成果吧。

嵌套的datalist

我们这里搞一个datalist嵌套的实验,并点击每个h3便alert名字:

完整代码:

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .box { margin: 10px; padding: 10px; border: 1px solid gray; display: inline-block; }
 7     </style>
 8     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 9     <script src="js/Datalist.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         $(document).ready(function () {
12             var _url = 'Ajax.aspx?sql=select * from bigType';
13             $.getJSON(_url, function (data) {
14                 var d = new Datalist();
15                 d.template = 'datalist';
16                 d.dataSource = data;
17                 d.itemElementEvent.clickH3 = {
18                     elementkey: 'h3',
19                     eventType: 'click',
20                     funcName: function (data, el, e) {
21                         alert(el.html());
22                     }
23                 };
24                 d.itemElementEvent.loadItem = {
25                     elementkey: '.wrapper',
26                     eventType: 'ready',
27                     funcName: function (data, el) {
28                         var bigTypeId = data.id;
29                         var url = 'Ajax.aspx?sql=select * from smallType where bigTypeId=' + bigTypeId;
30                         var scope = this;
31                         $.getJSON(url, function (_data) {
32                             var tmp = new Datalist();
33                             tmp.container = el;
34                             tmp.template = 'dataItem';
35                             tmp.tag = '<ul/>'
36                             tmp.dataSource = _data;
37                             tmp.bind();
38                             var s = '';
39 
40                         });
41                     }
42                 };
43                 d.bind();
44             });
45         });
46     </script>
47 </head>
48 <body>
49     
50 <textarea id="datalist">
51     <div class="box">
52         <h3>
53             {%title%}</h3>
54         <div class="wrapper"></div>
55     </div>
56 </textarea>
57     
58 <textarea id="dataItem">
59     <li class="box">
60         <dl>
61             <dt>{%id%}</dt>
62             <dd>
63                 {%title%}</dd>
64         </dl>
65     </li>
66 </textarea>
67 </body>
68 </html>
复制代码
 js




 

结语

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

您可以考虑给小钗发个小额微信红包以资鼓励 


本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/06/06/3120266.html,如需转载请自行联系原作者



相关文章
|
6天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
15 2
|
3天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
7天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
20 3
|
7天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
14 3
|
7天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
20 2
|
8天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
14 2
|
21天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
21天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0
|
21天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
21天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。