sendudu的博客

原创 部署后出现报错crbug/1173575, non-JS module files deprecated和ERR_UNSAFE_PORT

部署端口6666出现的问题部署项目到6666端口，然后用chrome访问发现报了如下错误页面显示： 网址为http://xx.xx.xx.xx:6666的网页可能暂时无法连接，或者它已永久性地移动到了新网址，ERR_UNSAFE_PORT控制台显示：crbug/1173575, non-JS module files deprecated经过一番搜索，发现原来chrome自己做了不安全端口的限制，6665-6669以及6000、4045等都是不安全端口。部署的时候要避免！！日常踩坑...

原创 JS数据类型整理

原创 HTML中的JAVASCRIPT

原创 Node Global对象

原创 国密算法m1-m4概述

密码学中应用最为广泛的的三类算法：1、对称算法（分组密码算法）代表分组密码算法(DES和SM4)；2、非对称算法（公钥密码算法）代表公钥密码算法(RSA和SM2)；3、杂凑算法（摘要算法）代表摘要算法(HAS-256系列和SM3)；而国密算法是由国家密码局发布，包含SM1、SM2、 SM3、 SM4、 SSF33等算法SM1SM1 算法是分组密码算法，分组长度为128位，密钥长度都为 128 比特，算法安全保密强度及相关软硬件实现性能与 AES 相当，算法不公开，仅以IP核的形式存在于芯片中。

原创 node模块路径分析

原创 Node Buffer类总结

原创 Node的模块实现（1）

原创 npm publish发布包出现403错误

描述发布包过程可能会遇到很多问题，比较无语的是403 Forbidden如下npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/hello_test_npm - You do not have permission to publish "hello_test_npm". Are you logged in as the correct user?npm ERR! 403 In most cases, you or one of you

原创 UUID的规范、v1-v5以及如何保证唯一性

UUID(Universally Unique IDentifier)是一个128位数字的唯一标识。RFC 4122描述了具体的规范实现。本文尝试从它的结构一步步分析为什么它能做到唯一性？及各个版本的使用场景。FormatUUID使用16进制表示，共有36个字符(32个字母数字+4个连接符"-")，格式为8-4-4-4-12，如：6d25a684-9558-11e9-aa94-efccd7a0659bxxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxxM中使用4位来表

原创 前后端接口的对比（RESTful，GraphQL）

原创 Webpack 5升级内容（二：模块联邦）

重大变化：开发支持Module Federation模块联邦（联合） ????????Module Federation 使 JavaScript 应用得以从另一个 JavaScript 应用中动态地加载代码 —— 同时共享依赖。如果某应用所消费的 federated module联邦模块 没有 federated code联合代码 中所需的依赖，Webpack 将会从 联合构建源中下载缺少的依赖项。动机Module Federation的动机是与多个团队一起开发一个或多个应用程序。

原创 Webpack 5升级内容（一）

Webpack 5升级内容版本发布时间webpack 4于2018年2月发布Webpack 5.0.0于2020年10月10日发布此版本关注此版本重点关注以下内容：通过持久化缓存提高构建性能。使用更好的算法和默认值来改善长期缓存。通过更好的Tree Shaking和代码生成来改善bundle大小。清理处于怪异状态的内部结构，同时在v4中实现功能而不引入任何重大更改。Clean up internal structures that were left in a wei

原创 webpack的缓存

