Just blog and unjust blog

如何使用 LogicFlow 逻辑编排数据控制业务流

2024-04-22 09:19:42
文档相关 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
软件工程师的自我修养

汉字与Unicode码的相互转化

2024-04-11 05:57:33
!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 == '
JavaScript

公民身份证号码的正则表达式要点

2024-02-22 11:14:17
身份证正则校验 公民身份号码是 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
JavaScript

终端代理配置指南

2024-02-02 03:15:36
macOS Linux 通过设置 http_proxy、https_proxy,可以让终端走指定的代理。 配置脚本如下,在终端直接执行,只会临时生效: # 设置代理 export http_proxy=http://127.0.0.1:8899 export https_proxy=$http_proxy # 还原代理 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 只显示请求头信息 $ curl -I http://www.google.com HTTP/1.1 200 OK Connection: close Transfer-Encoding:
软件工程师的自我修养

制作 CSS 透明气泡框

2024-01-10 11:50:36
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
Css

跟着 Vant Dialog 学习函数调用使用组件

2024-01-04 13:55:47
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 }); 使用场景 组件的模板是通过调用接口从服务端获取的,需要动
专题学习计划

技术债务,到底应该怎么还?

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

纪录片 —— 三姐妹的故事

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

学习方法

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

编程范式简介(转载)

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

你不知道的 Nuxt Module

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

如何本地预览前端应用的产物 dist 文件

2023-08-28 03:22:49
前言 在一个 Nuxt3 新项目中需要分析框架默认集成的首屏开启 preload 和 prefetch 优化方案而引起页面初始化加载从白屏到最终加载页面期间的图标、字体页面不正常闪动的问题。 prefetch 和 preload 是浏览器提供的两种资源预加载技术,它们可以预先请求浏览器可能需要的资源,并将这些资源缓存到本地,以便在页面需要时能够更快地获取,从而显著提高网站性能,优化用户体验。这些资源可以是文本文件、图像、音频或视频等各种类型的文件。 预加载属性 preload 与 prefetch 区别 preload 告诉浏览器立即加载资源; prefetch 告诉浏览器在空闲时才开始加载资源; preload、prefetch 仅仅是加载资源,并不会“执行”; preload、prefetch 均能设置、命中缓存; 正确使用 preload、prefetch 不会导致重复请求; 错误使用 preload、prefetch 会阻塞关键渲染路径; 在面对这个场景的问题最有效的分析思路的方案莫过于直接预览 dist 产物,本地修改资源快速定位问题从而确定修改方案。 本例子中的关键 页面
前端工程

如何调试 Node.js 程序?

2023-08-21 09:20:00
Chrome DevTools: node --inspect 允许 npm run debug "scripts": { "dev": "node src/app.js", "debug": "node --inspect-brk src/app.js" }, 查看日志:(日志中的 9229 端口有用,记下来) koa-demos@1.0.0 debug node --inspect-brk src/app.js Debugger listening on ws://127.0.0.1:9229/cf206047-e42c-4a52-952a-d2684e72734d For help, see: https://nodejs.org/en/inspector Debugger attached. 打开 chrome 对应的调试端口地址 http://localhost:9229/, 页面显示 WebSockets request was expected, 而后打开调试面板点击 node 图标进入源码界面。 在此页面可调试 koa app 实例创建前的情况,如 进入 koa 的初始
软件工程师的自我修养

书评(多篇)

2023-08-13 22:57:37
《如何阅读一本书》------书评及内容纲要 文章目录 ★ 为啥要推荐这本书? ★ 此书的影响力 ★ 阅读的目的 ★ 主动阅读 VS 被动阅读 ★ 阅读的层次 ★ 如何读不同类型的书籍 ★ 阅读与心智的成长 上星期的博文《为啥俺要写博客------动机的自我分析》提到了"主题阅读"一词。当时俺提到:这是境界最高的阅读方式。为了让列位看官对"主题阅读"有所了解,今天特地推荐一下《如何阅读一本书》。 ★ 为啥要推荐这本书? 俺写博客奉行一个宗旨------【授人以鱼不如授人以渔】。而《如何阅读一本书》是阅读方面非常非常重要的【渔】。 为啥俺要介绍阅读方面的【渔】?主要有两个原因: 原因 1 想必大伙儿都意识到一个现象------如今大众的阅读水平是很差滴。即使一本不算难也不算厚的书,很多人也无法胜任。有些人甚至连阅读一篇较长的博文(超过 1 万字)都做不到------所以俺的大部分博文都尽量控制在几千字,以照顾某些阅读能力不够的同学。 原因 2 还有一个原因促使俺推荐此书------最近半年分享了很多电子书。但是据俺收到的反馈,很多人虽然下载了,却没怎么读。俺猜测,还有些人是因为缺乏阅读技

