前端环境
关注
分享
扫一扫
文章平均质量分 77
歪歪100
与你happy畅谈。发表的博客内容仅是自己的学习记录，愿与你分享
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Webpack 介绍与使用的详细介绍
本文详细介绍了Webpack配置中的核心输出设置和前后端分离架构下的打包实践。在Webpack输出配置方面，重点讲解了output选项的path和filename参数，包括多入口文件处理、哈希值命名优化以及子目录管理等技巧。针对前后端分离架构，文章提出了开发/生产环境分离、资源路径处理、跨域代理和环境变量注入等关键配置方案，并详细说明了mode参数在开发模式和生产模式下的不同优化策略。通过合理配置这些参数，可以显著提升前端开发效率和线上性能，实现开发与生产环境的无缝衔接。原创 2025-08-12 09:09:30 · 819 阅读 · 0 评论 -
Redis 单线程串行处理为基础，以异步化、非阻塞机制为补充，在简化设计的同时，通过技术手段突破单线程的固有瓶颈
Redis 采用单线程模型处理核心请求，通过 IO 多路复用技术实现高并发，避免了线程切换开销，简化了并发控制。虽然单线程无法充分利用多核 CPU，且存在大命令阻塞风险，但通过异步处理持久化、拆分大键、集群部署等方式弥补了这些缺陷。单线程的原子性和顺序性保证了缓存一致性，简化了事务实现，但也限制了性能扩展。总体而言，Redis 单线程设计是其高性能特性的重要基础，适合内存密集型的高并发场景。原创 2025-08-11 10:26:38 · 1351 阅读 · 0 评论 -
如何避免 TypeScript 的坑
本文总结了TypeScript开发中的常见问题及解决方案。主要内容包括：类型推断不准确时可使用const或显式声明解决；建议开启strictNullChecks避免空值错误；使用keyof约束泛型来确保类型安全；避免滥用any类型，优先使用unknown；注意模块导入导出时区分类型与值；处理函数this上下文丢失问题；以及枚举类型的使用建议。最后强调开启严格模式、合理使用类型守卫和第三方库类型声明检查的重要性。TypeScript能显著提升代码质量，适合中大型项目开发。原创 2025-08-10 06:59:19 · 631 阅读 · 0 评论 -
ES6 一些你不知道的
ES6（ECMAScript 2015）是JavaScript的重大更新，引入了多项核心特性提升开发效率。包括箭头函数、类语法、模块化系统、解构赋值、扩展运算符、模板字符串、let/const声明、Promise异步处理等基础特性。此外还新增了Set/Map数据结构、WeakSet/WeakMap、Symbol类型、迭代器/生成器、Proxy/Reflect等高级功能，以及数组、字符串、数值和对象的扩展方法。这些特性使JavaScript代码更简洁、模块化和健壮，支持更复杂的应用开发，已成为现代Web开发的原创 2025-08-10 06:57:23 · 674 阅读 · 0 评论 -
Vue原理与高级开发技巧详解
Vue 双向绑定原理、常见问题与优化方案 Vue 通过数据劫持（Vue2用Object.defineProperty，Vue3用Proxy）实现响应式，自动同步数据和视图。高级用法包括自定义v-model修饰符和多v-model绑定。常见问题有：数组/对象响应式失效、异步操作与DOM更新时序冲突、组件复用导致状态保留、路由参数变化后数据未重置等。解决方案包括使用$set、nextTick、合理设置key值、监听路由变化等。性能优化需注意避免不必要的响应式数据、合理使用计算属性和事件解绑等。Vue3的Prox原创 2025-08-09 11:03:59 · 680 阅读 · 0 评论 -
Vue中的依赖收集和派发更新
Vue 的响应式系统通过依赖收集和派发更新实现数据驱动视图。依赖收集在数据访问时记录相关 Watcher（如组件渲染函数），而派发更新则在数据变化时通知这些 Watcher 执行更新。Vue 2 使用 Object.defineProperty 实现，每个属性关联一个 Dep 实例管理依赖；Vue 3 改用 Proxy 优化该流程。关键机制包括异步更新队列（避免重复渲染）和精准依赖追踪（仅更新相关组件）。示例代码展示了核心类的简化实现：Dep 管理依赖、Watcher 触发更新，defineReactive原创 2025-08-09 09:37:24 · 1037 阅读 · 0 评论 -
React 常见问题与踩坑指南（全面增强版）
React开发常见问题与优化方案 本文总结了React开发中的常见陷阱和优化方案： 性能优化： 使用React.memo避免子组件不必要的重新渲染 避免在JSX中直接创建对象/函数作为props 为列表项设置稳定的key值，避免使用数组索引 Hooks使用规范： 避免条件调用Hooks，确保在组件顶层调用 注意闭包陷阱，使用函数式更新或正确设置依赖项 警惕依赖项变化导致的无限循环问题 状态管理优化： 避免单一大型Context，可按业务拆分Context 使用memoized value减少不必要渲染 实现原创 2025-08-05 09:16:33 · 321 阅读 · 0 评论 -
Vue+loopback安装与配置
网络后端框架大号环回安装路径，参考网址 http://loopback.io/getting-started/推荐一个LoopBack 3.x手册网站： http://loopback.io/doc/en/lb3/Use-API-Explorer.html安装步骤（可以参考回送简书来深入学习：HTTPS：//www.jianshu.com/p/a1b482af0920）1.安装loopb...原创 2018-04-14 16:40:13 · 1141 阅读 · 0 评论 -
Vuejs的随笔录
VUE-CLI命令行1.npm install -g vue-cli2.vue init webpack my-project3.cd my project 4.npm install 5.npm run dev Vue：vue：组件的引入不必加大括号vue：组件的直接引入HTML文档时必须在vue实例元素内并且为闭合式：<any> </ any >，组件引用时不可使用驼峰...原创 2018-04-14 16:40:55 · 384 阅读 · 0 评论 -
Vuejs框架的总结
前端知识点总结——Vue2018-04-15 web前端开发1.框架和库的区别框架（framework）：有着自己的语法特点、都有对应的各个模块。库（library）：专注于一点。框架的好处：提到代码的质量，开发速度提高代码的复用率降低模块之间的耦合度（高内聚低耦合）UI：user interfaceGUI：graphical user interfaceCLI：command line inte...转载 2018-04-15 10:52:33 · 3968 阅读 · 0 评论 -
vue全家桶
Vue全家桶实践项目总结从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。入门Vue的官方文档就是学习Vue的最佳教程，没有之一，可能因为框架作者是设计出身，没有后端背景，因此各种抽象概念在Vue里都得以用最容易理解的方式被恰...转载 2018-04-15 11:39:00 · 1605 阅读 · 0 评论 -
随笔记录学习安装配置MongoDB
MongoDB的安装与配置 MongoDB的简介 1.MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是可以应用于各种规模的企业、各个行业以及各类应用程序的开源数据库。作为一个适用于敏捷开发的数据库，MongoDB的数据模式可以随着应用程序的发展而灵活地更新。与此同时，它也为开发人员 提供了传统数据库的功能：二级索引，完整的查询系统以及严格一致性等等。 MongoDB能...原创 2018-04-17 15:07:59 · 234 阅读 · 0 评论 -
关于前端面试的总结
关于前端面试，关于http+TCP+性能的优化TCP要说http就绕不开tcp，TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。但是，http是基于tcp协议的。TCP/IP 协议分层模型物理层将二进制的0和1和电压高低，光的闪灭和电波的强弱信号进行转换链路层代表驱动网络层使用 IP 协议，IP 协议基于 IP 转发分包数据IP 协议是个不可靠协议，不会重发IP ...转载 2018-04-18 13:27:36 · 3379 阅读 · 0 评论 -
超级好用的画图吸色工具FastSton Capture
FastStone Capture 8.4 注册码（转）下载：http://www.faststone.org/FSCapturerDownload.htm需要输入注册码： name：bluman serial/序列号/注册码：VPISCJULXUFGDDXYAUYF原创 2018-04-19 18:38:53 · 20394 阅读 · 3 评论 -
安装配置SVN+VisualSVN Server(转)
SVN学习与安装配置1. 要安装visualSVN Server推荐网址：https://www.visualsvn.com/server/download/2. 下载之后运行压缩包点击Next下一步，如下：再点击Next下一步，如下：点击Next如下操作：如下: Location是指VisualSVN Server的安装目录, Repositorys是指定你的版本库目录. Serv...转载 2018-04-20 11:03:59 · 336 阅读 · 0 评论 -
JavaScript实现重置reset()的方法
js实现reset（）的方法：<!DOCTYPE html><html><head><script>function formReset(){document.getElementById("frm1").reset();}</script></head><body><p&原创 2018-05-02 15:37:49 · 16768 阅读 · 1 评论 -
js刷新页面的重置
js刷新页面后实现的功能，刷新页面的方法：1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")2，replace 方法，该方法通过指定URL替换当前缓存在...原创 2018-05-02 15:42:08 · 9636 阅读 · 0 评论 -
vue组件之间的通信
VUE组件之间的传递数据是很重要，坑也很多，一，父组件向子组件传值1.创建子组件，在src / components /文件夹下新建一个Child.vue 2.Child.vue的中创建道具，然后创建一个名为message的属性child.png3.在App.vue中注册子组件，并在模板中加入子标签，标签中添加邮件属性并赋值App2.png4.保存修改的文件，查看浏览器browser.png5.我...原创 2018-05-09 13:58:05 · 2257 阅读 · 0 评论 -
v-model和v-bind
VUE的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{名称}}的形式，一种是v-绑定，还有一种是v模型{{名称}}的形式比较好理解，就是以文本的形式和实例数据中对应的属性进行绑定比如。：var app = new Vue（{el：'#app'，template：'<div @ click =“toggleName”&g...转载 2018-05-09 14:52:23 · 4174 阅读 · 1 评论 -
实现返回上一级
1，vue里面实现返回上一级或返回VUE里面实现返回上一级：此$ router.back（-1）;2，vuex的实现方式： 如果（这个。$商店。状态。previousRouter。名）{ 这个。$路由器。推（{ 名称： 此。$商店。状态。previousRouter。名称 }）; }3，vuex的安装及使用： 项目报错如下：TypeError: Cannot read...原创 2018-05-10 15:16:19 · 5390 阅读 · 0 评论 -
vue的路由嵌套
嵌套路由就是路由里面嵌套他的子路由子路由关键属性children每一个子路由里面可以嵌套多个组件子组件又有路由导航和路由容器<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link><!DOCTYPE html><html lang="en"><head> <转载 2018-05-04 10:15:27 · 334 阅读 · 0 评论 -
配置Vue的路由
在Vue环境中，找到index.js文件中 代码如下：import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import FirstNode from '@/components/FirstNode'import introduce from '...原创 2018-04-26 14:09:58 · 395 阅读 · 0 评论 -
js里top ,clientTop ,scrollTop ,offsetTop
<1>.js里top ,clientTop ,scrollTop ,offsetTop网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeigh...原创 2018-04-27 18:49:02 · 405 阅读 · 0 评论 -
js实现显示与隐藏
总结如下：1.jQuery中隐藏元素的hide方法 让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数： .hide( options ) 当提供hide方法一个参数时，.hi...转载 2018-04-28 09:16:42 · 9857 阅读 · 0 评论 -
Git 使用及GitHub上传
总结git的使用：初始化操作： git clone URL（地址 //将远程项目导入本地） 此时默认的分支为master 该分支不可修改 所以必须切换到别的分支 你才能开始修改代码 不然你本地改的代码都要作废。 git branch 分支名 //创建分支 git checkout 分支名 //切换分支 根据上面两条命令你可以创建一个自己的分支 然后切换到你自己的分支 切换到非master后才可以进...原创 2018-04-28 09:32:27 · 214 阅读 · 0 评论 -
Javascript的继承与多态
es6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以另一种方式模仿类，并通过原型链的方式实现了父类子类之间共享属性的继承以及身份确认机制。其实，面向对象的概念本质上来讲不是指某种语言特性，而是一种设计思想。如果你深谙面向对象的编程思想，即使...转载 2018-05-07 11:04:21 · 484 阅读 · 0 评论 -
vuejs的标签和API总结
vuejs总结：vm指new Vue获取的实例 ①当dom标签里的值和data里的值绑定后，更改data对应的值可以实时更新标签里的值； 但后续添加的值是无效的（绑定失败）。 ②将可以将对象直接作为data的一个属性，是有效的（因为对象按值传递）；所以该属性和该对象是全等的； ③vm的接口有：vm.$data是vm的data属性；vm.$el是el属性指向的dom结点；vm.$watch是监视属性...转载 2018-05-21 09:27:54 · 1786 阅读 · 0 评论 -
react-router路由配置
vue路由传参，路由配置const RouteConfig = [ { path: 'first', component: First, name: '第一个路由', routes: [ { path: '1', component: Ch...转载 2018-05-21 09:47:30 · 6867 阅读 · 0 评论 -
vuejs的路由功能
最简单的路由1，原理：通过控制父组件一个路由变量的值，来动态改变指向的组件;而被指向的组件又通过渲染方法被渲染到父组件中，因此当指向组件改变时，被渲染的组件也随之改变;因此，就相当于通过控制一个变量来实现了路由的效果;2，核心：通过渲染方法来写，比较优雅。事实上也可以通过模板标签来写，但这样写的话，就会像之前解释渲染方法的用处一样，会写很多额外的代码（通过V-如果写在标签里，来判断到底渲染哪个组件...转载 2018-05-21 10:28:56 · 5169 阅读 · 0 评论 -
vuejs的render方法使用
非使用渲染方法的情况完整代码：<!DOCTYPE html><html><head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>转载 2018-05-21 10:57:14 · 6830 阅读 · 1 评论 -
vuex的使用
Vuex的应用场景有什么？什么时候适合使用Vuex，什么时候不适合使用Vuex？涉及到非父子关系的组件，例如兄弟关系，祖孙关系，甚至更远的关系;他们之间如果有数据交互，那么应该使用Vuex来实现;如果页面复杂度比较低的话，可以也。考虑使用 global-event-bus 来实现;如果只是父子关系的组件数据交互，那么应该考虑使用的道具进行单向传递;如果涉及到子组件向父组件的数据传递，应该那么考虑...转载 2018-05-21 11:29:21 · 1034 阅读 · 0 评论 -
vuex API里面的action
行动Action类似于变异，不同于在：Action提交的是mutation，而不是直接更改状态。Action可以包含任意异步操作。注册一个简单的动作：const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }...原创 2018-05-21 14:45:40 · 2432 阅读 · 0 评论 -
vue 里面的slot属性
总结如下：深入理解VUE中的槽与槽范围写在前面VUE中关于插槽的文档说明很短，语言又写的很凝练，再加上其和方法，数据，计算机等常用选项在使用频率，使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了VUE的说明文档。实际上，插槽的概念很简单，下面通过分三部分来讲，这三部分也是按照VUE说明文档的顺序来写的。进入这三部分之前，...转载 2018-05-25 14:11:09 · 159511 阅读 · 31 评论 -
vuex的使用
VUE + vuex的使用总结如下（查阅资料）：写在前面本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。学习vuex需要你知道VUE的一些基础知识和用法。相信点开本文的同学都具备这个基础。另外对vuex已经比较熟悉的大佬可以忽略本文。生成基于VUE的项目基于vue-cli脚手架生成一个vue项目常用npm命令：npm i vue-c...原创 2018-05-25 14:44:43 · 549 阅读 · 0 评论 -
Nodejs的安装及使用
1，下载安装包： 下载地址：https : //nodejs.org/en/download/，根据自己的电脑的配置下载相应的windows64位安装包，下载完成后，进行安装 。2，检查是否安装成功 安装完成后，打开命令行窗口，检查是否安装成功，如下图所示，键入node -v出现node.js的版本，键入npm -v出现npm的版本，说明两者均已安装成功。3，环境配置变量 由于我的电脑之前安装过...原创 2018-05-21 17:30:16 · 16459 阅读 · 0 评论 -
Vue与ref属性与refs
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册实例：这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来...转载 2018-05-25 18:31:04 · 175491 阅读 · 6 评论 -
vue的路由和vuex的使用
我们使用vue-router及vuex时引入它们的方式是直接以<script src =“xxx”>的方式引入且就在一个文件中写。但是实际开发时，我们并不是这样操作的，一般我们会使用VUE-CLI脚手架。但是使用VUE-CLI的话，我们在引入VUE路由器及vuex时写法会稍有不同，这里我来举个通俗易懂的例子（每一步都很详细且代码中比较重要或者难以理解的地方我都注释出来了，希望对大家有所...转载 2018-05-25 19:19:12 · 6572 阅读 · 1 评论 -
vuejs的：is和is使用和区别
一，是的用途<div id = “app” > <button @ click = “plusone” > +++ 1 </ button> <myheaders ：mycount = “count” ：mymsg = “msg” > </ myheaders> <div ：is = “ tttson“ > ...原创 2018-05-22 18:36:10 · 21436 阅读 · 1 评论 -
vuejs的组件
组件的基本使用注册组件组件注册就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。 Vue.component('mycomponent',{ template: `<div>这是一个自定义组件</div>`, data () { return { message: 'hello wor...转载 2018-05-22 19:04:40 · 294 阅读 · 0 评论 -
vue+elementUI多级菜单动态渲染组件
以下是组件代码：[HTML] 查看纯字幕： < template > < div class = “navMenu” > < label v-for = “navMenus中的navMenu” > < el-menu-item v-if = “navMenu.childs == nu...转载 2018-05-22 19:39:48 · 30140 阅读 · 8 评论