优漫动游|前端程序员容易出错的基础知识

  web全栈是目前比较流行的语言,因为前端较其他语言相比,简单好学,而且现在的互联网公司几乎缺不了web前端开发,行业的需求致使大量的人转型前端,对于刚学前端的同学来讲,他们缺乏开发经验,在项目开发中容易犯错,为了使大家少走弯路,综合一批前端程序员,收集了一些最常见的错误,供大家学习,避免掉坑。  

干货|前端程序员容易出错的基础知识  

  一、JQuery选择器  

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

  二、基础数据结构与算法  

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

  三、HTTP协议  

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

  四、javascript作用域  

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

  五、HTML/CSSDOCTYPE  

  曾经项目中遇到这样一个问题,用其他浏览器打开页面是好的,唯独是IE8打开时出奇地慢。我注意到IE8打开时慢但CPU消耗并不高,只是网页空白很久没渲染出来,可以排除JS算法上的问题。经过细心研读代码发现,有人把一部分script、link等标签放到了DOCTYPE的前面。DOCTYPE是用来告诉浏览器解释整个文档的一套法则的,一定要放在HTML部分的最前面,先有script标签,那就意味着浏览器已经开始解释了,后面再有DOCTYPE也是没有意义的了。把DOCTYPE放到HTML部分的最前面,一开始提及的问题就解决了。  

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

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

相关文章

【C++】类与对象(2)

文章目录 前言一、类的6个默认成员函数二、构造函数1.概念2.特性3.初始化列表 三、析构函数1.概念2.特性 四、拷贝构造函数1.概念2.特性 五、赋值运算符重载1.运算符重载2.赋值运算符重载3.前置和后置重载 六、取地址及const取地址操作符重载总结 前言 在前面,给大…

【题解】单链表的排序

单链表的排序 题目链接:单链表的排序 解题思路1:分治、双指针 分治就是分而治之的意思,分的意思是说将一个大且复杂的问题划分成多个性质相似但是规模更小的问题,子问题继续按照同样的思路进行划分,直到问题被划分为…

【C++】开源:matplotlib-cpp静态图表库配置与使用

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍matplotlib-cpp图表库配置与使用。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下&…

DC.js教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 DC.js 是一个优秀的 JavaScript 库,用于在浏览器、移动设备中进行数据分析,最终有助于创建数据可视化;DC.js 是一个用于探索大型多维数据集的图表库,它依靠 D3.js 引擎以 CSS 友好的 SVG 格式呈现图表。它允许呈现复杂的…

ES6 - 数组新增的一些常用方法

文章目录 1,Array.from()2,Array.of()3,find(),findIndex(),findLast()和findLastIndex()4,Array.fill()5,keys(),values() 和 entries()6,Array.includes()7&#xff0c…

flask-----请求和响应,session

1 所有web:请求对象,响应对象(go,java,ptyhon) django:request(每个请求一个request),新手四件套 flask:requset:全局的,但是也是每个请求一个request,新手三件套 2 fl…

【uniapp 报错 Cannot read properties of null (reading ‘offsetWidth‘)解决办法】

该错误通常是由于访问了一个空值的offsetWidth而引起的。解决方法如下&#xff1a; 检查代码中是否有访问了空值的情况&#xff0c;比如变量未初始化或者传入了空值参数或者事件未定义。 在操作元素之前&#xff0c;确保元素已经被正确加载。可以使用如下方法&#xff1a; <…

解决vue-print-nb-jeecg打印el-table表格预览竖版显示不全的问题!

第一步: 下载 vue-print-nb-jeecg 插件 npm install vue-print-nb-jeecg –save第二步: 在main.js中,引用并注册全局使用 import Print from vue-print-nb-jeecg Vue.use(Print);第三步: 需要打印的元素添加 id <div id"printMe">xxxx内容</div>第四步…

某行动态cookie反爬虫分析

某行动态cookie反爬虫分析 1. 预览 反爬网址(base64): aHR0cDovL3d3dy5wYmMuZ292LmNu 反爬截图&#xff1a; 需要先加载运行js代码&#xff0c;可能是对环境进行检测&#xff0c;反调试之类的 无限debugger 处理办法 网上大部分人说的都是添加cookie来解决。 那个noscript…

友盟+、GrowingIO和神策数据 对比

