首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Notion 编辑器原理分析

一款如此好的笔记工具,不得不让我了解他的技术原理,接下来讲一讲。...先了解怎么设计一款编辑器,做下铺垫,参考 facebook draft-js 的介绍视频 (Draft.js was introduced at React.js Conf in February 2016...,文章讲了做一款编辑器为什么不直接使用 contenteditable,但又不能完全抛弃 contenteditable 的原因。...复制粘帖 复制粘帖是文字编辑器里面重要功能,特别对于「复制粘帖工程师」而言,最大的还原原有文字是验证能力的标准。...office 原理都一致,只是解析格式不一样,就不细看了。 总结 notion 在产品能力上很优秀,打破了传统的笔记软件固化思维,与其说提供给用户的是一套笔记工具,而不如说是一套设计笔记软件的系统。

2.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

JS ----- 底层原理

JS不是这样做的,JS是不需要编译成中间码,而是可以直接在浏览器中运行,JS运行过程可分为两个阶段,编译和执行。...(可参考你不知道的JS这本书),当JS控制器转到一段可执行的代码时(这段可执行代码就是编译阶段生成的),会创建与之对应的执行上下文(Excution Context简称EC)。...执行上下文可以理解为执行环境(执行上下文只能由JS解释器创建,也只能由JS解释器使用,用户是不可以操作该"对象"的)。...JS 的底层运行原理 每调用一个函数就会生成一个执行环境(俗称执行上下文),执行上下文环境数量没有限制 每调用一个函数就会生成一个执行环境(俗称执行上下文),执行上下文环境数量没有限制 单线程 同步执行...eval():把字符串单做JS代码执行,不推荐使用

2K10

谈谈p5js编辑器

小菜的读者中有使用 p5js 进行学习和创作的,私信我想了解下 p5js 除了 Processing 软件的 p5js 模式,还有什么编辑器可以用。 这里小菜就单独开一篇文章来说下这事。...编辑器真的“没那么重要”。 不过如果使用 p5js 的读者想获得好的编辑体验,那还是可以说道说道的。 小菜这里列举下 p5js 可以用到的编辑器。...官方 Web 编辑器 https://editor.p5js.org 这个网站嘛,一言难尽,辑体验,也是一言难尽,竟然连代码提示都没有。...评分:★★★☆☆ Visual Studio Code + p5Canvas插件 + p5js Snippets Visual Studio Code 是微软公司出品的一款编辑器,核心功能稳定,配合社区强大的插件...修改 js 代码的同时,右侧也会同时刷新。

3.3K20

JS加密、JS混淆技术原理简介

JS加密、JS混淆技术原理简介JS加密、JS混淆、JS混淆加密,所指相同,都是指对JS代码进行加密式处理,使代码不可读,以达到保护代码的目的。...其原理,根据加密或混淆处理深度不同,大体上可分两种,下面简述技术原理。第一种,对代码进行字符替换,比如Eval加密、JJEncode加密,都属于这一类。这种方式,直接对JS代码进行处理,是可逆的加密。...第二种,操作层面与前者最大的差别是,不是对JS代码直接进行分析并加密,而是会进行低层处理,先会对JS代码进行词法分析、语法分析,转化成AST(抽象语法树),得到AST之后,混淆加密操作都是在AST中进行...,完成语法树加密修改之后,再根据AST重新生成全新的密文式JS代码,专业的JS代码加密混淆工具,比如JShaman、JScrambler都是属于这一类。...如此混淆过的JS代码,人无法读懂,但机器可识别,是可以直接运行的,不需要经过解密,因此,不存在通过解密而直接逆向出原码的问题,安全性高。在业内是被广泛认可和应用的。

49540

Node.js原理

Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。 Node.js 是一个可以让 JavaScript 运行在浏览器之外的平台。...历史上将 JavaScript移植到浏览器外的计划不止一个,但Node.js 是最出色的一个。...Node.js能做什么 借用一句经典的描述Node.js的话:正如 JavaScript 为客户端而生,Node.js 为网络而生。...运行原理分析 当我们搜索Node.js时,夺眶而出的关键字就是 “单线程,异步I/O,事件驱动”,应用程序的请求过程可以分为俩个部分:CPU运算和I/O读写,CPU计算速度通常远高于磁盘读写速度,这就导致...来看一下代码: test.js(作为控制文件) // file name :test.js var express = require('express'); var app

2.9K70

学习js在线html(富文本)编辑器

你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。...JS的selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。...") 取消操作--IE5.0以后可以无限取消 execCommand("Undo") 重复操作 execCommand("Redo") 把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器...LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。...一个简单的开源编辑器:http://www.jb51.net/article/22346.htm <!

19.8K70

前端进阶JS运行原理

JS运行原理 深入了解V8引擎原理 浏览器内核是由两部分组成的,以webkit为例: WebCore:负责HTML解析、布局、渲染等等相关的工作; JavaScriptCore:解析、执行JavaScript...代码; 官方对V8引擎的定义: V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎,它用于Chrome和Node.js等 它实现ECMAScript和WebAssembly...获得到代码之后 V8用流输入通过词法分析,分析成token 解析/预解析 来生成一个一个执行节点 生成 AST 树 转成字节码 如果有热点方法就会走turbofan编译器优化成机械码提升性能 全局代码执行过程 js...GO) 该对象 所有的作用域(scope)都可以访问 里面会包含Date、Array、String、Number、setTimeout、setInterval等等 其中还有一个window属性指向自己 js...闭包的一个重点, js中闭包就是通过作用域链的方式来完成变量可以跨作用域访问的,为我们加快提升了开发的效率 也省去很多麻烦

