三大基础
文章平均质量分 85
包括HTML、CSS、JavaScript三大相关内容
ღ故里᭄ꦿ࿐
愿有能力爱自己,有余力爱别人
展开
-
前端面试题:vue响应式原理 Vdom diff
vue的响应式原理,也算是面试中再常见不过的题目了,之前遇见这道题目只会说:利用的是Object.defineProperty进行的数据劫持,监听数据的变化,通知watcher进行的数据更新。总的来说这是没错的,但是只要面试官进一步的问,那一定是满脸的问号。昨天一天也是没有面试机会,所以就研究了一天这个东西,算是搞明白了(自我感觉),今天就把他来写成文章,希望大佬看到哪里不对给出指导,本文可能会有点长。上正文。现在最流行的框架非vue,react莫属,他们流行起来的原因,离不开响应式,因为它在做一些.原创 2020-08-22 16:30:14 · 2257 阅读 · 1 评论 -
前端面试题:跨域的实现
已经不止一次的被问到这个问题了,今天来总结了一下前端跨域的实现方式,虽然有的方式自己在项目中没有用过,但是还是需要了解一下的。首先需要了解一下什么是跨域,跨域就是说在一个域下去请求另一个域下的资源,那什么是另一个域呢?就是说在两个域之间,不管是协议,域名甚至端口,只要有一个不一样,就属于不同的域,不同的域之间去请求数据,这就是跨域。其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。什么是同源策略呢,同源策略/SOP(Same origin policy)是一种约定,由Nets原创 2020-08-19 18:23:51 · 835 阅读 · 0 评论 -
前端性能优化
减少请求数量【合并】 如果不进行文件合并,有如下3个隐患 1、文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2、受丢包问题影响更严重 3、经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1、首屏渲染问题 2、缓存失效问题 所以,对于文件合并,有如下改进建议 1、公共库合并 2、不同页面单独合并【图片处理】 1、雪碧图 CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网转载 2020-08-18 19:21:39 · 297 阅读 · 0 评论 -
前端面试题:继承的实现
这个是让我崩溃的那个面试题,不是说这个题有多难,而是说自己粗心吧,只是简单的看了实现继承的方式有原型继承,构造函数继承,组合继承,class继承,但是怎么实现的都不知道。昨天面试完总结了一下,索性就把它写成文章,分享加自我回顾。1、原型链继承首先说的继承就是原型链的继承,因为在问我继承前先问了原型和原型链,原型链的集成有什么特点呢,就是子类的prototype指向父类的一个实例。这样的话子类没有的属性方法会在他的原型中去找到,就是说子类的实例的__proto__会指向父类的实例,这个时候就可以拿到父原创 2020-08-18 14:58:28 · 1353 阅读 · 0 评论 -
前端面试题:DOM和CSSDOM树渲染过程
感觉自己复习的已经差不多了,只是缺少面试机会,然而昨天突然的京东的电话,貌似让我直接丢掉了一个进大厂的机会,死在了最基础的问题,说实话自己还是没有完全复习好原创 2020-08-18 11:19:10 · 2576 阅读 · 4 评论 -
前端面试题:几种排序方法(JS版)
相对于后端的朋友来说,前端的一些面试题会出一些算法题,但是更多的来说是一些简单的算法题,比如说数组的排序,反转二叉树,爬楼梯的动态规划等简单问题,今天整理了一下排序的方法。1、冒泡排序这个应该说是最常用的排序方式了,实现的方法及就是两层循环,逐个的对比,以从小到大排序为例,如果遇见后边比前边元素小的情况下,交换在数组中的位置。function Bubbling(arr){ for(var i = 0 ; i < arr.length ; i++){ for(var原创 2020-08-11 22:45:11 · 2191 阅读 · 1 评论 -
前端面试题:谈谈This指向
除了那个闭包的输出问题,另一个让人头疼的,非This的指向问题莫属了,this有时候真的是把人搞得蒙蒙的,但是究竟如何this的指向呢,今天上午也是探索了一番。首先要说的是,this的指向在函数定义的时候是确定不了的,只有当函数执行的时候,才知道this到底指向谁,实际上this最终的指向是那个调用它的对象。举个例子:function fn(){ console.log(this);}当面试官给了这么一个函数去问this的指向的时候,虽然平时一些面试问题说不知道很减分,但是这个问原创 2020-07-31 15:56:33 · 1080 阅读 · 0 评论 -
前端面试题:闭包
前段时间一直在投一些中小型公司吧,感觉好久都收不到反馈,也不知道是被淘汰了还是没出结果呢,最近开始投一些大一点的公司准备尝试一下,就在昨天接到面试电话的时候,接受到了滴滴的毒打。跟一些面试不一样的是不只是一些基础的基本概念吧,比如说什么是原型和原型链,说一下继承,讲一下this指向之类的。更多的是为什么要这样用,手写算法,预测输出结果之类的面试题。印象最深刻的应该就是那道关于闭包的题目了吧,是预测一个程序的输出结果,当时看的我是晕头转向,大厂的面试也是招架不住,真的是把我给面到自闭,感觉自己啥也不是,估原创 2020-07-30 22:38:53 · 30694 阅读 · 20 评论 -
前端面试题:JS的事件委托-事件的捕获与冒泡
说一下事件委托,或者对事件代理的理解。算是很常见的面试题了,应该说我遇见很多次了。刚开始遇见的时候发现自己不太懂,应该说之前自己用过,但是不知道他叫这个名字,后来也是总结面试题,去搜索了解了一下下,现在可以说是真正的搞懂了吧,今天把它分享出来,方便以后查看。那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计(红宝书)上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。要搞懂这个概念还得从事件冒泡开始,那什么是事件冒泡呢?事件捕获(even原创 2020-07-26 22:51:02 · 859 阅读 · 1 评论 -
前端面试题:set和map
有时候会被问到set和map的区别,下面我总结了一下set和map的特点和区别。以及他们在一些算法题中的妙用。MapMap是一组键值对的结构,具有极快的查找速度。借用廖雪峰老师的例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:const names = ['Michael', 'Bob', 'Tracy'];const scores = [95, 75, 85];给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取原创 2020-07-26 19:00:01 · 1452 阅读 · 0 评论 -
前端面试题:手写call,apply和bind
前段时间一朋友面试,被要求手写call,apply和bind,发现自己也不会写,所以就私底下去看了一下这方面的东西,后来发现这个还是挺容易实现的,现在也是分享出来,一方面方便自己查看复习,另一方面希望可以给需要的朋友一点帮助。正式开始之前也是先去了解一下call,apply,bind。其实呢这三兄弟都是为了改变函数的上下文而存在的,或者可以简单点说就是用来改变this指向的。但是呢这三兄弟的用法还是有区别的。1、apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用原创 2020-07-26 11:20:25 · 798 阅读 · 0 评论 -
前端面试题:JS中的原型和原型链
JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型和原型链的理解。ES6之前中并没有引入类(class)的概念,JavaScript并非通过类而是直接通过构造函数来创建实例。什么是原型每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。这么说可能会有点原创 2020-07-24 10:48:24 · 8213 阅读 · 2 评论 -
React从入门到项目--第七天(redux的使用)
redux简介什么是redux呢?redux是一个独立专门用于做状态管理的 JS 库,它不是不是 react 插件库,也就是说它不仅可以用在React项目中,还可以用在其他的项目中,只是更多的用在React项目中而已。那什么是插件库呢?插件库我是这样理解的,有相应的依赖,比如说React的插件库,离开React是不能正常工作的,jQuery插件库必须依赖与jQuery。redux的作用就是...原创 2019-10-17 21:44:31 · 282 阅读 · 0 评论 -
Promise的应用
对于JavaScript来说,所有的代码都是单线程的,所以对于JS的一些网络操作,以及浏览器事件,都必须是异步执行的,所以说在JS中的回调函数应该说是十分的常见。如最基础的点击事件,当按钮点击的时候会执行相应的回调函数。var btn = document.getElementById('btn');btn.onclick = function(){ //函数体}var ...原创 2019-10-16 17:50:37 · 336 阅读 · 1 评论 -
细说Ajax
闲话日常在日常的项目使用中,关于AJAX,更多的是对整体的CtrlC+CtrlV,然后进行部分参数的更改,然后去操作success函数即可,然而,目前的要求已经不仅仅局限于使用了,更多的是知识的理解程度和模块化。这篇文章主要针对自身对ajax的学习和理解,做一个总结,以及对代码的一个封装。啥是AJAXAJAX = Asynchronous JavaScript and XML(异步的 ...原创 2019-07-26 16:02:55 · 267 阅读 · 0 评论 -
javaScript Array对象
Array的作用Array的主要作用就是在单个变量中去存储多个值。Array的创建方法var arr = new Array();var arr = new Array(size);var arr = new Array(element0, element1, ..., elementn);第一种创建数组的方法表示构造一个空的数组。第二种创建方法表示指定长度的创建,但是访...原创 2019-07-21 11:08:11 · 416 阅读 · 0 评论 -
通过javascript控制页面全屏显示
由于项目的需要,有时候需要对页面进行全屏显示,说到底就是就是我们常用的F11,H5提供了相应的API,目前google chrome 15 +, safri5.1+,firfox10+,IE1能够很好的支持该属性,低版本的IE可以通过ActiveX插件实现。简单粗暴,直接上代码定义全屏显示函数function fullScreen() { var el = document.d...原创 2019-07-20 08:12:48 · 305 阅读 · 0 评论 -
Form表单提交非空判断及防止重复提交
通常情况下,我们在做东西的时候,时常会用到Form表单的submit提交方式,但是时常会出现表单的空值提交,或者进行多次的提交,下面就来说一下我是怎样实现两种功能的。非空判断错误示范:$("#btn").click(funtion(){ var userName = $("#userName").val(); var passWord = $("#pa...原创 2019-04-15 11:28:02 · 1469 阅读 · 0 评论 -
Flex--弹性布局学习--flex瀑布流的实现
众所周知:传统的布局方式是通过position+display+flort实现的,在页面的构造过程中会出现很多的问题,包括高度塌陷和元素垂直居中等等的问题,一直到2009年,W3C提出了一种新的方案【Flex布局】,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。现在的手机端,包括手机页面,微信小程序等大多采用flex进行布...原创 2019-04-05 17:18:28 · 24809 阅读 · 3 评论 -
HTTP模块SuperAgent(轻量级ajaxAPI)
什么是SuperAgent ?superagent它是一个强大并且可读性很好的轻量级ajaxAPI,是一个关于HTTP方面的一个库,可运用于node.var superagent = require('superagent'); superagent .post('/api') .send({ 'key': 'value'...原创 2018-11-18 16:37:00 · 1905 阅读 · 0 评论 -
Ajax文件上传功能de实现
在进行文件上传的时候,我们往往会使用表单提交的方式:<form action='....'> <input type='file' name='file' /> <input type='submit' value='上传'></form>但是给表单提交添加回调函数比较困难,所以在这一次提交时,我使用了Ajax进行提交,在...原创 2019-01-24 11:16:55 · 624 阅读 · 0 评论 -
适合【前端入门者】的原生JS轮播图实现
学前端已经一年多了,在JavaScript方面,学会了基本语法,页面操作之后,慢慢走向了框架这条不归路,框架用起来真的是省时省力,效果好、代码少、还节省时间。在前几天去做一个页面的时候,要求只能是用以前版本的框架,我就去找框架之前的版本,可是在某些官网上老版本的框架已经不存在了,就我这暴脾气,还是用原生的JS去写吧,不是不知道,一试还真的能吓一跳,做到轮播图的时候,感觉自己不会了,索性就去把内...原创 2018-11-21 22:37:56 · 402 阅读 · 0 评论 -
css3D制作立体旋转小方块
用到的重要css样式:1、transform:perspective( ); perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。2、transform-style: preserve-3d; ...原创 2018-09-22 10:53:18 · 3398 阅读 · 1 评论 -
localStorage本地存储
储存数据 :localStorage.setItem ( 'name' ,value )读取数据 :localStorage.getItem ( ' name ' )删除数据 :localStorage.removeItem ( ' name' )删除所有保存的数据 : localStorage.clear ( )查看localStorage方法 : 开...原创 2018-08-05 15:33:35 · 595 阅读 · 0 评论 -
Css:after伪元素【简单】写对话框箭头
第一次写对话框的箭头时,也是一头雾水,不知道怎么去写,后来去学习了一下别人怎么写的,也曾经试过去用别人的代码,但是去修改箭头长度和宽度的时候总是很难,然后就自己去研究,发现了一种全新的写法,自我感觉还是挺简单的,最重要的是这样写可以去控制箭头的长短和宽度,这样在其他地方用的时候,也更加容易修改。<!DOCTYPE html><html lang="zh"><...原创 2018-08-04 20:41:19 · 5017 阅读 · 2 评论 -
React从入门到项目--第一天(React基本使用)
React是什么React的出现有点玄幻的,刚开始是在Facebook 的内部项目中使用的,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,后来发现很好用,结果就开源了。React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面。React是基于组件进行...原创 2019-10-11 17:20:40 · 346 阅读 · 0 评论