『前端实习笔记』3月 第3周

最新推荐文章于 2025-01-17 19:25:01 发布
最新推荐文章于 2025-01-17 19:25:01 发布
阅读量705 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端实习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GLZX_HM/article/details/115753343
这周的实习笔记主要记录了使用codemirror@6的体验，包括readonly特性，组件设计与边界处理，以及遇到的各种bug修复。在组件开发中，强调了props的处理和类型检查的重要性，还提到了Vue3 JSX的支持和git操作的问题。周报总结了codemirror的通用组件、YAML和Python编辑器的优化，以及告警通知状态的调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

日记


3.15

  • codemirror@6 readonly
EditorView.editable.of(false)

看了源代码得出

  • case转换快捷键
    camelCase和kebab-case切换的，vscode可以设置

  • 小bug修复
    yaml编辑器行数不对其
    python编辑器active行数小，因为高度是div撑开的，而非内容本身


3.16

  • 通用组件
  1. 考虑组件的边界
    这里因为配置是覆盖的，所以根据props做了A和C，让用户自定义部分为B
    优先级是A-B-C
  2. 设计
    50%时间做设计
    写出
了解本专栏 订阅专栏 解锁全文 超级会员免费看
『前端实习笔记』11月 第3周
猪窝
11-30 954
文章目录日记11.1611.1711.1811.1911.20周报 日记 11.16 code review 个别代码嵌套层数过多，个别代码嵌套层数太少：本来放一个文件模块能解决的事情，来来回回引了好几次，放了好几个没用的文件来回引来引去；一个函数方法，里面包含了大概3个部分，分别对应不同的操作，我直接写在一起了，应该把他们再拆成3个函数。 import引入顺序太乱了。库相关的放在最前，css类的放在中间，本地文件放在最后，每一个part之间空出一行。逻辑清晰。 下面以我的demo为例：(有些库本地
『前端实习笔记』12月 第3周
猪窝
12-25 547
文章目录日记12.1412.1512.1612.1712.18周报OJ 日记 12.14 任务：调研vega-lite库，增加动态渲染表格，按钮控制，可取最大最小值 过程 tooltip收尾：因为我搞编译器耽搁了，碰到致命错误，但没说。leader让我下次碰到这种错误第一时间告诉他。 加表格：简单的很，每一列加一个按钮控制是否显示。这里唯一注意的就是，表格渲染必然是v-for，而控制是否显示有两个v-if和v-show，文档里再三强调v-for不可以和v-if同时出现，其他case下v-if用于惰性
前端第三周学习总结
weixin_52226680的博客
06-06 337
学习了框架，div以及css各种属性等相关知识。 框架是一种特殊的网页，它可以根据需要把浏览器划分为多个区域，每个框架区域都对应一个单独的网页。框架由框架集和单个框架组成。 div全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签，可以通过插入div标签并对它们应用的css样式来创建网页布局。 css的属性包括类型、背景、区块、方框、列表、定位、扩展、过渡等属性。 ...
使用 CodeMirror 只读模式的最佳实践
qq_22841387的博客
12-03 9177
通过这次的实践，我深刻体会到了在开发中深入理解工具的每一个细节是多么的重要。CodeMirror 作为一个强大的代码编辑器，通过简单的配置，就可以实现多种需求。在使用它的过程中，我们需要仔细阅读官方文档，了解每一个配置项的作用，并根据实际需求灵活应用。希望这篇文章能帮助你更好地理解和使用 CodeMirror，尤其是在 Vue 项目中的应用。
codemirror6教程
qq_43203949的博客
11-30 5206
视图用于展示文本的，在中文本信息的展示使用的是这个类在codemirror6中，文本信息放到了这个类，可以展示在之上，改变里面的文本，可以更改页面上的文本展示。 EditorState 编辑器状态，描述当前编辑器使用的插件，文本等信息 EditorView 编辑器视图，编辑器的展现 Compartment 一个特殊的插件类，也叫隔层，用于封装真正的插件，当插件传入EditorState后，我们是无法直接动态改变里面的插件的，如果要改变里面的插件，就需要用到Compartment封装插件。 Compartm
『前端实习笔记』3月 第1周
猪窝
03-08 680
文章目录日记3.13.23.33.43.5周报 日记 3.1 code-review map写法有问题 我在function里return了new Map()，这样每次调用都会创建新的，虽然V8优化了 switch写法巨丑，不要用 map的写法最后决定放在computed里，因为创建一次也不会修改，没有对应响应式的数据 Vue中$_开头的不会触发reactive chain a.b.c.d式引用起来很慢的，尤其是循环 能解构就解构 任务：bug check一处模板为何渲染刚开始为undefi
『前端实习笔记』3月 第4周
猪窝
04-16 558
文章目录日记3.223.233.243.253.26周报 日记 3.22 遗留问题 PR没合，包含了测试分支的修改内容 测试分支也没删 字段修改 缺乏最佳实践，后端频繁更换字段或取值时兼容适配始终是个大问题 如果是db直接更新还好，就怕要兼容旧的数据 state-dot 3个时间状态 uplot-width 帮后端手动过滤展示 逻辑梳理： @当前告警 firing 有最近告警时间 读event_updated_at @历史告警 resolved 有开始时间 有结束时间 读event_star
『前端实习笔记』12月 第2周
猪窝
12-25 708
文章目录日记12.712.8tt12.912.1012.11周报 日记 12.7 任务：根据d3和vega-lite画图 d3 d3 API vega-lite vega-lite API 过程 引入：在文档的usage部分找NPM的引入方式，这里要到vega，vega-lite，vega-embed这三个NPM页面仔细看一下。文档tutorial部分是指导，examples部分可以找到很多示例，doc部分是所有文档以及API。 示例：例子多是JSON写法，可以转用JS的对象写法，用pre
CodeMirror用户手册
LingMax的博客
05-02 2万+
用户手册和参考指南版本5.46.1 CodeMirror是一个代码编辑器组件，可以嵌入到Web页面中。核心库仅提供编辑器组件，不提供伴随按钮，自动完成或其他IDE功能。它确实提供了丰富的API，在此基础上可以直接实现这些功能。有关额外功能的可重用实现，请参阅分发中包含的插件和外部托管插件列表。 CodeMirror使用特定于语言的模式。模式是JavaScript程序，可帮助用给定语言编写的文本...
vue-codemirror6 + Vue3 代码编辑器
m0_56772756的博客
09-03 2969
/ 输入的字体颜色"&": {},},// 激活背景色},// 激活序列的背景色},//光标的颜色},// 选中的状态},// 左侧侧边栏的颜色color: "#ddd", //侧边栏文字颜色。
SvelteCodeMirror6:这是一个测试Svelte应用程序，用于为Svelte创建CodeMirror 6组件
05-10
SvelteCodeMirror6 这是一个测试Svelte应用程序，用于为Svelte创建CodeMirror 6组件。 首先，安装所需的库： npm i 要编译项目，请输入： npm run build 要为该项目运行开发服务器，请输入： npm run dev 之后，您可以进入公共目录并使用NW.js启动它： cd public nwjs . 假设您有一个nwjs的别名，以指向系统上的NW.js。
CodeMirror使用说明书
热门推荐
AlexS Blog
05-09 9万+
本文介绍CodeMirror使用方法，以及内部常用属性和api的使用
codemirror6及公式编辑器 001 codemirror6
PRIEST_KNIGHT的博客
07-02 2325
在使用codemirror6时收集到的一些资料和踩坑，这里有些事提炼了其他大佬们的文章，链接我已经给出来了
vue中使用CodeMirror解析yaml语言
个人博客
06-22 7598
下载插件： 这里使用的是codemirror5，现在codemirror最新已经是6了，不过参考文档相对较少，使用起来不是那么方便。后续文档丰富之后可以考虑使用6这里使用到的配置如下 三、CodeMirror具体使用 1.首先创建一个textarea标签 2.然后引入相关依赖 3.最后初始化编辑器 四、CodeMirror语法校验 1.引入语法校验依赖 codemirror支持的校验库如下 3.安装lint需要的其他依赖 仅仅是这样还是不够的，因为codemirror对应的校验插件中可能还依赖其他
Codemirror6个人使用心得总结
最新发布
盧瞳的代码博客
01-17 1732
Codemirror6对原有的包进行了拆分，和原有的使用方法有较大差异，本文记录个人在使用过程中的心得
【亲测免费】 Vue-CodeMirror6 安装和配置指南
gitblog_07319的博客
09-13 1420
Vue-CodeMirror6 安装和配置指南 1. 项目基础介绍和主要编程语言 项目介绍 Vue-CodeMirror6 是一个基于 Vue.js 的组件，用于在 Vue 项目中集成 CodeMirror 6 代码编辑器。CodeMirror 是一个功能强大的文本编辑器库，支持多种编程语言的语法高亮、代码折叠、自动补全等功能。Vue-CodeMirror6 组件使得在 Vue 项目中使用 Cod...
yaml文件编辑/预览器
weixin_44239362的博客
01-03 2658
vue中使用js-yaml及codemirror实现yaml文件编辑/预览
vue3结合codemirror6原生使用写法
q1025387665a的博客
01-10 6251
网上零星几篇基本狗屁不通，非程序水平不行，属实文笔太烂，词不达意，干啥弄不明白要么杂乱无章。我的需求很简单，最近网站上要做个ol的学习模块，需要一个html的编辑器，一个预览。不需要别人给我封装对我而言多余的东西。为此琢磨了下网页在线编辑器，codemirror 经过时间的沉淀，已经是非常成熟的开源框架了，为此直接采用。非研究文章，纯使用文章。
CodeMirror编辑器使用方式ts+vue3
weixin_45685394的博客
09-12 1790
使用以上方式封装一个组件，然后直接调用使用即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊软糖M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值