【广告代码】前端郭锐

  • A+
所属分类:商城源码
摘要

总结:在重建旧的广告准则之初,有一种突然的需求。现在让我简单介绍一下。也许这篇文章更多的是关于思想和结构。具体的业务实现也会很简单,但不会太多。用这篇文章来记录和保存我在广告项目中的宝贵记忆。紧急事件:在最后一篇文章中,我和我的广告前端代码(1):分手重新整合,提到我正在重建A线的广告代码,但在开发过程中,有一个小插曲——添加logo。由于新的广告法,所有的广告都必须标明“广告”。要求在

总结:

在重建旧的广告准则之初,有一种突然的需求。现在让我简单介绍一下。也许这篇文章更多的是关于思想和结构。具体的业务实现也会很简单,但不会太多。

用这篇文章来记录和保存我在广告项目中的宝贵记忆。

紧急事件:

在最后一篇文章中,我和我的广告前端代码(1):分手重新整合,提到我正在重建A线的广告代码,但在开发过程中,有一个小插曲——添加logo。由于新的广告法,所有的广告都必须标明“广告”。要求在一周内,配合开发和测试,半途而废,走出“程咬金”。

应急预案:

这是一件非常简单的事情,如果我重构了广告代码,只需向公共父类添加一个函数,就可以批量添加标识。但是,新的广告编码的开发,需要很长时间,而新的广告编码只对应于一线业务,标识的事情必须添加到整个网站的广告中。

