每天几个前端小知识

简介: 每天几个前端小知识

jQuery篇



1.Css预处理sassless是什么?为什么使用他们


Sass和less都是css预处理器,是css上的一种抽象层,是一种特殊的语法,最终会编译成css,less是一种动态样式语言,给css赋予了动态语言的特性,比如:变量,继承,嵌套。Less既可以在客户端运行,在可以在服务端运行(需要借助node)


2.Js中.call()与.apply()区别


apply:调用一个对象的一个方法,用另一个对象替换当前对象。

call:调用一个对象的一个方法,用另一个对象替换当前对象。

从定义中可以看出,call和apply都是调用一个对象的一个方法,用另一个对象替换当前对象。而不同之处在于传递的参数,apply最多只能有两个参数——新this对象和一个数组argArray,如果arg不是数组则会报错


相同点:两个方法产生的作用是完全一样的。call,apply作用就是借用别人的方法来调用,就像调用自己的一样.

不同点:方法传递的参数不同


3.为什么会造成跨域/请简述同源策略


出现跨域问题的原因:

在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求,所以..跨域问题出现


跨域问题来源于JavaScript的同源策略,即只有协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。


同源策略是由NetScape提出的一个著名的安全策略。所谓的同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源。


4.请输出三种减少页面加载时间的方式


1.优化图片

2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高

的地方)

3.优化CSS(压缩合并css,如margin-top,margin-left...)

4.网址后加斜杠(如www.campr.com/目录,会判断这个目录是什么文件类型,或者是目录。)cdn托管

5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。


当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了)


6.减少http请求(合并文件,合并图片)


5.This指向


在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,

指向该函数所属的对象。

全局的this→指向的是Window

对象中的this→指向其本身

事件中this→指向事件对象


6.什么是jsonp工作原理是什么?他为什么不是真正的ajax


Jsonp其实就是一个跨域解决方案。

Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。所以可以把要请求的数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。

可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问

题。

jsonp原理:(动态创建script标签,回调函数)

浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,就可获取到跨域请求的数据。


为什么不是真正的ajax?

1、ajax和jsonp这两种技术在调用方式上"看起来"很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;


2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制协议,如同ajax一样,它也不一定非要json格式来传递数据,如果你愿意,字符换也行,只不过这样不利于jsonp提供公开服务。


7.请掌握2种以上数组去重的方式


使用indexof()方法

使用lastindexof()方法和indexof方法一样indexof从头部开始匹配lastindexof从尾部匹配

ES6的set结构set不接受重复数据使用sort方法先将原数组排序,然后与相邻的比较,如果不同则存入新数组


使用filiter和indexof方法

使用ES6的set和扩展运算符

使用set和Array.from()方法array.from可以将set结构转

成数组

用splice和双层循环

使用includes方法


8.深浅拷贝是什么如何实现?


深拷贝:指针赋值,并且内容拷贝、浅拷贝:只是简单的指针赋值数组

浅拷贝:如果是数组,可以使用数组的一些方法实现:slice(),concat()

返回一个新数组的特性实现拷贝。用扩展运算符spread实现数组深拷贝:JSON.parse(JSON.stringify())不仅适用于数组还适用于对象。不能拷贝函数,undefined,symbol。


9.为什么js是弱类型语言


弱类型语言实现相对于强类型语言来说的,在强类型语言中,变量类型有多种,比如intcharfloatBoolean不同类型相互转换有时需要强制转换,而jacascript只有一种类型var,为变量赋值时会自动判断类型并转换,所以是弱类型语言。


10.怎么转换less为css


1.用node将less文件生成为css文件

2.用webstorm自动生成

目录
相关文章
|
3月前
|
Ubuntu Linux 云计算
CentOS与Ubuntu:Linux系统的双璧
选择Ubuntu还是CentOS,取决于用户的具体需求,如是否需要图形化界面、对稳定性的要求、软件包管理的偏好以及对商业支持的需求等。两者都是优秀的Linux发行版,只是在设计理念和目标用户群体上有所不同。#深度好文计划#
|
9月前
|
程序员 编译器 C语言
来,手把手带你写C语言的HelloWorld
本文介绍了如何使用Vscode进行C语言开发,包括安装必要插件、编写Hello World程序及代码解释。Feri强调了注释的重要性,以增强代码可读性和维护性,帮助开发者更好地协作与成长。君志所向,一往无前!
399 1
|
10月前
|
人工智能 数据可视化 数据库
低代码平台:技术复杂性的系统简化
低代码平台通过模块化和自动化技术,简化了传统开发流程中的需求分析、代码开发、测试部署等环节,显著提高了开发效率和协作能力。其核心特性如“一键编程”、“快速迭代”降低了开发复杂度,提供了敏捷开发的能力,使企业能更快响应市场需求和技术变革。可视化开发、实时渲染、分布式协作支持及无缝部署等功能进一步优化了开发体验。平台内置的五大核心引擎(SQL、功能、模板、图表、切面)进行了系统性优化,提升了数据处理能力和开发灵活性。此外,低代码平台还融合了AI技术,提供了智能代码助手、自动优化和故障排查等功能,增强了开发效率和精度。
|
11月前
|
缓存 Serverless 调度
Moka:ACS 容器计算服务助力CI/CD场景提效降本 70%
Moka,作为国内发展最快的HR SaaS厂商之一,在ACS产品初期就与阿里云产品团队紧密联系产品需求及体验反馈,本文将着重分享我们使用ACS在CI/CD 场景的最佳实践。
|
机器人 芯片
ChatGPT提问技巧——对话提示
ChatGPT提问技巧——对话提示
1197 8
|
小程序 物联网 API
PHP在哪些领域有应用?
【10月更文挑战第11天】PHP在哪些领域有应用?
313 2
|
移动开发 JSON 数据可视化
分享6款yyds的可视化搭建开源项目
分享6款yyds的可视化搭建开源项目
469 0
|
存储 负载均衡 Java
SpringCloud之Nacos注册中心解读
SpringCloud之Nacos注册中心解读
|
存储 关系型数据库 MySQL
MySQL不同版本下表结构和数据存储总结
MySQL不同版本下表结构和数据存储总结
356 0
|
存储 编解码 缓存
视频服务器配置参数有哪些要求和标准
视频服务器配置参数有哪些要求和标准