Just blog and unjust blog

https://kongwutw.github.io/blog/tech/base.html 如果说写代码是低头走路，那么学习不同团队的基建思路就是仰望星空，让我们在高速发展的前端的道路上不至于迷失方向。 一、基建工作都有哪些内容 基建的内容这个话题其实可大可小，不同的团队规模有不同理解，不同的公司规模也会有不同的要求。 代码层面 文件、文件夹、变量命名规范，大驼峰、小驼峰、下划线命名发、首位不能出现数字等等 文件拆分的基本要求，比如一个代码文件超过 400 行，必须要拆分成不同的包，抽离不同的类 项目中禁止出现冗余代码，禁止出现无效的变量和无意义的命名 禁止同样功能的包在一个项目中共存，如 axios 和 jquery 的 ajax 共存 超过 4k 的图片必须用外链形式引入 eslint、tslint、prettier 对代码规范的约束 单元测试、UI 测试、全链路压测...... 新技术调研和分析 代码规范其实是一个很大的话题，不同团队也有不同要求只要大家都能接受的就是适合自己团队的 发版规范 git flow 的相关规范，commit 的规则 分支管理和命名规则 发版的整个流

https://kongwutw.github.io/blog/tech/low.html 低代码火爆背景 低代码是一种软件开发模式，简单"拖、拉、拽"即可快速搭建软件。本文默认无代码是低代码的一种形态，两者具体定义此处不再赘述。 2021 开年"低代码"接力"中台"燃起了熊熊之火，引发了众多业内人士论战。其中有两种极端的观念，一种是"低端炒作"、"无用玩具"，另外一种是"颠覆行业"、"取代码农"。 低代码的形式是"可视化编程"，核心是"复用"。像中台一样，提高复用率是低代码的关键。但单单"复用"不足以解释今年低代码平台的火爆，低代码突然火爆的原因是什么？ 1、社会、经济因素 2020 年的疫情冲击不容忽视，它挑战了很多企业原有的商业模式、协作模式，数字化经济的繁荣、信息化需求的激增，造成程序员供需失衡。 2、技术因素 云计算技术的成熟、移动化的趋势等，为低代码 2.0 提供了技术基础。万维网出现前夕，计算机网络是一座座孤岛，互联网打破了这些孤岛。同样，如今的信息孤岛、云端孤岛屡见不鲜，曾经的低代码作为开发工具也只是在构建孤岛。但"低代码+云"的想象力将不止于此，如果能形成"互联、共

李笑来 - 定投改变命运 https://ri.firesbox.com/#/cn/ V2EX 【投资】 板块 00288 《2022年度》投資第一堂課：價值一億元的投資人生講座 2022年1月8日 CLEC投資理財頻道