一、babel缓存1. 引入问题为什么对Babel进行缓存，因为项目里js代码一般最多，而babel是对js代码进行编译处理成浏览器能识别的语法 100个js模块中只有1个变化，另外99个不需要再重新编译2. 解决方案开启Babel 缓存 第二次构建时才会读取缓存，速度会更快一些3. 具体配置{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { pr...

原创 js模块规范发展

之前，js不能引入三方模块，所有的代码必须写到一个文件中，导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码，有助于使您的代码变得松散耦合，这对于构建可维护的表示工程代码大有帮助。基于此，越来越多的模块规范出现，如commonjs、amd、umd、esm.amdamd（Asynchronous Module Definitions）规范因RequireJS而出名，其适用于浏览器端，commonjs常被用于node中，当然其也可通过Browserify用于浏览器中。其用法如下：//

原创 浏览器缓存

浏览器缓存机制什么是缓存？缓存能够减少浏览器请求资源的次数，当第一个请求资源完成后，根据相应的缓存机制，将一些静态资源存储在本地磁盘当中，这样下次请求资源的时候，浏览器直接从本地缓存中读取文件，不需要再次发送请求。这样可以减少了网络延迟，加快了页面响应速度，增强了用户体验；减少了网络带宽消耗；减轻了服务器的压力。浏览器缓存有哪些标识?我们如何知道，每一次资源请求是从本地获取还是服务器？以Chrome为例，打开开发者工具，点击network tab，选择all，这里会显示我们请求的所有静态资源的加载

原创 vue3在setup中使用vuex相关方法

setup没有this我们知道vue3的setup函数中是没有this的，就算传了context参数，打印出来也没有相关属性useStore这里我们可以直接从vuex 4.X中解构出useStore方法，就可以在setup中使用vuex的相关函数了，例子如下<template> <div> <h2>{{ $store.state.count }}</h2> <button @click="plusCount">点击&lt

原创 vue-cli小记

原创 Element.getBoundingClientRect()

getBoundingClientRect和scrollTo…的使用场景不同

原创 JavaScript新的时间全局对象Temporal

背景ECMA TC39临时提案正在努力为JavaScript语言编写更好的日期和时间API。 它目前处于TC39流程的第二阶段。Temporal将成为一个新的全局对象，它的形式是顶级名称空间（如Math）。 它公开了许多不同类型的对象，包括Temporal.Absolute，Temporal.DateTime，Temporal.Date，Temporal.Time，Temporal.TimeZone等。 Temporal Cookbook展示了许多“食谱”，并举例说明了如何在不同的场景中使用这些对象。

原创 process.env.NODE_ENV

process.envprocess对象用于处理与当前进程相关的事情，它是一个全局对象，可以在任何地方直接访问到它而无需引入额外模块。 它是 EventEmitter 的一个实例。process.env 获取当前系统环境信息的对象，常规可以用来进一步获取环境变量、用户名等系统信息：console.log(process.env);console.log('username: ' + process.env.USERNAME);console.log('PATH: ' + process.e

原创 vue3初体验

一、composition API1. vue2.x如何组织代码（1）option API（2）面临问题小项目时，这种组织方法还可以 但当功能越来越复杂，同一个功能被拆分到不同的部分会难以阅读，不方便后期维护2. composition API（1）解决上面问题Composition API是以功能来划分代码 把同一个功能的不同代码放在一起（比如放在一个函数中）（2）为什么使用composition API（3）composi...

原创 HTTP请求中的form data | request payload | query string parameters

Query String Parameters当发起一次GET请求时，参数会以url string的形式进行传递。即?后的字符串则为其请求参数，并以&作为分隔符。Form Data当发起一次POST请求时，若未指定content-type，则默认content-type为application/x-www-form-urlencoded。即参数会以Form Data的形式进行传递，不会显式出现在请求url中。Request Payload当发起一次POST请求时，若content-t

原创 vue的两种CSS绑定方式（class和style）

原创 vue项目都在什么时候用store.state、$store.state和this.$store.state

store 和 [this.]$store单来说，如果你在根组件下注入了store那么所有的.vue文件里使用就可以直接用 this.$store.xxxxVue官网：为了在 Vue 组件中访问 this.$store.property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制//main.jsimport store from './store'new Vue({ el: '#a

原创 vue-router笔记大全Ⅰ

安装vue-routerVue router 是 Vue.js 的官方路由管理器，用于构建单页面项目；在安装 Vue-cli 时，选择 router 即可安装，期间有一个是否启用 history 选项；可以先选择 no，也就是 hash 模式，可以在配置中更改成 history 模式；安装好后，我们 npm run serve 启动项目，会发现多了两个 link，单页链接；只不过在 hash 模式下，链接地址前会有#号，改成 history 模式则没有这个#号；具体更改模式在：src/r

原创 Axios VS Fetch

Axios VS Fetch简介Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。资源用JavaScript发出HTTP请求的不同方法https://baijiahao.baidu.com/s?id=1664567627440267828&wfr=spider&for=pcAxios or fetch(

原创 Vue Keep-alive 组件

Vue Keep-alive 组件官网介绍更通俗的介绍更多资料连接资料1资料2

原创 vuepress锚点hash滚动问题

vuepress锚点hash跳动问题问题描述vuepress建立网站的某个URL如果带有锚点，如http://test/test-hash.html#hasherror，刷新该URL，并不能滑动到相应的hasherror锚点，或者打开新的带有锚点的链接不能跳到相应的地方。研究调查在vuepress的github issue中找到相关的问题——Initial load does not scroll to the heading referenced by the document hash

原创 《重学前端》之Javascript（10-18讲笔记）

《重学前端》之Javascript（10-18讲重点）JavascriptJavascript语句普通语句声明语句表达式语句JavascriptJavascript语句在 JavaScript 标准中，把语句分成了两种：声明和语句，不过，这里的区分逻辑比较奇怪，所以，这里我还是按照自己的思路给你整理一下。普通语句声明语句表达式语句在一些通用的计算机语言设计理论中，能够出现在赋值表达式右边的叫做：右值表达式（RightHandSideExpression），而在 JavaScript 标准中

原创 《重学前端》之Javascript（4-9讲笔记）

《重学前端》之Javascript（4-9讲笔记）JavascriptJavaScript类型类型Undefined、NullBooleanStringNumberSymbolObject类型转换StringToNumberNumberToString装箱转换拆箱转换其他JavascriptJavaScript 模块会从运行时、文法和执行过程三个角度去剖析 JS 的知识体系。JavaScript类型本篇我们就从运行时的角度去看 JavaScript 的类型系统。JavaScript 类型对每个前端

原创 《重学前端》之学习和架构（1-3讲笔记）

《重学前端》1-9讲笔记前端学习学习方法前端知识架构图前端学习现在前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。这样的现状就引发了一系列的问题。首先是前端的基础知识，常常有一些工作多年的工程师，在看到一些比较基础的 JavaScript 语法的时候，还会惊呼“居然可以这样”。是的，基础知识的欠缺会让你束手束脚，更限制你解决问题的思路。其次，技术