- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 移动端布局方案汇总&&原理解析
阿里flexible布局 - 版本1.x该布局于 2017年8月9日被2.0版本取代实现原理 假设（UI稿750px宽）设置viewport的 scale = 1/window.devicePixelRatio将屏幕分成10份，font-size = 实际屏幕宽度 / 10;开发时直接填写(设计稿DOM宽度)px利用 px2rem插件 转换为 -> 实际rem阿里f...
2019-03-21 14:03:44
136
原创 React Ref 其实是这样的
大家好，我是Mokou，好久没有冒泡了，最近一直在看研究算法和数据结构方面的东西，但是似乎很多前端不喜欢看这种东西，而且目前本人算法方面也很挫，就不献丑了。当然了，最近也开始研究React了，这篇文章主要是讲述 Ref 相关的内容，如有错误请指正。ref 的由来在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件/元素。适合使用 refs 的情况：管理焦点，
2020-10-15 10:40:31
423
原创 Vue3.x 深入浅出系列（连载三）
大家好，我是Mokou，最近一直在做 vue3 相关内容，比如源码解析和mini-vue3的开发。回顾下前几章的内容，在前几章中主要讲述了以下内容。新构建工具 vite 的原理和从零开始实现vue3 使用新姿势新api：reactive 使用和源码解析追踪收集 track 实现和源码解析追踪触发器 trigger 实现和源码解析响应式核心 effect 与 track、trigge...
2020-07-23 02:32:24
436
原创 时间切片的实现和调度（原创2.6万字）
本人系一个惯用Vue的菜鸡，恰巧周末和大佬扯蛋，峰回路转谈到了fiber，被大佬疯狂鄙视...大佬还和我吐槽了现在的忘了环境百度是不可信的，百度到的东西出来广告其他都是出自同一个作者（大部分情况确实这样）很多水文都是以 copy 的形式产生的，你看到的文章说不定已经过时好几个版本了（大部分情况确实这样）于是本菜开始了 React Fiber 相关的读源码过程。为什么看 Fiber？因为...
2020-05-27 03:03:53
933
原创 这可能是最通俗易懂的 webpack 知识全景图
webpackwebpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。Webpack 核心概念：Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Output（出口）：指示 webpack 如何去输出、以及在哪里输出Module（模块）：在 Webpack 里一切皆模块，一个模块对应...
2020-05-21 06:48:28
274
原创 高频面试手写代码满分答案！ （2w字）
循序渐进，越往后越难！！！实现浅拷贝如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。针对引用类型我们需要实现数据的拷贝。用 ... 实现const copy = {...{x:1}}复制代码用 Object.assign 实现const copy = Object.assign({}, {x:1})复制代码用 slice 实现...
2020-03-23 06:22:54
130
原创 2019年度最常见的JavaScript面试题和答案
2019年度已经过去了，2020年面试高峰期又来了。经过2019年的学习和面试经历，统计了下面一些最常见的面试题。JavaScript 中的强制转型（coercion）是指什么？难度：简单在 JavaScript 中，两种不同的内置类型间的转换被称为强制转型。强制转型在 JavaScript 中有两种形式：显式和隐式。这是一个显式强制转型的例子：var a = "42";var b...
2020-03-11 08:47:58
662
原创 如何写出优雅健壮的代码？
一直以来，关于“代码规范”的话题都备受关注，业界甚至有很多流传甚广的段子不断调侃之。既然代码规范能引起这么大的共鸣，那么今天我们谈谈一个程序员的自我修养——如何写出优雅的代码？一、接口的流畅性好的接口是流畅易懂的，他主要体现如下几个方面：简单操作某个元素的css属性，下面是原生的方法:document.querySelectorAll('#id').style.color = 're...
2020-03-05 07:45:45
175
原创 手摸手：webpack 3秒打包一个three.js项目（有物证）
关于 webpack 相关的文章太多了，何不一起从零开始手写一个配置呢？真的3秒能打包一个three.js项目吗？真的，后面会提供源文件地址哦。要打包的项目是这个样子的。从零开始关于 three.js 的安装和使用部分都省略。首先是最基础的。我们需要安装cross-env 目前最流行的运行跨平台设置和使用环境变量的脚本webpack + webpack-cli + webpa...
2020-03-04 07:39:44
946
原创 React用户安全的第一道防线
React用户安全的第一道防线是什么？React是怎么预防XSS攻击的？首先简单介绍下JSX当你在写 JSX 时，其实你在调用createElement方法。React.createElement( /* type */ 'marquee', /* props */ { bgcolor: '#ffa7c4' }, /* children */ 'hi')复制代码createE...
2020-02-28 02:07:52
303
原创 （看完必会系列）Vue源码解析之 keep-alive
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，我们来探究一下它的源码实现。首先回顾下使用方法举个栗子<keep-alive> <component-a v-if="isShow"></component-a> <component-b v-else></component-b>...
2020-02-13 04:42:48
243
原创 字节跳动面试官：请说一下vuex工作原理（重点就几行代码而已啦）
不知为何掘金的文章最近都流行以 "字节跳动面试官" 作为开头，不蹭一波都不好意思说逛过掘金了。23333最近是真到了面试的季节，那么就说一下 Vuex 的源码吧。看完你会发现，Vue和Vuex的实现原理主要就那么几行代码。Vue双向绑定要说 Vuex 的双向绑定那么必须先从 Vue 的双向绑定开始Vue 的双向绑定大部分文章都说的很详细，这里精简点说一下，因为重点还是讲 Vuex从Vue...
2020-02-10 07:49:42
892
原创 React 函数式组件和类组件的区别，不是只有state和性能！
与React类组件相比，React函数式组件究竟有何不同？一般的回答都是：类组件比函数式组件多了更多的特性，比如 state，那如果有 Hooks 之后呢？函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别，但性能差异可以忽略不计。参考官网：(zh-hans.reac...
2020-01-16 07:37:51
5215
原创 "可插拔式"组件设计，领略组件开发的奥秘
从一个 Confirm 组件开始，一步步写一个可插拔式的组件。处理一个正常的支付流程（比如支付宝购买基金）点击购买按钮如果风险等级不匹配则：弹确认框（Confirm）用户确认风险后：弹出支付方式选择弹窗（Dialog）选择好支付方式后：弹窗调用指纹验证（Dialog）如果关闭指纹验证：提示是否输入密码（Dialog）弹出输入密码的键盘（自定义键盘）当然还有密码加班如果密码输入错...
2020-01-09 10:19:42
700
原创 手摸手。完成一个H5 抽奖功能
要完成一个这样的抽奖功能构思奖励物品是通过接口获取的（img）奖励结果是通过接口获取的（id）抽奖的动画需要由慢到快再到慢抽奖转动时间不能太短抽奖结束需要回调业务代码和功能代码要分离先完成一个 UI使用 flex 来布局，easy，当 curGameIdx 等于当前奖品 index 时高亮html <div class="game-box"> ...
2020-01-06 08:10:45
307
原创 React Hooks 完全指南，读React作者博文感悟（2W字精华）
阅读 facebook大佬：Dan Abramov 的文章颇有感悟大佬 github地址 github.com/gaearon重点总结useEffect 是同步的状态是捕获的当前 props 和 state可以通过 useRef 获取改变后的 props 和 state依赖项 [] 不能欺骗复杂的状态变化应该使用 useReducer可以使用 useCallback 设置...
2020-01-03 06:38:39
191
原创 css 常用知识点整理
努力学习与总结是对自己能力的提升，也希望能帮助到同学们。BFC块状格式化上下文（block formatting context）简称 BFC：是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。如何触发BFC？根元素（html）: 最大的BFCposition 设置为 fixed 或者 absolutedisplay 设置为 inline-block 、table-...
2019-12-31 02:04:54
190
原创 webpack 原理分析与性能优化（2w字精华）
webpackwebpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。Webpack 核心概念：Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖...
2019-12-25 02:14:23
394
原创 经典大厂前端面试题（含解析）函数篇(二)
金三银四就要到了。整理整理面试题。整篇文章都与JS的函数相关。从函数的定义开始每个函数实际上都是一个 Function 对象，即： (function(){}).constructor === Function函数是 头等对象/一等公民函数可以像任何其他对象一样具有属性和方法可以赋值给变量（函数表达式）可以作为参数传递给函数（高阶函数）可以作为另一个函数的返回值（闭包）...
2019-12-23 08:13:55
243
原创 经典大厂前端面试题（含解析）基础篇(一)
年关将近，金三银四跳槽季要来了，开始整理面试题基础类型有哪些？基本类型有七种nullundefinedbooleannumberstringsymbol（较新标准）BigInt（新标准）NaN 也属于 number 类型，并且 NaN 不等于自身基础类型的特性是什么？基本类型的值是保存在栈内存中的简单数据段基础类型是不可变的即不能强行修改：Array.proto...
2019-12-18 02:32:05
139
原创 十分钟掌握JS设计模式
JS 设计模式面向对象思想：封装、继承、多态1. 构造器模式无非就是继承来实现的啦 - -!构造器模式案例省略...思考：为什么ES5的继承要写在 prototype 中，而不是直接写在构造方法里？答：写在构造器中，无法做到数据共享（会造成资源浪费）所以 prototype 中会存放需要共享数据的方法和属性（基本上都是方法）而构造器中会存放不需要共享的属性和方法2. 模块...
2019-12-17 02:33:58
103
原创 Flutter的SPA实战，路由拦截器，全局Toast Loading
全局Toast/Loading问题在Flutter开发中，全局的Toast/Loading很狗血，实现已有的实现方法都不是很人性化。最近在Dio做请求拦截器的时候Overlay一直获取不到context，每个页面进入都存一遍很不方便，如果在MaterialApp中存context，那么调用Navigator.of(context).pushReplacementNamed等removeUtils...
2019-09-20 09:25:52
669
原创 搭建一个好用的API Mock服务
上篇文章讲述了怎么用Node实现一个API服务现在开始讲述如何搭建一个好用的API Mock服务达到的效果：在开发环境中就可以在url后面添加?ismock=1参数来实现数据mock，(没有该参数就访问正常数据)，且不会对测试环境和生产环境造成任何影响实现步骤：通过Webpack设置代理。 //webpack.config.js proxy: { '...
2019-08-20 03:21:59
152
原创 造轮子：用Node写一个API Mock
使用Node写一个Mock服务实现思路：读取mock文件夹遍历.js文件尝试导入文件内容将文件内容拼接成一个对象将请求类型 + 空格 + 请求地址作为key当收到的请求能在js对象中找到就返回结果找不到结果返回404获取文件内容 // ./src/utils/getMock.js const fs = require('fs'); const pat...
2019-08-20 02:36:08
124
原创 Flutter官方WebView使用
使用过人气很高的flutter_webview_plugin，但是缺少2个重要的功能。也在打开多个WebView时会出错。不能在JS中调用Flutter方法不能在H5进入某个URL之前拦截虽然该插件不够完整，但是使用起来很方便，封装了很多功能。如果交互不多可以用该插件。官方的 webview_flutter之后使用官方的webview_flutter插件。附：在老版本的 Flut...
2019-07-19 08:57:21
316
原创 Flutter 局部路由实现
Flutter是借鉴React的开发思想实现的，在子组件的插槽上，React有this.props.children，Vue有<slot></slot>。当然Flutter也有类似的Widget，那就是Navigator，不过是以router的形式实现（像<router-view></router-view>？？？）。Navigator的使用无非...
2019-06-10 09:22:06
430
原创 Flutter各种API使用
将Flutter各种Widget各种API都实现一次。用于给初学者提供Flutter可视化Widget，方便初学者学习和使用，同时给自己的Flutter提供备忘、代码copy功能。点击Widget清单的按钮会跳转到各自对应的Widget实现页面。项目代码地址 github.com/zhongmeizhi…参考链接：开发文档功能齐全的flutter项目...
2019-06-06 07:51:30
217
原创 Flutter实战
经过一个月的努力，终于出成果了。 一个功能齐全的 flutter 金融理财APP项目，使用Node作为后台系统，使用了少量plugin，大体功能自己封装。源码在GitHub，以便学习交流。github.com/zhongmeizhi…寻找Flutter的爱好者，一起探讨交流学习。...
2019-05-27 02:21:58
47
原创 最全的前端模块化方案
模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容CommonJSAMD 及 核心原理实现CMD 及 核心原理实现UMD 及 源码解析ES6 Modulewebpack打包策略CommonJS同步加载CommonJS API是以在浏览器环境之外构建 JS 生态系统为目标而产生的项目如果没有写后缀名Node...
2019-04-25 02:51:46
207
原创 你真的懂JavaScript基础类型吗
夯实Javascript基础。基本类型有六种： null，undefined，boolean，number，string，symbol。基本类型的值是保存在栈内存中的简单数据段基础类型特性基础类型最重要的特性基础类型是不变的因此：基础类型没有splice，sort之类的直接改变变量的方法强行改变基础类型会报错 // str 不能调用 Array的 sort 和 spli...
2019-04-03 11:46:32
95
原创 Javascript运行机制
Javascript是一种单线程开发语言。理解Javascript的运行机制是日常编码必须要掌握的技能。为什么是单线程？JavaScript的主要用途是与用户交互，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。假设：如果JavaScript支持多线程，一个线程在某个DOM节点上添加内容，另外一个线程删除了这个节点，那么浏览器该以哪个线程为准呢？单线程的缺点单...
2019-04-01 10:05:09
89
原创 async await详解
async await本身就是promise + generator的语法糖。本文主要讲述以下内容async awiat 实质async await 主要特性async await 实质下面使用 promise + generate 实现 async await // 转换目标 async1 // async function async1() { // ...
2019-04-01 09:58:30
234
原创 深挖 NPM 机制
使用NPM安装的时候会经常出现包冲突（比如多个主模块的子模块版本不一致等），导致在开发过程中会遇到各种或大或小的问题。所有在这会介绍以下内容：NPM 主要安装方式NPM 包信息查询NPM 安装机制（主要）安装&查询命令NPM 各种安装方式npm install packageName[@next | @versionNumber]在 node_modules 中没...
2019-03-28 10:55:49
136
原创 关于跨域问题
面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它是一个用于隔离潜在恶意文件的重要安全机制。同源即协议、域名、端口三者一致。不同源即跨域。如果没有同源策略会怎么样？比如：当你访问了 饼夕夕的网站// HTML// 饼夕夕.com 内嵌 拼多...
2019-03-26 14:13:25
103
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人