前端
zjLOVEcyj
composing code was a kind of art
展开
-
js实现瀑布流布局
js实现瀑布流布局原创 2022-10-08 20:21:13 · 2329 阅读 · 1 评论 -
前端面试-html、css
答:伪元素引入iconfont使用unicode模式,给伪元素添加font-family:iconfont,设置content为对应icon的unicode编码即可,不会出现在dom中;答:圣杯:中间栏width100%,左右用padding给左右两栏留出位置,三栏全部浮动,左右两栏利用margin-left移动到对应位置,然后左右两栏使用相对定位到指定位置。双飞翼:中间栏两层dom,内层设置左右外边距给左右两栏留出位置,三栏全部浮动,左右两栏利用margin-left移动到指定位置。...原创 2022-08-13 11:34:58 · 437 阅读 · 0 评论 -
前端面试题-javascript
前端面试,js原创 2022-08-13 10:08:02 · 179 阅读 · 0 评论 -
手写实现简易版前端history路由和hash路由
history路由<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2022-05-22 15:53:11 · 310 阅读 · 0 评论 -
webpack
webpack是什么?webpack是一种前端资源构建工具,一个静态模块打包器。在webpack看来,前端所有资源文件(js/json/css/img/less)等都会作为模块处理。他会根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。webpack的5个核心概念entry入口指示webpack以哪个文件作为入口起点开始打包,分析构建内部依赖图output输出指示webpack打包后的资源budles输出到哪里去,以及如何命名loaderloader让webpack能够原创 2022-05-17 09:53:14 · 197 阅读 · 0 评论 -
Promise基本使用
初体验-延时抽奖<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2022-04-26 11:48:05 · 100 阅读 · 0 评论 -
js深拷贝
var obj = { id: 1, name: 'zhaoji', msg: { age: 18 }, color: ['pink', 'red']}var o = {}function deepCopy (newObj, oldObj) { for (let k in oldObj) { // 判断属性值属于哪种数据类型 let value = oldObj[k] // 如果是数组则将该属性赋值一个空数组并进行递归拷贝 if (v原创 2022-04-05 17:57:40 · 221 阅读 · 0 评论 -
js防抖与节流
防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume.原创 2022-04-05 16:05:40 · 64 阅读 · 0 评论 -
js实现简易版Promise
const PENDING = 'pending'const FULIFILLED = 'fulfilled'const REJECTED = 'rejected'class MyPromise { constructor (executor) { this.status = PENDING this.value = undefined this.reason = undefined this.onFulfilledCallbacks = [] this.原创 2022-03-30 10:58:30 · 158 阅读 · 0 评论 -
CSS属性书写顺序
1 布局定位属性display / position / float/ clear/ visibility / overflow2 自身属性width / height / margin / padding / border / background3 文本属性color / font / text-align / text-decoration / vertical-align / white-space / break-word4 其他属性content / cursor / borde.原创 2022-03-18 17:58:07 · 106 阅读 · 0 评论 -
CSS清除浮动方法
额外标签法在最后一个浮动元素的后边再放置一个不浮动的元素设置其css属性clear: both;即可通俗易懂书写方便但会添加无意义的标签,结构化不好注意:该元素必须是块级元素父级元素添加overflow属性代码简洁但无法显示溢出内容伪元素法给父级元素添加一个伪元素,本质类似于额外标签法.box::after { content: ""; display: block; height: 0; clear: both; visib.原创 2022-03-18 15:09:43 · 125 阅读 · 0 评论 -
vue事件修饰符
stop阻止事件冒泡给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件prevent阻止默认事件<!-- 阻止默认事件 --><a href="https://www.baidu.com" @click.prevent="aClick()">跳转到百度</a>capture添加事件时使用捕获模式,即由外到内进行事件触发应用场景较少self当事件在该元素本身触发使才触发回掉once只.原创 2022-02-15 22:17:44 · 265 阅读 · 0 评论 -
vue组件通信
父组件向子组件传值先在父组件中绑定自定义属性,通过该属性向子组件传值在子组件使用props接受父组件传递的数据子组件向父组件传值在父组件绑定自定义事件在子组件使用$emit(事件名, data)触发事件向父组件传递data...原创 2022-02-11 14:27:59 · 358 阅读 · 0 评论 -
解决vue v-for渲染的异步请求数据无法使用better-scroll插件滚动问题
背景使用better-scroll插件实例化滚动列表,但列表中的数据是异步请求,有时列表中数据还没有渲染完成,插件就已经实例化导致bug,解决问题的根源在于令dom全部渲染完成后再实例化插件最简单的方法就是设置定时器,等待一定时间再实例化插件,但这种方法容易浪费时间等待或者等待时间不足仍然导致bug较好的解决方法就是watch+vm.nextTicknextTich: 在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法,获取更新后的 DOM$nextTick 里面DOM.原创 2022-02-08 12:22:17 · 1067 阅读 · 0 评论 -
Element-UI的基本使用
官网地址:https://element.eleme.cn/#/zh-CH1运行vue ui 打开UI管理界面2 新建一个vue项目并启动3添加如下插件选择按需导入4在项目的App.vue组件中添加如下的按钮结构<el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button>原创 2022-01-10 16:00:07 · 471 阅读 · 0 评论 -
webpack中加载器的基本使用
打包处理css文件① 运行npm i install style-loader css-loader安装处理css文件的loader② 在webpack.config.js中的module->rules数组中添加loader规则如下:module:{ rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']} ] }③在index.js中导入相关的css文原创 2022-01-10 10:59:58 · 344 阅读 · 0 评论 -
webpack配置html-webpack-plugin
配置html-webpack-plugin生成预览页面① 运行 npm i html-webpack-plugin -D安装生成预览页面的插件② 修改webpack.config.json 文件头部区域如下:const path = require('path')const html_webpack_plugin = require('html-webpack-plugin')const html_plugin = new html_webpack_plugin({ template:原创 2022-01-09 23:02:40 · 1321 阅读 · 0 评论 -
webpack自动打包功能配置
①运行npm i webpack-dev-server -D 安装自动打包工具②修改package.json中的dev命令如下"scripts": { "dev": "webpack-dev-server" }③在webpack.config.json中修改编译入口和出口路径如下module.exports = { // 编译模式 mode: 'development', entry: path.join(__dirname, './src/.原创 2022-01-09 22:49:23 · 577 阅读 · 0 评论