web技术

任何足够先进的技术都等同于魔术
web技术

React国际化实践指南

示例项目是由vite创建的react + ts模板 输入以下命令后输入项目名->React->Typescript即可创建 npm create vite@latest 安装所需工具包 npm i i18next react-i18next --save src目录下新建locales目录 新建语言文件,目录结构如下 src ├── locales | ├── en-US │ └── resources.json | └── zh-CN └── resources.json zh-CN/translation.json { "title": "标题", "common": { "confirm": "确认", "cancel": "
8 min read
关于如何科学上网
黑科技 Featured

关于如何科学上网

如果您想要科学上网，访问被屏蔽或限制的网站，使用VPN可能是您的最佳选择。在众多的VPN提供商中，Flyingbird VPN是一个不错的选择。 首先，Flyingbird VPN拥有遍布全球的服务器，覆盖多个国家和地区。这意味着您可以随时连接到全球各地的服务器，获得更好的上网体验和更高的网络速度。 其次，Flyingbird VPN采用了高级加密技术，确保您的网络连接和数据传输安全可靠。这是非常重要的，因为在使用VPN的过程中，您的个人信息和隐私需要得到保护。 此外，Flyingbird VPN的使用非常简单，只需要几步操作即可连接到VPN服务器。这使得它非常适合不懂技术的用户使用。同时，Flyingbird VPN还提供了24/7的客户服务支持，如果您有任何问题或疑虑，可以随时联系他们的客服团队获得帮助。 最后，Flyingbird VPN的价格也非常实惠。他们提供了多种不同的套餐选择，以满足不同用户的需求和预算。无论您是个人用户还是企业用户，都可以在Flyingbird VPN找到适合自己的方案。 总之，如果您想要一个安全、可靠、简单易用且价格实惠的VPN服务
2 min read
web技术

前端SKU实现

一、 效果图 二、 前言 公司项目做商品模块 本人实现了商品sku生成部分 在sku生成后可以选择禁用其中部分sku ( 实际场景部分商品没有sku中的一些规格的时候需要禁用部分sku ) 所以在前台选择sku的时候会出现部分sku无法选中的情况 最开始也抱着百度的方案写这一块功能 但是目前百度的大部分都是 矩形阵图算法 但是亲测都有bug 所以最后只能自己写了 无奈自己愚笨 写不出来 最后求助公司其他大佬 和在大佬的帮助下完成此功能 三、 总体实现思路 根据选中的规格和当前需要被验证的规格组成一个对象 然后在循环skuList判断 只要有一条sku中的规格满足这个对象中的每一项即可 具体实现过程看下面代码实现过程 四、 实现代码 1、 先看数据 （这里是全数据 虽然有点长但是方便调试 测试） const specList = [ { title: "颜色", list: ["红色", "紫色", "白色", "黑色"
10 min read
web技术

javascript中的深拷贝与浅拷贝

js有五种基本数据类型，string,number,boolean,null,undefind。这五种类型的赋值，就是值传递。特殊类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值，会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象，而不是复制对象的引用，就要用到对象的深拷贝。 当一个变量存放基本数据类型时与复杂的数据类型时分别存在以下的特点： * 基本数据类型的特点：变量直接将基本数据类型的值存储在栈(stack)内存中 * 引用数据类型的特点：变量将引用数据类型的引用（可以看作是地址）存储在栈(stack)内存，而对象本身存放在堆内存里，在栈中引用指向堆中的对象。 其实当解释器寻找引用值时，会首先检索其在栈中的地址引用，取得地址后从堆中获得对象。 首先我们来看一个例子： var num = 666; var numCopy = num; var obj = {name:"张三"}; var objCopy = obj; 对于以上的代码，变量的内存分配是在栈中，所以变量不可以存放堆中的对象，所以赋值就会出现两种情况
4 min read
NodeJS

用Puppeteer做一个简单的数据爬虫

用Puppeteer做一个简单的数据爬虫 本项目仅做参考，提供给新手的一个入门示例。此项目是利用puppeteer来爬取本人一个博客系统的数据 * 先看演示 因为禁用了headless，所以会弹出浏览器窗口，也是为了容易调试看效果 注意：因为是我自己的个人博客，服务器又是在国外，在国内访问较慢。如运行本demo出现超时，属于正常现象，这种情况下建议开启科学上网（搞技术的这就不多说了吧），开启全局代理试下 目录结构 * /data: 抓取数据存储位置（有条件的可以直接存在数据库中） * /utils: 工具类 * index.js: 入口文件（核心代码） * config.js: 配置文件（抓取地址与抓取页面数配置） 项目启动 * 安装依赖(进入项目目录) npm install * 普通启动 npm start * 调试启动 npm run dev 核心代码
5 min read
web技术

用nodejs写一个alfred workflow

前言：工作中很多时候都要讲究效率，把一些繁琐重复的事精简化。能使你的工作都事半功倍～ 我用的环境node v10.19.0, npm 6.13.4, alfred 4.0.9 如果你还不了解alfred, 点此进入 废话不多说, 就用nodejs做个alfred的workflow工具, 功能需求： * 获取局域网的IP地址 * 获取公网的IP地址 * 输入IP地址查询归属地 因为我本人是从事前端开发的，nodejs对我来说并不陌生，所以今天就讲讲ndoejs开发workflow插件 制作初衷：我做的移动端项目很多，常常需要手机与电脑连接一个局域网下进行调试，每次都要查询一下自己的网卡IP。很容易就把自己给累死（哈哈） 先上效果图 * 直接输入ip * 直接输入ipp * 输入ip + IP地址 搞起来 开始前需要了解一下alfy 1.
4 min read
web技术

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

早在 HTTP 建立之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说，我们所写的HTML页面将要放在我们的 web 服务器上，用户端通过浏览器访问url地址来获取网页的显示内容，但是到了 WEB2.0 以来，我们的页面变得复杂，不仅仅单纯的是一些简单的文字和图片，同时我们的 HTML 页面有了 CSS，Javascript，来丰富我们的页面展示，当 ajax 的出现，我们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP 协议的
12 min read
web技术

详解window.performance

为了得到脚本运行的精确耗时，需要一个高精度时间戳，传统的做法是使用Date对象的getTime方法，其不足之处在于： * getTime方法及Date对象的其他方法只能精确到毫秒级别，无法得到更小的时间精度； * getTime方法只能获取脚本运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页。 为了解决这两个不足之处，ES 5引入高精度时间戳——Performance API。Performance是浏览器对象，精度可以达到1毫秒的千分之一。即1秒的百万分之一，这不仅能衡量程序的细微差别，提高程序的运行速度，还可以获取后台事件的时间进度。 Performance API用于精确度量、控制、增强浏览器的性能表现，使测量网站性能达到前所未有的精度。目前，所有主要浏览器都已经支持performance对象，，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。 performance.timing对象的属性： 属性 含义 navigationStart
6 min read
web技术 Featured

使用Mockjs模拟数据请求

用mockjs生成数据,不需要等待接口即可调试 一、安装 * 用npm包管理工具安装 npm install mockjs * 标签引入 <script src="http://mockjs.com/dist/mock.js"></script> 二、生成随机数据 Mock.js 的语法规范包括两部分： * 数据模板定义（Data Temaplte Definition，DTD） * 数据占位符定义（Data Placeholder Definition，DPD） 1. 将字符串随机重复1遍-10遍 Mock.mock({ "string|1-10": "★" }) // { // "
4 min read
web技术

FormData 对象之文件上传

writeHeader: 表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。 用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。 <input type="file" id="file" name="myFile"> 选择文件之后，将文件放入formData file.onchange = function (e) { console.log(e.target.files) let formData = new FormData(); formData.append(
2 min read
web技术 Featured

前端图片canvas，file，blob，DataURL等格式转换

将file转化成blob * 利用URL.createObjectURL() let $img = document.getElementById('img') file.onchange = function (e) { let file = e.target.files[0] let fileUrl = window.URL.createObjectURL(file) $img.src = fileUrl img.onload = function () { // 手动回收 URL.revokeObjectURL(fileUrl) } } 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。 将file转化为DataURL * 利用FileReader.readAsDataURL() l
1 min read
web技术

快速理解javascript中的Array.prototype.forEach

我们都知道document.querySelectorAll()能够获取dom节点，它返回时的并不是一个真正的数组，而是一个伪数组（NodeList），对于NodeList而言，它里面是没有forEach方法的,于是经常见到一下这种写法 var doms = document.querySelectorAll('#dom'); Array.prototype.forEach.call(doms, function(item) { console.log(item) }) 这样将Array原型中方法，赋给要循环的NodeList，通过call改变this指向，传入参数。 * 至于forEach 方法，它可以接受一个函数参数： [1,2,3].forEach(function(item) { console.log(item) }) 从上面可以看出此时在forEach是数组内置函数，this指向的自然是调用的这个数组（当然并不是说传入的函数内部打印this，那里的this指向的是全局window对象），所以赋予一个数组forEach的时
1 min read
web技术

深入babel（实战）

前言：此文章只是个人理解，如有错误希望留言指出 上一篇已经讲了babel的作用和基本配置，那怎么才能应用到自己的项目中呢？这篇文章就以webpack为例，搭建一个简单的webpack应用（前提你你要先安装node环境，这里就不说了，这不是这篇文章的重点，请自行百度） * 首先创建一个空的文件夹example-babel，用终端进入此目录中运行 npm init #这行命令初始化此文件夹，一路回车就ok * 接着安装babel工具 npm i babel-cli -D * 安装preset插件 npm i babel-preset-env * 安装runtime插件，需要的地方将自动转换 npm i babel-plugin-transform-runtime babel-runtime -D * 编写.babelrc文件，配置插件选项 { "presets": [ [ "babel-preset-env", {
2 min read
web技术

初探babel

前言：此文章仅仅作为个人理解 * babel是一个广泛使用的编译器，可以将es6转成es5代码，从而在现有的环境执行 * 使用babel的第一步就是配置一下.babelrc文件，存放在项目的根目录下 基本格式如下： { "presets": [], "plugins": [] } presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。 ES2015转码规则 $ npm install --save-dev babel-preset-env 官方有一句话这样说： 根据你支持的环境自动决定适合你的 Babel 插件的 Babel preset。它使用了 compat-table 在没有任何配置选项的情况下，babel-preset-env 与 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行为完全相同。 参考：https://www.babeljs.cn/docs/p
3 min read
web技术

scripts 带入自定义命令参数

一般情况下,项目中有非常多的地方使用npm scripts配置来跑一些任务,假设有这样一个场景,需要有四个环境, 分别要编译出每个环境对应的包,也许你会想: 我每个环境无非接口不一样,资源地址不一样,可以根据每个环境去修改后,再进行打包. 是的, 如果你不熟悉scripts命令,这未尝不是办法, 但是如果你会用scripts命令,将会更加简单, 下面详细说一下scripts 在项目中,package.json中经常看到这样的配置 package.json "scripts": { "dev": "webpack-dev-server --inline --config webpack.dev.js --colors", "build": "webpack --config webpack.pro.js --colors" } 以上指令中, 在命令行运行:
3 min read
web技术

JavaScript 复杂判断的更优雅写法

前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子先看一段代码 /** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */ const onButtonClick = (status)=>{ if(status == 1){ sendLog('processing') jumpTo('IndexPage') }else if(status == 2){ sendLog('fail'
8 min read
web技术

ejs模板的书写

1、EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装 2、EJS的特点： * 快速编译和渲染 * 简单的模板标签 * 自定义标记分隔符 * 支持文本包含 * 支持浏览器端和服务器端 * 模板静态缓存 * 支持express视图系统 3、EJS成员函数： * Render(str,data,[option]):直接渲染字符串并生成html str：需要解析的字符串模板 data：数据 option：配置选项 * Compile(str,[option]):编译字符串得到模板函数 str：需要解析的字符串模板 option：配置选项 两个函数包括的配置选项如下： 4、EJS常用标签 * <% %>流程控制标签 * <%= %>输出标签（原文输出HTML标签） * <%-
5 min read
web技术

如何封装并发布自己的npm包

最近很多人问我,如何取封装自己的npm工具包,直接用npm安装,省时又省力.关键支持三种引用方式(amd,cmd和直接引入),下面就教大家如何去封装自己的应用工具包. * 首先先去[npm官网](https://www.npmjs.com/)注册一个自己的账号,有了自己的账号才能在将你的插件代码放在npm仓库中. * 电脑需要node环境支持并且有npm包管理工具 有了自己的账号下面就开始实践操作吧! 第一步 首先登陆npm npm login 出现下图则证明登陆成功 第二步 创建一个文件夹去存放一会将要写的插件,文件夹的名字叫做npmDemo mkdir npmDemo
1 min read