编程 | 陈默的博客

编程

9月7日 · 2021年

vue源码——vDOM与Diff算法

2021 编程

170 5 0

diff算法前言入职第一个月开发公司一个小项目，由于项目比较小，因此由我一人担任前后端。在前端开发时，使用到了Element-UI的table组件。由于项目需要，需要对table组件进行样式的自定义设置。当时遇到了一个解决了很久的bug，当时还是求助公司的大牛才顺利解决。贴上当时的Bug记录：【环境】 vue2.0+elementUI 【背景】左右布局，左边是element table，右边是自己设计的菜单。左边table里装着全部分类的数据，右边菜单是每个分类的类别。【需求】点击右边菜单的类别，右侧样式跟随点击处，左边表格数据会自动选择对应数据并跟随。【问题】点击右边菜单，样式正常跟随，左侧表格却需要点击两次。排查后发现，只要修改控制样式的变量就会出现左侧表格的重新渲染。不修改控制样式的变量，一切正常。【解析】 element table 有一个key控制渲染，因为我这里已经设置了随机值，所以只要页面上有变量更改，table就会刷新。【解决】 element table key设置为固定值。后来试用期的导师解释道：“由于vue的diff算法原因，因此修改变量会导致table的重新渲染，可以去了解一下diff算法”。因此，有了这篇笔记。概念虚拟DOM 虚拟DOM（Virtual DOM），用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟DOM是相对于浏览器所渲染出来的真实的DOM而言的。在react、vue等技术出现之前，我们要改变页面展示的内容，只能通过遍历查询DOM树的方式找到需要修改的DOM，然后修改样式行为或者结构，以此来达到更新UI的目的。但这种方式相当消耗计算资源，因为每次查询 DOM 几乎都需要遍历整棵 DOM 树，如果建立一个与 DOM 树对应的虚拟 DOM…

9月6日 · 2021年

客户端渲染与服务端渲染

2021 编程

173 3 0

SSR 客户端渲染与服务端渲染前言当前端项目不断更新迭代，工程文件不断增大，打包文件也越来越大，页面的整体刷新加载速度就会变慢，从而极大地影响了用户体验。因此需要一种技术来解决这种问题并提高网页的响应速度。概念单页面应用（SPA）单页面应用（single-page application）：只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源仅需加载一次，常用于PC端网站，购物等网站。优点：页面之间切换快，减少了服务器的压力缺点：首屏打开慢，不利于SEO搜索引擎优化，利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。搜索引擎优化（SEO）搜索引擎优化（SEO）：利用搜索引擎的规则提高网站在有关搜索引擎的自然排名。因为SPA单页面应用，是通过Ajax获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持JS和通过Ajax获取数据，那就更不用提SEO了。渲染（Render）如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。但这是基本不可能的事情，数据一般是变化的。你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。简单来说：渲染，就是指数据放入 html模板文档的过程。客户端渲染（CSR）客户端渲染（Client Side Render），就是用户在通过URL请求访问网站的时候，服务器端返回给客户端的是HTML文档，再让浏览器去解析渲染展示页面。浏览器拿到页面后，根据写在HTML页面上的JS代码，对该HTML的内容进行修改。优点前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。体验更好。比如，我们将网站做成SPA或者部分内容做成SPA，这样尤其是移动端，可以使体验更接近于原生app。缺点前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。因为服务器端可能没有保存完整的HTML，而是前端通过JS进行dom的拼接，那么爬虫无法爬取信息。除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。服务器渲染（SSR）服务器渲染（Server Side Render），前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。…

8月18日 · 2021年

代码开发规范

2021 编程

164 7 0

