- 博客(108)
- 收藏
- 关注
RSS订阅原创 openlayers 入门教程（八）：Geoms 篇
OpenLayers中的Geoms实际上指的是Geometry（几何对象），它是地图要素（Features）的核心部分，表示了空间数据的具体形状和位置。
2024-04-19 13:58:15
421
原创 Vuex 的原理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。
2024-04-19 09:37:06
396
原创 对前端路由的理解
前端路由可以帮助我们在仅有一个页面的情况下，“记住”用户当前走到了哪一步——为 SPA 中的各个视图匹配一个唯一标识。SPA极大地提升了用户体验，它允许页面在不刷新的情况下更新页面内容，使内容的切换更加流畅。在前端技术早期，一个 url 对应一个页面，如果要从 A 页面切换到 B 页面，那么必然伴随着页面的刷新。这个体验并不好，不过在最初也是无奈之举——用户只有在刷新页面的情况下，才可以重新去请求数据。后来，改变发生了——Ajax 出现了，它允许人们在不刷新页面的情况下发起请求；在这样的背景下，出现了。
2024-04-18 09:42:56
344
原创 vue中params和query的区别
query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是。
2024-04-17 09:13:31
286
原创 openlayers 入门教程（六）：controls 篇
控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。它们可以涉及用户输入（按钮），或者仅提供信息；位置是使用 CSS 确定的。默认情况下，它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中，但可以使用任何外部 DOM 元素。.在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。
2024-04-17 09:07:47
1115
1原创 Vue-router 路由钩子在生命周期的体现
有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。为此有很多种方法可以植入路由的导航过程：全局的，单个路由独享的，或者组件级的。路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件∶。如果不想全局配置守卫的话，可以为某些路由单独配置守卫，有三个参数∶ to、from、next。这三个钩子都有三个参数∶to、from、next。
2024-04-15 09:43:04
737
原创 openlayers 入门教程（四）：layers 篇
图层就像是含有文字或图形等元素的图片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。在 openlayers 中，图层是使用 layer 对象表示的，主要有五种类型，它们都是继承 Layer 类的。
2024-04-15 09:36:50
913
原创 $route 和$router 的区别
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。
2024-04-11 16:20:18
70
原创 Vue中如何获取页面的hash变化
window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。// 监听,当路由发生变化的时候执行。
2024-04-10 15:29:05
358
原创 路由的hash和history模式的区别
Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。简介： hash模式是开发中默认的模式，它的URL带着一个#，例如：http://www.abc.com/#/vue，它的hash值就是。特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。原理： hash模式的主要
2024-04-03 13:48:28
795
原创 Vue-Router 的懒加载如何实现
（3）方案三：使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。（1）方案一(常用)：使用箭头函数+import动态加载。（2）方案二：使用箭头函数+require动态加载。
2024-04-03 13:46:51
443
原创 script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
2024-04-02 09:21:58
291
原创 DOCTYPE(⽂档类型) 的作用
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是。
2024-04-02 09:17:56
207
原创 对 CSS 工程化的理解
它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。
2024-03-29 11:38:58
993
原创 JS中字符串常用方法（持续更新中）
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。replaceAll() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，该函数会替换所有匹配到的子字符串。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
2024-03-28 09:11:32
994
原创 CSS 优化和提高性能的方法有哪些？
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
2024-03-27 09:08:32
542
原创 对Flex布局的理解及其使用场景
flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。
2024-03-27 09:06:16
447
原创 对 CSS Sprites（精灵图） 的理解
CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
2024-03-26 09:25:01
364
原创 开发中常见的图片格式及使用场景
PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。
2024-03-26 09:24:01
371
原创 uniapp的配置文件、入口文件、主组件、页面管理部分
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。文件是应用的配置文件，用于指定应用的名称、图标、权限等。配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等。
2024-03-25 15:14:48
353
原创 浅谈uniapp优缺点
虽然uni-app基于Vue.js框架，但对于没有Vue.js经验的开发者来说，需要学习Vue.js的语法和概念。总的来说，uni-app作为一个跨平台开发框架，具有跨平台能力、性能表现好、开发效率高、组件丰富、生态系统完善等优势，适用于快速开发多平台应用的场景。：uni-app基于Vue.js框架，开发者可以使用Vue.js的语法和组件库来开发应用，减少了学习成本和开发周期。：uni-app有一个活跃的社区和插件生态系统，开发者可以方便地找到和使用各种插件和扩展，为应用增加更多功能和特性。
2024-03-25 15:10:31
743
原创 Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？
点击 button 会发现，obj.b 已经成功添加，但是视图并未刷新。这是因为在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api。$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。
2024-03-22 15:58:22
505
原创 vue中v-if和v-show的区别
手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留； 性能消耗：v-if有更高的切换消耗；v-sh
2024-03-22 15:55:54
362
原创 Vue2中使用 Object.defineProperty() 来进行数据劫持有什么缺点？
在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。
2024-03-21 09:08:09
480
原创 Vue中slot是什么？有什么作用？原理是什么？
slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在。，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用。
2024-03-21 09:07:06
309
原创 浅谈MVVM、MVC、MVP的区别
MVC 中的Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。
2024-03-20 09:12:35
813
原创 Vue2中data为什么是一个函数而不是对象
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的。JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。，它们各自维护自己的数据，不会干扰其他组件的正常运行。
2024-03-19 10:35:30
345
原创 Vue2的生命周期
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行。钩子函数，命中缓存渲染后会执行。独有的生命周期，分别为。
2024-03-18 09:08:21
427
原创 Vue2组件通信的方式
（1）父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
2024-03-15 14:15:45
1450
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人