- 博客(24)
- 收藏
- 关注
RSS订阅原创 前端js和css实现 展开/收起 效果
height;;colorrgb;cursor;.colse;overflow;display;word-break;;;</</</</</// 定义一个函数用来获取指定类名的domfunctionclassNamereturn0;// 获取domconst"outBox";const;// 获取高/外层元素内容高度const"outBox";const。
2024-03-26 01:45:20
669
原创 History 对象的pushState()和replaceState()
history 对象保存了当前窗口访问过的所有页面网址。pushState（）、replaceState()、location.href的应用、区别等
2023-07-04 10:20:03
661
原创 script标签的defer和async属性
在浏览器拿到html文件后开始对html进行解析，当遇到内部script，外部script，外部有defer、async属性的script脚本时，html解析、渲染所费时长有什么不同，我们通过下面的代码执行来分析。上图可以看出文档解析完成时间（domComplete）和dom解析完成时间（domInteractive）是一样的，因为js的执行阻塞了dom解析，dom解析时长花费了4秒多。有async属性的script脚本时，可能会阻塞可能不会阻塞dom解析，不好举例，就不举例子了…加载：资源被放入内存。
2023-06-27 16:09:51
80
原创 【对象详解】
1.语法声明形式（字面形式）：var obj = {a:1,b:2};构造形式：vao obj = new Object(); obj.a=1;2.类型①：typeof ：判断变量地址的机器码，前三位为0，则返回 Object, null机器码全是0，故返回Object；②： instanceof：检测右边变量构造函数的prototype属性是否在左边对象实例的原型链上（右边变量是否在左边变量原型链上），若是则返回true；③： Object.prototype.tostring.c
2022-04-14 17:38:51
80
原创 函数中的this
this是在函数被调用时绑定的，指向取决于函数在哪被调用。1.隐式绑定对象属性引用链中只有在最后一层调用位置起作用。// 例：function foo(){ console.log(this.a);}var obj2 = { a:42, foo:foo}var obj1 = { a:2, obj2:obj2}obj1.obj2.foo() // 422.隐式丢失// 例function foo(){ console.log(this.a);}va
2022-04-10 16:09:15
65
原创 函数柯里化 Currying
1.什么是柯里化？通俗的讲，就是 只传递给函数一部分参数来调用它，让它返回一个函数来处理剩下的参数 的一种技术，下面举个简单的例子。 // 柯里化前 function add(x,y){ return x+y }我们将该函数进行柯里化处理 // 柯里化后 function Currying(x){ return function(y){ return x+y } }// 扩展：实现一个add方法，使计算结果能够
2022-03-31 15:45:42
255
原创 原型与原型链
对于原型与原型链的理解，网上一搜一大堆，这里仅对我自己的理解做个笔记。这里面会涉及到几个名词：构造函数、原型对象、prototype、constructor、实例对象1.声明一个函数（即构造函数）后，浏览器会在内存中创建一个原型对象。2.构造函数会有一个prototype属性，指向【1】中说的原型对象。3.原型对象中有个constructor属性，指向构造函数。关系图如下通过构造函数创建实例对象后，如： function Person(){ // 我就是构造函数 }
2021-12-14 16:43:02
1025
原创 postcss-pxtorem适配，px自动转换成rem 任意宽度设计稿都适用
步骤一：npm i lib-flexible --savenpm install postcss-pxtorem -D步骤二：在项目根目录下创建postcss.config.js配置文件module.exports = { plugins: { // 兼容浏览器，添加前缀 autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome
2021-12-13 17:02:49
2232
原创 物理像素、逻辑像素、DPR理解，及移动端border 1px问题
像素：【像素 pixel】是图像显示的基本单位，表示“图像元素”。ppi:【ppi】是屏幕上每英寸可以显示的像素（点）的数量，即屏幕像素密度。像素的分类：1.设备像素（物理像素）：设备屏幕的物理像素，在同一个设备上，它的物理像素都是固定的。2.css像素（逻辑像素）：是为web开发者创造的，在CSS和javascript中使用的一个抽象的层。在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。设备物理像素：window.devicePixelRatio设备逻辑像素：docum
2021-12-06 14:33:19
353
原创 键盘监听数字对应的key
export const keyWord = { left: { 0: 0, 1: 0, 2: 1, 3: 2, 4: 0, 5: 4, 6: 5, 7: 0, 8: 7, 9: 8, 10: 3, // 删除 11: 6 // 确认 }, right: { 0: 1, 1: 2, 2: 3, 3: 10, 4: 5, 5: 6, 6: 11,
2021-11-22 01:43:14
174
转载 eslin配置详解
vue-cli3项目配置eslint代码规范安装依赖安装依赖有两种方法：在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。在package.json文件加上相应依赖："eslint-plugin-html": "^6.0.3","@vue/cli-plugin-eslint": "^3.3.0","@vue/eslint-config-standard": "^4.0.0","eslint": "5.0.0","eslint-friendly
2021-08-22 11:17:07
781
转载 2021-06-08
浏览器的缓存机制（http缓存机制)一、概述浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：同步sau交流学习社区（首发）：https://www.mwcxs.top/page/565.html1、HTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体)，如下图HTTP响应
2021-06-08 13:09:44
55
原创 webpack配置
var webpack = require('webpack')var path = require('path')//暴露webpack配置module.exports = { // 入口 entry: './src/a.js', // 出口 output: { path: path.resolve(__dirname, 'dist/')...
2020-04-08 18:52:39
93
原创 v-model双向绑定普通输入框 /单选框 /多选框 /下拉列表
<body> <div id="root"> //普通输入框 <input type="text" v-model='text'> <h1>您输入的内容是:{{text}}</h1> <br /> //单选框 <lab...
2020-04-06 19:44:20
427
原创 JS防抖、节流
JS防抖 代码某事件触发时,延迟多长时间执行事件处理函数,若在延迟时间内用户再次触发了该事件,就清除上次的定时器,重新设置定时器,最近一次动作结束后,再执行事件处理函数. <script> function debounce(fn, delay) { var timer = null; clearTimeout(tim...
2020-03-28 18:41:52
384
转载 JS判断Safari和Chrome浏览器
SafariSafari典型的userAgent如下：Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHT...
2020-03-13 23:25:13
2200
原创 MVVM（双向绑定架构）底层原理函数
<script> /* 说明： VUE是基于MVVM实现数据双向绑定，通过defineProperty代理data对象所有属性， 实现属性get/set监听，当数据发生改变触发set及watch，通知节点重绘 */ // M ...
2020-02-28 18:18:14
238
原创 原生JS MVC模式书写三级联动
h5{ padding-left: 1em; } h6{ padding-left: 2em; } .show{ display: block; } .hide{ display: none; } <div id="root"></div&g...
2020-02-28 00:06:14
138
原创 原生JS制作抽奖小游戏
<div class="box"> <div id="grid1" class="grid">电信优惠卷</div> <div id="grid2" class="grid">谢谢惠顾</div> <div id="grid3" class="grid">奖品3</div> <...
2020-02-26 00:29:29
250
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人