代码开发规范代码开发规范前言学习开发也有些年头，长久以来，深刻体会到编码规范对于一个程序员来说是极其重要的事情。对于一个项目来说，几乎80%的精力都是花费在维护上，因此便于维护是一个项目好坏的重要标准。即使是自己开发的项目，一段时间过后，再回过头去维护，倘若代码一团糟，也是相当让人抓狂的事情（由指自己）。因此，其实平时有在严格要求自己有一个良好的代码开发规范，但是总觉得有一些问题，只是自己一时并无法找到是什么问题，如何去解决。今天作为前端，写了一个需要后端返回一个前端要用的数据结构，写了一个json的配置文件，里面的字段作为一个模块的基本信息。组长让我把数据结构写完发给他，让他看看。随后组长便改了一版发给我，而且还挨个讲了改动的原因。真的是听君一席话胜读十年书，顿时感觉之前自己开发的时候出现的一些问题原因找到了。因此在这里作为记录。基本命名规范由于我是以前端入门，后面接触了一些python后端。因此这里暂时基本规范的时候，以前端代码为例。其余语言也可作为参考。在前端开发项目中涉及到命名的地方有很多：目录名，项目名，文件名，函数名，变量名，常量名，参数名，class名，id名等。不同的地方应当结合应用场景采取不同的命名方式，以此达到最佳效果。不规范的命名首先先罗列几种不规范的命名。不规范的命名在开发的时候遇到是很头秃的事情，遇到过挺多种，简单罗列几种： 1. 单字母 xxxxxxxxxx let a = 1; let b = 2; 2. 数字法 xxxxxxxxxx <div class="box1"></div> <div class=“box2”></div> <div class=“box3”></div> 3. 拼音法 xxxxxxxxxx function qiandao(){…

8月11日 · 2021年

Fabric.js 学习笔记

2021 前端编程

249 2 0

learn_fabric Fabric.js 学习笔记导语在 HTML 上想要绘制基本的简单形状的时候，通常都会使用 Canvas 进行操作。纵然 Canvas 原生API已经可以做许多事情，但在绘制复杂图形和一些特定情况需要改变图片的时候，原生的API十分复杂。而 Fabric.js 就是解决这个问题的。工作中的项目需要用到 Fabric.js 对用户进行个性化设置，因此，在这里对 Fabric.js 进行一些简单的记录。安装 yarn add fabric -S # or npm i fabric -S 也可以下载最新的 JS 文件，通过 Script标签引入。为方便记录，以下内容全部都是使用原生的html进行演示。使用…

4月29日 · 2021年

个人主页构建笔记

2021 html 编程

183 4 0

陈默的主页春招快结束了，打算在结束之前换一个自己的个人主页，之前是使用的landingPage登录页做的个人主页。后来觉得实在不妥，便决定重新再设计一个。当然想法有很多，执行起来总是会遇到各种各样的问题，比如样式设计，开发框架，响应式等等问题。因此尽管自己设计了很多版本，也有开始开发，但最后都选择了放弃。所幸在最后无意间发现了大佬Dandy Weng的个人主页，无论是风格，动画，还是内容，都深入我心，于是决定仿照大佬的写一个自己的主页。大佬的主页代码并未开源，因此都由本人仿照开发。但由于闲余时间有限，所以并未做太多更改。大佬不愧是大佬，在学习大佬的个人主页时，学到了非常多实用性很高的东西，因此在此处作为记录。个人主页在线演示：新主页旧版主页：Landing Page版旧主页技术栈 HTML部分：HTML / Canvas / SVG CSS部分：CSS3 / Flex / Grid / CSS变量 / 引用字体 / TweenMax.js / ScrollMagic.js JavaSript部分：面向对象 / Ajax 特点响应式布局 / 黑暗模式…

8月15日 · 2020年

微信小程序踩坑记——初识小程序

微信小程序编程

147 3 0

小程序开发踩坑记——初始小程序小程序开发踩坑记——初识小程序小程序开发踩坑记——初识小程序前言初识小程序Vue与微信小程序的区别WXML部分（HTML）WXSS部分（CSS）WXS部分（JS）JS部分页面结构（特指script标签部分）JSON部分全局配置页面配置页面数据前言暑假期间做了一个小程序，一个专属于我们学校学生的小程序。这也算我自从学习前端以来第一次自己独立前后端兼顾开发的项目了。由于当初给自己立的flag是在8月22日之前完成，正好今天将最后一些小bug给修复了，然后已经上交审核了。暑假的剩下几天时间，打算把小程序开发过程中的一些心得体会写下来，也算为以后自己的开发提供一些帮助。初识小程序之前是从vue开始接触的前端，由于学校的项目custed用的就是vue框架开发的，因此vue用的比较多。但是从vue转手到小程序，跨度并不是很大，稍微看一下官方提供的文档就可以大致了解开发过程。 Vue与微信小程序的区别我只是一个小白，也不敢说对vue或者微信小程序有多大的理解，这里只是在我的理解范围下的一些区别。 vue开发页面，通常情况下在一个.vue文件进行，一个vue文件即可写一个界面；而微信小程序则是由四个文件组成的一个集体共同为一个页面服务，其中四个文件分别为：WXML、WXSS、JS（现改成WXS）、JSON。虽然在vue开发里并没有见过什么WXML、WXSS、WXS，但其实，微信官方只是改了个名字，然后稍微改了一些语法而已。其中WXML对应着HTML，WXSS对应着CSS，WXS对应着JS，完全可以按照之前学习VUE的习惯编写，只不过稍微注意一下微信小程序的改变就行。 WXML部分（HTML） WXML语法参考在微信小程序里，不再依靠div标签，取而代之的是view标签，用法当然跟div一样，可以简单理解成：微信小程序用view标签取代了div标签。其实用法应该都是一样的，形成的标签都是默认为块级元素，也是双标签，支持标签嵌套。标签内容支持数据绑定。这一点与vue很像，vue的html部分也是支持数据绑定的，甚至用法都是很相似的，官网这里介绍的比较清楚，博客里就不详述了，贴上官网链接：WXML语法参考，如果链接失效的话，直接去微信小程序的开发文档搜索即可。 WXSS部分（CSS） WXSS语法参考借用官网的话：为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 WXSS主要扩展了两个方面：尺寸单位，样式导入。（其实与Vue相比，只有拓展了第一个方面）尺寸单位：rpx（responsive pixel）。可以根据屏幕宽度进行自适应。 1.rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案。 2.微信小程序的这个rpx，用起来还是十分舒服的。几乎不需要再去考虑不同设备的兼容问题了，该单位支持自适应。 3.使用vue开发移动端的时候，通常会以iPhone6的分辨率作为基准。同理，使用小程序也可以使用iPhone6作为基准，但它也可以自适应其它设备。 4.设计稿也建议使用iPhone6作为基准，iPhone6的分辨率（750x1334px）为基准。这样的情况下1rpx=1px。 5.当然在实际开发过程中，很多地方是不适合用rpx这样的弹性单位的，微信小程序也考虑到了这一点，因此，css其它的单位例如px也是可以使用的。根据所需选择适合的尺寸单位即可。…

8月15日 · 2020年

微信小程序踩坑记——页面数据的绑定

微信小程序编程

172 2 0

小程序踩坑记——页面数据的绑定小程序踩坑记——页面数据的绑定前言之前在用vue做前端开发的时候，已经习惯了vue语法的数据绑定，突然跨越到小程序的时候，前期还是有些不适应，因此即使这方面在小程序的官方文档里已经说得很清楚了，我还是要单独写一篇博客来记录一下我刚开始对于小程序数据绑定方面遇到的疑惑。介绍框架官方文档：框架小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。小程序的框架主要有两个部分，官方文档也说明了这点。在逻辑层与视图层的这点上，小程序的开发与Vue的相似点很大，不过区别还是在于微信将页面的这些框架单独分开成了独立的文件，而Vue则偏向于单个vue文件组成一个页面。响应式编程 Vue作为响应式编程，已经也算是众所周知了。小程序依赖的也是响应式的编程，数据之间的绑定也都是响应式的。响应式编程的好处：框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。小程序的官方文档给出了一个很清晰的例子： x1 2  3 <view> Hello {{name}}!…

8月15日 · 2020年

微信小程序踩坑记——ColorUI的使用

colorUI 微信小程序编程

349 3 0

微信小程序踩坑记——组件的使用微信小程序踩坑记——ColorUI的使用微信小程序踩坑记——ColorUI的使用组件类型ColorUI简介群资源原生小程序开发下载样式引入自定义导航栏的使用1：在app.js获取系统信息（确定合适的导航栏高度）2：在app.json中关闭默认导航栏样式和引入自定义导航栏3：在页面中使用其余配置组件组成1：基础元素字体大小文字对齐页面布局固定尺寸水平对齐内外边距图标用法2：交互组件3：插件拓展组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接：官网链接，GitHub链接简介 ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。不得不说的是，该组件库的作者很优秀啊，整个项目做完，用的最多的就是ColorUI组件，该组件不仅好看，而且相对来说，可控性很强，如果不满意，完全可以按照自己的需求更改。该组件库本身就是一个小程序，我们在Github上下载源码之后，直接用微信开发者工具打开即可。群资源贴上链接：群资源该组件还有自己的资源库，里面都是十分优秀的资源，虽然这次在我的项目里没有看到，但简单粗略的看了一下，都很优秀。原生小程序开发小程序的使用，GitHub上已经写的很清楚了，贴上链接：原生小程序开发下载下载Github上的组件之后，解压，复制ColorUI-master\demo\下面的colorui文件夹到自己项目里的根目录即可（即与app.js等同级）样式引入在app.wxss中引入colorui中的样式库，示例如下： 1/**app.wxss**/ 2 @import "colorui/main.wxss"; 3 @import "colorui/icon.wxss"; 4 @import "colorui/animation.wxss"; /** 最后这个看自己需求，如果需要使用微动画则可以引入**/ 自定义导航栏的使用 colorui给我们提供了其自定义的导航栏，效果是很不错的，如果需要引入的话，需要在app.json全局配置中添加自定义组件，使用步骤如下：…

8月15日 · 2020年

微信小程序踩坑记——Vant Weapp组件的使用

Vant 微信小程序编程

204 3 0

微信小程序踩坑记——Vant Weapp组件的使用微信小程序踩坑记——Vant Weapp组件的使用微信小程序踩坑记——Vant Weapp组件的使用组件名称预览组件介绍下载安装npm安装git clone 安装使用组件基础库版本需要注意的地方前言引入最终效果参数的使用（Props）PropsEvents外部样式类修改外部样式类以外部分组件名称 vant weapp 官方文档：Vant Weapp文档预览组件介绍 Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。 Vant 是有赞的一套移动端组件库，而Vant Weapp则是Vant的小程序版本，使用体验相对来说还是很不错的。下载安装 Vant 组件的使用方法在文档里面写得很清楚了。可以通过使用npm来安装，也可以下载vant源文件，将源文件中的dist文件夹直接放到自己项目的根目录即可。 npm安装 x1# npm 2 npm…

8月15日 · 2020年

服务器mysql忘记密码

mysql 编程

141 2 0

服务器mysql忘记密码服务器mysql忘记密码前言域名过期了，在更换域名的时候因为某些原因需要删除服务器数据库中的某一个库，但突然一下子想不起来密码了，果然账号密码太多，在不经常用的情况下真的很容易忘记啊。在网上找到了重置密码的办法，尝试了一下，成功修改了，在这里记录一下吧。解决办法原理在配置项里加入skip-grant-tables，使无需输入用户密码也可以进入mysql 然后对数据库里的mysql数据库进行修改密码。删除配置项里的skip-grant-tables，重启mysql。具体步骤修改/etc/my.cnf文件： x1　在[mysqld]的下一行加入： 2 3 　　skip-grant-tables 4 5 　　保存退出。重启mysql 11# service mysql restart（或者mysqld）登陆mysql，直接输入mysql就可以进去。是不是很神奇，不要密码就登陆了，因为你之前修改了配置文件呐亲。修改密码，mysql中的user是系统专门管理用户的表，注意下面的password是一个函数，用来对后面的new-password加密的 41 mysql> USE mysql…