标签: JavaScript

客栈小K | 1天前 | JavaScript前端相关浏览器小程序

阿里跨端技术演进中的实践与思考_前端

2020 年 12 月,QCon 全球软件大会 2020·上海站上阿里巴巴张舒迪(圣司)分享了《阿里跨端技术演进中的实践与思考》,他从跨端技术背景及演进历程、阿里跨端业务现状及思考、跨端技术方向思路演进以及对跨端技术未来展望这四个方面进行了深入的分析,从实践出发为跨端技术开发者带来更多思考方向。本文根据此次分享整理。

 26 |  0 |  0 JavaScript前端相关

他在笑_1 | 1周前 | JavaScriptVue

导航条根据滚动条方向显示淡入淡出效果

目的 这个代码主要实现了:Nav导航条根据滚动条方向显示淡入淡出效果。 Nav的定位是 fixed ,向下滚动导航条隐藏,向上滚动导航条出现。 代码 js <template <div id="demo" <!- 淡入淡出动画 - <transition name="fade" <!- 导航条 - <div v-show="show" 内容省略 </div </transition </template <script export default { mounted() { //开始------------------------------------ let oldTop = 0; //旧数据,初始为0 // 将自定义方法绑定到窗口滚动条事件 window.onscroll = () = { let top = document.scrollingElement.scrollTop; //触发滚动条

 78 |  1 |  4 JavaScriptVue

客栈小K | 2周前 | JavaScript前端相关浏览器

看了Quark Design后,我去深入了解了Web Components

1写在前面 --------- 最近哈啰单车前端团队开源的Quark Design组件库,号称是下一代前端组件库,可以同事在任意框架或无框架中使用。 那么,什么是Web Components? 2什么是Web Components? ----------------------- 现今前端生态中框架层出不穷,在生产中为了提升效率和标准化组件,就会针对框架开发组件库。但是各种框架之间是不兼容的,对此需要对应开发适应框架的组件库,这样也造成维护成本攀升。就如同物理界有电磁相互作用、强相互作用以及弱相互作用,需要单独的物理理论来解释这三种作用造成的物理现象,这样让众多物理学家在朝着 大统一理论 前进,而 Web Components 可以看作是现今UI组件库"大统一理论"的一种解决方案。 Web Components 与 React、Vue 等框架中的组件类似,其实在Vue中也采用了很多基于 Web Components 的设计。这...

 92 |  0 |  0 JavaScript前端相关

客栈小K | 2个月前 | JavaScript前端相关浏览器

Markdown-It 解析原理

Markdown-It 解析原理 markdown-it是目前使用最广泛的 markdown解析器工具 。它将markdown语法的文件,解析为最终的html文件。绝大部分文档中心框架工具如Vuepress,处理markdown文件部分都是使用该工具以及扩展出的插件。了解它的解析过程,是进行自定义markdown插件的前提。 解析主要分两步: 1. Parser:将md文档解析为Tokens(类似ATS) 2. Renderer:将Tokens内容渲染为html js var md = require('markdown-it')(); // render函数包含了parser和renderer阶段 var result = md.render(' markdown-it rulezz!'); [ ](about:blank parser) Parser -------- 创建一个 Core Parse

 174 |  0 |  0 JavaScript前端相关

客栈小K | 2个月前 | JavaScript算法前端相关浏览器

多人协同编辑技术的演进

多人协同编辑一直是我们 PingCode Wiki 不太敢触碰的一个功能,因为技术实现上有挑战。但协同编辑技术本身已经发展多年,解决方案已经相对成熟,我们团队也是在刚刚结束的 Q3 里完成了基于 PingCode Wiki 编辑器协同编辑的方案落地,所以这里想结合我们的技术选型及落地实践经验谈谈我对这块技术的理解。 主要内容以协同编辑技术为主,中间也会谈谈对技术发展演进的理解。 一个场景 -------- 一个常见的场景,页面发布冲突,这个交互在我们产品中真实存在过 两个用户基于相同的文章内容进行了修改,一个用户先发布,后一个用户在发布的时候就会有这样的提醒,虽然有提示,这其实对用户来说是不友好的。 通常产品的解决方案有以下三种: 1\. 悲观锁 一个文档只能同时有一个用户在编辑 2\. 内容自动合并、冲突处理 3\. 协同编辑 第二种方案也有国外产品在做就是 Gitbook ![](https://static.de

 608 |  2 |  0 JavaScript算法

客栈小K | 2022-08-01 | JavaScript前端相关

聊一聊 Vite 的预构建和二次预构建

前言 之前在使用 Vite 的时候,经常会遇到这种情况:项目启动以后,不管是首屏还是页面懒加载,如果发现有未进行 预构建 的第三方依赖,那么 Vite 就会重新 预构建 ,然后触发页面的 reload 。重复的页面 load 操作,给开发人员带来了很不友好的体验。 最新发布的 3.0 版本对此问题做了部分优化,即首屏期间,即使有未进行 预构建 的第三方依赖,也不会发生页面 reload 。 那 3.0 版本是怎么做到的呢?今天我们就通过本文,和大家一起聊一聊 3.0 版本针对 二次预构建 做了什么优化。 本文的目录结构如下: [初探 Vite 预构建](about:blank 1 " 1") [二次预构建](about:blank 2 " 2") [Vite 3.0 对预构建的优化](about:blank 3 " 3") [vite-plugin-package-config vite-plugin-optimize-persist](about:blank 4 " 4") ...

 439 |  0 |  0 JavaScript前端相关

HZFEStudio | 2022-07-01 | JavaScript前端相关

编码:实现 apply/call/bind

apply 1\. 语法 js func.apply(thisArg, [argsArray]); 参数 thisArg 在 func 函数运行时使用的 this 值。 argsArray 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。 返回值 使用指定的 this 值和参数调用函数的结果。 2\. 流程图 3\. 编写代码 js Function.prototype.apply = function (thisArg, argsArray) { if (typeof this ! "function") { throw new TypeError(

 372 |  2 |  0 JavaScript前端相关

HZFEStudio | 2022-07-01 | JavaScript前端相关

基础:JavaScript 异步编程

相关问题 JavaScript 异步编程方案有哪些 JavaScript 异步编程方案各有什么优缺点 回答关键点 阻塞 事件循环 回调函数 JavaScript 是一种同步的、阻塞的、单线程的语言,一次只能执行一个任务。但浏览器定义了非同步的 Web APIs,将回调函数插入到[事件循环](https://febook.hzfe.org/awesome-interview/book3/browser-event-loop),实现异步任务的非阻塞执行。常见的异步方案有异步回调、定时器、发布/订阅模式、Promise、生成器 Generator、async/await 以及 Web Worker。 知识点深入 1\. 异步回调 异步回调函数作为参数传递给在后台执行的其他函数。当后台运行的代码结束,就调用回调函数,通知工作已经完成。具体示例如下: js // 第一个参数是监听的事件类型,第二个就是事件发生时调用的回调函数。 btn.addEventListener("click", () = { console.log

 324 |  0 |  0 JavaScript前端相关

HZFEStudio | 2022-07-01 | JavaScript前端相关

框架:常见框架的 Diff 算法

相关问题 虚拟 DOM 是什么 虚拟 DOM 的作用 讲一下 Vue 的 Diff 算法 回答关键点 虚拟 DOM 时间复杂度O(n) 现代网站大多具有复杂布局,大量的节点和交互操作等特征,直接操作 DOM 方法不当带来的性能问题不可忽视。虚拟 DOM 的本质是 JavaScript 对象,它可以代表 DOM 的一部分特征,是 DOM 的抽象简化版本。通过预先操作虚拟 DOM,在某个时机找出和真实 DOM 之间的差异部分并重新渲染,来提升操作真实 DOM 的性能和效率。 为达到这个目的,还需要关注两个问题:什么时候重新渲染,怎么高效选择重新渲染的范围。找出需要重新渲染的范围,就是 Diff 的过程。React 和 Vue 的 Diff 算法思路基本一致,只对同层节点进行比较,利用唯一标识符对节点进行区分。 知识点深入 1\. Diff 算法 两棵树的比对和更新,涉及到树编辑距离(Tree Editing Distance)算法:将一棵树转化为另一棵树的最小操作成本。操作类型包括:删除、插入、修改。时间复杂度为 O(n^...

 290 |  0 |  0 JavaScript前端相关

HZFEStudio | 2022-06-30 | JavaScript前端相关

编码:实现节流防抖函数

节流 1\. 基本概念 throttle(func, wait) 每 wait 毫秒内最多只调用一次 func。 2\. 应用场景 搜索框输入时的实时联想。 监听 scroll 事件计算位置信息。 3\. 流程图 4\. 编写代码 js function throttle(func, wait) { let lastTime = 0; let timer = null; return function () { if (timer) { clearTimeout(timer); timer = null; } let self = this; let args = arguments; let nowTime = +new Date

 236 |  0 |  0 JavaScript前端相关

HZFEStudio | 2022-06-30 | JavaScript前端相关ES6

基础:New 操作符的原理

相关问题 new 操作符做了什么 new 操作符的模拟实现 回答关键点 构造函数 对象实例 new 操作符通过执行自定义构造函数或内置对象构造函数,生成对应的对象实例。 知识点深入 1\. new 操作符做了什么 1. 在内存中创建一个新对象。 2. 将新对象内部的 \_\_proto\_\_ 赋值为构造函数的 prototype 属性。 3. 将构造函数内部的 this 被赋值为新对象(即 this 指向新对象)。 4. 执行构造函数内部的代码(给新对象添加属性)。 5. 如果构造函数返回非空对象,则返回该对象。否则返回 this。 2\. new 操作符的模拟实现 js function fakeNew() { // 创建新对象 var obj = Object.create(null); var Constructor = [].shift.call(arguments); // 将对象的 __proto__ 赋值为构造函数的 prototype 属性 obj.__proto__

 195 |  1 |  0 JavaScript前端相关

HZFEStudio | 2022-06-30 | JavaScript前端相关ES6

基础:ES5、ES6 如何实现继承

相关问题 关于 ES5 和 ES6 的继承问题 原型链概念 回答关键点 原型链继承 构造函数继承 ES6 类继承 继承是指子类型具备父类型的属性和行为,使代码得以复用,做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。常见的继承方法有:ES6 中 class 的继承、原型链继承、寄生组合式继承等。 知识点深入 1\. 原型链 原型链的本质是拓展原型搜索机制。每个实例对象都有一个私有属性 \_\_proto\_\_。该属性指向它的构造函数的原型对象 prototype。该原型对象的 \_\_proto\_\_ 也可以指向其他构造函数的 prototype。依次层层向上,直到一个对象的 \_\_proto\_\_ 指向 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或直到这个链表结束( Object.prototype.__pr...

 270 |  0 |  0 JavaScript前端相关

HZFEStudio | 2022-06-29 | JavaScript前端相关

编码:实现一个符合 Promises/A+ 规范的 Promise

实现一个符合 Promises/A+ 规范的 Promise 这是一道有着成熟的业界规范的 coding 题,完成这道题的前置知识就是要了解什么是 [Promises/A+](https://promisesaplus.com/)。 这道题的难点就在于它是有规范的,任何一个不满足所有规范条件的解答都是错误的。同时,成熟的规范也配套了成熟的[测试用例](https://github.com/promises-aplus/promises-tests),官方提供了 872 个测试用例针对规范中的所有条件一一进行检测,哪怕只有一条失败,那也是错误的解答。 而这道题的答题关键也恰恰是因为它是有规范的,只要我们对于规范了然于胸,那么编写代码自然也是水到渠成。因为官方规范提供了一个符合 Promises/A+ 规范的 Promise 应该具有的全部条件,并且在 [Requirements](https://promisesaplus.com/ requirements) 一节中结构清晰、逻辑充分的表述了出来,我们只需将规范中的文字转变为代码,就能够实现一个 Promises/A+ 规范...

 291 |  1 |  0 JavaScript前端相关

HZFEStudio | 2022-06-29 | JavaScript前端相关

基础:闭包的作用和原理

相关问题 什么是闭包 闭包的应用 回答关键点 作用域 引用 函数 作用:能够在函数定义的作用域外,使用函数定义作用域内的局部变量,并且不会污染全局。 原理:基于词法作用域链和垃圾回收机制,通过维持函数作用域的引用,让函数作用域可以在当前作用域外被访问到。 知识点深入 1\. 作用域 作用域 :用于确定在何处以及如何查找变量(标识符)的一套规则。 词法作用域 :词法作用域是 定义在词法阶段的作用域 。词法作用域是由写代码时将代码和块作用域写在哪里来决定的,因此当词法作用域处理代码是会保持作用域不变(大部分情况)。 块作用域 :指的是变量和函数不仅可以属于所处的作用域,也可以属于某个代码块(通常用{}包裹)。常见的块级作用域有 with,try/catch,let,const 等。 函数作用域 :属于这个函数的全部变量都可以在整个函数范围内使用及复用(包括嵌套作用域)。 作用域链 :查找变量时,先从当前作用域开始查找,如果没有找到,就会到父级(词法层面上...

 304 |  0 |  0 JavaScript前端相关

动感超人, | 2022-06-27 | JavaScript前端相关CSS

说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

一、背景 在 css 中我们通常使用px作为单位,在PC浏览器中 css 的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉,我们会认为 css 中的像素就是设备的物理像素 但实际情况却并非如此, css 中的像素只是一个抽象的单位,在不同的设备或不同的环境中, css 中的1px所代表的设备物理像素是不同的 当我们做移动端开发时,同为1px的设置,在不同分辨率的移动设备上显示效果却有很大差异 这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念 二、介绍 CSS像素 CSS像素(css pixel, px): 适用于web编程,在 CSS 中以 px 为后缀,是一个长度单位 在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位 px是一个相对单位,相对的是设备像素(device pixel) 一般情况,页面缩放比为1,1个CSS像素等于1个设备独立像素 CSS 像素又具有两个方面的相对性: 在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率) 在不同的设

 875 |  0 |  0 JavaScript前端相关