IT 大牛谈编程语言(网文3篇)

2023-08-05 17:33:26
文章目录 ★《Paul Graham:梦寐以求的编程语言》 ★《Bruce Eckel:编程生涯》 ★《Peter Norvig:十年学会编程》 最近老是在写政治类话题。为了照顾一下俺博客的程序员读者,本周分享3篇关于编程语言的短文(皆出自名家之手)。 ★《Paul Graham:梦寐以求的编程语言》 ◇作者简介 作者 Paul Graham 不但是硅谷的【技术大牛】,还是硅谷的【创业教父】。对许多问题(软件开发、企业管理、创业、艺术...),他都有独到见解。 他的代表作是《黑客与画家》(俺的网盘上有电子版)。本文就出自此书,洋文标题是:《Being Popular》。文中描绘了作者心目中理想的编程语言,供大伙儿参考。虽然这篇是2001年发表,距今超过10年。但是,好的文章是不会随时间流逝而贬值滴。 提醒一下: 文中提及的"黑客",是【褒义】滴!大伙儿不要把 hacker 与 cracker 混为一谈。 ◇原文 我的朋友曾对一位著名的操作系统专家说他想要设计一种真正优秀的编程语言。那位专家回答,这是浪费时间,优秀的语言不一定会被市场接受,很可能无人使用,因为语言的流行不取决于它本身。至
剪贴板

关于人生(网文3篇)

2023-08-05 17:28:11
文章目录 ★《爱因斯坦:我的世界观》 ★《乔布斯:在斯坦福大学的演讲》 ★《王小波:工作与人生》 如今的天朝,拜金的风气和急功近利的心态泛滥。所以,本周分享3篇涉及人生观的短文供列位看官参考。 事先声明:俺【不是】推销成功学滴,不信请看《成功学批判------简述其危害性及各种谬误》。 ★《爱因斯坦:我的世界观》 爱因斯坦是对俺影响最大的名人(没有之一)。4月18日是爱因斯坦的忌日,分享他的一篇著名演讲(里面提到了他对人生、政治、宗教的看法)。 顺便说一下:此文有点难懂(或许是翻译的缘故),但是值得认真回味。 我们这些总有一死的人,命运是多么的奇特!**我们每个人在这个世界上都只作一个短暂的逗留;目的何在,却无从知道,尽管有时自以为对此若有所感。**但是,不必深思,只要从日常生活中就可以明白:人是为别人而生存的──首先是为那样一些人,我们的幸福全部依赖于他们的喜悦和健康;其次是为许多我们所不认识的人,他们的命运通过同情的纽带同我们密切结合在一起。我每天上百次的提醒自己:我的精神生活和物质生活都是以别人(包括生者和死者)的劳动为基础的,我必须尽力以同样的分量来报偿我所领受了的和至今还在领
剪贴板

如何成为优秀开发人员(系列)

2023-07-31 23:58:28
如何成为优秀开发人员[0]:怎样算是优秀的? 文章目录 ★ 引子 ★ 何为优秀? ★ 本系列的目录 ★ 引子 有感于国内软件开发人员的素质普遍低下,招聘程序员往往面试了 N 个人都看不到一个顺眼的(当然这里面有很大原因是教育体制的问题)。因此考虑写一个系列,聊一下"如何成为优秀的开发人员"这个话题。 ★ 何为优秀? 要想成为一个优秀的开发人员,先得搞清楚什么样的开发人员才能称得上是优秀的?要给"优秀开发人员"下一个准确的定义有一点点困难,于是我用举例来说明。 经我多年观察,对于大部分的软件开发团队都有这样的一个现象,那就是团队中的少数(一般来说,小于总人数的 20%)开发人员具有更快的开发效率、更好的程序设计、更好的代码质量、更善于 debug、更能够解决技术难题......(总之就是让 team leader 事事省心)。而且这一小撮开发人员的贡献总和可能与另外那一大撮人(大于总人数的 80%)的贡献总和不相上下(甚至可能超过)。那么,这一小撮开发人员,就是我所谓的优秀开发人员。(跑题一下,实际上这就是二八原理的一种生动体现,请看二八原理系列的帖子) 说到这里,列位看官应该明白我所指
剪贴板

