- 博客(36)
- 收藏
- 关注
RSS订阅原创 async/await节约了什么代码？
大概几年前，我就学了async/await。但是仅限于能用，不知其中奥秘。这篇文章从如何优雅偷懒说一下async/await。
2022-12-12 11:42:29
258
1
原创 this关键字，是如何把你难倒的？
简单说，this就是属性或方法“当前”所在的对象。层层嵌套，改变了this对象对象自动携带this,或者全局默认有this对象操作dom的时候，this对象变得扑朔迷离。JavaScript 的变量类型一样，看看这三种类型的变量，是不是更容易理解this了？局部变量被捕获变量全局变量。
2022-12-09 17:34:12
524
原创 作为技术面试官，考什么前端知识点（一）
在公司负责前端的技术面试的时候，总结了一些基础的题目。题目多数是我自己出题，我自己答得上的题目，才去考面试者。 这篇主要是快问快答系列，回答越流畅，基础就越好！
2022-12-07 10:37:28
231
原创 项目复盘：cocos-creator合成大西瓜的屏幕适配方案
复盘cocos-creator合成大西瓜的屏幕适配方案的时候，忽然感觉没话可说，但是当时遇到屏幕适配不了的时候，却又是挣扎的很。首先，背景适配大部分手机。设计稿尺寸大于设置的canvas屏幕分辨率，比如我们的设计稿是10001624，canvas的屏幕分辨率是采用通用的7201280，等高Fit Height适配。蓝色的框就是canvas的屏幕分辨率7201280，运行在浏览器的时候，蓝色线框外围的内容是被切除的。看下图预览效果图。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上
2021-07-30 17:33:08
282
1
原创 注意到这些，Cocos Creator 坐标系不再迷糊
看完官方文档： Cocos Creator 坐标系，写完合成大西瓜，仍然对坐标系，参照标准，位置的确定这些问题，显得十分迷糊。将世界坐标系、屏幕坐标系、子节点与父节点搞清楚后，好像还是不能理解这些坐标位置的产生。推本溯源后惊觉：canvas根节点，本身就是一个节点。注意到这一点，就是不再犯迷糊的起点。来看看canvas的Node节点属性canvas作为根节点，位置position,锚点anchor和宽高size是上锁的不让修改的。我们要关注的是：位置position,锚点anchor这两
2021-07-29 10:53:11
2170
原创 项目复盘： cocos-creator合成大西瓜自定义首页模板、简化发布流程
由于项目交付日期比较紧张，有了一次改安装系统文件的失败经历后，我每次发布都手工改文件????。事情是这样的：起先看到文章说修改cocos-creator的dashboard的安装包文件里的模板文件就可以自定义首页，修改标题，去掉cocos-creator的LOGO，更改进度条样式等等。于是找到文件进行修改，结果整个cocos-creator编辑器编译功能都奔溃了。人工改文件是这样的： 每次cocos-creator编译打包好之后，将自己原先备份好的html,css文件覆盖掉刚刚编译过的文件，再一起上传到
2021-07-28 14:39:21
1097
原创 项目复盘： cocos-creator合成大西瓜游戏实现资源分离，部署CDN
不要轻易说不行，提出问题，想办法解决问题后期验收的时候，客户要求制作精良震撼的烟花效果图，设计甩来了10M的动画帧图集。我当时就抱怨图太大，严重拖垮项目。而理智告诉我，遇到问题，正是我们增长智慧的时候。于是我想到了cdn缓存图片。因为cocos-creator集合了打包流程，可以让新手傻瓜式编译成程序文件，但是也让新手感到困惑，不知道该怎么缓存图片。所有的预制体，所有的图片，我们在cocos-creator编辑器里面都是在本地拖拽使用的。按照之前的做法是要把图片文件放在cdn服务器上，再通过绝对路径去
2021-07-28 10:05:18
852
原创 自用cocos-creator的position和anchor属性图例
图例说明：运用这个图可以直观的看到画布上四个边界的position值。图例说明：运用这个图片可以轻松改变元素的锚点。通常我们使用label标签的时候设置锚点在元素的最左边，也就是anchor(0,0.5)，原本的x=0.5,移动到左边x=0....
2021-07-23 15:14:36
869
1
原创 Flex容易遗忘的部分
结合自己屡屡记忆又常常忘记的体质，把Flex容易遗忘的部分记录在文档中吧。属性融合写法，导致自己经常不认识的属性1. flex-flow是flex容器盒子的flex-direction和flex-wrap的融合写法。2. flex:1是flex-grow、flex-shrink 、flex-basis的融合写法。flex-shrink 、flex-basis两个可以省略，故flex:1代表的是flex-grow.最容易混淆的属性1. justify-content vs align-conte
2021-06-28 15:17:51
104
原创 构造函数的prototype属性怎么来的？
问题① 怎么把不同的实例对象联系起来呢？答案：使用继承问题② 如果使用继承的话，那就是类了，不想使用类答案：看到c++和java都是用new 关键字，那么我们也用new 关键字命令生成对象。看到c++和java写类的时候，都要先初始化调用constructor构造函数，不如简化语言，new关键字用来调用构造函数吧。这个被new的构造函数就是对象的原型。问题③ 每一个实例对象都有自己的属性和方法的副本，没办法共享，很浪费资源答案： 为构造函数加一个prototype属性，prototype也是一个对
2021-06-23 09:58:45
127
原创 在浏览器上调试公众号网页的操作流程
痛点说明在实际开发过程中，公众号或者小程序开发都涉及到授权登录，我们最初原始的做法都是写好代码后，发布在测试环境中，然后再进行调试，有一个头痛的点在于如果你要验证你的想法，改动js的话，那么必须重新打包编译。打包和发布都是非常耗时的。引出痛点：是不是可以在开发环境的热更新过程中实现调试公众号网页呢？跟微信交互获取access-token，access-token是我们的服务器跟微信交互的凭证。通常有两种方法把access-token用于接口凭证交互。服务端通过access-token来判断用户是否登录微
2021-05-31 14:42:26
1986
翻译 标签、类和ID选择器（翻译）
在这节中，我们检查一些最简单的选择器，这些可能是日后工作中频繁使用的。标签一个标签选择器通常称为标签选择器或者元素选择器，因为是在你文档中选择HTML的标签／元素。下面例子中，我们使用了span em和strong选择器。尝试增加CSS规则去选择h1元素去修改它的颜色为蓝色。span { background-color: yellow;}strong { color: rebeccapurple;}em { color: rebeccapurple;}&l
2021-05-12 11:56:13
191
翻译 CSS选择器(翻译)
CSS选择器(翻译)原文链接在CSS中，当我们想要给自己的网页添加样式的时候，选择器用于选择其中的HTML标签元素。很多CSS选择器都是可以使用的，当我们选择一个元素要给它样式的时候，可以做到更细粒度的精确。在这篇文章以及子章节中，我们将详细地罗列出各种不同类型的CSS选择器，看看他们是怎么工作的。什么是选择器？你已经看过选择器了。一个CSS选择器是CSS规则的第一部分。是一种元素和符号连接器的形式，告诉浏览器哪些HTML元素希望被选择到且利用CSS规则给它CSS的属性值，让CSS规则在这些元素上生
2021-05-11 15:38:30
815
翻译 CSS基础-层叠和继承（翻译）
层叠性和继承性这节的目标是让你形成CSS的基本概念的认识-层叠性和权重和继承性-这些特性使得CSS能应用在html网页上以及应用时发生冲突是如何解决的。在学这节的时候，你可能会感觉相对于其他章节，这节是没有太多必要，太过学术性的。但是这些概念的的理解会让你减少很多烦恼。我们建议你仔细阅读这章节以及反复检查自己对基本概念的理解，打好基础，让你走的更远。冲突原则CSS解释为层叠样式表，第一个词是层叠是很关键的概念，样式层叠的表现是理解CSS的关键。有时候你写了一个项目，你发现你写的样式并没有得到你想要
2021-05-10 17:29:01
268
1
原创 浮动之后，宽和高去哪里了？CSS的一些误区（二）
往期回顾：CSS的一些误区（一）一、浮动带来的问题内盒浮动，外层包裹的盒子高度塌陷，与自己预期不符。内盒必须全部浮动，得安排内盒得浮动方向，没有默认，都必须显式设置。使用外盒使用overflow:hidden清除浮动，但是内盒使用margin负值等情形，造成页面被截断。这些是过去几年中，如果使用浮动布局产生的“尴尬返工时刻”。迎来了flex布局后，再也不使用浮动进行布局了。由此我大胆推测flex布局的发明就是为了消灭浮动。弄清楚元素浮动之后，对其自身实体产生的宽高变化，对于解决浮动产生的问题就迎
2021-04-25 17:58:37
1595
原创 自身不设置宽度，让这个盒子居中起来？
1. 自身不设置宽度，让这个盒子居中起来？这个问题能成立起来，其实有很多前置条件。① 不设置宽度也就是继承body或者父亲的宽度100%，所以一般的解题思路就是外面套盒子，给外面的盒子宽度。用定位或者margin：0 auto;实现居中效果。本质上是外盒有宽度居中了，内盒是100%继承外盒的宽度。比如：<body> <div class="outer"> <div class="inner">我居中了</div> </div>
2021-04-23 15:32:58
491
原创 当面试官问“谈谈async函数”，他究竟想知道些什么？
关于面试想要说的做前端面试官的时候，通常我找的问题会是“谈谈async函数”这种类型的。特点就是看起来很熟悉，自己也用过，是一个比较新的概念，但是自己绝不会用在复杂的业务场景中的知识点。为什么要这样来选题，原因其实在于作为面试官，筛选的是更有潜力的人，而不仅仅是具备了某些前端知识点的人。换而言之就是希望你懂，还希望你能有能力和意愿懂一些未知的知识。那这样的题目，有效吗？经过几年的面试经验，这些题目是十分有效的。原因在于这种题目像是一个漏斗。可以甄别出来选手面对问题的时候，他的独立思考和实践
2021-03-31 14:29:08
353
1
原创 前端代码审查清单
是什么？为什么？“最优秀的飞行员也会在起飞前按检查清单检查一遍飞机，没人拿生命开玩笑。我们生活和投资中的决策也应该有一个检查清单，这能使我们少遇风险。”——查理·芒格（美国著名投资家）在飞行中，飞行员无论飞行技术多好，记忆力多强，都无法预测飞行中可能发生的所有状况，这时他需要什么？他需要可以帮他防止“错、漏、忘”的检查单！项目迭代更新变得越来越复杂，上线所要注意的细节日益增多，上线之后遗忘的细节也可能导致生产环境发生重大的问题，前端上线之前，根据“错、漏、忘”的检查单可以以平和的心态提前预防上线问题的
2021-03-31 10:39:02
682
3
原创 js中的隐式转化
在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算。什么时候不会转类型？字符串的+号是连接符，不参与隐式转化当比较的两边都是引用类型。不参与隐式转化。console.log([]===[]); // false console.log({}==={}); // false工作中遇到的隐式转总结不调用方法，直接转字符串类型var num = 1; console.log(num + '')不
2020-10-21 10:56:40
99
原创 2020年9月随感(事上练）
最近看脱口秀大会，周奇墨的表演确实很稳，对比其他选手，似乎没有特别特别的出彩，但是又肯定是属于好的表演。李松蔚老师说这是普通人的技艺能达到的境界，也就是普通人的希望。 与脱口秀相比，其实我们工作，写代码也是类似的。都是一门技能，很多人认为自己不是天赋异禀，不是科班出身，好像只是做着一份工作，是没有希望的。 对，说这个，是因为我也很多时候是这样的想法。阳明心学说这是“事情在做我”，而不是我在做事情，在“事上练”。 我并没有快速有效的办法。举周老板的例子只是想表达，也许...
2020-09-17 15:43:24
188
原创 Element-Cascader 级联选择器check-strictly为true时，单选区域的优化
案例背景：使用vue和element-ui做后台管理页面，实现的是省市区的三级联动，选择区域。问题：使用单选选择任意一级选项使用此属性时 :props="{ checkStrictly: true }"时，默认的选择区域只有radio一个小圆圈，点击选项文字无效的。解决方案：分析页面上渲染出来的element组件结构，找到对应的类名。进行样式的覆盖。关于如何修改框架样式问题，可以看我之前的文章.el-cascader-menu .el-radio { display: table; ve
2020-09-15 14:10:22
9341
3
原创 vue-h5-spa单页面开发首屏加载慢的解决方案
1.将公用的js库用script引入，让浏览器并行下载资源。对于 vue、vue-router、vuex、axios等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽。参照配置2.配置路由，组件，页面。使用懒加载，在调用某个组件时在下载 某个js component: () => import(/* webpackChunkName: "about" */ './views/About.vue
2020-08-05 11:22:42
792
原创 刚刚接手的项目跑不起来？
最近刚刚接手一个新项目，代码克隆下来，发现根本跑不起来，一直如下报错：从控制台看不出来什么问题。终端报错：不合法的符号，且出现在element-ui源码里面。Unexpected token的错误一般是不认识语法，所以报语法错误。看错误的语法是jsx语法。怀疑是不是目前的依赖不支持jsx语法，所以报错。解决方案安装依赖npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue
2020-08-04 09:52:40
951
原创 分解和拆分需求，写代码的第一步
今天接到的需求是要求在商城的首页弹出一个“系统维护”的通知，20200731~20200804这段时间展示。如果不做需求的分解和拆分，我们可能是拿到图之后，马上写样式，写完测试发布。完成这个简单的需求。等等！让我们来研究一下这个简单的需求。拆分需求打开首页，展示弹窗。弹窗可以关闭。时间段的控制。每次进入页面，取当天的时间，看是不是在这段时间内。如果超过时间，或者不在控制的时间，这个弹窗通知是不需要展示的。如果用户一天内多次打开首页，每次都弹窗提示吗？问产品，答案是每天只要展示一次即可。与原有
2020-07-31 17:12:42
582
原创 微信公众号h5开发缓存解决方案
公司的积分商城项目，经常有变更临时需求，上线后，客户大部分反馈并没有更新。由此推断是页面缓存问题。而微信浏览器的缓存机制，是一贯被诟病的。各种机型测下来，用户不断的点刷新，可以解决一部分。但是如果用户不主动刷新，用户就一直看不到新版本。以下文章，从解决问题的思路出发，循序渐进给出缓存的解决方案。从前端项目的架构来说：client端 <—> nginx cache <—>源服务器我们考虑问题，从这三个方向出发，发散思维，排除问题。从自身项目 (client端
2020-07-30 18:33:00
7938
4
原创 [Vue warn]: Error in beforeCreate hook: “RangeError: Maximum call stack
记一次[Vue warn]: Error in beforeCreate hook: "RangeError: Maximum call stack解决思路： at matchRoute (vue-router.esm.js?8c4f:1643) at match (vue-router.esm.js?8c4f:1525) at redirect (vue-router.esm.js?8c4f:1585) at _createRoute (vue-router.esm.j
2020-07-24 14:38:30
6154
原创 如何修改UI框架的样式
背景问题使用element-ui的时候，想要在自己的组件内进行自定义样式。在调试器里复制了类名，在组件内部style标签样式里面重新定义值，发现更改不了探究原因style标签样式只能修改预先写好的dom，由于elment-ui采用的是组件嵌套的形式，内部的小组件还没有被注入。此时样式无法生效。解决方案方案1 ： 在需要修改的标签（图上是label标签)的父组件上加一个新类名（图上是ml-32)，然后再一个<style></style>标签。需要修改的样式写在这里方案2
2020-05-15 14:53:10
2424
原创 构建一个增删改查页面指南
需求实现效果是什么？渲染增删改查的列表页面，每条数据可以有对应的增删改查功能，同时实现分页，和列表的搜索功能。技术选型vue和elment-ui结构和要素受到《禅与摩托车维修艺术》的启发，出现问题，如何运用理性指引自己解决问题。结构： 列表，增删改查、分页、搜索要素： 布局、表格、按钮、分页组件、对话框的提交表单、提示操作对话框...
2020-05-11 17:58:14
794
原创 Canvas填充路径时使用的非零环绕规则
Canvas填充路径时使用的非零环绕规则Canvas在填充互相有交叉的路径时，使用非零环绕规则,第一次接触这个非零环绕的时候，感觉很难理解。把这个问题换成，怎么让有交叉的复合图形的一块区域不被填充。也就是交集地区不填充，比如两个嵌套关系的正方形，如何不让内层不被填充？辅助线。 在交集区域画一条终点到整体外围的线。这个线可以看作是逃离这个交际区域经过最少的轨迹。起初我是很疑惑辅助线的画法...
2020-04-28 08:53:28
211
原创 mqtt的一些概念
mqtt协议publish/subscribe模式。基于TCP/IP。支持QoS。适合于低带宽、不可靠连接、嵌入式设备、CPU内存资源紧张。MQTT有可能成为物联网的重要协议。mqtt.connect([url], options)注入url和配置项对象，返回一个mqtt客户端实例。url可以是’mqtt’, ‘mqtts’, ‘tcp’, ‘tls’, ‘ws’, ‘wss’。...
2020-04-26 15:26:57
2025
1
原创 直播前端技术预览
因为现在直播大行其道，恰逢好友指点，我开始关注直播行业的前端技术。因为没有实际的项目经验，故而先从直播的实现方式来推导前端在直播技术内的所需的知识架构。话不多说，直接上图。参考文章实现流程难点问题知识构成...
2020-04-24 16:42:39
504
原创 TCP/IP的分层化
TCP/IP的分层思想TCP/IP的分层管理这其实是“代码分治”的编码实践。整个http协议被分成独立小块。各自只要处理自己的任务，而不需要考虑对方是不是不能工作了。TCP/IP协议族分层TCP/IP协议族分层分为应用层、传输层、网络层、链路层。利用TCP/IP协议族进行网络通讯的时候，走的是分层顺序与对方进行通信。拿HTTP来说，从应用层开始，经过的每一层都会叠加上之前一层的头部信息，直...
2020-04-24 16:29:28
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人