前端程序员容易忽视的一些基础知识

基础数据结构与算法

现在有两个不同的JSON,比较复杂,可以参考这里的DEMO中返回的JSON。要比较它们的差异,除了用现成的工具如

beyond compare
以外,如果我们的机器上没有安装这个工具,能如何较快解决?作为一个程序员,一个个对比是不可行的,对比完也不会有什么收获。我会把之放进Excel中(如果你机器连这个都没有,那忽视我),先排序,再用
二分法
去快速定位找到有差异的JSON属性,即使是1024个字段的大数据,也最多10次的定位即可找到。其实算法这东西,并不是给你一道题目然后把死记下来的内容背出来,而是当你遇到相应的情景时,能想到用这个方法去解决。

HTML/CSS

DOCTYPE

曾经项目中遇到这样一个问题,用其他浏览器打开页面是好的,唯独是IE8打开时出奇地慢。我注意到IE8打开时慢但CPU消耗并不高,只是网页空白很久没渲染出来,可以排除JS算法上的问题。经过细心研读代码发现,有人把一部分script、 link等标签放到了

DOCTYPE
的前面。
DOCTYPE
是用来告诉浏览器解释整个文档的一套法则的,一定要放在HTML部分的最前面,先有 script标签,那就意味着浏览器已经开始解释了,后面再有
DOCTYPE
也是没有意义的了。把
DOCTYPE
放到HTML部分的最前面,一开始提及的问题就解决了。

块状元素/内联元素,盒子模型

HTML/CSS有一个特征,不会报错,只会有浏览器渲染出来的结果不符合设计的逻辑这个问题,所以遇到问题时也很难拿到网上去搜索答案。所以要把HTML/CSS写好,首先要自己理解当中的一些基础原理,要说HTML布局,

块状元素/内联元素
之间的关系我认为是最基础的,延伸出去,就是CSS
盒子模型
。另外,HTML中元素的嵌套组合关系也是十分重要的,CSS中很多属性,如position,z-index,都是 基于父对象而言的,撇开HTML去谈CSS是无意义的。换而言之,要
在结构(Structure)之下谈论表现(Presentation)
。充分理解HTML/CSS中的这些基础,然后制定出适用的一套规范方案,绝对让团队的工作效率提高,事半功倍。

HTML/CSS就能做到的事情,无必要把它交给javascript去做

HTML5中一个较大的改进是表单项、多了很多实用属性如required,date控件等,但是表单的一些很基础的用法,还是不能忘记的。曾经遇到过有人想要实现点击radio旁边的文字时也要选中radio,于是就用jQuery去选择,写事件。其实,这个功能,只需要用一个label标签把input包含在里面就可以实现了)。还有一些例子,如IE的条件注释,CSS hack,这些功能我也见过去用javascript去实现

  1. if(isIE() && IE.Verson == 7){//这些是人有封装好的方法
  2.  $(".something").css({width:"700px"})
  3. }

这样的代码只会白白耗费浏览器的性能。

HTML/CSS就能做到的事情,无必要把它交给javascript去做

HTTP协议

现在很多项目中都是用ajax去提交JSON到后台了,原始的那种HTTP提交已经比较少见(至少在我的项目中是这样),但是我们也不能忘记设置form的method、action的原始提交方式,因为这个才是表单提交的原型,有助于我们理解HTTP协议,例如POST和GET的区别,理解数据是怎么样从前端到达后端的,又是怎么样从后端返回到前端。当你理解了这个,就可以更好地跟后端进行沟通,遇到数据上的问题也能较快地定位解决。

javascript

作用域

学过好几种的编程语言,作用域问题都是老生常谈了。在javascript中更是有函数的作用域这一基础知识。关于这个,推荐《javascript权威指南》。当时我是把中文的读去再去读英文,把英文的读完去找图解,才感觉到把这一点理解清楚的。

JQuery

选择器

