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 416

原创 webpack学习笔记

一、webpack是什么？webpack是前端的一个模块化的打包工具。前端目前模块化是主流，因此，需要一个工具，把各个JS文件，CSS文件或SASS文件转译打包成JS文件，CSS文件和JPG文件，按类型打包在一起。webpack还拥有强大的配置，可以在构建时做很多事情，进行很多的配置改造。这些配置都支持自定义。使得webpack灵活性很高。二、webpack知识前奏（1）在新创建的项目文件夹内，npm init 之后会出现package.json这个文件，这个是管理项目版本和依赖的文件，

2022-03-07 20:00:58 578

原创比flex布局还牛的grid布局

概述Grid布局也称“网格布局”，是一个CSS的布局方案。跟flex有相似性，但是比flex强大，flex是一维的，只能针对容器的横竖边方向，布局里面的项目；但是grid是可以任意组合不同的网格，做出各种各样的布局，是二维的。基本概念Grid是将容器分为行和列，从而进行布局的，在学习相关的属性设置之前，需要了解一些基本的概念。1.采用网格布局的块，称为容器，容器内，直接的子元素，，叫做项目，下面容器的属性定位都是对项目进行定位。<divclass="container">.

2022-03-07 18:16:24 728

原创淘宝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 1831

原创 MarkDown快速入门教学

一、标题标题是使用 # xxx，‘#’开头，多少个#，就代表着Hx（1-6）级。二、代码块代码块是以 ```开头与结束，即生成代码块，也可以+语言名称生成特定的编程语言代码块。function(){ }三、字体1、加粗内容的左右两边加两个*2、高亮显示内容左右两边加两个=3、删除线内容左右两边加两个~4、斜体内容左右两边*加一个**四、引用引用为>,且具有层级，最大层级为一个>,下一级是>>，以此类推123456789五

2022-03-07 12:05:58 228

原创 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 1650

原创 session、token与cookie

1、http登录无状态，因为是短连接，一次连接。连接时只知道是哪台机器，但是不知道登录用户。但，服务端常常需要判断登录用户，知道请求是哪个用户发起的，这就是会话管理。2、基于session登录：服务端使用session技术，浏览器使用cookie技术；2.1、当用户第一次访问服务端的时候，服务端就会创建一个对象，里面是用户登录成功的凭证，代表着用户的一次会话过程，里面用于存放资料。服务器为每一个session分配了一个sessionID,以保证每个用户都有一个不同的session对象。2

2022-03-07 11:58:30 2803

原创前端“散装饼干”——常用知识点（持续更新中）

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 211

原创 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 2983 1

原创 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 1856

原创彻底干掉正则表达式

前言正则表达式就是一种规则或者说是模式，符合规则的字符串可以进行匹配。一、总规则总的来说就两部分组成，“/xxx/”-规则部分；“/xxx/Y”-Y为限制符部分;默认情况下，正则区分大小写。在输入字符串中找到符合正则表达式模式（规则）的实例叫做匹配。例如：/[a-z0-9]/g,字符a-z，0-z,0-9字符都匹配，/g为全个字符串匹配。二、几个常用的符号1、^1.1 ^在中括号内[^]代表非中括号的任意字符，即除中括号任意字符外的字符eg:[^abc]即非a，非b，非c外的

2021-04-26 00:03:55 341

原创普通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 239

原创 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 228

原创 JS原型链

LDJman一、何为原型链：原型就是构成这个对象的构造函数所继承的其他对象，其他对象就是这个这个对象的原型，原型链其实就是不断继承时所一条链路上的构造函数所形成的一条虚拟链路，就叫作原型链。（注意是这条链路上的构造函数所组成的叫做原型链）。二、一步一步来理解原型链（1）首先理解JS对象的形成，JS对象其中一种产生的方式就是通过构造函数来产生JS对象；eg：function perp...

2019-05-09 23:48:40 181

原创响应式与自适应

@LDJman一、响应式（1）何为响应式响应式就是网站返回一个网站展示文件，浏览器根据屏幕的大小而采用不同布局的视觉最适合的效果，意思同一个网站就是不同的屏幕大小会形成不同布局效果，目的都是为了根据屏幕的大小展现出最优的展示效果。（2）怎样实现响应式①首先需要了解CSS3中有一个新的特性叫做媒体查询，就是在同一个CSS3文件中，可以根据媒体查询的设置，而根据屏幕大小匹配到相应的媒体查询...

2019-05-09 23:44:18 401

qq_40757399的博客