资讯频道 → Web前端
阅读更多

5顶
1踩

Web前端

转载新闻 页面构建和JS前端不得不说的那点事儿

2012-10-25 15:48 by 副主编 MnouW 评论(5) 有3205人浏览
html css Javascript
本文来自新浪微博的UDC团队，全文内容如下：

作为微博的页面构建工程师，主要职责就是利用html&css，高质量的完成静态页面的制作，保证项目的按时完成。而页面需要的js效果则交给下游的js前端工程师去做。在微博，这两个岗位是分开的。但在大家的思维定势里可能觉得这两个岗位应由一个人来完成最好，毕竟，页面构建工程师写的html结构不一定是js工程师想要的那种，js工程师可能有更高效的方式。所以，在页面构建之前最好能与js工程师沟通一下，把实现方案确定好。

但在实际项目流程中，当进行到页面构建的时候，产品经理可能还没安排到js资源，这时我们只能按照产品的需求和自己的想法去写html结构，不仅要考虑到设计稿的还原度、浏览器的兼容性、以后可能要添加的新功能的预见位置，还要考虑怎样写html结构能让js最省事的完成产品的交互效果。作为一名有责任感的页面构建工程师，表示亚历山大！所以，我们经常查看页面源码时，会发现这样的注释，用来告诉js工程师怎么去操作dom结构。



有时为了做到最简，我们要考虑好久，前一阵子的伦敦奥运会，微博首页右侧要添加一个奥运金牌榜的模块，要求有收起和展开的按钮，用来显示不同的内容。



对网站来说这是很稀松平常的交互效果。具体html实现可能有同学会想到，做两个div，各自包含展开的内容和收起的内容。在点击展开按钮时出现一个，另一个隐藏；而在点击收起的时候做相反的处理。这种事本身也没有对与错，能实现效果就好。但作为出现在微博首页的模块，并且出现在第一屏的位置，对性能的优化肯定是要做足的。能尽量在我们css这一层做的，决不放到js那边去做。我的处理方式是把收起展开的样式都写好，放在一起，让js在默认展开或点击展开的时候显示turn_olym_on，在点击收起的时候更换为turn_olym_off，这样js就只是更换一个class名的代码量，而对于展开收起的两个按钮，我也通过更换的class名来显示和隐藏。

具体html代码：



在这里把所有用到的代码全部放在一起，把某种状态时不用显示的隐藏掉，比如展开状态时，class=”show_less W_linecolor”的div和展开的按钮class=”W_moredown”不用显示，就可以在最外层的div上写：



css暂时隐藏掉这两元素：



而当收起的时候，最外层的div就变成：



css则把之前隐藏的两个元素显示出来，并把需要隐藏的排行榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及收起的按钮class=”W_moreup”隐藏：



这样，就只需要js在点击收起的时候把turn_olym_on换成turn_olym_off，而点击展开的时候把turn_olym_off换成turn_olym_on就可以了，其余的隐藏展示全部有css来搞定。

总结

了解一些上下游工作的知识，让上下游沟通更顺畅，提高工作效率，是我们共同的目标。

页面构建的工作，面临着很多的挑战，眼下html5的新标签、高级浏览器原生支持的各种api，还有css3新鲜好玩的新属性等等。。。都需要我们去学习，不求完全掌握，但求能了解熟悉，能知道是怎么回事。把学到的新知识应用到实际项目中，对公司对团队对自己都有益~
  • 大小: 2.6 KB
  • 大小: 147 KB
  • 大小: 58.4 KB
  • 大小: 5.2 KB
  • 大小: 6.4 KB
  • 大小: 5.7 KB
  • 大小: 16.3 KB
来自: 新浪UDC
5
顶
1
踩
评论 共 5 条 请登录后发表评论
5 楼 sl166543210 2012-10-30 11:29
哇，好多大婶~~~~~~~~~~
4 楼 zoutuo1986 2012-10-30 00:48
都是同行，不应该相互贬低。有建设性意见、批评，应该写在评论里。

