关于元素的contenteditable属性
之前一直很好奇富文本编辑器中的各种元素是怎么插入的,最近刚好项目中有关功能需要用到富文本的一丁点功能,所以才得以了解可实现富文本编辑器的一个途径。
元素的contenteditable属性正是可以替代textarea,实现复杂文本输入的一种解决方案。当给元素加上contenteditable="true"时,这个元素就类似于input type="textarea"可输入。输入的内容会作为文本节点插入到父节点中:
但是与textarea、input等输入框不同的是,textarea、input失去焦点后想插入修改值,就必须改变该节点的value值,并且只
2021-04-20
通过vue源码阅读解决的问题
问题公司需要将现有系统的一部分功能单独拿出来,作为一个新项目提供给客户使用,该功能使用了一个第三方包,用来批量生成表单,但是在运行时报错了。
其中使用的Vue版本和第三方包的版本都与现有系统一致,唯一不同的是当前项目使用的是vue-cli3.0搭建的。
定位问题从报错信息中可以看到,问题是出在form-create中的this.vm.constructor.super.compiler上,点开报错位置,发现是被压缩过的代码…
第三方导出的包都是在package.json的module字段中定义的,有些会对外提供一个未被压缩的代码用作调试,找到form-create包,发现其中确实有一个不带
2021-03-09
Vue
函数柯里化的使用场景
概念只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数;
降低函数的通用性,提高函数的适用性。
主要使用场景
通过将函数的部分参数进行预处理,得到一个在某个时刻(runtime)固定参数的方法,该方法的调用者只需关系剩余参数的传入。
处理已知的参数得到一个方法,等待参数全部确定后返回结果。
假如不同组件同时引用某个公共方法,而公共方法内部根据不同参数处理不同场景的业务逻辑,此时可以将函数处理不同场景的参数通过柯里化得到应用于不同场景的方法,提供给组件调用时,组件就不需要关心需要传入哪种不一样的参数去处理当前的业务逻辑了。
代码实现function curry(func) {
2021-03-05
Chrome架构
进程和线程进程就是一个程序运行的实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。
进程和线程之间的关系有一下4个特点:
进程中的任意一个线程执行出错,都会导致整个进程崩溃。
线程之间共享进程中的数据。
当一个进程关闭之后,操作系统会回收进程所占的内存。
当一个进程退出时,操作系统会回收该进程所申请的所有资源;即使其中任意线程因为操作不当导致内存泄漏,当进程退出时,这些内存也会被正确回收。
进程之间的内容互相隔离。
早期的浏览器为单进程单进程导致了一系列的问题:不稳定、不流畅
2021-02-22
浏览器工作原理与实践
阿里云轻应用服务器挂载oss作为数据盘
购买的阿里云轻应用服务器是香港地区的,只有25G的SSD,最近在给媳妇做一个网站备份的项目,最开始设想的是直接存服务器算了,但是想了想25G可能不够用(想太多),所以想着自己还有个9块钱一年的OSS可以用,干脆创建一个bucket单独做静态资源服务器算了,爬下来的网站直接放OSS岂不美哉,但是用着用着发现这尼玛流量也是一笔费用,而轻应用服务器则有1TB的流量(完全用不完),为何不用OSS的储存,轻应用服务器的流量呢…
阿里云上有相对完整的解决方案,先我将这些梳理一下,以备不时之需。
准备工作首先得在阿里云上有个OSS存储包,很便宜,40G一年9块钱,然后得有个轻应用服务器,我买的是香港的,24
2021-02-07
了解nodejs中的path.resolve
path.resolve() 方法会将路径或路径片段的序列解析为绝对路径。
node文档中给出的例子:
实例:
path.resolve(__dirname, '../static/test.html');
首先我要读取的文件在与上个目录同级的static文件夹内,所以第一个参数为../static/test.html,而我当前模块的目录名为D:\Code\website-archive\compile,所以最终的结果是:
D:\Code\website-archive\static\test.html
注意:如果参数为./目录则可以理解为/目录。
2021-01-27
JS模块化进程中的导入与导出
浏览器环境下的模块导入导出特点
遵循ES Module规范。
导入导出方式:
导出:export和export default。
导入:import。
详细导入导出方式
普通导入导出:
// module.js
export function func1() {};
export const num1 = 999;
// import.js
import { func1, num1 } form './module.js'
// module.js
function func1() {};
const num1 = 999;
export { func1, num1 }
2021-01-12
export