如果拖到新的广告代码上,那么这段时间是非常危险的,而且业务线B无法处理(两个业务线之间的巨大差异是历史原因);如果旧代码被标记,它将面临低可重用代码,以及增加的工作量。e by one(在上一篇文章中提到,“旧一代”代码是由不同广告片段拼凑而成的。没有共同的部分和可控的生命周期。同时,公司希望不要因为“标签”的事情而影响广告代码重构的进度,从而将“标签”的成本降到最低。

通过与广告团队和两个业务线的沟通。借鉴应用程序开发中“补丁”的思想,最后讨论了一种解决方案——“旧代码识别补丁”。

这里有一个补丁:

这应该是一个小项目,但他也是我的“孩子”和典型。所以我会和你分享这个“简单”的代码。

由于它是一个补丁,我们需要澄清几个特点:成本低、体积小、依赖性小、适用性强、污染少、使用方便。以下是这些特性的组合:

1。成本低,使用方便:

因为它需要快速在线,并且不会影响广告代码重构的进度。因此,要避免“过度设计”,努力降低实施难度。当新的广告代码上线(2个月后),补丁将与旧代码一起离线。似乎没有必要执行一个复杂的项目。将tagging函数按入js文件并在页面底部引用它。不用时取下。

对于样式,我们不编写单个css文件。所有样式都写在dom本身的样式属性中。

2。体积小,依赖性小:

由于dom中使用的jquery,如果将带有“标记”功能的jquery打包到一个文件中,它会将文件大小增加几倍(可能业务代码没有js库大)。幸运的是,我们公司的每页都有一个全局$(jquery)。所以我们更适合在页面上引用jquery。

将样式写入dom样式的好处是不需要在页面中引用css文件,并且css权限很高。

三。适用性强,污染小:

与大多数j s提供少量页面(或单个页面)的情况不同,考虑到将js添加到公司整个网站的每个页面,我们必须确保js在任何页面和任何浏览器中稳定运行,浏览器兼容性,ie hack,以及在不同浏览器中的j。必须考虑S的凹坑。

较小的污染有两方面:一方面,宿主页面上的其他js不应该污染我们标记的js;另一方面,我们的js不应该影响以前范围的环境。一个好的结束是必要的。

代码结构的组织方式:

1。方案1:

使用webpack本身生成的闭包来屏蔽内部和外部环境。此外,webpack还可以将http://www.526bt.com/”>http://www.526bt.com/分组,以commonjs的方式编织我的js代码。多个模块打包到一个文件中。问题是项目太小,无法持续维护,我当时对webpack不是很熟悉。

2。方案二:

从一开始只有一个js文件,所有代码都封装在一个即时执行函数中。最后,用吞咽工具压缩。其优点是代码结构简单,在编译期间没有代码混合。缺点是没有模块管理。

最后,我选择了看似普通的方案2,因为它足以满足我们的需求,我们不打算长期维持这个项目。如果需求更复杂,我会考虑使用第一个选项。

逻辑结构是什么?

1。获得广告空间

由于添加了徽标,因此有必要先找出需要徽标的位置。因为每个广告都有一个占位符ID,所以我只需要知道今天在这个页面上广告了哪些占位符ID,这样做很容易。问题是,事实上,我真的不知道今天报纸上有哪些广告。找到后端和业务线A后端,讨论两个解决方案:(1)提供获取ID(当前页面和今天的广告)的界面;(2)在页面上显示出此页面的所有占用ID。

乍一看,方案(1)会更合理。但我们采用了方案(2)。考虑到成本,为了满足这一临时需求,破坏广告后台系统的各自结构和系统运行,增加相应的页面时间和占用ID在耦合方案中是固定的,不影响相应的页面时间。他页面,和两个后端组不需要更改。改变自己的体制结构。但是,我们应该注意的计划(2)只得到当前页面上的哪些广告,而没有“今天有哪些广告?”.

2。包延迟和计数停止

由于dom就绪和简单延迟都不能准确判断,我们从基于事件和基于时间的方法转向基于数据结构的方法。

首先,我们需要定义一个数据结构,专门记录占位符id是否已插入到广告中。

在dom就绪后打开计时器(注意,在最后一个回调完成执行之前,不能打开下一个)。每次检查尚未插入广告的数据结构中的dom时,如果状态更改,请添加广告徽标。

这种脏检查的范围会越来越小。请注意,由于存在未播发的播发,如果未添加限制,则脏检查将永远进行,因此我将指定具有延迟分组的组数。我成立了五个小组,分别在3000毫秒、7000毫秒、11000毫秒、15000毫秒和25000毫秒从dom ready开始检查。最终,所有的检测结果都被标记出来了,剩下的被认为是今天的广告。

三。如何马克

原则上,只需加载原始广告的左下角。但这里有一个漏洞——旧页面和旧代码的页面结构不合理。因此,广告的左下角不一定是广告相对于父元素的左下角。例如,有些广告是居中的,但徽标被添加到页面左侧,甚至超过1200像素(页面没有大的主包装)。

在这种情况下,一方面我们需要维护页面的前端来修正版面,另一方面,尽量通过js来确定广告的有效位置。并考虑要插入的节点的位置,而不一定是要由站id位标识的父节点。考虑到旧的http://www.526bt.com/>http://www.526bt.com/代码只包含img和flash,img和flash都有一个固定的结构。因此结构匹配是可行的。

4。用css或图片识别

在广告中添加一个徽标,然后我们将其添加到广告的左下角。但这么小的标志怎么能实现呢?通常,第一个反应必须是向属性添加一个跨度。

起初我也做了同样的事情,但后来我发现我们的标志中的字符太小了。已超过某些浏览器的最小文本大小限制。此外,我们应该写太多的风格。一方面要控制样式,另一方面要覆盖可继承的属性,可读性太差。(当然,主要原因是浏览器对最小文本大小的限制。)

我不得不用图片来标记它。这时,我发现主网站和其他网站也采用了图片的方式,似乎他们已经被坑了。图片如下:

另一个问题是设计生给我的反馈,也就是说,在设计制作这个小图片的时候,要注意衬线字体和非衬线字体的区别,当图片小到一定程度的时候。“广告”这个词能全部显示吗?

结论:

与庞大的广告投放系统和广告展示系统相比,“贴标签”的工程不能小。然而,作为一个“补丁”,js的这一部分充满了脏腑,它简单而轻巧。这种“补丁”不仅需要适应不同业务完成的页面环境的质量。如果“旧代码”不提供任何接口,“黑色”操作。在保证功能的前提下,尽量实现工程化,避免过度设计。

我的故事和广告的前端代码还在继续!

分享当前页面将至少获得10%佣金,点此获取推广链接(规则说明)。

本站VIP源码资源永久免费下载!持续更新!www.526bt.com

加入999永久VIP会员带做项目包赚钱!教引流包搭建,社群资源共享!

新项目更新通知QQ群:767688774 站长技术交流QQ付费群:552760713

点击这里给我发消息备用QQ:点击这里给我发消息

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 源码安装视频教程
  • 教程项目网赚APP扫码下载
  • weinxin

admin
2019年最新个体营业执照代办500元3-4天即可快递发你
SLL证书配置支持https网站
第三方支付通道申请 支付宝支付代申请 微信支付代申请 QQ钱包支付代申请
做网站 PHP源码修改二次开发程序页面美化/功能定制/仿站/仿模板
点击注册

发表评论

您必须才能发表评论!