- 博客(35)
- 收藏
- 关注
原创 如何搭建一个vue组件,并发布到npm
将我们编写的代码发布到npm仓库后就可以在多个不同的项目里引入使用,不管是公司内部使用还是分享给互联网上其他用户,都很方便。
2022-11-21 09:25:08
926
原创 window.location对象详解
window.location 对象不仅可以获得当前页面的地址 (URL),还能够将浏览器重定向到新的页面。
2022-11-01 09:31:23
5753
1
原创 Vue组件间通信的几种方式
用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用一般来说,组件之间可以有几种关系:父子关系,兄弟关系,隔代关系(可能隔多代)。
2022-08-01 14:25:08
265
原创 前端加解密算法汇总
日常开发中,无论你是使用什么语言,都应该遇到过使用加解密的使用场景,比如接口数据需要加密传给前端保证数据传输的安全;HTTPS使用证书的方式首先进行非对称加密,将客户端的私匙传递给服务端,然后双方后面的通信都使用该私匙进行对称加密传输;使用MD5进行文件一致性校验,等等很多的场景都使用到了加解密技术。很多时候我们对于什么时候要使用什么样的加解密方式是很懵的。因为可用的加解密方案实在是太多,大家对加解密技术的类型可能不是很清楚,今天这篇文章就来梳理一下目前主流的加解密技术...
2022-07-20 11:41:15
2620
原创 javaScript 中 “==“和“===“的区别详解
==两边值类型不同的时候,要先进行类型转换,再比较。===不做类型转换,类型不同的一定不等。
2022-06-23 11:02:57
522
原创 http-server介绍及使用
是一个简单的零配置的命令行http服务器(基于nodejs),它足够强大便于生产和使用,用于本地测试和开发。一般我们打开一个网页都是通过files协议本地打开的方式,当前端项目打包之后想在本地查看发布效果的时候,这时需要在本地开启一个服务,此时http-server开始起作用。总结:采用http-server本地运行前端项目...
2022-06-22 10:18:51
4556
原创 Vue 中 computed和watch的区别
计算属性基于 中声明过或者父组件传递的 中的数据通过计算得到的一个新值,这个新值会根据已知值的变化而变化简言之:这个属性依赖其他属性,由其他属性计算而来的。在 属性对象中 定义计算属性 的方法,和取data对象里的数据属性一样以属性访问的形式调用,即在页面中使用 来显示计算的结果。注:计算属性 fullName 不能在 data 中定义,而计算属性值的相关已知值在data中;如果 fullName 在 data 中定义了会报错如下图:因为如果 属性值是一个函数,那么默认会走 方法,必须要有一
2022-06-21 10:45:49
367
原创 深入理解 JavaScript 之 正则表达式
在我们写页面时,往往需要对表单的数据比如账号、身份证号等进行验证,而最有效的、用的最多的便是使用正则表达式来验证。那什么是正则表达式呢?1、简介正则表达式(Regular Expression)是用于描述一组字符串特征的模式,用来匹配特定的字符串。 它的应用非常广泛,特别是在字符串处理方面。其常见的应用如下验证字符串,即验证给定的字符串或子字符串是否符合指定的特征,例如,验证是否是合法的邮件地址、验证是否是合法的HTTP地址等等。查找字符串,从给定的文本当中查找符合指定特征的字符串,这样.
2022-05-31 10:03:26
762
原创 深入理解 JavaScript 之 this指向详解
前端开发人员在进阶过程中总会遇到一个疑难杂症:Javascript的thisthis到底指向什么哪个对象啊?要爆炸了有木有?1、this在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。1.1、姜浩五大定律通过函数名()直接调用:this指向window;通过对象.函数名()调用的:this指向这个对象;函数作为数组的一个元素,通过数组下标调用的:this指向这个数组;函数作为window内置函数的回调函数调用:th.
2022-05-25 14:43:49
591
2
原创 深入理解 JavaScript 之 浅拷贝和深拷贝
1、数据类型数据类型分为两种, 基本类型 和 引用类型基本类型: String, Number, Boolean, Null, Undefined,Symbol引用类型: Object,Array,Date,Function,regexp…1.1 区别基本类型是按值访问的,不会影响到其他数据,例如:var a = '前端'var b = aa = '前端工程师'b // 前端引用类型的值是按地址访问的,简单的赋值,实际上只是把地址复制了一遍,修改任意一个值会影响到另外一个,例如:v
2022-05-25 10:04:28
120
原创 深入理解 JavaScript 之事件循环(Event Loop)
1、JavaScript 是单线程的JS 是一门单线程的非阻塞的脚本语言,这表示在同一时刻最多也只有一个代码段执行。2、为什么 JavaScript 是单线程的这是由其执行的环境是浏览器环境所决定的。试想一下如果 JavaScript 是多线程语言的话,那么当两个线程同时对 Dom 节点进行操作的时候,则可能会出现有歧义的问题,例如一个线程操作的是在一个 Dom 节点中添加内容,另一个线程操作的是删除该 Dom 节点,那么应该以哪个线程为准呢?所以 JavaScript 作为浏览器的脚本语言,其设
2022-05-20 15:23:05
479
原创 Vue + TypeScript 实战(六)axios封装
1、安装yarn add axios2、 通用功能正常请求该有的(跨域携带cookie,token,超时设置)请求响应拦截器请求成功,业务状态码200,解析result给我,我不想一层一层的去判断拿数据http请求200, 业务状态码非200,说明逻辑判断这是不成功的,那就全局message提示服务端的报错http请求非200, 说明http请求都有问题,也全局message提示报错http请求或者业务状态码401都做注销操作全局的loading配置, 默认开启,可配置关闭(由于后端的
2022-05-17 09:51:01
415
原创 Vue + TypeScript 实战(五)全局设置
初始化环境变量文件JS 配置文件初始化:如是否开启 Mock 数据、加载本地菜单、URL 请求路径等;国际化文件初始化:初始化国际化文件的结构;整合 Element UI: 将 Element UI 添加到工程中;全局样式初始化:初始化全局样式、通用样式。1、多环境配置多环境变量是在项目开发·打包·生产时产生的概念,所谓的多环境变量指的就是一个项目适配多种环境。开发环境:一般是本地开发时所使用的环境,改动很频繁测试环境:较为稳定的版本,一般用于部署测试生产环境:发布到线上的版本1
2022-04-29 14:30:53
1730
原创 Vue + TypeScript 实战(四)路由守卫
highlight: atom-one-darktheme: juejin1、环境准备1.1 Node.js(1)下载安装官网: https://nodejs.org/en/ (双击下载文件,一路 next 即可)注: 推荐下载最新稳定版安装完成后分别输入命令 node -v 和 npm -v 查看 node 版本与 npm 版本C:\Users\Administrator>node -vv12.17.0C:\Users\Administrator>npm -v6.1.
2022-04-27 09:27:42
1727
原创 Vue + TypeScript 实战(三)vue-router 路由模块化
项目中一般都会分为很多模块,每个模块都是独立的,而且每个模块最好也有自己独立的路由文件,便于项目后期的拓展和维护。配置的路由模块多后,动态加载路由配置就至关重要
2022-04-19 10:51:10
3018
1
原创 Vue + TypeScript 实战(二)路由详解
一、路由属性配置说明export default new Router({ mode: 'history', //路由模式,取值为history与hash base: '/', //打包路径,默认为/,可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: {
2022-04-18 16:22:13
2838
原创 Vue + TypeScript 实战(一)项目搭建
一、环境准备(1)安装 Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。下载地址官网: https://nodejs.org/en/ (一路 next 即可)安装完可在控制台查看 node、npm 对应版本node -vnpm -v永久使用淘宝镜像命令:npm config set registry https://registry.npm.taobao.org(
2022-04-14 00:01:12
4251
原创 webpack(八)代码分离
我们的 js 都是打包输出到一个文件中的,当内容越来越多的时候,会导致单个文件体积十分巨大,所以我们就需要对代码进行分割,将一个巨大的文件,分割成多个中小型文件,然后可以按需加载或并行加载这些文件代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代.
2022-04-13 09:44:11
1787
原创 webpack(七)环境分离
在实际开发实践中,为了方便开发调试和上线,项目中我们一般配置两个 Webpack 配置,一个是开发环境一个是生产环境,开发环境帮助我们快速开发测试联调,生产环境保证上线环境的打包流程是最优化体验,这就是配置文件根据环境进行拆分。...
2022-04-11 21:51:44
175
原创 webpack(六)搭建本地服务器及代理配置
webpack提供了一个可选的本地开发服务器,基于node.js搭建,内部使用express框架,让浏览器自动刷新修改后的结果。
2022-04-09 12:04:13
4588
原创 webpack(五) 常用plugins
webpack中的plugin,赋予其各种灵活的功能,例如打包优化、资源管理、环境变量注入等,它们会运行在 webpack 的不同阶段(钩子 / 生命周期),贯穿了webpack整个编译周期
2022-04-06 23:07:39
3314
原创 webpack(四) js 浏览器兼容
对于es6语法,一些浏览器或者低版本浏览器是不兼容的,因此需要项目在打包编译的时候自动将es6语法转换成es5。
2022-04-06 11:19:39
1604
原创 VSCode 前端常用插件集合
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。但工欲善其事必先利其器,以下是本人为前端开发收集的常用的vscode插件,有需要的话赶紧mark起来吧~
2022-04-06 09:15:02
19538
2
原创 webpack(三)加载处理其他资源(图片、图标)
图片打包关键要用到 file-loader 或url-loader,其中 url-loader 与 file-loader` 功能基本一致,只不过 url-loader能将小于某个大小的图片进行base64格式的转化处理。在webpack5之后,我们可以直接使用资源模块类型(asset module type)来替代file-loader、url-loader。
2022-04-05 13:00:45
1128
原创 webpack(二)样式文件兼容及打包
一、loader简介由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是js文件(如上面添加的module.js)。那么其他文件类型该如何进行打包呢?这时我们就要用到Webpack中所提供的各种loader,它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。其中CSS文件的打包需要用到css-loader和style-loader两个loadercss-loader
2022-04-04 20:23:06
951
原创 webpack(一) 安装和配置
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
2022-04-04 11:14:16
3151
原创 TortoiseGit的安装及使用
Git 作为一个复杂的版本控制系统,命令很多,即使经常使用,有些命令也记不住。我们可以借助一个图形化的软件 —— TortoiseGit 来操作 git。
2022-03-23 10:49:17
1736
转载 spy-debugger - 移动端抓包调试工具
spy-debugger 是一个一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。
2022-03-21 14:22:33
2452
原创 超完整的js数组方法详解
数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响。
2022-03-18 11:12:57
388
转载 Flex 布局
一、容器的属性flex-direction 决定主轴的方向flex-wrap 如果一条轴线排不下,如何换行flex-flowjustify-contentalign-itemsalign-content1. flex-direction属性flex-direction属性决定主轴的方向(即项目的排列方向)。.box { flex-direction: row | row-reverse | column | column-reverse;}row(默认值):主轴为水平方
2022-03-17 14:54:13
368
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人