在一个HTML DOM 树中,我要进行一个比较复杂的元素选择,不包含某些文字的带有某某类名的元素的邻居的父元素的……然后怎么做?写一个很复杂的

jQuery
选择器?打住。jquery选择器原理是用正则表达式去分解你的选择器字符串(这一部分叫做
Sizzle
),然后再用内置的一些遍历函数如prev,next等(其实这些函数也是基于DOM提供的方法),去找到你想要的元素。我会不去盲目地进行Sizzle的语义歧义测试,而是自己根据自己的逻辑去用prev,next等去找到自己的元素;而且退一万步来说,我也会尽量避免使用复杂的选择器(之前的方案也有提及),单位个元素用ID,多个元素用类,绝对高效准确。

学习前端的同学们,欢迎加入前端学习交流群

前端学习交流QQ群:461593224

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ptmalloc内存分配和回收详解(文字版)

ptmalloc内存分配和回收详解(文字版) 进程默认内存布局(x86) 从进程的内存布局可知,.bss段之上的这块分配给用户程序的空间被称之为heap,start_brk指向heap的开始,而brk指向heap的顶部。可以使用…

html中怎么选择相同的代码,不同的HTML,相同的代码隐藏和相同的控件

创建一个Page类,比方说,TemplateViewerPageTemplateViewerPage.csusing System;using System.Web.UI;public partial class TemplateViewerPage : Page{protected override void OnLoad(EventArgs e){// load your properties_subject "test"…

linux nfs

linux(十四)之linux NFS服务管理学到这里差不多就结束了linux的基础学习了,其实linux的内容并不难,我们要经常的反复的去操作它,多多和它去联络感情才能很好的掌握这个linux。 加油!今天是星期二。没有什么…

GlassFish 4升级的构建,Gradle和嵌入式应用服务器

最近,大概在去年年底, GlassFish开源团队发布了GlassFish 4.0 beta 72作为升级版 。 阿伦古普塔(Arun Gupta)在他的博客上发布了有关GlassFish 4 .0 beta 72的Maven坐标的文章。 该版本意义重大,因为该团队将工件发布到…

下来安成功 打开一直白屏_推广人透露:戈洛夫金2021年可能与安德拉德上演拳王统一战...

IBF中量级拳王根纳季-戈洛夫金(Gennadiy Golovkin)随着本月摧毁强制挑战者卡米尔-塞泽梅塔(Kamil Szeremeta),使得下一场比赛在对手选择问题上,具有很大的自由度。戈洛夫金的推广人埃迪-赫恩做客Sirius XM访谈时,透露了一个重要消息&#xff…

WEB接口测试之Jmeter接口测试自动化 (四)

Jmeter是压力测试、接口测试工具,Ant是基于Java的构建工具,具有跨平台的作用,jenkins是持续集成工具。将这三者结合起来可以搭建一套webservice接口测试的持续构建环境。 1、安装JDK,配置java环境变量(略过&#xff09…

面试分享:一年经验初探阿里巴巴前端社招

一般阿里社招都是招3-5年的P6 高级工程师,当初自己一年经验也没有想过有这个面试机会。 虽然没想着换工作,但是经常关注一些招聘网站的信息,某一天,在某boss上有个人找我,叫我发一下简历,我一看是阿里的某…

计算机云开头的词语,云字开头的成语

以下是小编给大家整理的云字开头的成语的内容,欢迎大家查看。云程发轫:云程:青云万里的路程;发轫:启车行进,比喻事业的开端。旧时祝人前程远大的颂辞。云过天空:比喻事情已经过去,一切恢复平静。…

如果此表在它的 ChildRelation 集合中不是父表,则不能将关系添加到该集合中。...

今天遇到这个问题头都大了,百度上也没找到解决方案,就自己在哪里沉思。。。。。。。。。。。。。。。。 终于皇天不负有心人,被我解决了! 这是调用ChildRelations.Add(“名字”,“父级”,”子级…

dnf机器人猜数字奖励_DNF:周年庆策划啪啪打脸,工作人员也出错误,难道又是临时工的锅?...

本来应该是很喜庆的一天,结果又遇见了策划啪啪打脸的事情,关键还连累玩家提心吊胆的。往年都是登录游戏送豪礼,今年策划就像搞点不一样,估计是认为今年送的“即时”史诗比较多吧。然后就很任性的在领取豪礼之前添加了一道“礼物申…

Hadoop宿醉:使用Apache Whirr启动hadoop集群CDH4

这篇文章是关于如何在EC2实例上启动CDH4 MRv1或CDH4 Yarn集群的。 据说您可以在Whirr的帮助下在5分钟内启动一个集群! 当且仅当一切正常时,这才是正确的! 希望本文在这方面对您有所帮助。 所以,让我们划船... 下载Apache Whirr…

练习 3.16

如题:下面是某大学数据库的一组需求,此数据库用于记录学生的成绩,这与图1.2所示数据库类似,但并不完全相同。 a. 大学要记录每个学生的姓名、学号、社会保险号、当前地址与电话、永久地址与电话、出生日期、性别、年级&#xff08…

中国连计算机硬盘都无法生产吗,中国仍无能力制造出电脑中的硬盘

从最开始的40GB到现在的3TB甚至更大,硬盘技术已经发生了突飞猛进的发展,就连以往高高在上的SSD固态硬盘也从去年开始展现出大容量普及的趋势。但是,至今为止我们为何没有看到一款国产品牌的硬盘杀入市场呢?今日头条中一篇文章或许…

d3 i5 神舟精盾k480n_6款神舟精盾轻薄记本发布,10nm十代酷睿,匠心打造国潮好本...

神舟电脑新品:神舟精盾发布会已于2019年10月31日上午在深圳神舟电脑大厦招开,此次发布会一共发布了6款精盾系列的轻薄笔记本。 此次还有英特尔、英伟达、微软等重量级合作伙伴的大咖站台助力,神舟电脑产品总监王小陈先生、神舟电脑创新一部销…

《Java从入门到放弃》JavaSE篇:程序结构

程序的结构一般分为三种: 顺序结构。 选择结构。 循环结构。 一、顺序结构:这个不用多说吧,跟我们平时写文章的顺序一样,从上往下。 二、选择结构:从名字就能看出,要选择嘛,到底是要漂亮滴妹子…

css中border制作各种形状

css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0: 设置border的高度为0&#xff…

JPA和CMT –为什么捕获持久性异常不够?

使用CMT( 容器管理的事务 )进入EJB和JPA的世界非常舒适。 只需定义一些注释来划分事务边界即可(或使用默认值),仅此而已–无需摆弄手动开始,提交或回滚操作。 回滚事务的一种方法是从EJB的业务方法中引发非…

2016 linux发行版排行_选择困难症必看!云服务器如何选择操作系统,Windows和Linux哪个更好?...

在购买云服务器时,会有一个必选的配置,就是操作系统的选择,如何选择操作系统?操作系统选择错了怎么办?这是不少用户会遇到的问题,今天我们就来教大家如何选择操作系统,以及操作系统选择错了&…

spring取得通过配置文件和注解注入的bean、取得当前数据库连接、取得ApplicationContext的方法...

spring取得通过配置文件和注解注入的bean、取得当前数据库连接、取得ApplicationContext的方法 1、思路: 应用程序启动时使用ApplicationContextAware让Spring容器传递自己生成的ApplicationContext给我们, 然后我们把这个ApplicationContext设置成一个类…

怎样不通过高考进入清华计算机系,山东高考状元孟令昊澄清,没有参加政审,已经填报清华计算机系!...

原标题:山东高考状元孟令昊澄清,没有参加政审,已经填报清华计算机系!说到高考状元,其实每年在高考分数公布以后和志愿填报的时候,他们都是大家最为关注的群体,特别是对于这些状元的去向成为了很…