前端基础
文章平均质量分 63
ZivChen971206
这个作者很懒,什么都没留下…
展开
-
Webpack 2021-8-30
Webpack 2021-8-30Tree Shakingtree shaking:去除无用代码前提:1.必须使用es6模块化2.开启production环境作用:减少代码体积在package.json中配置“sideEffects”:false 所有代码都没有副作用(都可以进行tree shaking)问题:可能会把css/@babel/polyfill(副作用)文件干掉“sideEffects”:["*.css"]code split 代码分隔webpack.config.js/原创 2021-08-30 19:52:43 · 122 阅读 · 0 评论 -
2021-8-25 Webpack
2021-8-25 WebpackWebpack的优化配置开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度优化代码调试生产环境性能优化优化打包构建速度优化代码性能HMRhot module replacement 热模块替换、模块热替换作用:一个模块发生改变,只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度样式文件:可以使用HMR功能:因为style-loader内部实现了js文件:默认不能使用HMR功能 --> 需要修改js代码,添加支持HM原创 2021-08-30 19:52:13 · 119 阅读 · 0 评论 -
2021-8-24 Webpack
2021-8-24 Webpack提取CSS成一个单独的文件npm i mini-css-extract-plugin --sconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = { entry: './src/js/i原创 2021-08-30 19:51:44 · 123 阅读 · 0 评论 -
2021-8-23 webpack
1.2 Webpack五个核心概念1.2.1 Entry入口(Entry)指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图1.2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名1.2.3 LoaderLoader让Webpack能够去处理那些非JavaScript文件(webpack自身只能理解javas)1.2.4 Plugins插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,原创 2021-08-30 19:51:12 · 87 阅读 · 0 评论 -
Vue项目 2021-7-5
Vue项目 2021-7-5时间总线main.jsimport Vue from 'vue'Vue.prototype.$bus = new Vue()this.$bus.$emit("itemInfo",this.itemInfo)this.$bus.$on("itemInfo")3.2 StateState提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储3.3 MutationsMutation用于变更Store中的数据可以集中监控所有数据的变原创 2021-08-17 09:52:05 · 47 阅读 · 0 评论 -
VUE项目 2021-6-30 VUE项目 20201-7-1 VUE 2021-7-2
VUE项目 2021-6-3023.TabControl的吸顶效果获取到tabControl的offsetTop所有的组件都有一个属性$el 用于获取组件中的元素24.监听滚动,动态的改变tabControl的样式由于betterscroll的滚动采用了translate 单纯的fixed并不能很好地发挥效果在最上面多复制一份tabControl对象 利用它来实现停留效果当用户滚动到一定位置时,占位tabControl显示出来25.Home离开时记录状态和位置可以理解为,一个是用来获取路由原创 2021-08-17 09:51:43 · 80 阅读 · 0 评论 -
VUE项目 2021-6-29
VUE项目 2021-6-2911.保存商品的数据结构设计12.首页数据的请求和保存13.首页商品数据的展示14.TabControl的点击切换商品15.better-scroll的安装和使用16.better-scroll的基本使用默认情况下BScroll是不可以实时的监听滚动位置probe监测0,1:都是不检测实时的位置2:在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测3:只要是滚动,都侦测this.scroll = new BScroll(document.query原创 2021-08-16 08:33:19 · 83 阅读 · 0 评论 -
VUE项目 2021-6-28
VUE项目 2021-6-28mutations:改变context:上下文dispatch:派遣interceptor:拦截器axios.defaults 默认配置1.划分目录结构assetscomponentsnetworkrouterstoreviews2.引入normalize.css 和base.css3.vue.config.js配置别名和editor.config4.tabbar引入和项目结构划分点击变色itemClick() { this.$router原创 2021-08-16 08:32:49 · 58 阅读 · 0 评论 -
vue 2021-6-24
vue 2021-6-241.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象是一个全局的对象,它包含了所有的路由包含了许多关键的对象和属性$router.push({path:‘home’})$router.replace({path:‘home’})$route.replace({path:‘home’})2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对原创 2021-08-16 08:32:19 · 46 阅读 · 0 评论 -
vue 2021-6-18 vue 2021-6-21 vue 2021-6-22
组件访问-父访问子$children$refs组件访问-子访问父$parent$root 访问根组件1.插槽的基本使用<slot><slot>2.插槽的默认值 <slot>button<slot>3.如果有多个值,同时放入到数组进行替换时,一起作为替换元素作用域插槽的使用父组件替换插槽的标签,但是内容由子组件来提供开发时依赖运行时依赖runtime-only -> 代码中,不可以有任何的templateruntime-comp原创 2021-08-16 08:31:48 · 55 阅读 · 0 评论 -
vue 2021-6-17
vue 2021-6-17数组的高阶函数filter/map/reducefilter中的回调函数有一个要求:必须返回一个boolean值true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中false:当返回false是,函数内部会过滤掉这次的nmap对数组数据进行数学运算reduce作用对数组中所有的内容进行汇总双向绑定v-model<!-- 修饰符lazy--> <input type="text" v-model.lazy="message原创 2021-08-16 08:30:51 · 71 阅读 · 0 评论 -
vue 2021-6-16
vue 2021-6-16el:用于挂载要管理的元素data:定义数据methods:定义方法声明式编程&命令式编程Vue中的MVVMmodel-view-viewmodelview依然是我们的DOMmodel就是我们抽离出来的objviewmodel就是我们创建的vue对象实例首先viewmodel通过data binding 让obj中的数据实时的在DOM中显示其次viewmodel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变obj中原创 2021-08-16 08:30:19 · 47 阅读 · 0 评论 -
Promise&axios 2021-6-15
Promise&axios 2021-6-152.1.2 Promise的状态改变1.pending变为resolved2.pending变为rejectedPromise的状态实例对象中的一个属性 【PromiseState】pending 未决定的resolved/fulfilled 成功rejected 失败Promise对象的值实例对象中的另一个属性 【PromiseResult】保存着异步任务【成功/失败】的结果resolverejectPromise.原创 2021-08-16 08:30:02 · 72 阅读 · 0 评论 -
AJAX 2021-6-10 ajax复习 2021-6-11
AJAX 2021-6-10async javascript and xml在网页不刷新的情况下得到http请求eXtensible Markup Language 可扩展标记语言请求报文行 GET / url / HTTP/1.1头 Host:atguigu.comcookie:name-guigucontent-type:application/x-www-form-urlencodeduser-agent:chrome空行体 username=admin&password原创 2021-08-16 08:29:12 · 65 阅读 · 0 评论 -
JS复习 2021-6-9
JS复习 2021-6-95.闭包5.1 变量作用域变量根据作用域的不同分为两种:全局变量和局部变量5.2 什么是闭包闭包指有权访问另一个函数作用域中变量的函数闭包的主要作用:延伸了变量的作用范围利用闭包的方式得到当前li的索引号5.5 闭包案例1.循环注册点击事件2.循环中的setTimeout()3.计算打车价格6.4 浅拷贝和深拷贝1.浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用2.深拷贝拷贝多层,每一级别的数据都会拷贝3.Object.assign(target,…原创 2021-08-16 08:28:19 · 67 阅读 · 0 评论 -
JS复习 2021-6-8
JS复习 2021-6-81.3 构造函数的问题构造函数方法很好用,但是存在浪费内存的问题1.4 构造函数原型 prototype构造函数通过原型分配的函数时所有对象所共享的JS规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法1.原型是什么?一个对象,我们也称为prototype为原型对象原创 2021-08-16 08:27:49 · 61 阅读 · 0 评论 -
flex布局复习 2021-6-1 js复习 学习笔记 2021-6-3 js复习 2021-6-4 js高级 2021-6-7
flex布局复习 2021-6-13.1 常见父项属性flex-direction:设置主轴的方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行align-content:设置侧轴上的子元素排列方式(多行)align-items:设置侧轴上的子元素排列样式(单行)flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap4.2 align-self 控制子项自己在侧轴上的排列方式div span:nt原创 2021-08-15 19:01:12 · 69 阅读 · 0 评论 -
CSS复习 2021-5-31
CSS复习 2021-5-314.6 2D转换综合写法注意:1.同时使用多个转换,其格式为transform : translate( ) rotate( ) scale( )…等2.其顺序会影响转换的效果3.当我们同时有位移和其他属性时,记得要将位移放到最前5.1 动画的基本使用制作动画分为两步:1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes move { 0%{ transform: translateX(0原创 2021-08-15 18:59:40 · 63 阅读 · 0 评论 -
Promise学习笔记 day33 2021-5-24 axios学习笔记 day34 2021-5-25 js高级学习笔记 day35 2021-5-27
Promise学习笔记 day33 2021-5-24async与await4.2 async函数1.函数的返回值为promise对象2.promise对象的结果由async函数执行的返回值决定4.3 await表达式1.await右侧的表达式一般为promise对象,但也可以是其他的值2.如果表达式是promise对象,await返回的是promise成功的值3.如果表达式是其他值,直接将此值作为await的返回值4.4 注意1.await必须写在async函数中,但async函数中可原创 2021-08-15 18:59:10 · 85 阅读 · 0 评论 -
Promise day32 2021-5-21
Promise day32 2021-5-212.1.2 Promise 的状态改变1.pending变为resolved2.pending变为rejected说明:只有这2种,且一个promise对象只能改变一次无论变为成功还是失败,都会有一个结果数据成功的结果数据一般称为value,失败的结果数据一般称为reasonPromise对象的值实例对象中的另一个属性 [PromiseResult]保存着 异步任务 对象成功/失败的结果resolvereject2.3 如何使用Promi原创 2021-08-15 18:56:54 · 69 阅读 · 0 评论 -
ajax webpack day31 学习笔记 2021-5-20
ajaxjson对对象进行字符串转换let str = JSON.stringify(data)手动对数据转化let data = JSON.parse(xhr.response)自动对数据转化xhr.responsetype = ‘json’页面加载机制window.onload的意思是等页面完全加载完毕的意思,如果你不写这句的话,页面DOM节点还没有加载上,js就已经在运行了,可能就找不到节点跨域(重点)同源:协议、域名、端口号 必须完全相同未被同源策略就是跨域3.2 如何解决原创 2021-08-15 18:55:36 · 83 阅读 · 0 评论 -
Ajax day29 2021-5-18
Ajax day29 2021-5-18传统网站中存在的问题网速慢的情况下,页面加载时间长,用户只能等待表单提交后,如果一项内容不合格,需要重新填写所有表单内容页面跳转,重新加载页面,造成资源浪费,增加用户等待时间Ajax 的应用场景1.页面上拉加载更多数据2.列表数据无刷新分页3.表单项离开焦点数据验证4.搜索框提示文字下拉列表Ajax的实现步骤1.创建AJAX对象2.告诉Ajax请求地址以及请求方式3.发送请求4.获取服务器端给与客户端的响应数据服务器端响应的数据格式原创 2021-08-15 18:54:48 · 86 阅读 · 0 评论 -
JS高级 学习笔记 day28 2021-5-17
JS高级 学习笔记 day28 2021-5-171.2 Express框架特性提供了方便简洁的路由定义方式对获取HTTP请求参数进行了简化处理对模板引擎支持程度高,方便渲染动态HTML页面提供了中间件机制有效控制HTTP请求拥有大量第三方中间件对功能进行扩展2.1 什么是中间件中间件就是一堆方法,可以接受客户端发来的请求、可以对请求作出响应,也可以将请求继续交给下一个中间件继续处理中间件主要有两部分构成,中间件方法以及请求处理函数中间件方法由express提供,负责拦截请求,请求处原创 2021-08-15 18:54:03 · 109 阅读 · 0 评论 -
JS 高级 学习笔记 day27 2021-5-14
JS 高级 学习笔记 day27 2021-5-14同步API从上到下依次执行,前面代码会阻塞后面代码的执行5.8 PromisePromise出现的目的是解决Node.js异步编程中回调地狱的问题const fs = require('fs')function p1() { return new Promise((resolve, reject) => { fs.readFile('./1.txt', 'utf8', (err, result) => { r原创 2021-08-15 18:53:28 · 76 阅读 · 0 评论 -
Node 学习笔记 day26 2021-5-13
Node 学习笔记 day26 2021-5-133.2 系统模块fs 文件操作f:file文件,s:system系统,文件操作系统读取文件内容4.2 获取第三方模块npm:node的第三方模块管理工具下载:npm install 模块名称4.3 第三方模块 nodemonnodemon是一个命令行工具,用以辅助项目开发在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐使用步骤1.使用npm install nodemon -g 下载他4.4 第三方模块原创 2021-08-15 18:52:50 · 198 阅读 · 0 评论 -
JS进阶 学习笔记 day24 2021-5-11 2021-5-12
JS进阶 学习笔记 day24 2021-5-11this指向问题 //1.普通函数 this指向window function fn() { console.log('人生的巅峰') } fn() fn.call() //2.对象的方法 this指向的是对象o var o = { sayhi:function () { console.log('人生的巅峰') } } o.sayhi() //3.构造函数 this指向ldh这原创 2021-08-14 23:15:06 · 142 阅读 · 0 评论 -
面向对象编程 学习笔记 day22 2021-5-8 2021-5-10
1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的2.继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)1.在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象2.类里面的共有的属性和方法一定要加this使用原型 学习笔记 day23 2021-5-101.构造函数和原型创建对象可以通过以下三种方式:1.对象字面量2.new Object()3.自定义构造函数1.4 构造函数原型 prototype原创 2021-08-14 23:14:21 · 84 阅读 · 0 评论 -
响应式开发 day11 2021-4-19
响应式开发 day11 2021-4-191.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的1.2 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化平时我们的响应式尺寸划分超小屏幕(手机,小于768px):设置宽度为100%小屏幕(平板,大于等于768px):设置宽度为750原创 2021-08-14 23:13:02 · 58 阅读 · 0 评论 -
jQuery 学习笔记 day19 2021-4-29 2021-5-6 2021-5-7
jQuery 学习笔记 day19 2021-4-291.jQuery 概述1.1 JavaScript库JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等DOM对象和jQuery对象相互转换//1.DOM对象转换为jQuery对象//(1) 我们直接获取视频,得到就是jQuery元素$('video')//(2) 我们已经原创 2021-08-14 23:12:09 · 65 阅读 · 0 评论 -
JavaScript 学习笔记 day17 2021-4-27 2021-4-28
JavaScript 学习笔记 day17 2021-4-275.1 节流阀防止轮播图按钮连续点击造成播放过快var flag = trueif (flag) { flag = false animation(obj, target, function () { flag = true })}5.常见网页特效案例1.2 触摸事件对象(TouchEvent)touches 正在触摸屏幕的所有手指的一个列表targetTouches 正在触摸当前DOM元素上的手指的一个列原创 2021-08-14 23:11:00 · 81 阅读 · 0 评论 -
JavaScript 学习笔记 day16 2021-4-26
JavaScript 学习笔记 day16 2021-4-265.location对象//记录浏览历史,所以可以实现后退功能//location.assign('http://www.baidu.com)//记录浏览历史,所以可以实现后退功能// location.replace('http://www.baidu.com')//刷新页面location.reload()6.navigator对象7.history方法1.元素偏移量 offset系列offsetoffset 可以原创 2021-08-14 23:10:03 · 66 阅读 · 0 评论 -
JavaScript 学习笔记 day15 2021-4-25
JavaScript 学习笔记 day15 2021-4-255.8 三种动态创建元素区别区别1.document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘2.innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘3.innerHTML创建过个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂4.createElement()创建多个元素效率稍低一点点,但是结构更清晰6.DOM重点核心创建1.document.write原创 2021-08-14 23:09:31 · 118 阅读 · 0 评论 -
JavaScript 学习笔记 day14 2021-4-23
JavaScript 学习笔记 day14 2021-4-234.6 自定义属性的操作1.获取属性值element.属性 获取属性值element.getAttribute(‘属性’)区别:element.属性 获取内置属性值element.getAttribute(‘属性’) 主要获得自定义的属性(标准) 我们程序员自定义的属性//1.获取元素的属性值//(1)element.属性console.log(div.id)//(2)element.getAttribute原创 2021-08-14 23:09:01 · 105 阅读 · 0 评论 -
JavaScript 学习笔记 day13 2021-4-22
JavaScript 学习笔记 day13 2021-4-221.替换字符replace(‘被替换的字符’,‘替换为的字符’) 它只会替换第一个// var str = 'andy'// console.log(str.replace('a','b'))//有一个字符串 'abcoefoxyozzopp' 要求把里面所有的o替换为*var str1 = 'abcoefoxyozzopp'while(str1.indexOf('o') !== -1){str1 = str1.replace('原创 2021-08-14 23:08:31 · 83 阅读 · 0 评论 -
JavaScript 学习笔记 day12 2021-4-20
JavaScript 学习笔记 day12 2021-4-201.js的组成ECMAScript :JavaScript语法DOM :页面文档对象模型BOM:浏览器对象模型1.3 数据类型的分类js把数据类型分为两类:简单数据类型(Number,String,Boolean,Undefined,Null)复杂数据类型(Object)2.字符串转义符\n 换行符,n是newline的意思\ \ 斜杠\’ '单引号* *双引号\t tab缩进\b 空格,b是blank原创 2021-08-14 23:08:01 · 169 阅读 · 0 评论 -
响应式开发 day11 2021-4-19
1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的1.2 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化平时我们的响应式尺寸划分超小屏幕(手机,小于768px):设置宽度为100%小屏幕(平板,大于等于768px):设置宽度为750px中等屏幕(桌面显示器,大于等于992p原创 2021-08-13 21:48:25 · 53 阅读 · 0 评论 -
CSS 学习笔记 day10 2021-4-15
rem适配布局1.rem单位rem是一个相对单位,类似于em,em是父元素字体大小不同的是rem的基准是相对于html元素的字体大小比如,根元素html设置font-size = 12px,非根元素设置width:2rem;则换成px表示就是24px/*1.em相对于父元素的字体大小来说的*//*width: 10em;*//*height: 10em;*//*2.rem相对于html元素 字体大小来说的*/width: 10rem;height: 10rem;background-c原创 2021-08-13 21:47:41 · 63 阅读 · 0 评论 -
CSS学习笔记 day09 2020-4-14
二倍精灵图做法在firework里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标注意代码里面background-size也要写:精灵图原来宽度的一半vertical-align清除图片间隙flex弹性布局操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本,不支持或仅部分支持为什么清除浮动?1.父级没高度2.子盒子浮动了3.影响下面布局了,我们就应该清除浮动了额外标签法父元素overflow:hidden父元原创 2021-08-13 21:47:14 · 65 阅读 · 0 评论 -
CSS 学习笔记 day08 2-21-4-13
3.Web服务器4. 2D转换/*x就是x轴上移动位置 y就是y轴上移动位置*/transform: translate(100px,100px);重点:定义2D转换中的移动,沿着x和y轴移动元素translate最大的优点:不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%)对行内标签没有效果4.3 2D转换之旋转 rotatetransform:rotate重点:rotate里面跟度数,单位是deg 比如rotate原创 2021-08-13 14:27:29 · 90 阅读 · 0 评论 -
CSS 学习笔记 day07 2021-4-8
品优购项目规划favicon图标一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上1.制作favicon图标2.favicon图标放到网站根目录下3.HTML页面引入favicon图标网站TDK三大标签 SEO优化search engine optimization 搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式1.title网站标题2.description网站说明3.keyword关键字常用模块类名命名快速导航栏 shortcut头部 h原创 2021-08-13 14:26:31 · 59 阅读 · 0 评论