摘要: 基于 vue-cli3.0 的 lib-flexible 适配方案 第一步:下载安装相关依赖 第二步:创建 vue.config.js 文件并配置 第三步:在 main.js 中引入 lib-flexible 以上就是基于 lib-flexible 在 移动端H5 的适配处理方案。当然这不是唯一的方 阅读全文
posted @ 2020-09-10 16:08 Magi黄元 阅读(561) 评论(0) 推荐(0) 编辑
摘要: 在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配。秉着求知的思想,今天决定对他的原理进行分析。目前网上比较主流使用的就是淘宝方案和网易的解决方案,所以今天我就从这两方面入手深度了解这两个方案。 网易转换rem分析 首先网易的设计稿是 阅读全文
posted @ 2020-09-10 15:14 Magi黄元 阅读(535) 评论(0) 推荐(0) 编辑
摘要: 这篇文章讲讲浏览器的事件循环(nodejs中的事件循环稍有不同),事件循环是js的核心之一,因为js是单线程,所以异步事件实现就是依赖于事件循环机制,理解事件循环可让我们更清晰的处理js异步事件和应对各种异步事件的面试题。 事件循环 首先,我们来解释下事件循环是个什么东西: 我们所知,浏览器的js是 阅读全文
posted @ 2020-09-10 10:55 Magi黄元 阅读(533) 评论(0) 推荐(0) 编辑
摘要: 【Loader】: 用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为data URL。比如说:CSS-Loader,St 阅读全文
posted @ 2020-09-10 09:21 Magi黄元 阅读(2254) 评论(0) 推荐(0) 编辑
摘要: 1 知识体系 1.1 从URL输入到页面加载 首先我们需要通过 DNS(域名解析系统)将 URL 解析为对应的 IP 地址,然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接,随后我们向服务端抛出我们的 HTTP 请求,服务端处理完我们的请求之后,把目标数据放在 HTTP 响应里返回给客 阅读全文
posted @ 2020-09-08 10:58 Magi黄元 阅读(2233) 评论(0) 推荐(2) 编辑
摘要: 前言 最近看到一道非常经典的面试题,感觉非常有趣: setTimeout(() => { console.log(1); }, 0); new Promise((resolve) => { console.log(2); resolve(); }).then(() => { console.log( 阅读全文
posted @ 2020-09-08 01:01 Magi黄元 阅读(136) 评论(0) 推荐(0) 编辑
摘要: 一、 输入URL,回车 敲击某个键时,键盘内的处理器会先对键矩阵进行分析,然后将数据发送到计算机 计算机接收到来自键盘的信号,由键盘控制器(一种集成电路)进行处理,发送给操作系统 操作系统会分析,这些数据是否为系统命令,若不是,则将数据传给应用程序。 应用程序会分析这些数据是否为命令,如果不是命令, 阅读全文
posted @ 2020-09-07 16:45 Magi黄元 阅读(261) 评论(0) 推荐(0) 编辑
摘要: 前端的打包工具从之前的browserify、grunt、gulp到现如今的rollup、webpack,涌现出了很多优秀的打包工具。 首先,这次项目用到的是vue的全家桶,在webpack的配置方面直接用的是vue-cli生成的默认配置,项目打包完成后发现生成的vendor.js文件体积特别大,其次 阅读全文
posted @ 2020-09-07 05:28 Magi黄元 阅读(498) 评论(0) 推荐(0) 编辑
摘要: //本地缓存,记录token function set(type, value) { localStorage.setItem(type, value); } function get(type) { return localStorage.getItem(type); } 1、定义常量 var t 阅读全文
posted @ 2020-08-27 15:30 Magi黄元 阅读(4685) 评论(2) 推荐(0) 编辑
摘要: CORS 通过控制 Access-Control-Allow-Origin 控制哪些域名可以共享资源,取值如下 Access-Control-Allow-Origin: <origin> | * 其中 * 代表所有域名,origin 代表指定特定域名,那如何设置多个域名了? 此时需要通过代码实现,根 阅读全文
posted @ 2020-08-10 11:02 Magi黄元 阅读(2365) 评论(1) 推荐(0) 编辑
摘要: 更多描述: 在编写脚本时,有时会出现内存过大发生 OOM 的事情,那我们如何得知某个进程的内存?另外又如何监控它 通过 ps 可以获知一个进程所占用的内存 $ ps -O rss -p 3506 PID RSS S TTY TIME COMMAND 3506 6984 S pts/1 00:00:0 阅读全文
posted @ 2020-07-31 17:15 Magi黄元 阅读(1255) 评论(0) 推荐(0) 编辑
摘要: 更多描述: 假设有一个字符串 `hello. hello. hello. ` 需要替换为 `AAA`,即把 `hello. ` 替换为 `A` 如果需要全量替换字符串,可以使用 String.prototype.replace(re, replacer),其中正则表达式需要开启 global fla 阅读全文
posted @ 2020-07-28 17:02 Magi黄元 阅读(194) 评论(0) 推荐(0) 编辑
摘要: 如果有 x-forwarded-for 的请求头,则取其中的第一个 IP,否则取建立连接 socket 的 remoteAddr。 而 x-forwarded-for 基本已成为了基于 proxy 的标准HTTP头,格式如下,可见第一个 IP 代表其真实的 IP,可以参考 MDN X-Forward 阅读全文
posted @ 2020-07-28 11:01 Magi黄元 阅读(329) 评论(0) 推荐(0) 编辑
摘要: 由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同,因此绘制成图片数据的 CRC 校验也不一样。 function getCanvasFp () { const canvas = document.getElementById('canvas') const ctx = canvas 阅读全文
posted @ 2020-07-28 10:27 Magi黄元 阅读(13384) 评论(0) 推荐(0) 编辑
摘要: 1-单项链表 function LinkedList() { let Node = function(element) { // 辅助类,表示要添加到链表中的项 this.element = element; this.next = null; //next属性是只想链表的下一个节点的指针 }; l 阅读全文
posted @ 2020-07-28 09:54 Magi黄元 阅读(152) 评论(0) 推荐(0) 编辑
摘要: 启用压缩,让页面加载更快 在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对代码进行混淆压缩,只为了让js,css文件变得更小,加载更快。但只是这样做是不够的,我们还可以做得更极致。 gzip是Web世 阅读全文
posted @ 2020-07-17 09:49 Magi黄元 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 恢复内容开始 背景 数组并不总是组织数据的最佳数据结构,原因如下。在很多编程语言中,数组的长度是固定的,所以当数组已被数据填满时,再要加入新的元素就会非常困难。 在数组中,添加和删除元素也很麻烦,因为需要将数组中的其他元素向前或向后平移,以反映数组刚刚进行了添加或删除操作。 然而,JavaScrip 阅读全文
posted @ 2020-07-10 14:57 Magi黄元 阅读(299) 评论(0) 推荐(0) 编辑
摘要: 学习方式 分类刷题:很多第一次接触力扣的同学对于刷题的方法不太了解,有的人跟着题号刷,有的人跟着每日一题刷,但是这种漫无目的的刷题方式一般都会在中途某一天放弃,或者刷了很久但是却发现没什么沉淀。这里不啰嗦,直接点明一个所有大佬都推荐的刷题方法:把自己的学习阶段分散成几个时间段去刷不同分类的题型,比如 阅读全文
posted @ 2020-07-09 15:44 Magi黄元 阅读(660) 评论(0) 推荐(0) 编辑
摘要: 因为我在慕课网上讲了几门算法课程,所以经常收到一些同学的提问。除了技术性的问题,一个很常见的问题就是:老师,我觉得算法好难,自己不够聪明,要花好长时间才能理解一个算法,刷题效率也很低,半天能过一道题就不错了,我该怎么办? 关于如何学习算法,如何刷题,或者到底要不要刷题,有时间我再写更多的文章总结。有 阅读全文
posted @ 2020-07-08 10:42 Magi黄元 阅读(219) 评论(0) 推荐(0) 编辑
摘要: JSX简介 JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在Javascript里面写XML,因为JSX的这个特性,所以他即具备了Javascript的灵活性,同时又兼具html的语义化和直观性。 应用场景 为了让大家更方便的去理解JSX的作用及用法,小 阅读全文
posted @ 2020-07-08 10:08 Magi黄元 阅读(189) 评论(0) 推荐(0) 编辑
摘要: 先总结: Set1. 成员不能重复2. 只有健值,没有健名,有点类似数组。3. 可以遍历,方法有add, delete,hasweakSet 1. 成员都是对象 2. 成员都是弱引用,随时可以消失。 可以用来保存DOM节点,不容易造成内存泄漏 3. 不能遍历,方法有add, delete,has M 阅读全文
posted @ 2020-06-15 15:53 Magi黄元 阅读(848) 评论(0) 推荐(0) 编辑
摘要: 垃圾回收机制 通常情况下,垃圾数据回收分为手动回收和自动回收两种策略。 手动回收策略,何时分配内存、何时销毁内存都是由代码控制的。 自动回收策略,产生的垃圾数据是由垃圾回收器来释放的,并不需要手动通过代码来释放。 JavaScript 中调用栈中的数据回收 JavaScript 引擎会通过向下移动 阅读全文
posted @ 2020-06-13 12:18 Magi黄元 阅读(834) 评论(0) 推荐(0) 编辑
摘要: Nginx一直跟我们息息相关,它既可以作为Web 服务器,也可以作为负载均衡服务器,具备高性能、高并发连接等。 1.负载均衡 当一个应用单位时间内访问量激增,服务器的带宽及性能受到影响, 影响大到自身承受能力时,服务器就会宕机奔溃,为了防止这种现象发生, 以及实现更好的用户体验,我们可以通过配置Ng 阅读全文
posted @ 2020-06-11 21:27 Magi黄元 阅读(690) 评论(0) 推荐(0) 编辑
摘要: 区分起来是非常简单的,构成的名词【上】是初级单词,“上面”的意思,要是想知道每个句型的含义,只需要掌握这三个助词【に】【で】【は】的含义, 这些在初级课程里已经学过,自然就很容易知道「~上に」「~上で」「~上は」「~上」这四个句型的含义了。 具体的解析如下: 1「~上(うえ)に」 【~上に】=【~上 阅读全文
posted @ 2020-06-11 11:42 Magi黄元 阅读(2156) 评论(0) 推荐(0) 编辑
摘要: MVC 上个世纪70年代,美国施乐帕克研究中心,就是那个发明图形用户界面(GUI)的公司,开发了Smalltalk编程语言,并开始用它编写图形界面的应用程序。 到了Smalltalk-80这个版本的时候,一位叫Trygve Reenskaug的工程师为Smalltalk设计了MVC(Model-Vi 阅读全文
posted @ 2020-06-11 11:13 Magi黄元 阅读(187) 评论(0) 推荐(0) 编辑
摘要: 意图 原型模式是一种创建型设计模式, 使你能够复制已有对象, 而又无需使代码依赖它们所属的类。 问题 如果你有一个对象, 并希望生成与其完全相同的一个复制品, 你该如何实现呢? 首先, 你必须新建一个属于相同类的对象。 然后, 你必须遍历原始对象的所有成员变量, 并将成员变量值复制到新对象中。 不错 阅读全文
posted @ 2020-06-11 10:26 Magi黄元 阅读(202) 评论(0) 推荐(0) 编辑
摘要: 单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点。有些对象只需要一个,这时可用单例模式。 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance才能获得该单例 function Singleton(name) { this.name = nam 阅读全文
posted @ 2020-06-11 09:53 Magi黄元 阅读(392) 评论(0) 推荐(0) 编辑
摘要: 单例模式是一种创建型设计模式, 让你能够保证一个类只有一个实例, 并提供一个访问该实例的全局节点。 问题 单例模式同时解决了两个问题, 所以违反了单一职责原则: 保证一个类只有一个实例。 为什么会有人想要控制一个类所拥有的实例数量? 最常见的原因是控制某些共享资源 (例如数据库或文件) 的访问权限。 阅读全文
posted @ 2020-06-11 09:13 Magi黄元 阅读(330) 评论(0) 推荐(0) 编辑
摘要: 关于 JSBridge,绝大多数同学最早遇到的是微信的 WeiXinJSBridge(现在被封装成 JSSDK),各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能,为用户提供相关的功能。 JSBridge 很早就出现在软件开发中,在一些桌面软件中很早就运用了这样的形式,多用在通知 阅读全文
posted @ 2020-06-10 22:02 Magi黄元 阅读(1273) 评论(0) 推荐(0) 编辑
摘要: 插槽内容 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件: <navigation-link url="/profile"> Your Profile </navigation-link> 在 <navigation-link> 的模板中 阅读全文
posted @ 2020-05-22 09:31 Magi黄元 阅读(221) 评论(0) 推荐(0) 编辑
摘要: 基本查询 假设表名是students,要查询students表的所有行,我们用如下SQL语句: SELECT * FROM students; 条件查询 SELECT语句可以通过WHERE条件来设定查询条件,查询结果是满足查询条件的记录。例如,要指定条件“分数在80分或以上的学生”。 SELECT 阅读全文
posted @ 2020-05-21 09:29 Magi黄元 阅读(301) 评论(0) 推荐(0) 编辑
摘要: 计算机的核心是CPU,它承担了所有的计算任务。它就像一座工厂,时刻在运行。 2 假定工厂的电力有限,一次只能供给一个车间使用。也就是说,一个车间开工的时候,其他车间都必须停工。背后的含义就是,单个CPU一次只能运行一个任务。 3 进程就好比工厂的车间,它代表CPU所能处理的单个任务。任一时刻,CPU 阅读全文
posted @ 2020-05-21 00:38 Magi黄元 阅读(863) 评论(0) 推荐(0) 编辑
摘要: 概念 线程:是操作系统能够进行运算调度的最小单位。是进程中的一个执行流程,一个进程中可以运行多个线程。 进程:一个执行中的程序的实例。 进程 与 线程 的区别 一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。另外,进程在执行过程中拥有独立的内存单元, 阅读全文
posted @ 2020-05-20 00:30 Magi黄元 阅读(421) 评论(0) 推荐(0) 编辑
摘要: 直接法把十进制转八进制或者十六进制,按照除8或者16取余,直到商为0为止。 下面用JavaScript实现一下 var Stack = (function () { var items = new WeakMap(); //先入后出,后入先出 class Stack { constructor() 阅读全文
posted @ 2020-05-19 23:48 Magi黄元 阅读(678) 评论(0) 推荐(0) 编辑
摘要: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你在不触动警报装置的情况下,能够偷窃到的最高金额。 示例 1: 输 阅读全文
posted @ 2020-05-19 21:20 Magi黄元 阅读(367) 评论(0) 推荐(0) 编辑
摘要: Number.isNaN 对比 isNaN typeof NaN 'number' 由于NaN 是 number 类型。 所以不能直接区分出 NaN 和普通数字。 甚至对于 NaN 和 普通数字,当调用 Object.prototype.toString.call 方法时都会返回 [object N 阅读全文
posted @ 2020-05-16 22:54 Magi黄元 阅读(1254) 评论(0) 推荐(0) 编辑
摘要: 假名【く】,它的外貌特征:像箭头←,那么箭头是表示方向的。那么【く】这个假名在训读单词中,就有“表示方向”的含义。列举出一些一个汉字的名词、一个汉字的动词、一个汉字的形容词、全部假名的单词来给大家详细讲解。 例:行(い)く◎(去【动词】)いー一、一个;移,移动。くー箭头,表方向。 往一个方向移动,就 阅读全文
posted @ 2020-05-13 01:59 Magi黄元 阅读(734) 评论(0) 推荐(0) 编辑
摘要: 目录 1. 计算机网络体系结构 1.1 简介 定义 计算机网络的各层 + 其协议的集合 作用 定义该计算机网络的所能完成的功能 1.2 结构介绍 计算机网络体系结构分为3种:OSI体系结构、TCP / IP体系结构、五层体系结构 OSI体系结构:概念清楚 & 理念完整,但复杂 & 不实用 TCP / 阅读全文
posted @ 2020-05-13 01:50 Magi黄元 阅读(150) 评论(0) 推荐(0) 编辑
摘要: JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。 一、跨域认证的问题 互联网服务离不开用户认证。一般流程是下面这样。 1、用户向服务器发送用户名和密码。 2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等 阅读全文
posted @ 2020-05-12 02:54 Magi黄元 阅读(286) 评论(0) 推荐(0) 编辑
摘要: Cookie是什么 Cookie是服务端发送到用户浏览器并且保存到本地的一小块数据,它会在浏览器下次向同一服务器发起请求时,被携带到服务器上。 它的作用: 经常用来做一些用户会话状态管理、个性化设置等等。 前端可以通过document.cookie来访问cookie。 cookie是跨域的,也就是在 阅读全文
posted @ 2020-05-11 16:59 Magi黄元 阅读(972) 评论(0) 推荐(0) 编辑