学习技术的三部曲:WHAT、HOW、WHY

2023-07-31 15:33:01
学习技术的三部曲:WHAT、HOW、WHY 文章目录 ★ 第一步:WHAT ★ 第二步:HOW ★ 第三步:WHY 最近几天有些网友在邮件里面问我关于学习的问题。有好几个人觉得工作了几年,也学会了不少的类库、框架、甚至语言,但是感觉自己的能力没有太大的提高。因此今天来说一下我个人对这方面的体会,希望对大伙儿(尤其是新手)有帮助。 先声明一下,本帖子讨论的三部曲是指你已经选定了某个技术方向之后,该如何学习;至于如何选定技术方向,则属于另一个话题,不在今天的讨论之列。 我把学习归类为三个步骤:What、How、Why。经过我对周围同事和朋友的观察,大部分感觉自己技术没有提高的人,都仅仅停留在 WHAT 阶段。下面我把这三个步骤解释一下。 ★ 第一步:WHAT 所谓的"WHAT"也就是"What is it?"------这是最简单的层次。在这个层次,你要搞清楚某个东东是【什么】样子的?有【什么】用处?有【什么】特性?有【什么】语法?...... 举例如下: 对于学习语言(比如 C++、Java、Python),大部分人都能够掌握基本的语法和标准库,然后用它写一些小程序(诸如二分查找、冒泡排
剪贴板

前端调试技巧之 ChromeDevTools 调试

2023-07-04 10:59:42
Elements 面板 h 快捷键,切换选中元素的显示与隐藏 直接 copy Html、CSS Console 面板 copy(res) 数据被复制到剪贴板中,经典应用如复制过长的网页地址 location.href; Store as global 存储为一个全局变量 保存堆栈信息 Stack trace 直接 copy html ctrl + c $i('lodash') 需要先安装 Console Importer 插件 $0-$4 是从当前选中元素到 上 N 次选中元素 Source 面板 1.调试 bar 从左到右,各个图标表示的功能分别为: Pause/Resume script execution(F8 或 Ctrl + \):暂停/恢复脚本执行(程序执行到下一断点停止); Step over next function call(F10 或 Ctrl + '):执行到下一步的函数调用(跳到下一行); Step into next function call(F11 或 Ctrl + ;):进入当前函数; Step out of current function(shif
软件工程师的自我修养

对待 AI 的正确态度,拥抱 chatgpt!

2023-05-19 13:31:09
你的工作今年是安全的。如果你努力的话,明年也是安全的,而且很可能从此都是安全的。因为如果一直不断学习 AI,你会越来越熟练地掌握它,让它为你工作,达到你的目的。也就是说,它会放大你的生产力。 这就是最关键的地方,AI 与人类不是竞争关系,它未必会减少机会,反而可能带来更多的机会。 一位英国企业家曾经总结了对 AI 的5点看法[9],我觉得这才是对待 AI 的正确态度。 1、AI 会大大增强程序员的生产力,并创造过去不可能的产品。 2、AI 本质是生产力工具,跟高级语言、云服务、开源代码等是一个性质。 3、写代码的门槛会降低,更多的人会进入 IT 行业,软件市场将变大。 4、AI 推动行业发展,将为所有人带来更多的增长、产品和机会。 5、我们要成为这个过程的一部分,需要让自己积极主动,不断更新技能,接受新工具。 常用指令 写作 1、翻译并优化一下这个句子 " ClickPrompt - Streamline your prompt design, with ClickPrompt, you can easily view, share, and run these prompts wit
杂物间

耶稣基督的福音 —— 人生二路

2023-05-19 13:25:38
前言 亲爱的朋友你好,你知道我是一个基督徒。今天我约你出来如同我先前和你说的想和你分享一下我的信仰。这份信仰不是我口说的,而是我手中的这本《圣经》所写的,下面我由 5 个要点和一个提问向你讲解基督徒的信仰。 1. 慈爱的掌权者 上帝是一位慈爱的掌权者,祂(指神的那个"他")创造了这个世界。祂创造了我们人类,使我们在祂的权柄之下治理这个世界。 启示录 4:11 神创造了这个世界,并掌管这个世界。祂又创造了我们。祂按着自己的样式造了人,又把治理世界的权柄交给了人,叫他们管理、照顾世界,同时也叫他们享用世界上一切的美善。祂指派人类在祂的权柄之下,管治和看顾这个世界,顺服祂并归荣耀给祂。这一切都十分完美:神在至高之处,人类按着祂的旨意管理整个世界,世界是和谐美好的。 但是很明显,今天的事实并非如此:无论是人,还是世界,都一片混乱。 2. 人背叛了上帝这位掌权者 我们都背叛了这位掌权者 ———— 神,试图自己做自己的主宰而拒绝祂。但是,我们无论管理自己,还是管理社会、管理世界,都管理的一团糟。 没有义人,连一个也没有!没有明白的,没有寻求神的,都是偏离正路。 ———— 罗3:10-12 从第一个
唯独基督

渐进式学前端算法

2023-04-22 07:31:16
专题式学习计划 两数之和 扁平数组与 tree 相互转换 Javascript 精度 diff 数据结构:链表、二叉树 1. 两数之和 Leetcode 第一题 https://leetcode.cn/problems/two-sum 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那两个整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案。 示例 1: 输入:nums = [2, 3,7,11,15], target = 9 输出:[0,1] 解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1] 。 示例 2: 输入:nums = [3,2,4], target = 6 输出:[1,2] 示例 3: 输入:nums = [3,3], target = 6 输出:[0,1] 提示: 2 = nums.length = 104 -109 = nums[i] = 109 -109 = target = 109 只会存在一个
专题学习计划

JavaScript 编程技巧

2023-03-22 09:30:07
工具方法 load function loadCss(url, callback) { return new Promise((resolve) = { var node = document.createElement("link"); node.type = "text/css"; node.rel = "stylesheet"; node.href = url; node.onerror = node.onload = function () { resolve(); isFunction(callback) callback(); }; document.head.appendChild(node); }); } function loadJs(url, callback, attr) { if (!isFunction(callback)) { attr = callback; callback = null; } return new Promise((resolve, reject) = { var script = document.createElement("scr
JavaScript

vant2 popup 源码学习

2023-03-21 17:02:01
选取 vant@v2.12.54 https://github.com/yanyue404/vant/tree/t_2.12.54/src/popup 在线文档:https://vant-contrib.gitee.io/vant/v2/mobile.html#/zh-CN/popup popup 组件的用法 基础用法 通过 v-model 控制弹出层是否展示。 van-cell is-link @click="showPopup"展示弹出层/van-cell van-popup v-model="show"内容/van-popup export default { data() { return { show: false, }; }, methods: { showPopup() { this.show = true; }, }, }; 弹出位置 通过 position 属性设置弹出位置,默认居中弹出,可以设置为 top、bottom、left、right。 van-popup v-model="show" position="top" :style="{ height: '30
专题学习计划

重构 —— 适配器模式

2023-03-21 11:03:01
适配器模式 适配器模式的作⽤是解决两个软件实体间的接⼝不兼容的问题。使⽤适配器模式之后,原本 由于 接⼝不兼容⽽不能⼯作的两个软件实体可以⼀起⼯作。 适配器的别名是包装器(wrapper),这是⼀ 个相对简单的模式。在程序开发中有许多这样的 场景:当我们试图调⽤模块或者对象的某个接⼝ 时,却发现这个接⼝的格式并不符合⽬前的需求。 这时候有两种解决办法,第⼀种是修改原来的 接⼝实现,但如果原来的模块很复杂,或者我们拿 到的模块是⼀段别⼈编写的经过压缩的代码, 修改原接⼝就显得不太现实了。第⼆种办法是创建 ⼀个适配器,将原接⼝转换为客户希望的另⼀ 个接⼝,客户只需要和适配器打交道。 典型例子: 港式插头转换器,港式的电器插头比大陆的电器插头体积要大一些。 电源适配器:电压转换,电源适配器使笔记本电脑在 100V~240V 的电压之 内都能正常工作 USB 转接口 例子1:renderMap var googleMap = { show: function(){ console.log( '开始渲染⾕歌地图' ); } }; var baiduMap = { show: function()
项目与业务
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 11