3.6K51

图形编辑器基于Paper.js教程02:图形图像编辑器概述

背景 由于笔者目前从事开发图形编辑器,在开始的那段时间里,调研和研究了非常多的图形编辑器,图像编辑器之类的软件,开源,闭源的,免费的,商业的都有。今天的这篇文章就来简单概述一下我调研的结果和过程。...根据我的研究 xtool 使用的Vue + PixiJS wecreate,laserpecker 是Vue + Fabric.js circut design 这玩意代码保护的很好,只知道是angular...Fabric.js Paper.js PixiJS 其实还有一些其他有效的基础canvas库,如 konva ,zrender 我没时间去调研了,有用过的同学可以在文章底部评论,我加到文章中。...Fabric.js 成熟度最高,社区插件,效果,开源项目最多,持续维护,自带支持选择,缩放,框选案例,微操有限,比如实现一个填充线算法。...Paper.js 目前基本不维护啦,但是对于矢量图的微操支持的很全,各种插件都需要自己写,比如缩放,旋转插件,框选。 PixiJS 这个没用过,了解不多,看介绍是主打h5 canvas 游戏方面。

13110

Node.js 的底层原理

前言:之前分享了 Node.js 的底层原理,主要是简单介绍了 Node.js 的一些基础原理和一些核心模块的实现,本文从 Node.js 整体方面介绍 Node.js 的底层原理。...1 Node.js 的组成和代码架构 下面先来看一下Node.js 的组成。Node.js 主要是由 V8、Libuv 和一些第三方库组成。 1. V8 我们都比较熟悉,它是一个 JS 引擎。...Node.js 代码主要是分为三个部分,分别是C、C++ 和 JS。 1. JS 代码就是我们平时在使用的那些 JS 的模块,比方说像 http 和 fs 这些模块。 2....4.2 用户 JS 模块 用户 JS 模块就是我们平时写的一些 JS 代码。...4.3 原生 JS 模块 接下来看下原生 JS 模块加载器。原生JS 模块是 Node.js 本身提供了一些 JS 模块,比如经常使用的 http 和 fs。

1K40

Vue.js 内部原理浅析

原文:https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3 说到 JavaScript 框架,Vue.js 绝对是个热门的...于我来说 Vue.js 最吸引人的地方在于 -- 其学习曲线,非常之低。个人角度来讲,我感觉就像正在做着 jQuery 一类的事情。鼓捣几天之后,你就能开始建立应用了。...一年前我开始探索 Vue.js 并建立了一些应用。但是几天前,一股深入了解 Vue.js 代码的渴望在我心中升腾。我翻阅了 Github 上的源码并进行了多轮调试以了解其底层运行机制。...所以,让我们来点干货,本文将尝试给你如下 4 个问题的答案: 当你创建一个 Vue.js 实例时发生了什么? 模板内部都在发生着什么? Virtual DOM 有何意义?...Static text Toggle Dynamic 组件的 JS

1.2K10

Node.js的底层原理

前言:本文根据最近做的一次分享整理而成,希望能帮忙大家深入理解Node.js的一些原理和实现。 大家好,我是一名Node.js爱好者,今天我分享的主题是Node.js的底层原理。...在大前端的趋势下,Node.js不仅拓展了前端的技术范围,同时,扮演的角色也越来越重要,深入了解和理解技术的底层原理,才能更好地为业务赋能。 今天分享的内容主要分为两大部分。...一 Node.js基础和架构 Node.js的组成 Node.js代码架构 Node.js启动过程 Node.js事件循环 二 Node.js核心模块的实现 进程和进程间通信...V8:实现JS解析和支持自定义的功能,得益于V8支持自定义拓展,才有了Node.js。 Node.js代码架构 ? 上图是Node.js的代码架构,Node.js的代码主要分为JS、C++、C三种。...2 接着传入c++和原生js模块加载器,执行run_main_module.js。 3 在run_main_module.js中传入js和原生js模块加载器,执行用户的js

1.9K20

浏览器执行js原理

js任务循环机制中,为什么会有宏任务与微任务之分?...因此只要消息队列里有任务,JS执行主线程就会不断的执行消息队列里的任务。这便是js单线程执行js代码的简单原理,当然涉及的深的话,应该还要有IO线程,专门处理新加进来的任务,以及其它进程过来的任务。...鉴于这个属性,那js是如何处理高优先级的任务? js是如何处理高优先级的任务? 比如一个典型的场景,DOM节点的变化,增、删,改,如果页面上的一个输入框状态需要实时的映射到页面上。...但是这个模式有一个问题,就是如果当前的DOM变化非常的频繁,都去执行js任务的话,会导致当前在执行的js任务被延长,从而导致执行效率的下降;如果把这些任务添加到消息队列的尾部,则无法及时响应用户的操作。...这便是在js执行过程中为什么会有微任务与宏任务之分的原因。 文章转自 浏览器执行js原理 , https://www.xiaye0.com/articlejs?id=40

3.6K10
领券