查询 Jenkins 中指定任务 (job) 的最新任务编号 使用以下命令获取指定 Jenkins 任务的最新构建编号： curl -X GET "http://myJenkins/job/testjob/api/json/lastBuild/buildNumber" 输出示例： 1159 说明：其中 testjob 为任务名。 查询 Jenkins 中指定任务 (job) 的配置信息 要获取指定 Jenkins 任务的配置信息，可以使用以下命令： curl -X GET "http://myJenkins/job/testjob/api/json" 输出示例： { "_class": "hudson.model.FreeStyleProject", "actions": [ { "_class": "hudson.model.ParametersDefinitionProperty", "parameterDefinitions": [] } ], "description": "", "displayName": "cms-autoDeployFE_VisualisationTes

对象排序 demo !DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title对象排序 demo/title /head body script const props = { pageType: { desc: '选择页面类型', displayOrder: 2 }, pageSetting: { type: Object, desc: '页面类型配置', displayOrder: 3 }, appConfig: { desc: '全局配置', displayOrder: 1 }, seo: { type: Object, desc: 'seo 信息', displayOrder: 8 }, share: { type: Object, desc: '分享配置', displayOrder: 4 }, wxOauth: { type: Object, desc: '微信授权',

site: https://tour.json-schema.org/ repo: https://github.com/json-schema-org/tour 01-Getting-Started 01-Your-First-Schema { "name": "John Doe", "age": 25 } { "type": "object", "properties": { "name": { "type": "string" }, "age": { "type": "integer" } } } 02-Nesting-Objects 嵌套对象 { "name": { "firstName": "John", "lastName": "Doe", "middleName": "Smith" } "age": 25, } { "type": "object", "properties": { "name": { "type": "object", "properties": { "firstName": { "type": "string" }, "lastName": { "t

什么是 JSON Schema？ JSON Schema 是对 JSON 数据格式的描述和规范，提供了一种方式来约束和明确数据的类型和结构。可以把 JSON Schema 看作是 JSON 格式的一种“类型系统”，它就像 TypeScript 对 JavaScript 的作用一样。 数据类型 在 JSON Schema 中使用最多的是type关键字，它包含了 JSON 格式的基本类型 类型 描述 string 字符串型，双引号包裹的 Unicode 字符和反斜杠转义字符 number 数字型，包括整型(int)和浮点数型(float) boolean 布尔型，true 或 false object 对象型，无序的键:值对集合 array 数组型，有序的值序列 null 空型 关键字 下面以 Object 类型为例，列举在 JSON Schema 中经常使用到的关键字和作用。示例 JSON Schema 如下： { "$schema": "http://json-schema.org/draft-04/schema#", "$id": "https://example.com/schem

单元测试的重要性 在低代码项目中，公共模块的复用度通常较高，为了提高代码质量，实施单元测试显得尤为重要。在持续迭代低代码平台的过程中，单元测试有助于提升自测效率，使我们能够尽早发现和修复潜在的 bug，从而保证项目的稳定性和可靠性。 低代码环境 运行环境 Node.js: 16.16.0 包管理工具: pnpm@8.10 组件库相关配置 Vue.js: 3.2.9 Pinia: 2.0.36 Vite: 2.9.17 Babel: @babel/preset-env@7.12.17 Vite 插件 @vitejs/plugin-legacy@1.7.1 @vitejs/plugin-vue@1.10.0 @vitejs/plugin-vue-jsx@1.1.7 初始化测试环境 技术方案 我们选择使用 Jest 搭配 @vue/test-utils 进行单元测试。需要注意的是，由于 Vitest 需要 Vite 版本大于等于 5.0.0，Node 版本则需要大于等于 18.0.0，因此本项目并未采用该方案。 安装依赖 以下命令将安装所需的依赖： pnpm add jest@27.1.0

跨版本兼容：构建支持 Vue 2 和 Vue 3 的通用组件 在现代前端开发中，随着框架版本的升级，如何有效管理和维护组件库的兼容性已成为高级前端工程师的必备技能。本文将深入探讨如何构建一个同时兼容 Vue 2 和 Vue 3 的通用组件，并讨论在此过程中需要注意的关键点。 Vue 3 渲染函数的重大变化 Vue 3 引入了多个针对渲染函数 API 的改动，旨在提高性能和一致性。这些更改虽然提升了框架的灵活性和易用性，但也给兼容性带来了挑战。以下是 Vue 3 渲染函数的主要变化概述： 渲染函数参数的变化 在 Vue 2 中，render 函数会自动接收 h 函数 (即 createElement) 作为参数，而在 Vue 3 中，h 函数已被移至全局导入。这种变化要求开发者在编写跨版本兼容的代码时格外注意。 Vue 2 示例： // Vue 2 渲染函数示例 export default { render(h) { return h('div') } } Vue 3 示例： // Vue 3 渲染函数示例 import { h } from 'vue' export default

免费 AI 使用 免费 GPT 模型 基础的 GPT 3.5 可以每天免费使用，GPT 4 需要升级付费 GPT-GOD（网页和安卓、windows 客户端） （每天签到可免费提问 gpt 3.5 200 个问题，我的邀请码bb1tqiir58kbi6ywlss5giv6a） Sider（chrome 扩展） （每天 30 个免费积分，gpt 4 需要升级付费定价, 支持自定义 OpenAI API key） Docky.AI: ChatGPT 侧边栏 智能助手(chrome 扩展) （每天使用 GPT3.5 30 个提问，gpt 4 需要升级付费 定价） Monica AI（chrome 扩展） 国产 AI 模型 豆包 AI 字节 免费 Kimi 智能助手 文心一言 百度 元宝 腾讯 智谱清言 智谱 A 讯飞星火 通义千问 编程 GitHub Copliot CodeFuse(蚂蚁百灵) 免费 腾讯云 AI 代码助手 免费 ChatGPT API GPT-GOD GPT_API_free 文档 kimi-free-api / 智谱清言 ChatGLM4 大模型在线使用 / 讯飞星火大

问题回答者：是开源库 better-scroll 的作者 -- 黄轶，你有什么问题要问我？ 大家好，我是黄轶，目前就职于 Zoom 公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。我是开源库 better-scroll 的作者，也是慕课网的老师，相信有很多同学通过我的课程学习掌握了 Vue.js 这门技术。 我在 2012 年毕业加入百度后，才开始正式接触 Web 前端，上学期间主要接触的是 .net，写过几个小作品到 CSDN，我非常庆幸转行，如果毕业还坚持做 .net 可能早就凉了。在百度的 3 年工作经历，我写过页面，写过网页游戏、写过 chrome 插件、写过组件、写过框架。 15 年 7 月份我加入滴滴，成为当时公共部门第一个前端。在滴滴的 3 年，我造过很多公司级别轮子（登录 sdk、jsbridge-sdk，地图 sdk 等），作为技术负责人主导过 2 次滴滴 WebApp 重构，负责架构设计和实现。在 16 年初把 Vue.js 引入滴滴的生产环境项目中，并在 WebApp 5.0 的重构项目得到全面应用。在滴滴的后期我负责 WebApp 架构组，开源了

下面的模块在画布页面的十几个模块里报错 （RangeError: Maximum call stack size exceeded），最终定位到这个模块存在问题(下面伪代码): script setup import { watchEffect, computed, ref } from 'vue' const riskList = computed(() = []) const optionalRiskList = ref([]) setTimeout(() = { riskList.value.optionalRiskList = [{ name: '附加险1', amount: 3000 }] }, 3000) watchEffect(() = { if (!optionalRiskList.value.length) { optionalRiskList.value = riskList.value?.optionalRiskList || [] } }) /script template h1{{ optionalRiskList }}/h1 /template Why 这段

为什么要使用 TypeScript ? TypeScript 相对于 JavaScript 的优势是什么？ 为什么要使用 Typescript？ 在没有 Typescript 以前，大部分项目都是使用原生 Javascript 开发。而 Javascript 天生是一门"灵活"的语言。所谓所谓"灵活"，表现在： 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定，也可以做一些神奇的操作 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改 函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当作参数或返回值 而这些灵活通常导致了 JavaScript 代码的肆无忌惮，比如拿数字和数组做求和运算，给函数传入不符合预期的参数等等而这些显而易见的问题编码阶段不会有任何错误提示。 // 数字和数组做求和运算 const number = 1 const arr = [1, 2, 3] console.log(number + arr) // 传入不符合预期的参数 function pow2(

exploration Repo: https://github.com/yanyue404/vue/blob/rainbow/docs/vue-explore/ 0.开篇 1.Vue2 运行机制全局概览 2.响应式系统的基本原理 3.响应式系统的依赖收集追踪原理 4.深入响应式原理 5.Vue1 mini-vue 6.Vue2 源码级生命周期 7.批量异步更新策略及 nextTick 原理 8.实现 Virtual DOM 下的一个 VNode 节点 9.数据状态更新时的差异 diff 及 patch 机制 10.template 模板是怎样通过 Compile 编译的 11.Vuex 状态管理的工作原理 12.未来的路，Vue3 13.总结 常见问题解答 附录.授之以渔

文档相关 https://github.com/didi/LogicFlow 零代码新思路，基于LogicFlow的页面逻辑编排 LogicFlow Vue demo 按流程编排数据执行业务逻辑 !DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / titleDocument/title /head body script // https://xinxin93.github.io/logicflow_vue_demo/#/ const jsonData = { nodes: [ { id: '742356ea-762b-4899-b96a-bd567e3c4361', type: 'start', x: 220, y: 170, properties: {}, text: { x: 220, y: 205, value: 'sdfasf' } }, { id: 'dacda6b6-48

!DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / titleDocument/title /head body script function toUnicodeFun(data) { if (data == '' || typeof data == 'undefined') return '请输入汉字' var str = '' for (var i = 0; i data.length; i++) { let s = data.charCodeAt(i).toString(16).toUpperCase() str += '\\u' + s } return str } let code = toUnicodeFun('请修改') console.log('unicode:', code) function toChineseWords(data) { if (data == '

身份证正则校验 公民身份号码是 18 位数特征组合码，由 17 位数字本体码和 1 位数字校验码组成。 第 1、2 位数字表示：所在省份的代码 第 3、4 位数字表示：所在城市的代码 第 5、6 位数字表示：所在区县的代码 第 7 位至 14 位为出生日期码，YYYYDDMM 出生年、月、日（其中 7、8、9、10 位是年，11、12 位是月，13、14 位是日）； 第 15 位至 17 位为顺序码，是县、区级政府所辖派出所的分配码， 同时第 17 位兼具性别标识功能，男单女双； 第 18 位为校验码，主要是为了校验计算机输入公民身份证号码的前 17 位数字是否正确，其取值范围是 0 至 10，当值等于 10 时，用罗马数字符 X 表示。 校验省份 const checkProv = function (val) { var pattern = /^[1-9][0-9]/ var provs = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 3

macOS Linux 通过设置 http_proxy、https_proxy，可以让终端走指定的代理。 配置脚本如下，在终端直接执行，只会临时生效： # 设置代理 export http_proxy=http://127.0.0.1:8899 export https_proxy=$http_proxy # 或是一行命令 export https_proxy=http://127.0.0.1:8899 http_proxy=http://127.0.0.1:8899 # 还原代理 unset http_proxy https_proxy 8899 是 http 代理 Whistle 对应的端口，请根据你的实际情况修改。 Windows 以下代理生效情况均使用 curl -I http://www.google.com 进行验证。 Git Bash 设置方法同 "macOS Linux" # 设置代理 export http_proxy=http://127.0.0.1:8899 export https_proxy=$http_proxy # -I/–head 只显示请求头信息 $

button class="bubble-tag" span 透明气泡框（带上箭头）/span /button .bubble-tag { position: relative; display: flex; justify-content: center; height: 40px; line-height: 40px; background: #ffffff; border: 1px solid #aaaaaa; text-align: center; font-size: 24px; color: #999; border-radius: 18px; margin: 0px auto 15px; padding: 0 20px; span { display: inline-block; height: 98%; background: #fff; z-index: 1; } // 有色的等腰三角形 :before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 22px 20px

docs: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/dialog repo: https://github.com/youzan/vant/blob/2.x/src/dialog/index.js 函数调用 Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。 import { Dialog } from 'vant'; // 基础提示 Dialog({ message: '提示' }); // 消息提示：用于提示一些消息，只包含一个确认按钮。 Dialog.alert({ title: '标题', message: '弹窗内容', }).then(() = { // on close }); // 消息确认: 用于确认消息，包含取消和确认按钮。 Dialog.confirm({ title: '标题', message: '弹窗内容', }) .then(() = { // on confirm }) .catch(() = { // on cancel }); 使用场景 组件的模板是通过调用接口从服务端获取的，需要动

几乎所有的技术团队，都会经历或多或少的技术债务。技术债务虽然是实现快速收益的一种捷径，但是为了修复那些为了快速收益而不得不为之的技术问题，企业往往需要花费大量的金钱、人力等。那么如何有效地避免技术债务，使得开发人员能把更多的精力投入在有效的工作，从而产生额外价值、提高企业的产品竞争力呢？ 技术债务的产生有着很多原因，但其中更多的是由于要在短时间内匆忙完成原本耗时较长的工作，导致部分业务逻辑没有完整的设计等，使得产品在短时间内有效，但是长远来看，却是一颗不稳定的炸弹，一旦触发，对产品、对企业都有可能造成无法挽回的损失。总而言之，技术债务会带来很多麻烦，有些甚至是"致命"的。 什么是技术债务？ 技术负债（英语：Technical debt），又译技术债，也称为设计负债（design debt）、代码负债（code debt），是编程及软件工程中的一个比喻。指开发人员为了加速软件开发，在应该采用最佳方案时进行了妥协，改用了短期内能加速软件开发的方案，从而在未来给自己带来的额外开发负担。这种技术上的选择，就像一笔债务一样，虽然眼前看起来可以得到好处，但必须在未来偿还。软件工程师必须付出额外的时

简介 简介：该片是一部完整追踪农民工十三年创业历程的大型纪录片，通过电视语言来探讨中国农民新的生存和发展问题。该片从三姐妹和她们家庭变迁的故事，折射出中国农民问题的真实缩影。《三姐妹故事》跟踪拍摄一个家庭三个姐妹的故事，记录下三姐妹细微的人生命运变化，续集用大量的篇幅表现三姐妹子女一辈的生活，更具感染力、更具人情味，农二代、留守儿童所暴露的一些问题也在追问着中国的未来。该片几乎见证了中国农业社会15年变迁的各个时期、各个重要节点、各个重大事件，是中国三农问题的一部电视文献，同时也见证了中国社会的沧桑变迁，具有深刻的社会学价值和珍贵的生活档案价值。 第一集 本集主要内容： 东莞市是中国最著名的打工之都。在陈凤英到来时，这个城市已经有数十万来自农村的打工者忙碌在生产线上。全市户籍人口仅有154万人，而实际外来务工人员就超过了600万人。占了城市人口总数的2/3。第二年，陈凤英的妹妹陈秋芬和表妹刘永芬也踏着姐姐的足迹来到了东莞。陈秋芬在东莞新科电子设备厂也当上了流水线上的操作员；陈家姐妹每天天不亮就得起来，每天的工作大都超过了12个小时。大姐陈凤英外出打工第三年的春节，这是她们离家后的第一次

如何完善自己的知识结构 文章目录 ★引子 ★领域 ★【跨领域】的知识分布 ★领域【内部】的知识体系 ★知识点 ★结尾 ★引子 最近几年，陆续有读者来信跟俺交流"知识管理"这个话题。也有读者在博客留言，建议俺专门为此话题写一个系列。不过捏，因为手头还有 N 多系列没有收尾，再开新的系列要激起公愤了 :) 所以，今天只单独写一篇，谈谈俺对知识结构的看法。 其实捏，这是一个很大的话题，想用一篇博文完全说清楚，不太现实。俺只从三个层面入手，说说个人的看法，仅供列位看官参考。 ★领域 （本来想用"学科"这个词，后来觉得"学科"的范畴还是偏小，就改用"领域"） 按照传统的习惯，通常会把知识归类到不同的领域（比如：文学、数学、计算机、烹调、等等）。 ◇领域之间的【包含】关系 有些领域是另一个领域的一部分。 比如说，俺博客经常聊的"信息安全"，其实是"IT"这个领域的一个分支领域。 上面这类关系比较好理解，套用数学中集合论的说法，就是"某个领域是另一个领域的子集"。 还有一种稍微复杂一点的包含关系------某个领域同时被其它多个领域所包含。对这种关系，可以大致理解为"多个集合的交集"。 比如"量子信

编程范式简介 原文：Programming Paradigms -- Paradigm Examples for Beginners，作者：Germán Cocca 大家好！这篇文章将讲解不同的编程范式，编程范式是对一些流行的组织编程方式的"花哨"称呼。 我把话题拆分，并且每个范式补充一个例子。通过这篇文章，你就可以了解当人们在说"面向对象"、"函数式"以及"声明式"时，他们在说什么。 虽然我会提供一些伪代码和代码示例，但是这篇文章的讨论仅停留在范式表层和理论层面。 我计划将在之后用JavaScript示例来深入讲解每一个范式，如果你感兴趣的话可以关注我（关注方式见文章结尾）。 让我们开始吧！ 文章目录 编程范式是什么 编程范式不是什么 我为什么了解编程范式？ 常见的编程范式 命令式编程 过程式编程 函数式编程 声明式编程 面向对象的编程 总结 编程范式是什么 编程范式指的是一种程序或者程序语言的组织风格、方式。每一种程序范式都包含了代码结构、特征以及处理常见编程问题的方式。 存在各种各样编程范式的原因和存在各种编程语言一样。特定范式适合解决特定问题，所以针对不同项目采取不同的编程范式

Modules 模块是 Nuxt.js 扩展，可以扩展其核心功能并添加无限的集成。 在使用 Nuxt 开发应用程序时，您很快就会发现框架的核心功能还不够。 Nuxt 可以使用配置选项和插件进行扩展，但是在多个项目中维护这些自定义是繁琐、重复和耗时的。 另一方面，开箱即用支持每个项目的需求将使 Nuxt 非常复杂且难以使用。 这就是 Nuxt 提供高阶模块系统使得扩展核心成为可能的原因之一。模块是启动 Nuxt 时顺序调用的函数。框架等待每个模块完成后再继续。通过这种方式，模块几乎可以定制项目的任何方面。由于 Nuxt 的模块化设计（基于 webpack 的 Tapable ），模块可以轻松地为某些入口点（例如构建器初始化）注册钩子。模块还可以覆盖模板、配置 webpack 加载器、添加 CSS 库以及执行许多其他有用的任务。我们可以使用功能强大的 Hookable Nuxt.js 系统来完成特定事件的任务。 最重要的是，Nuxt 模块可以合并到 npm 包中。这使得跨项目重用并与社区共享成为可能，从而帮助创建高质量附加组件的生态系统。 如果你： 是优秀团队的成员，需要快速引导新项目。