对于市面上的数据平台&#xff0c;先简单归个类。 1、移动统计平台&#xff0c;如友盟、talkingdata、百度云统计、腾讯移动应用统计等。 相同点是数据源都是埋点数据。友盟有免费版本。 前端效果&#xff1a;展现形式上为BI报表。 常用操作是页面内点击和筛选。 使用要求…

could not import go.etcd.io/etcd/clientv3-go

问题描述 今天在封装etcd的时候导包报错: could not import go.etcd.io/etcd/clientv3 (no required module provides package "go.etcd.io/etcd/clientv3") 问题解决: get:确保下载了client包 go get go.etcd.io/etcd/client tidy go mod tidy 本文由 mdnice 多平台…

yolov8-制作数据集,数据集格式转换(yolo格式-voc格式)附完整代码

yolo训练时可使用的数据集格式为yolo格式以及voc格式&#xff0c; voc格式的数据集在训练时需要先转换为yolo格式&#xff0c;然后根据自己的数据集的位置更改yaml配置文件的文件路径即可。基于目前对Yolo系列训练模型的讲解已经很全面&#xff0c;所以本文主要讲解yolo数据集与…

C#中 使用yield return 优化大数组或集合的访问

概要 我们在开发过程中&#xff0c;经常需要在一个很大的数组或集合中搜索元素&#xff0c;以满足业务需求。 本文主要介绍通过使用yield return的方式&#xff0c;避免将大量数据全部加载进入内存&#xff0c;再进行处理。从而提高程序的性能。 设计和实现 基本业务场景&a…

docker安装nginx并配置SSL

1、拉取镜像 docker pull nginx2、启动nginx容器&#xff0c;复制一份默认配置文件出来 // 以nginx镜像为基础镜像创建一个名为nginx01的容器 docker run -d -p 80:80 --name nginx01 nginx创建成功后会看到nginx的欢迎页面 3、挂载nginx目录 拷贝nginx的配置信息到主机目录…

Nginx面试题

使用过nginx&#xff0c;它在业务里承担什么角色&#xff0c;为什么要用&#xff1f; 从单机架构到集群架构的转变&#xff0c;需要一个实现负载均衡和反向代理功能的软件&#xff0c;加上nginx可以非常轻松的解决掉很多前端常见的需求&#xff0c;比如gzip压缩&#xff0c;跨…

C语言假期作业 DAY 12

一、选择题 1、请阅读以下程序&#xff0c;其运行结果是&#xff08; &#xff09; int main() { char cA; if(0<c<9) printf("YES"); else printf("NO"); return 0; } A: YES B: NO C: YESNO D: 语句错误 答案解析 正确答案&#xff1a; A 0<c&l…

【图论】强连通分量

一.定义 强连通分量&#xff08;Strongly Connected Components&#xff0c;简称SCC&#xff09;是图论中的一个概念&#xff0c;用于描述有向图中的一组顶点&#xff0c;其中任意两个顶点之间都存在一条有向路径。换句话说&#xff0c;对于图中的任意两个顶点u和v&#xff0c;…

Python爬虫—破解JS加密的Cookie

前言 在进行网站数据爬取时&#xff0c;很多网站会使用JS加密来保护Cookie的安全性&#xff0c;而为了防止被网站反爬虫机制识别出来&#xff0c;我们通常需要使用代理IP来隐藏我们的真实IP地址。 本篇文章将介绍如何结合代理IP破解JS加密的Cookie&#xff0c;主要包括以下几个…

el-select 分页加载

el-select 分页加载 el-select 分页懒加载监听的指令——loadMore指令的使用 el-select 分页懒加载 针对数据量大的选择器&#xff0c;需要分页从后端接口获取数据&#xff0c;前端监听选择器下拉框的滚动事件&#xff0c;当往下滚动至底部一定位置时&#xff0c;调接口 监听…

银河麒麟V10 QtCreator安装配置说明(断网离线)

文章目录 1.安装要求:2.安装Qt1.安装要求: 拥有Qt软件安装包qt5.12-arm链接:https://pan.baidu.com/s/1FJerT6SckfjABxAn60rsrA?pwd=mfi6 提取码:mfi6 2.安装Qt 1)拷贝Qt软件包qt5.12-arm至系统/home/kylin/桌面 2)安装Qt软件包 cd /home/kylin/qt5.12-arm/桌面 su…