- 博客(24)
- 收藏
- 关注
RSS订阅原创 滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
出现原因页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。解决方案一：新属性 overlay （目前仅chrome支持）chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。html { overflow-y: overlay;}解决方案二：margin-right: calc(100%
2021-04-21 17:05:11
11385
1
原创 vue---hash模式和history模式的区别
1、hash模式和history模式的区别表现形式的区别hash模式路径中带#，#后内容作为路由地址history模式正常路径 需要服务端配置支持原理的区别hash模式基于锚点，以及onhaschange事件，根据路由地址不同呈现不同内容history模式基于HTML5中的history API- history.pushState() IE10以后支持- history.replaceState()2、history 模式的使用需要服务器的支持单页面应用中，服务端不存在
2021-03-11 17:17:06
246
原创 vue---响应式相关问题
1、给属性重新赋值成对象，是否是响应式的是响应式的。比如当我们把data的msg重新设置成对象的时候，因为msg在data中定义过，所有msg是响应式的，当重新设置msg的值得时候会触发observer中的set方法，在set方法中首先记录下新的值，然后会调用that.walk方法，walk 方法中会遍历对象中的所有属性，重新把他变成响应式数据。2、给vue实例新增一个成员，是否是响应式的？不是响应式的data中的属性是在new Vue的时候转变为响应式数据的，在Vue的构造函数中，会创建一
2021-02-18 22:26:47
202
原创 snabbdom、虚拟Dom、diff算法、
patch函数的整体过程分析patch(oldVnode,newVnode)把新节点中变化的内容渲染到真实DOM，最后返回新节点作为下一次处理的旧节点对比新旧VNode是否相同节点(节点的key和sel相同)如果不是相同节点，删除之前的内容，重新渲染如果是相同的节点，再判断新的VNode是否有text，如果有并且和oldVnode的text不同，直接更新文本内容如果新的Vnode有children，判断子节点是否有变化 -------diff算法的核心 updateChildrenDiff
2021-02-10 12:22:58
106
原创 vue---手写vue-router
vue的构建版本运行时版本：不支持template模板，需要打包时提前编译 编译时把template转换成render函数运行时使用完整版vue 在根目录下创建一个vue.config.js文件，将runtimeCompiler设置为truemodule.exports={ //选项... runtimeCompiler:true}完整版：包含运行时和编译器，体积比运行时版本大10K左右，程序运行时把模板转换成render函数vue-cli使用的是运行时版本如何切换完整版vue
2021-01-27 17:37:16
79
原创 vue---vue中mixin的用法详解
vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？区别组件在引用之后相当于在父组件内开辟了一块单独的空间，根据父组件props传递过来的值进行相应的操作，单本质上来讲，两者还是泾渭分明，相对独立的而mixin则是在引入组件之后，将组件内的内容如：data、methods等属性方法与父组件相应内容合并。相当于在引入之后，父组件的各种属性方法被扩充了。单纯
2021-01-27 15:47:39
578
原创 vue---vue-router，动态路由，编程式导航
1、在router/index.js中注册路由插件Vue.use(VueRouter)定义路由规则const routers=[ { path:'/', name:'Index', component:Index }, { path:'/blog', name:'Blog', //懒加载 用到的时候再加载 优化性能 component:()=>import(/* webpackChunkName:'blog' */ '../views/Blog.vu
2021-01-27 11:21:29
123
原创 vue---父子组件间的数据传递，非父子组件间的数据传递
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> //父组
2021-01-25 23:19:21
91
原创 vue---事件绑定 修饰符 组件使用的小tips
事件绑定修饰符var vm=new Vue({ el:"#app", methods:{ //1、@click绑定点击事件@click="handelClick" //如果用@click="handelClick($event,a,b,c)"可以传参 handelClick:function(e,one,two,three){ } }, //2、@click.preven修饰符 阻止事件的默认行为 //
2021-01-25 11:44:19
69
原创 vue---计算属性，方法和侦听
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{fu
2021-01-23 22:31:35
53
原创 vue---生命周期钩子
//生命周期函数就是vue实例再某一个时间点会自动执行的函数 var vm=new Vue({ el:"#app", //1、beforeCreate //创建一个vue实例的时候 初始化事件和生命周期相关的内容结束的时候 //数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 beforeCreate:function(){ }, //2、created //数据观测 (data
2021-01-23 22:08:09
63
原创 关于webpack构建流程，loader和plugin的区别与开发
1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。根据配置文件里entry找到打包入口文件顺着入口文件代码里的import或require之类的语句，解析推断文件所依赖的资源模块分别去解析每个资源模块对应的依赖，最后形成一颗依赖树，递归依赖树，找到每个节点对应的资源文件，根据配置文件 rules 属性，找到资源模块所对应的加载器，交给对应的加载器加载对应的资源模块，最后将加载以后的结果放入到bundle.js打包结果里，实现整个项目的打
2021-01-20 22:55:37
236
原创 Webapck 生产和开发不同环境下的配置 生产环境优化
不同环境下的不同配置的两种方式配置文件根据环境不同导出不同配置一个环节对应一个配置文件1、配置文件中添加判断 环境名参数 返回不同的配置参数（中小型项目）const webpack = require('webpack')const { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const CopyWebpackP
2021-01-20 10:18:27
202
原创 Webapck选择Source Map
Source Map调试和报错都是基于经过webpack打包转换之后的运行代码来进行的，要解决这个问题，利用source map来映射源代码与转换代码之间的关系，转换之后的代码，通过source map逆向解析，可以得到源代码。开发过程中帮助定位问题，生产环境中无实际意义例：在jquery-3.4.1.min.js中最后一行添加//# sourceMappingURL=jquery-3.4.1.min.map 即可在运行程序调试源代码webpack 配置使用 Source Map //配置开发过
2021-01-19 10:19:14
165
1
原创 webpack插件机制介绍
1、自动清除输出目录文件插件 clean-webpack-pluginconst { CleanWebpackPlugin } = require('clean-webpack-plugin')module:{ plugins:[ //clean-webpack-plugin new CleanWebpackPlugin(); ]}2、自动生成html插件 html-webpack-plugin...
2021-01-18 15:31:25
242
原创 webpack资源加载、核心工作原理
模块打包工具1、模块打包的由来ES Modules存在浏览器兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化webpack模块打包器
2021-01-14 16:05:44
407
原创 div内滚动条滚动到最底部
div内滚动条滚动到最底部要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最 下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。div.scrollTop = div.scrollHeight;...
2021-01-14 14:27:55
361
原创 Javascript的异步编程
Javascript的异步编程任务执行模式：同步模式 异步模式同步模式：排队执行 容易阻塞所以必须要有异步模式异步模式：不会等待这个任务的结束才会执行下一个任务 耗时任务开始时就会执行下一个任务...
2021-01-09 23:23:33
58
原创 02-01
简答题1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值初步认识：所谓工程化是指遵循一定的标准和规范通过工具提高效率的一种手段，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。解决的问题：（1）重复的机械工作，比如部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器。（2）团队开发时，很难做到风格统一，保证质量的完成需求开发（3）部分功能需要等待后端服务接口完成以后才可以进行开发（4）无法使用模块化或组件化组织代码
2021-01-09 23:20:32
134
原创 模块化开发发展过程
模块化开发发展过程一. nodeJs Commonjs规范以同步模式加载模块一个文件就是一个模块每个模块都有单独的作用域通过module.exports导出成员通过require 函数载入模块二、AMD规范 require.js异步加载模式define定义 require请求ES modules1、基本特性 <!-- 1、ESM自动采用严格模式，忽`use strict` --> <script type="module"> co
2021-01-09 23:19:32
109
原创 使用yarn安装typescript时报错
使用yarn安装typescript时报错info There appears to be trouble with your network connection. Retrying...info There appears to be trouble with your network connection. Retrying...info There appears to be trouble with your network connection. Retrying...执行以下命令：
2020-12-20 21:49:33
1220
原创 proxy，Reflect
proxy，Reflect//Proxy 代理对象 为对象设置访问代理器//Object.defineProperty //只能监测读写const person={ name:'tom', age:20}const personProxy=new Proxy(person,//需要代理的目标对象 {//代理的处理对象 get(target,property){//监视对象的访问 //1.代理的目标对象 2.外部访问的属性名
2020-12-12 22:31:55
131
原创 ES6声明变量类型、数组的解构、对象的解构
ES6声明变量类型、数组的解构、对象的解构let与块级作用域 es2015之前只有两种作用域 全局和函数 新增块级作用域 花括号所包起来的范围//以前块没有单独作用域let声明的变量 只能在块级作用域内被访问const只读恒量 一旦声明 不能修改指向的内存地址不用var 主用const 配合let（声明变量有修改需求的时候）解构基本原则如下：数组的元素是按次序排列的，变量的取值由它的位置决定；对象的属性没有次序，变量必须与属性同名，才能取到正确的值。//数组解构const names
2020-12-08 22:25:06
303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人