- 博客(75)
- 收藏
- 关注
RSS订阅原创 在Vue中使用Web Worker详细教程
Web Worker是2008年h5提供的新功能，每一个新功能都是为了解决原有技术的的痛点，那么这个痛点是什么呢？
2024-01-10 21:01:51
2369
原创 webpack的性能优化（二）——减少打包体积
webpack的性能优化之减少打包体积，可以通过CDN链接引入第三方库，压缩代码，tree shaking等等。
2024-01-10 00:27:55
1001
原创 webpack的性能优化（一）——分包优化
默认情况下，Webpack 会将所有代码构建成一个单独的包，这在小型项目通常不会有明显的性能问题，但伴随着项目的推进，包体积逐步增长可能会导致应用的响应耗时越来越长。资源冗余缓存失效这些问题都可以通过代码分离解决，例如中的资源通常变动较少，可以抽成一个独立的包，那么业务代码的频繁变动不会导致这部分第三方库资源被无意义地重复加载。代码分离（Code Splitting）是webpack一个非常重要的特性：它主要的目的是将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件；
2024-01-08 00:28:22
1487
原创 什么是BFC？如何使用BFC解决父元素塌陷和外边距重叠的问题？
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。官方的描述有点抽象，其实可以把BFC理解成就是css的块级作用域。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
2023-10-20 18:04:09
314
原创 什么是CSS的外边距重叠？
区块的外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为。注意：有设定和的元素不会发生外边距折叠。
2023-10-19 23:19:19
313
原创 Javascript中的模块化详解
事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；也可以通过某种方式，导入另外结构中的变量、函数、对象等；
2023-10-08 21:43:09
537
原创 JavaScript中的浅拷贝和深拷贝
浅拷贝是对象的逐位复制。创建一个新对象，该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用，则只复制引用地址，即，复制内存地址。默认情况下：引用类型（object）都是浅拷贝简单理解：对于对象来说，就是对最外层数据的拷贝，如果对象只有一层，则相当于深拷贝，如果对象有多层，即某个属性为引用数据类型，则拷贝的是该引用类型在堆中的地址，不会在内存创建一个新的对象。
2023-10-08 18:26:56
305
原创 JavaScript中的包装类型详解
在JavaScript中，基本数据类型（如数字、字符串、布尔值等）没有自己的属性和方法，它们是不可变的。为了在基本数据类型上执行操作，JavaScript提供了相应的包装类型。这些包装类型是Number、String和Boolean。
2023-10-08 14:35:03
124
原创 webpack-资源模块类型(asset module type)使用详解
资源模块类型(asset module type)的使用详解，asset/resource，asset，asset/inline,asset/source
2023-03-01 20:20:54
618
1
原创 JavaScript中判断数据类型，浅拷贝和深拷贝详解
1.基本数据类型：Number,String,Boolean,Undefined，Null，Symbol2.复杂数据类型:Object,Array,Function，Map,Set可以判断Number,String,Boolean,Undefined,Function,Symbol但是Null,Object,Array,Map,Set这三种类型都会判断为Objectobj instanceof Object:判断Object是否在obj的调用链上obj instanceof Object;// true
2022-06-29 14:39:11
448
1
原创 VUE声明周期详解
VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关参考：百度安全验证https://baijiahao.baidu.com/s?id=1668393188098846185&wfr=spider&for=pc...
2022-03-26 16:38:58
1298
原创 TypeScript 学习笔记
一.TypeScript 是什么1. TypeScript是JavaScript的超集。2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环
2022-03-05 21:28:16
518
原创 vue双向数据绑定原理详解（附源码）
vue的响应式原理1.vue内部如何监听数据的改变的？Object.defineProperty 监听对象属性的改变Object.keys(obj).forEach(key=>{ let value = obj[key] obj.defineProperty(obj,key,{ //当value值被修改的时候，执行set()方法 set(newValue) { //可以监听到key的改变了,谁用？告诉谁 value=newValue
2022-03-04 16:49:33
1160
原创 VUE 如何将一个组件封装成一个插件
vue中的组件可以以普通的方式封装，也可以以插件的方式封装：vue中插件的封装举例封装一个toast插件：1.创建toast组件创建一个toast文件夹./toast，里面建index.jsimport Toast from './toast'const obj = {}obj.install=function (Vue) { //1.创建组件构造器 const toastConstrstor = Vue.extend(Toast) //2.new的方式，根据组件构造器
2022-03-02 19:41:44
1776
原创 从零开始创建一个vue项目
1.创建一个项目vue create project2.划分项目目录结构views：主要的页面，内部根据不同模块创建不同的文件夹components:公共的组件assets:静态资源（图片/lang）styles:样式文件router:路由相关store:状态管理相关network/api:网络请求相关common/helper:存放一些公共的js文件，用来定义常量，工具类3.导入css文件normalize.css:对HTML元素样式上提供了跨浏览器
2022-02-18 18:01:36
327
原创 git操作文档
一.新建项目1.先在github上新建项目，git clone到本地，再在本地文件中通过vue create project创建VUE项目，git add ,git commit ,git push2.先在本地创建项目，然后与远程的仓库连接git initgit add README.mdgit commit -m "first commit"git branch -M maingit remote add origin [email protected]:LLLLLinae/test.gi
2022-02-18 15:58:13
146
原创 VUE中vue-router的安装与使用
一.vue-router 安装vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习: Vue Router1.安装vue-routernpm install vue-router --save2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)第一步：导入路由对象，并且调用 Vue.use(VueRouter)第二步：创建路由实例，并且传入路由映射配..
2022-02-12 18:28:32
2288
原创 URL的hash和HTML5的histpry
如何改变url，但是不刷新页面？一. url的hashURL的hash也就是锚点(#), 本质上是改变window.location.href属性. 直接赋值location.hash来改变href, 但是页面不发生刷新前端路由会监控hash的改变，当hash改变的时候，匹配对应的页面二.HTML5的historyhistory接口是HTML5新增的, 它有五种模式改变URL而不刷新页面1.history.pushState()pushState()可以改变url页面不刷新，同时
2022-01-27 16:56:55
684
原创 vue-cli 超详细教程
一.什么是Vue-cli?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置二.Vue-cli 的使用前提node环境webpack三.vue-cli的使用1.安装npm install @vue/cli -g注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目
2022-01-27 15:32:38
1470
原创 后端路由、前后端分离和前端路由的区别？
一.后端路由阶段和服务端渲染当请求一个URL，URL会发送到服务器, 服务器会对该URL进行匹配，并进行一系列的处理，服务器渲染好整个页面生成一个最终的HTML页面，这个HTML页面不需要单独加载任何的js和css，可以直接交给浏览器展示。url与网页之间的映射关系由后端处理优点：有利于SEO优化缺点：一种情况是整个页面的模块由后端人员来编写和维护的. 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码. 而且通常情况下HTML代码和数据以及对应的
2022-01-27 15:28:30
1446
原创 VUE程序运行过程-runtime-complier和runtime-only的区别
一.VUE程序运行过程当把template传递给vue实例的时候，vue实例会把该模板内容保存到vm.options，然后对该template解析成ast(抽象语法树)将ast编译为render()函数，通过render函数翻译成虚拟DOM将虚拟DOM渲染成真实的DOM二.Runtime-Compiler和Runtime-only1.Runtime-Compiler：选择Runtime-Compiler创建的项目main.js：import Vue from 'vu
2022-01-26 17:10:09
708
原创 webpack配置的分离
webpack.config.js文件中的配置，有些是开发时需要生产环境不需要，比如webpack-dev-server,有些配置是开发环境不需要，生产环境需要，比如压缩js代码的配置，因此对这里的配置做一个分离。base.config.js:用来放公共的配置，开发和生产环境都需要的配置prod.config.js:只用在生产环境的配置 uglifyjsWenpackPlugindev.congif.js:只用在开发环境的配置 devServerwebpack-margin:对两个配置文..
2022-01-23 20:57:28
468
原创 webpack搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果使用方法：1.安装npm install --save-dev [email protected].在webpack.config.js文件中添加配置项devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，
2022-01-23 20:30:51
172
原创 webpack中配置vue
一.下载使用vue注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖在main.js中引用vue重新打包，运行程序，报错:这个错误说的是我们使用的是runtime-only版本的Vue,应该使用runtime-compiler所以我们修改webpack的配置，添加如下内容即可：二.el和template区别el:el用于指定Vue要管理的DOM，与index.html 中的 #app 进行绑定，让Vue实例之后可以管理它其中的内容，...
2022-01-23 18:59:32
1352
原创 VUE-webpack超详细教程
一.认识webpack官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。从模块化和打包两个角度来理解：模块化：webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用打包:合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
2022-01-21 18:07:25
23027
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人