- 博客(110)
- 收藏
- 关注
RSS订阅原创 前端架构学习，一些知识点记录(一)
webComponents 跨平台 自定义标签。attachShadow 构建影子dom。SSR、CSR、例子，参考超市购物思想。webpack 先编译，大型项目打包慢。类似有视频标签，看不到一些操作按钮。兼容性，代码压缩，单位换算。
2023-10-14 11:05:03
91
原创 Vue3+ElementPlus+TypeScript 开发常见问题/警告/错误 (持续补充......）
Vue3+ElementPlus+TypeScript 开发常见问题/警告/错误
2023-01-12 16:39:30
844
1
原创 React中使用less修改界面主题 less.modifyVars
新建两个文件一个是theme.less样式文件，一个是less.js文件，js文件的内容可以在 下载js文件 点击下载。安装 less 和 less-loadernpm i less --savenpm i less-loader --save配置环境，在webpack.config.js文件里面修改，找到css的规则，修改三个地方'css-loader’的test： /.css$/ 改为 /.(css|less)/'css-loader’的 importLoaders：1改为2.
2022-02-28 14:33:45
2761
原创 JavaScript权威指南7(三) 第六章 Object Prototype Methods
Object 对象对象不仅仅是简单的字符串到值的映射，除了维护自己的属性集，JavaScript对象还继承另一个对象的属性，即它的原型。对象的方法通常是继承的属性，而这种原型继承是JavaScript的一个关键特性。...
2022-02-18 14:58:42
379
原创 JavaScript权威指南7(二) 第五章
JavaScript语句摘要break 从最内部的循环或开关或命名的封闭语句中退出case 在switch中标记语句class 声明一个类const 声明并初始化一个或多个常量continue 开始最内层循环或命名循环的下一次迭代debugger 调试器断点default 在switch中标记默认语句do/while while循环替代方案export 声明可以导入其他模块的值for 循环for/await 异步迭代器的值for/in 枚举对象的属性名称for/of 枚举可
2022-02-17 14:41:04
273
原创 javascript权威指南7(一)
标识符只是一个名称，用于命名常量，变量，属性，函数和类，并为JavaScript代码中的某些循环提供标签。以字母，下划线或美元符号开头。数字不允许作为第一个字符。与任何语言一样，Javascript保留某些标识符供语言本身使用。保留字不能作为常规标识符。哪个 if 适合程序，取决于给str赋什么值if(str !== null){...} // 不为空才会执行 与null比较if(str){...} // 不为假值或者任何假值(null或未定义)时执行undefined表示系统级的，意外的或.
2022-02-16 14:26:56
471
原创 关于低版本火狐出现的: The above error occurred in the ＜Table＞ component
你打开antd的官网，新版本也会出现问题。所以这是兼容问题，不要怀疑代码写错了。"Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"解决办法，如果你要兼容低版本火狐那只能降 antd 的版本，我这边是降到 4.15.3就可以正常显示的。如果不需要兼容，那么就升级浏览器就好了。...
2021-12-20 17:30:01
3002
原创 React+Dva+Antd创建项目和Umi创建项目
React+Dva+Antd非全局安装处理(如果全局记得安装的时候加上 -g)在项目文件夹下执行npm install create-react-app创建项目create-react-app projectname安装dvanpm install dva-clicd进入项目目录后启动项目npm start此时项目已经可以正常启动！基于React引入Antdnpm install react-app-rewired customize-cra --save-dev使用Umi
2021-11-03 11:01:24
402
原创 低版本360浏览器下，PDF.js部分文字显示不全的问题
在低版本360极速模式下，使用 pdf.js 看pdf文件时，除了数字和符合，其它文字都不显示。在其它浏览器显示是正常的。此时，可以进行如下操作打开360浏览器的设置找到实验室找到系统选项勾选下图框选部分然后重启浏览器。能解决文字显示不全的问题...
2021-11-02 09:32:12
3126
原创 建立一个vue+elementUI的项目
创建vue环境cnpm install --global vue-cli创建vue项目vue init webpack front运行项目npm run dev安装element-ui框架cnpm i element-ui -S
2021-09-07 16:59:17
111
原创 React+Antd兼容ie浏览器，360安全浏览器兼容模式
使用 create-react-app 生成的项目安装react-app-polyfill和core-jsnpm install react-app-polyfill core-js在入口文件 index.js 中引入import 'core-js/es' import 'react-app-polyfill/ie9' import 'react-app-polyfill/stable'修改 package.json 文件"browserslist": { "producti
2021-07-16 10:44:38
2229
4
原创 Relative imports outside of src/ are not supported
尝试引入public下的资源，提示Relative imports outside of src/ are not supported解决方法：项目直接 npm run eject 命令，如果之前执行过了产生了webpack等文件就不用再执行。修改 webpack.config.js 文件中 ModuleScopePlugin注释如下代码：// new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),...
2021-07-02 12:01:39
2090
原创 导航菜单3d效果 侧边导航酷炫展开效果 鼠标移入侧边栏 二级菜单3D展开 鼠标hover背景变色
// css初始化html, body, div, ul, li, p { margin: 0; padding: 0; }ul { zoom: 1; list-style: none;}a{text-decoration: none;}a:hover { cursor: pointer; }:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: b
2021-06-16 20:07:12
871
原创 React最常见的使用小tip
有状态是复杂组件无状态是简单组件// state简写方式class Demo extends React.Component{ // 初始化状态 state = {isState:false} render(){ const {isState} = this.state return(<div>state简写{isState}</div>) }}ref的写法方式<input ref={(current
2021-06-16 10:11:24
301
原创 vue绑定多个class和多个style的方式
class绑定多个// isActive 为true就会加active的class，同理isRed<div :class="{'active':isActive,'red':isRed}"></div>// 也可以这样写<div class="red" :class="{'active':isActive}"></div>// 数组的方式<div :class="[active,red]"></div>// 三目运算&l
2021-04-20 16:13:07
8755
原创 ES6至ES11（二）
十三 Set集合 可以去重size 个数add 添加delete 删除has 检测clear 清空let arr = [1,5,2,6,4,2,5,6,9,4,3,7,8]// 数组去重let result = [...new Set(arr)]// 交集 既在a也在blet arr2 = [5,6,5,4,3,5]let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item));// 并集 合并之后的结果
2021-04-19 11:06:34
142
原创 ES6至ES11（一）
什么是ECMAScript是由ecma国际通过ECMA262标准化其中的一个。一. let 关键字 声明变量let a; let a,b,c;let f=21;特性:1. 变量不能重复声明 let a = 'xxx' let a = 'vvv' // 报错块级作用域(在代码块内起有效) { let name = 'jack' } console.log(name) // 报错不存在变量提升console.log(song) // 报错l
2021-04-14 16:58:34
431
原创 初识TypeScript笔记(一)
什么是TypeScript？TypeScript 简称 TSts是js的超集(js有的ts都有)ts为js添加了类型系统TypeScript = Type + JavaScriptts是微软开发的开源编程语言，设计目标是开发大型应用。可以在任何浏览器，任何计算机，任何操作系统上运行。什么是JavaScript？运行在客户端比如浏览器中的编程语言，为网站提供动态交互。运行环境:浏览器 nodejsnodejs让js可以实现服务端和桌面端编程等其他应用：微信小程序，微信小游戏js既能运行在
2021-04-07 16:56:05
119
原创 Javascript异步编程 promise async await
JavaScript语言的执行环境是单线程。所谓单线程，就是指一次只能完成一件任务。如果多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式的好处是实现起来比较简单，执行环境相对单纯。坏处是只要有一个任务耗时很长，后面的任务就必须排队等着，会拖延整个程序的执行。常见的浏览器无响应(假死)，往往就是因为某一段JavaScript代码长时间运行，导致整个页面卡死在这个地方，其他任务无法执行。为了解决这个问题，JavaScript语言将任务的执行模式分成两种:同步Synchronous和异步
2021-04-02 14:19:02
160
原创 20210204 104道常见经典CSS面试题笔记53-63)
41 absolute的containingblock计算方式和正常流有什么不同？内联元素也可以作为 包含块 所在的元素。
2021-02-04 10:51:54
74
原创 20210203 104道常见经典CSS面试题笔记(41-52)
41 absolute的containingblock计算方式和正常流有什么不同？
2021-02-03 10:26:17
158
原创 20210202 104道常见经典CSS面试题笔记(31-40)
31 zoom:1清除浮动原理？清除浮动，触发hasLayout。zoom属性是ie浏览器的专有属性，它可以设置或检索对象的缩放比例，解决ie下比较奇葩的bug。譬如外边距的重叠，浮动清除，触发ie的hasLayout属性等。当设置来zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值其实也会发生重新渲染，运用这个原理，也解决了ie下子元素浮动时候父元素不随着自动扩大的问题。zoom属性是ie浏览器专有属性，火狐和老版本的webkit核心的浏览器不支持这个属
2021-02-02 09:31:44
103
原创 20210201 104道常见经典CSS面试题笔记(21-30)
21 CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后有什么区别？对于一般的元素，它的表现跟visibility:hidden是一样的。元素是不可见的，但此时仍占用页面空间。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，表现却跟display:none一样，也即是它们占用的空间也会释放。在不同浏览器的区别:在谷歌浏览器里，使用collapse值和使用hidden
2021-02-01 16:29:34
347
原创 20210129 104道常见经典CSS面试题笔记(11-20)
11 position的值relative和absolute定位原点？absolute== 生成绝对定位的元素，相对于值不为static的第一个元素的padding box进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位relative 生成相对定位的元素 相对于其元素本身所在正常位置进行定位static 默认值 没有定位，元素出现在正常
2021-01-29 11:28:42
106
原创 20210128 104道常见经典CSS面试题笔记(1-10)
1 标准的CSS盒子模型和低版本的IE盒子模型有什么不同？盒模型是由四个部分组成，分别是margin，border，padding和content。标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border，padding和content。一般来说，可以通过修改元素的box-sizing属性来改变元素的盒模型2 CSS选择符有哪些？id选择
2021-01-28 16:16:21
166
原创 11个常见ES6代码使用
1. 隐藏所有元素<div> <img src="user.jpg"> <img src="user.jpg"> <img src="user.jpg"> <img src="user.jpg"> <img src="user.jpg"> <img src="user.jpg"></div>使用了 三个点称为扩展运算符，简单理解就是用于取出参数对象中的所有可
2021-01-28 10:07:29
296
1
原创 CSS单行文本或多行文本溢出省略效果 考虑兼容性
单行.box{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}多行.box2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden;}兼容.box3{ position: relative; line-height:
2020-11-18 09:27:19
257
原创 CSS隐藏页面上元素的三种方法 opacity display visibility 优劣使用场景
display:none结构 : 会让元素完全从渲染树中消失 渲染的时候不占据任何空间 不能点击继承 : 是非继承属性 子孙节点消失由于元素从渲染树消失造成 改子孙节点属性无法显示性能 : 修改元素会造成文档回流 读屏器不会读取display:none元素内容 性能消耗较大场景 : 显示出原来这里不存在的结构transition : 不支持display举例 : 从这个世界消失来 不存在了visibility:hidden结构 : 不会让元素从渲染树消失 渲染元素继续占据空间 只是内.
2020-11-16 10:35:09
484
原创 如何让一个div水平垂直居中
在工作中 经常会碰到让一个div框针对某个模块水平垂直居中 针对这种情况 有多种方法 现在一一实现一下一. div绝对定位水平垂直居中 margin 负间距代码:.box { width: 200px; height: 200px; background: yellow; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;
2020-11-13 10:25:43
2218
原创 CSS BFC原理及其应用 理解 IFC GFC FFC
BFC – Block Formatting Context 直译是–块级格式化上下文 它是一个独立渲染区域 只有Block-level box参与 它规定了内部如何布局 并且与这个区域外部毫不相干解释 BFC 之前 先理解 Box Formatting Context的概念Box–css布局的基本单位直观来说 就是一个页面由很多个box组成的 元素的类型和display属性 决定了这个box的类型 不同类型的box 会参与不同的formatting context(一个决定如何渲染文档的容器) 因此
2020-11-12 09:09:07
218
原创 JavaScript回调函数入门
首先回顾一下 什么是函数?函数用一组逻辑代码执行特定任务可以通过构造函数和函数表达式去声明一个函数调用函数 可以用特定事件(如单击事件)、js代码调用、自调用的方式什么是回调函数?回调函数也被叫做高阶函数 所谓高阶函数是指函数作为参数被传递或者作为返回值输出简单来说 就是把一个函数当作参数传递给另外的函数 然后在这个函数内部执行这个参数的函数在javascript中函数被看作是一类对象 作为一类对象(指数字、函数、变量)可以将函数作为变量传给其他函数 也可以从其他函数中返回这些函数回调函数的
2020-08-07 16:38:00
464
原创 简单入门JavaScript函数封装 封装函数
什么是封装？封装是面向对象的三个基本特征之一 将现实世界的事物抽象成计算机领域中的对象 对象同时具有属性和行为(方法) 这种抽象就是封装特性:数据隐藏什么是函数?用来执行特定任务 实际上为了易于调试和维护 函数允许以更有组织的方式去编写代码 函数还允许代码重用什么是函数封装？函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用使用函数有两步定义函数(又叫声明
2020-08-05 20:01:22
2470
1
原创 css实现 10种鼠标移入按钮动效
html代码<!DOCTYPE <!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>按钮背景动画</title> <meta name="viewport" content="width=device
2020-07-28 21:12:33
2676
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人