优快云前端知识共享

canvas 镂空特效

调试一个本地的 index.js 文件。

查找当前页面滚动的元素

指令源码注册自定义指令使用自定义指令

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值，就是0.

问题描述在编译执行 ts文件时，出现这个问题:$ tsc -p tsconfig-build.jsonnode_modules/react-scripts/lib/react-app.d.ts:55:18 - error TS2300: Duplicate identifier 'src'.55 export default src; ~~~ src/custom.d.ts:3:18 3 export default content;

前言内存泄漏问题，对于 Web H5 开发者来说，因为每次刷新页面，浏览器就会将当前页面的内存进行释放，影响较小。但是，对于持续不间断执行的程序，比如Nodejs。如果存在内存泄漏问题，那么内存占用会随着时间影响越来越大，直至达到内存限制，进程崩溃。常见的内存泄漏场景内存泄漏问题，一般是因为 GC 导致未使用的内存，没有及时被释放造成的。而容易导致内存泄漏的也主要指堆内存。1、循环引用var div;window.onload = function () { div = documen

一、前言当内存不再占用，此时需要内存管理对不使用的内存区域进行清空操作，这就是所谓的垃圾回收机制。高级语言解释器内嵌了垃圾回收器，主要是跟踪内存的分配和使用状况，以便当分配的内存不再使用时，自动释放。二、垃圾回收策略在内存管理中，垃圾回收策略常用的有引用计数清除和标记-清除。1、引用计数清除引用： 在内存管理的环境中，如果一个对象可以有能力访问另一个对象的属性方法，这就叫做这个对象引用另一个对象。（此处对象不仅仅指Object对象，还可表示函数作用域）引用计数清除： 如果一个对象

一、前言Javascript 内存分配的时机是在创建变量阶段，会自动进行内存的分配。并且在不占用该变量的情况下，会自动释放该内存。这个释放的过程称为"辣鸡回收"。二、内存生命周期分配内存阶段使用内存阶段释放内存阶段1. 分配内存阶段该阶段是在创建变量的时候，会自动分配内存地址。// 创建字符串类型变量let obj = { a: "robbie memory"}2. 使用内存阶段该阶段是对创建的变量读写操作的时候进行。// 读操作-将 newObj 的内存地址指向 o

有限状态自动机的应用场景状态机是有限状态自动机的简称。是用来描述事物有限个状态之间，相互切换的数学模型。state: 状态，一个状态机至少有两个状态event: 事件，执行某个操作的触发条件action: 动作，表示事件执行后，即将执行动作transtion: 变换，状态之间的相互切换思考: 抽奖组件，如何可以抽象成一个状态机。状态start (未抽奖时，正常滚动)ongoing_run_scroll (抽奖进行中，转盘快速滚动)ongoing_stop_scroll (抽

起因github 新版本上线之后，原默认分支为 master,现在统一改为了 main 。我不禁产生疑问，为什么要改呢？原因大概是漂亮国农奴历史遗留问题导致的，master(奴隶主)/slaver(奴隶)。解决方法我们已经习惯以 master 作为默认分支了，那么如何才能设置会原来的状态呢？打开 github 官网，登录成功之后，进入设置页点击切换到 Repository， 将原有的 main 替换为 master , 点击 update 即可。...

问题描述在使用 sequelize 连接 mysql 数据库时，会出现这个错误：SequelizeConnectionError: Client does not support authentication protocol requested by server; consider upgrading MySQL client大概的意思就是: MySQL 拒绝我们的连接请求，让我们尝试升级 MySQL 版本。升级版本这种操作，改动比较大，可能会影响线上数据服务。因此，采用了一个影响范围较小的方

在h5页面上，如果想要让页面禁止滚动。一般通过给 body 元素 overflow:hidden;进行设置。但是，在部分安卓机上，上述操作并不会生效。因此，我们通过 fixed 布局来解决这个问题。当我们想要禁止页面滚动时，设置下面的属性，即可生效:// 设置 fixed 布局document.body.style.position = 'fixed';document.body.style.height = '100%';document.body.style.width = '100%.

具体请看：点击查看

React Navigation官方文档搭建环境# 安装全局依赖$ npm install -g expo-cli# 生成种子模板expo init <projectName> [--npm]安装 ReactNavigation# 安装依赖$ yarn add @react-navigation/native# 安装依赖$ yarn add react-nati...

vue 使用 scrollTo 方法，在安卓环境下报错// 安卓不支持window.scrollTo(x-scoller,y-scroller)解决方案// 使用 scrollLeft、scrollTopwindow.scrollLeft = x-scollerwindow.scrollTop = y-scoller...

DOM常用属性和方法下面的属性和方法可用于所有 HTML 元素上：属性 / 方法描述element.accessKey设置或返回元素的快捷键。element.appendChild()向元素添加新的子节点，作为最后一个子节点。element.attributes返回元素属性的 NamedNo

DOM常用节点类型 Node Types文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：节点类型描述子节点1Element代表元素Element, Text, Comment, ProcessingInstruct

Text 对象属性属性描述IEFOW3CaccessKey设置或返回访问文本域的快捷键。419Yesalt设置或返回当浏览器不支持文本域时供显示的替代文本。519YesdefaultValue设置或返回文

Keyboard 事件属性值描述onkeydownscript在用户按下按键时触发。onkeypressscript在用户敲击按钮时触发。onkeyupscript当用户释放按键时触发。Mouse 事件由鼠标或类似用户动作触发的事件

AJAX - 向服务器发送请求向服务器发送请求，只需要简单的三步。一、创建XMLHttpRequest 对象var xhr=new XMLHttpRequest();//首先暂不做兼容性的考虑二、打开xhr对象的open方法，(ps:这只是打开，并没有发送给服务器任何请求)xhr.open("GET","test1.txt",true);//参数1：可选项有get/

闭包  正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function scope内默认有个名为 Globe 的全局引用(有了这个引用,就可以直接调用 Globe 的属性或方法) 凡是在闭包域内声明的变量或方法,外部无法直接访问...

变量作用域“一个变量的作用域表示这个变量存在的上下文。它指定了你可以访问哪些变量以及你是否有权限访问某个变量。”变量作用域分为局部作用域和全局作用域。局部变量（处于函数级别的作用域）不像其他对面对象的编程语言（比方说C++，Java等等），javascript没有块级作用域（被花括号包围的）；当是，javascript有拥有函数级别的作用域，也就是说，在一个函数内定

用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。兼容性处理解决方案：处理IE,引入currentStyle,runtimeStyle,getComputedStyle style

//引用外部文件时，需要两个参数 // seajs.use('./js/module.js',function(explorts){ // explorts.foo(); // }); window.onload = function(){ var div = document.getElementById('div'); drag(div); function drag(o

在绝对定位中进行水平垂直居中的两种方法1.这种方法最常用，适合固定长宽的块级元素{width:300px;height:200px;left:50%;top:50%;margin-top:-100px;margin-left:-150px;}2.这种方法应用更加广泛，适合固定以及不定长宽的块级元素{max-width:300px;max-height:20

附：seajs源码包下载点击打开链接1.seajs源码引入将下好的sea.js文件放入你的html等文件中。我的文件目录树如下：2.seajs模块定义define //这里只是定义了一个模块(module.js文件)，内部的函数相当于一个闭包 define(function(require,explorts,module){//三个参数不要修改，requ

Javascript中this对象的解释，call和apply的调用方式，改变this指向

本例采用面向对象的方式进行封装库函数，对常用的表单验证、注册登录功能进行一些简单的封装。

1、常见的主流浏览器内核有Trident (IE垄断)Gecko(FF)Webkit(Chorme)Blink(Chorme、Opera)以上四种浏览器内核，可以将其类比为一块电脑主板。2、浏览器内核包括Javascript解析引擎渲染引擎这两种就好比是这块“电脑主板”上的内存条和显卡的关系。3.常见的Js引擎现今比较出名的有Chorme浏览器的V8

外部引用css时，link和@import两种区别

原型链机制，Javascript原型链,双对象,拷贝构造函数,指针_proto_，原型对象

css hack这是一种技术手段，目的是解决不同浏览器对css解析不一致的问题，最终产生的效果就是可以跨终端，在不同浏览器中展示一致的界面效果。

什么是事件委托（Event Delegation）

ajax,web前端,js模板化,JQuery,插件,js,原型链,原型，封装一个jquery库函数的冲动

StateMan：创建一个简单的SPA实例 概念：StateMan是为复杂的Web应用程序提供嵌套，并且基于状态的小型路由。特性： - 1.嵌套路由支持。 - 2.独立与微小的代码库。 - 3.异步路由支持如果你需要异步逻辑在导航。 - 4.支持承诺 html5历史支持，回退到基于哈希的旧浏览器。 - 5.简洁的API，致力于简单地开始使用它。 - 6.支持IE6 +等现代浏览

这个实例是在实例一的基础上进行增加的一些新的功能<!DOCTYPE html><html><head> <title>stateman路由测试</title> <script type="text/javascript" src="../js/stateman.js"></script></head><body> <h1>打开控制台console来查看日志信息</h1

简介 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。webpack官方指南 https://github.com/webpack/webpack webpack中文指南 https://doc.webpack-china.org/1. 项目概

前言代码进行统一有效的管理，编码进行规范性要求。统一使用html5标准

​websocket概念梳理一、实时web应用 1.保持客户端和服务器端的信息同步是实时 Web 应用的关键要素。 2.在 WebSocket 规范出来之前，开发人员想实现这些实时的 Web 应用，其中最常用的就是轮询 (Polling) 和 Comet 技术。 3.Comet 技术实际上是轮询技术的改进，分为两种实现方式，一种是长轮询机制，一种称为流技术。 4.轮询: 客户端