这个美工至少比我们这美工负责，“之前请美工设计一个页面，他直接发过来几张截图，截图挺漂亮，不过截的是一整块，没一点用。”
3 楼 yaoyuande01 2012-10-27 17:14
发现，写程序的人当中心里阴暗的真不少。
人家写文章就是给大家看看而已，又贬低又踩的！
你们都这么牛，你们写篇文章给我们看看啊。
2 楼 twincle 2012-10-25 20:34
文章内容能稍微高级那么一点点么？
1 楼 achun 2012-10-25 17:43
科普教育文么？
费了这么多笔墨，要说的就是一句
内容，样式，行为分离

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 京东单品页前端开发那些不得不说的事儿

    简介： 详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品 SKU 的落地页。主要任务是展示和商品相关的信息，如：价格、促销、库存、推荐，从而引...

  • Vue3之——和Vite不得不说的事

    1.创建一个vite项目 npm init vite-app <project-name> cd <project-name> npm install npm run dev ...yarn create vite-app <...vite 是一个基于 Vue3 单文件组件的非...快速的冷启动，不需要等待打包操

  • 2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）

    2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 ...

  • [转]京东单品页前端开发那些不得不说的事儿

    京东单品页前端开发那些不得不说的事儿 07,31,201610:48 AM 简介 详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品 SKU 的落地页面。主要任务是展示和商品相关的信息，...

  • 前端 js实现模糊搜索

    前端 js实现模糊搜索

  • 前端自动化构建工具

    为什么要使用前端构建工具？  自动化！！！！  对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。  当你在 Gruntfile 文件正确配置...

  • 前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）

    文章目录前言第一回合一、知识点：cookie（21/09/06）二、知识点：节流和防抖（21/09/07）三、知识点：var和let以及const（21/09/08）四：知识点：深拷贝和浅拷贝（21/09/09）五、知识点：作用域和作用域联（21/09/...

  • 前后端分离/前端模块化/传统页面和单页面

    前后端分离：目前比较常用的就是前端人员自行实现跳转逻辑和页面交互，后端只负责提供接口数据，二者之间通过调用 RESTful api 的方式来进行数据交互 2.前后端分离是一种项目部署模式(架构模式) 前后端分离后，各端...

  • 你不得不熟悉且熟练掌握的前端知识

    Vue是一个构建用户界面的渐进式的Javastrap框架底层是由JavaScript实现渐进式即逐渐做加法的一种模式，例如vue中的双向绑定的特性，vue中的路由，vue中的vuex等都是选择性加入的而不是必须的。

  • 前端跳槽面试总结之渲染机制、运行机制、页面性能和错误监控

    一、渲染机制 对于渲染机制，会从 DOCTYPE 及作用、浏览器渲染过程、重排 Reflow、重绘 Repaint和 布局 Layout 这几个方面。...如果文件代码不合法，那么浏览器解析时便会出一些差错。 常见的 DOCTY

  • 【收藏】前端开发必备：前端开发不得不收藏的网站,提高200%开发效率！

    本项目为个人技术收藏集，里面会不定期分享一些作者平时用到的一些库，或者常用的网站和小工具。同时作者也会在上面不定期的写一些简单的博文 如果你有好的推荐你可以提 issue 或者 pr 来告诉作者 推荐库 前端常用...

  • CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】

    集合了前端大部分基础知识以及常见面试题，看完过初试完全没问题

  • 20181118 前端开发周报：介绍几个开发前端动画不得不学的动画库

    记得点击文章末尾的“阅读原文”查看哟~下面先一起看下今天的日报摘要吧~1、介绍几个开发前端动画不得不学的动画库简评:JavaScript 库对设计师和开发人员来说,都是非常...web可...

  • 来点不一样的：解耦 HTML、CSS 和 JS之间的那些事

    来点不一样的：解耦 HTML、CSS 和 JS之间的那些事 当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS 和 JavaScript。随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于...

  • OFDM、OOK、PPM、QAM 的误码率模拟【绘制不同调制方案的误码率曲线】附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82.png

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82

  • Android SO逆向-对象的拷贝构造函数.pdf

    Android逆向过程学习

  • 基于S7-200 PLC的糖果包装控制系统设计与实现

    内容概要：本文详细介绍了基于西门子S7-200 PLC的糖果包装控制系统的设计与实现。首先阐述了PLC在工业自动化领域的优势及其在糖果包装生产线中的重要性。接着深入探讨了系统的硬件连接方式，包括传感器、执行机构与PLC的具体接口配置。随后展示了关键的编程实现部分，如糖果计数、包装执行、送膜控制、称重判断以及热封温度控制等具体梯形图代码片段。此外，还分享了一些实用的经验技巧，如防止信号抖动、PID参数优化、故障诊断方法等。最后总结了该系统的优势，强调其对提高生产效率和产品质量的重要作用。 适合人群：从事工业自动化控制、PLC编程的技术人员，尤其是对小型PLC系统感兴趣的工程师。 使用场景及目标：适用于糖果制造企业，旨在提升包装生产线的自动化程度，确保高效稳定的生产过程，同时降低维护成本并提高产品一致性。 其他说明：文中不仅提供了详细的理论讲解和技术指导，还结合实际案例进行了经验分享，有助于读者更好地理解和掌握相关知识。

  • PLC与WinCC实现三部十层电梯协同控制及优化技巧

    内容概要：本文详细介绍了参与西门子杯比赛中关于三部十层电梯系统的博图V15.1程序设计及其WinCC画面展示的内容。文中不仅展示了电梯系统的基本架构，如抢单逻辑、方向决策、状态机管理等核心算法（采用SCL语言编写），还分享了许多实际调试过程中遇到的问题及解决方案，例如未初始化变量导致的异常行为、状态机遗漏空闲状态、WinCC画面动态显示的挑战以及通信配置中的ASCII码解析错误等问题。此外，作者还特别提到一些创意性的设计，如电梯同时到达同一层时楼层显示器变为闪烁爱心的效果，以及节能模式下电梯自动停靠中间楼层的功能。 适合人群：对PLC编程、工业自动化控制、电梯调度算法感兴趣的工程技术人员，尤其是准备参加类似竞赛的学生和技术爱好者。 使用场景及目标：适用于希望深入了解PLC编程实践、掌握电梯群控系统的设计思路和技术要点的人士。通过学习本文可以更好地理解如何利用PLC进行复杂的机电一体化项目的开发，提高解决实际问题的能力。 其他说明：文章风格幽默诙谐，将严肃的技术话题融入轻松的生活化比喻之中，使得原本枯燥的专业知识变得生动有趣。同时，文中提供的经验教训对于从事相关领域的工作者来说非常宝贵，能够帮助他们少走弯路并激发更多创新思维。

  • 慧荣量产工具合集.zip

    慧荣量产工具合集.zip

Global site tag (gtag.js) - Google Analytics