前端技术
文章平均质量分 54
LDJman
目前央企前端开发工程师,我热爱前端,我大学专业是物联网工程,因为接触前端后,对前端产生了强烈的热爱。我的座右铭是:要做就竭尽全力做到最好,别侮辱了自己!所以,工作上,我是一个能力内追求极致的风格,责任心强,是承诺必达的性格。我认为人的一生不能停止学习,不然就会给时代所淘汰,所以,我热爱创新,我喜欢学习。沟通是人类进步的桥梁,我热衷于倾听与沟通。
我积极乐观,坚信保持乐观的心态无论什么事情都总能挺过去。
展开
-
TypeScript系统学习笔记
一、基本类型ts支持跟js一样所有的基本类型,此外还增加了枚举类型使用。布尔值、number(二进制、十进制、八进制等)、字符串、数组(指定数组类型 let arr:number[]=[1,2,3];元组 let arr:[number,string] = [10,‘haha’])、Object、枚举:enum类型是对js基本类型的一个补充,使用枚举可以为一组数值提供赋予友好的名字eg: enum:Color = {Red,Green,Blue} let c:Color = Color.Gr原创 2022-03-07 20:02:08 · 314 阅读 · 1 评论 -
比flex布局还牛的grid布局
概述Grid布局也称“网格布局”,是一个CSS的布局方案。跟flex有相似性,但是比flex强大,flex是一维的,只能针对容器的横竖边方向,布局里面的项目;但是grid是可以任意组合不同的网格,做出各种各样的布局,是二维的。基本概念Grid是将容器分为行和列,从而进行布局的,在学习相关的属性设置之前,需要了解一些基本的概念。1.采用网格布局的块,称为容器,容器内,直接的子元素,,叫做项目,下面容器的属性定位都是对项目进行定位。<divclass="container">.原创 2022-03-07 18:16:24 · 610 阅读 · 0 评论 -
淘宝flexible.js基本原理及源码分析
flexible总的思想就是利用动态设置根元素(html标签)的font-size大小,来动态改变css3中rem这个单位中对应px的大小。因为html的font-size默认为16px,所以,1rem就默认为16px。flexible的思想是把整个视图宽度区域分为10份,每一份为一个1rem,总的就是10rem。例如375px的宽度,那么1rem就是37.5px,因此设置根元素的font-size为37.5px。//flexible.js源码如下;(function flexible(window原创 2022-03-07 16:18:49 · 1596 阅读 · 0 评论 -
JS判别是否为X以上刘海屏
JS判别是否为X以上刘海屏:const isIphonex = () => { // X XS, XS Max, XR,11,11Pro,11Pro Maxconst xSeriesConfig = [{devicePixelRatio: 3,width: 375,height: 812,},{devicePixelRatio: 3,width: 414,height: 896,},{devicePixelRatio: 2,w...原创 2022-03-07 12:02:16 · 1347 阅读 · 0 评论 -
session、token与cookie
1、http登录无状态,因为是短连接,一次连接。连接时只知道是哪台机器,但是不知道登录用户。但,服务端常常需要判断登录用户,知道请求是哪个用户发起的,这就是会话管理。2、基于session登录:服务端使用session技术,浏览器使用cookie技术;2.1、当用户第一次访问服务端的时候,服务端就会创建一个对象,里面是用户登录成功的凭证,代表着用户的一次会话过程,里面用于存放资料。服务器为每一个session分配了一个sessionID,以保证每个用户都有一个不同的session对象。2原创 2022-03-07 11:58:30 · 2698 阅读 · 0 评论 -
前端“散装饼干”——常用知识点(持续更新中)
JSnew Date()new Date().toLocaleDateString(),//获取当前日期,“2020/12/20”;new Date().toLocaleTimeString();//获取当前时间,“上午8:00:00”;new Date().toLocaleString();//获取当前日期与时间 ,"2020/12/20 上午8:00:00"new Date().getDay();//获取当前星期几(0-6),"3"-星期三new Date();getMillis原创 2022-03-07 11:55:44 · 117 阅读 · 0 评论 -
H5(Vue)实现可拖拽悬浮图标
H5上经常会有这样的需求,有一个悬浮的图标,常常需要在拖动时,拖拽到移动的位置。/** * 核心思想为动态改变Dom节点的left与top * 1、创建Dom节点,节点动态绑定left、top; * 2、页面构建时,获取屏幕宽度、高度,通过计算赋予Dom节点初始化的left,top; * 3、监听touchstart,当移动开始时,清除之前的动画; * 4、监听touchmove,移动过程中,获取事件对象中touch[0]的clientX、clientY,此为当前touch的x、y坐标,减去D原创 2022-03-07 11:53:07 · 2330 阅读 · 0 评论 -
JavaScript检测是否开启开发者工具防调试
有时候别人在打开浏览器开发者工具的时候,不让别人能够调试网页中的代码,那么就可以在网页里面使用以下的代码。这样当别人无论是按“F12”还是手动打开开发者工具,调试界面都会立即进入到debugger页面。setInterval(function () { check() }, 1000); var check = function () { function doCheck(a) { if (("" + a / a)["length"] !== 1 || a .原创 2021-11-16 20:04:18 · 1554 阅读 · 0 评论 -
普通for循环、for...in...、for...of...、forEach一文精简梳理
1、普通for循环,在数组和object中都能使用。但是对象中使用,不太合理,因为也是循环下标。2、for...in...在Array和Obeject中遍历下标和key。而且还能遍历Array和Object原型上的属性。var obj = {x:100,y:200,z:300}obj.__proto__.a=400;obj.__proto__.b=500;for(let k in obj){console.log(obj[k]);if(obj.hasOwnProp原创 2021-04-26 00:00:40 · 175 阅读 · 0 评论 -
call、apply与bind精辟讲解
call与apply都是改变当前函数执行的作用域。都是跟在对象后面。传入另外一个对象,去获取前面一个对象的能力(方法)。意思就是他们两的作用都是改变this的作用域,当一个对象没有某个方法,而其他对象有,就可以利用call或apply实现某个方法的复用。譬如:程序员.编程器.call(外卖员)var pro = {name:“程序员”,programming:function(){console.log(${this.name}编程)}}var del = {name:“外卖员”}pr原创 2021-04-25 23:32:16 · 165 阅读 · 0 评论 -
JS原型链
LDJman一、 何为原型链:原型就是构成这个对象的构造函数所继承的其他对象,其他对象就是这个这个对象的原型,原型链其实就是不断继承时所一条链路上的构造函数所形成的一条虚拟链路,就叫作原型链。(注意是这条链路上的构造函数所组成的叫做原型链)。二、 一步一步来理解原型链(1) 首先理解JS对象的形成,JS对象其中一种产生的方式就是通过构造函数来产生JS对象;eg:function perp...原创 2019-05-09 23:48:40 · 124 阅读 · 0 评论 -
响应式与自适应
@LDJman一、 响应式(1)何为响应式响应式就是网站返回一个网站展示文件,浏览器根据屏幕的大小而采用不同布局的视觉最适合的效果,意思同一个网站就是不同的屏幕大小会形成不同布局效果,目的都是为了根据屏幕的大小展现出最优的展示效果。(2)怎样实现响应式①首先需要了解CSS3中有一个新的特性叫做媒体查询,就是在同一个CSS3文件中,可以根据媒体查询的设置,而根据屏幕大小匹配到相应的媒体查询...原创 2019-05-09 23:44:18 · 283 阅读 · 0 评论