- 博客(132)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 前端开发（一些常用的插件使用和网站）
目前编辑器包含了语法高亮，如果需要添加目录索引，可以监听文档编辑的change事件，获取markdown文档内容，通过正则表达式解析即可。近似 vue 和 react。
2023-11-14 11:20:45
140
原创 响应式布局
早在2010年，设计人员和开发人员就开始实践“响应网页设计”(RWD):随着网络设备尺寸千变万化，为了达到相同的体验，通常的做法是剪切不相关的设计。实际上，我们可以让我们的设计更好的适应渲染屏幕。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。
2023-07-25 17:30:35
192
原创 包含p标签的字符串中高亮搜索内容
this.searchTxt 是查询的内容， string 有可能包含 p 标签。当查询 p 字母的时候需要避免标签的 p。
2023-07-19 17:03:01
870
原创 Typescript 学习笔记
/ ---------- void 类型， typescript 中的void 表示没有任何类型，一般用于定义方法没有返回值----------// ---------- null 和 undefined 其他（never类型） 数据类型的子类型 -----------// ts 继承的探讨： 父类和子类中的方法一致。// ---------- 数组类型（array） ts 中定义数组有两种方式----------// ---------- 数字类型（number）-------------------
2023-05-30 10:11:38
470
原创 echarts 实现以中国为中心的世界地图
echarts 实现以中国为中心的世界地图记录：https://download.csdn.net/download/qq_46143850/87751339
2023-05-04 10:59:45
607
1
原创 JavaScript核心高级内容复习4
进程：程序的一次执行, 它占有一片独有的内存空间线程： CPU的基本调度单位, 是程序执行的一个完整流程进程与线程一个进程中一般至少有一个运行的线程: 主线程一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的一个进程内的数据可以供其中的多个线程直接共享多个进程之间的数据是不能直接共享的浏览器运行是单进程还是多进程?有的是单进程firefox老版IE有的是多进程chrome新版IE如何查看浏览器是否是多进程运行的呢?任务管理器==>进程。
2023-03-30 20:45:00
192
原创 JavaScript核心高级内容复习3
- 方式一 : Object构造函数模式 * 套路 : 先创建空Object对象 , 再动态添加属性 / 方法 * 适用场景 : 起始时不确定对象内部数据 * 问题 : 语句太多 -- > < script type = "text/javascript" > /*一个人: name:"Tom", age: 12*/ // 先创建空Object对象 var p = new Object() p = {
2023-03-30 20:15:00
499
原创 JavaScript核心高级内容复习2-2
文章目录4、闭包5、内存溢出与内存泄露详细讲解闭包前置知识理解闭包常见的闭包闭包的作用闭包的生命周期闭包的应用_自定义JS模块闭包的缺点及解决闭包面试题内存溢出与内存泄露4、闭包理解:当嵌套的内部函数引用了外部函数的变量时就产生了闭包通过chrome工具得知: 闭包本质是内部函数中的一个对象, 这个对象中包含引用的变量属性作用:延长局部变量的生命周期让函数外部能操作内部的局部变量写一个闭包程序function fn1() { var a = 2; function fn
2023-03-22 19:00:00
278
原创 JavaScript核心高级内容复习2-1
所有函数都有一个特别的属性:prototype: 显式原型属性所有实例对象都有一个特别的属性:__proto__: 隐式原型属性显式原型与隐式原型的关系函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值原型对象即为当前实例对象的父对象原型链所有的实例对象都有__proto__属性, 它指向的就是原型对象。
2023-03-22 10:39:16
235
原创 vue3.0 基础学习（组合式api）
用于批星设置多个数据为响应式数据toRefs与原始数据有交互，修改响应式数据会影响到原数据, 但是不会更新视图层 toRefs还可以与其他响应式函数交互，更加方便处理视图层数据使用需引入toRef也可以创建—个响应式数据ref本质是拷贝粘贴一份数据，脱离了与原数据的交互ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层。toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层使用需引入。
2023-03-22 10:30:20
467
原创 52、前端架构中，每个逻辑页面如何可以做到独立发布呢？
上一期的答疑文章发布之后，同学们的热情很高，我在后台又收到了一批新的问题，今天我们继续来答疑。1. 请问前端架构中，每个逻辑页面如何可以做到独立发布呢？答：首先，我们要知道发布是什么意思，我们平时开发好一个网页，把它放到线上真实对用户服务的机器上，这个过程叫做发布。正常来讲，前端工程师发布的原材料是HTML，产出是一个线上的URL地址。各个公司的发布系统差异非常的大，有的是前端发HTML，有的是前端把代码给服务端同学，改成JSP之类的代码，再一起发布。对于逻辑页面而言，我们需要发布的从HTML变成了Java
2022-07-11 08:48:49
428
原创 VueComponent 笔记
1、 school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是由 Vue.extend 生成的。2、我们只需要写 ,Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options)。3、特别注意： 每次调用 Vue.extend ，返回的都是一个全新的 VueComponent ！！！4、关于 this 指向：（1）组件配置中：data函数、methods 中的函数、watch 中的函数、c
2022-06-28 09:14:01
198
原创 51、前端代码单元测试怎么做？
集中解决一下大家在学习中遇到的问题，我争取用快问快答的形式，咱们多回答一些问题。1. 前端代码单元测试还是非常有必要的，不知道老师这一块是怎么做的，能否分享一下？答：关于单元测试这件事，虽然在业务代码我没做成功过，但是它在框架和基础库开发中起到了非常积极的作用。我们平时写代码也肯定写一部分就要运行一下试试，其实这种行为就是单元测试，只是我们把很多自动化的内容，用人肉执行了，并且没有保存和管理case，也没有统计code coverage。只要选择一个好的单元测...
2022-06-23 08:33:39
920
原创 50、前端交互基础设施的建设
分享内容大纲Vue、React等现代前端框架很好地解决了组件化和数据视图解耦问题。而对前端来说，新交互永远是花费时间最多的工作，新交互也是前端团队的自然价值和核心竞争力之一。在这次话题中，我会分享在交互的基础设施的建设上的一些思考和实践，包括图形图像基础、事件机制与视图层架构模式、交互管理框架等内容。首先我们要了解一下历史。在70年代，大概是70年代的尾巴，1979年左右，有了特别有名的，MVC架构。MVC之后，经过了差不多十几年的发展，到了90年代，准确地说应该是95年左右的时候，这个有一个公司的CTO，
2022-05-30 08:48:04
291
1
原创 4、React 之 收集表单数据 与 组件生命周期（1）
一、收集表单数据1、效果需求：定义一个包含表单的组件输入用户名密码后，点击登录 提示输入信息代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="test"></div></body&g
2022-05-29 18:07:34
342
原创 49、前端与图形学
（点击视频观看完整分享内容。）主要内容关于前端和图形学，我分成了三个部分来讲解。第一部分是讲前端和图形学有什么样的关系。我们为什么要在前端里引入图形学，这个也是我的一段心路历程。第二部分相对来说是比较实用的，就是图形学的应用场景。如何在前端的日常的工作中，把图形学的知识用进去，为我们的工作和业务创造价值。最后一部分是对图形学基础设施的一些建设，目前还是一个比较初级的阶段，但是对大家来说，应该有些思路还是可以去思考的。前端和图形学首先讲第一部分前端和图形学，先讲讲缘起。缘起2011年我做了
2022-05-20 08:16:39
651
原创 48、学了这么多前端的“小众”知识，到底对我有什么帮助？
1.老师讲的内容是不是工作中用不到的，对掌握前端的实际工作有什么帮助呢，我们有必要掌握这些比较偏的内容吗？我自己一直奉行着一个观点，不要执着于知识的“临时”实用性。因为我总是感觉，掌握知识越多的人，更喜欢花费时间学习一些暂时可能无法变现的知识，原因有两点：一是其实学知识花费的时间比想象中的要少，这边在纠结它有没有用，那边可能都学完了；二是知识的实用性其实不怎么好判定，比如当年黎曼搞出非欧几何的时候，全世界都觉得纯粹是数学的思维游戏，直到黎曼死了很多年后，相对论出世，黎曼几何有了实际用途。不过，这里我还是希望
2022-05-20 08:13:03
174
原创 47、那些你与“重学前端”的不解之缘
写在前面的话不知不觉，专栏已经更新了一半有余了。在两个月的时间里，我收到了很多同学的留言，很开心可以跟大家保持交流，也很惊喜见证了大家的成长。在整个学习过程中，你有没有一些学习感悟呢，有哪些新的学习收获，又有哪些实践感悟？有没有对前端的知识架构有了更为深刻的认识，是否规划好了自己的前端之路。下面我们就一起来看看三位同学的分享。极客时间用户@阿成 分享在我进入知乎社区的时候，winter 老师就已经不在这个社区了，虽然是退隐了江湖，但是江湖上还流传着他的传说，后来我在 Google Feed 中看到 wint
2022-05-12 08:38:15
259
原创 46、有哪些前端技术值得关注？
首先呢，我觉得可以谈一谈，我特别关注的图形学领域。进击吧，图形学！在淘宝工作的后期，我也有很大一部分精力放在了图形学上面，我是深刻地感觉到，在未来，图形学会和前端结合的更紧密。这是由于我觉得图形实际上是UI最重要的一部分计算机科学，同时它也是计算机领域里面的一个非常关键的学科。我们的前端就是做UI的这样的一个职能，在未来，我觉得随着前端的工作层级逐渐地下沉，前端能够做到越来越多的事情。我们的图形也会逐渐的成为前端的一个基本的技能。我在2018年已经可以看到很多2D和3D领域的应用了，我们会用2D的东西去做图
2022-05-12 08:33:25
145
原创 45、前端架构：前端架构有哪些核心问题？
今天我们来谈谈架构。在传统桌面软件开发中，架构师是一种通过设计架构保证团队能够良好分工和有序工作的岗位。在工程领域，我们凡是要做点什么事儿，都会有明确的目的性，这个目的性，一定是为了完成生产服务业务的。为什么桌面软件开发需要架构师和架构设计呢？因为桌面软件开发具有高度的复杂性，如果没有架构，就没法分解成互相耦合低的模块来分工。所以一般来说，架构是为了分工而存在的。但是到了前端领域，这个问题是否还存在呢？答案是，不存在。前端是个天然按照页面解耦的技术，在多页面架构中，页面的复杂度大约刚好适合一个人的工作量。（
2022-04-29 08:50:34
509
原创 44、搭建系统：大量的低价值需求应该如何应对？
不知道你在工作中有没有遇到过这样的事情：一个运营找过来说，有一个紧急又简单的临时活动页面要做，希望打断现有的产品开发节奏临时插入。这类页面技术难度不高，业务上通常属于“紧急不重要”的事情。这些需求技术上没挑战，线上存在时间短，上线时间紧又没有任何调整空间，它们往往会成为前端团队里人人都不喜欢的“垃圾需求”，谁要是接了这种需求，就只能自认倒霉。但是，这些真的是垃圾需求吗？换个视角来看，我认为它反而是宝藏。所谓工程师，就是为了解决这些问题而存在的岗位，我们从工程的视角来看，“大量紧急不重要的页面”，才是真正的需
2022-04-21 08:51:37
145
原创 43、持续集成：几十个前端一起工作，如何保证工作质量？
今天我们来聊聊持续集成。持续集成是近现代软件工程中的一个非常重要的概念。它是指在软件开发过程中，以定期或者实时的方式，集成所有人的工作成果，做统一的构建和测试。与持续集成相对的做法是：独立开发各个模块，在软件开发的最终阶段才做集成。持续集成的优势是及早处理集成阶段的问题，使软件质量和开发进度可控。现在持续集成还有升级版本：持续交付和持续部署，这些因为需要更为完善的基础设施，目前很少有公司前端团队可以用上，我们暂且不谈。传统的持续集成概念诞生于桌面客户端开发，在Web前端领域，由于技术和产品形态的差别，我们需
2022-03-26 15:08:05
430
原创 42、工具链：什么样的工具链才能提升团队效率？
今天我们的主题是工具。古语云：“工欲善其事，必先利其器”，程序员群体对工具的爱好和重视是一个悠久的传统。简单趁手的工具是程序员开发的好帮手。但是在工程方面，工具不仅仅是简单的“趁手”即可，假如一个团队人人都自己发明几个小工具，那么后果将会是灾难性的：同一个团队的同学无法互相配合写代码，一旦有人离职，可能某一个项目就永远无法跑起来了。所以我们今天从工程的角度谈一谈工具体系的规划。工具总论跟性能不同，工具体系并非业务结果，所以我们没法用简单的数据指标来衡量工具，它的结果更多程度是一种开发体验：帮助技术团队内的同
2022-02-24 08:59:25
677
原创 41、性能：前端的性能到底对业务数据有多大的影响？
从今天开始，我们就从前端知识学习的部分，过渡到了实践部分。这节课我来谈谈性能。性能是个特别有意思的话题，在我之前的工作中，从入门的初级工程师到高级别的技术专家，大家都很喜欢谈性能，我以前参与晋升评审，每年总能听到很多关于性能的晋升述职。那么，今天我就来谈谈我眼中的性能。性能总论while循环快还是for循环快？|0 是不是比 Math.floor 性能好？网上随处可以见到一类对性能的讨论。一些新人也非常热衷此类讨论。但是实际上，它们除了让你写代码的时候纠结之外，毫无意义。为什么这样讲呢？我想讲一个小
2022-02-24 08:55:21
345
1
原创 40、浏览器API（小实验）：动手整理全部API
今天我们来讲讲浏览器API。浏览器的API数目繁多，我们在之前的课程中，已经一起学习了其中几个比较有体系的部分：比如之前讲到过的DOM和CSSOM等等。但是，如果你留意过，会发现我们讲到的API仍然是标准中非常小的一部分。这里，我们不可能把课程变成一本厚厚的API参考手册，所以这一节课，我设计了一个实验，我们一起来给API分分类。我们按照每个API所在的标准来分类。所以，我们用代码来反射浏览器环境中全局对象的属性，然后我们用JavaScript的filter方法来逐步过滤掉已知的属性。接下来，我们整理API
2022-02-14 08:47:27
1275
1
原创 39、浏览器事件：为什么会有捕获过程和冒泡过程？
这一节课，我们进入了浏览器的部分，一起来学习一下事件。事件概述在开始接触具体的API之前，我们要先了解一下事件。一般来说，事件来自输入设备，我们平时的个人设备上，输入设备有三种：键盘；鼠标；触摸屏。这其中，触摸屏和鼠标又有一定的共性，它们被称作pointer设备，所谓pointer设备，是指它的输入最终会被抽象成屏幕上面的一个点。但是触摸屏和鼠标又有一定区别，它们的精度、反应时间和支持的点的数量都不一样。我们现代的UI系统，都源自WIMP系统。WIMP即Window Icon Menu Pointe
2022-01-27 17:15:03
2520
原创 38、浏览器CSSOM：如何获取一个元素的准确位置
在前面的课程中，我们已经学习了DOM相关的API，狭义的DOM API仅仅包含DOM树形结构相关的内容。今天，我们再来学习一类新的API：CSSOM。我想，你在最初接触浏览器API的时候，应该都有跟我类似的想法：“好想要element.width、element.height这样的API啊”。这样的API可以直接获取元素的显示相关信息，它们是非常符合人的第一印象直觉的设计，但是，偏偏 DOM API 中没有这样的内容。随着学习的深入，我才知道，这样的设计是有背后的逻辑的，正如HTML和CSS分别承担了语义和
2022-01-25 09:14:10
540
原创 37、浏览器DOM：你知道HTML的节点有哪几种吗？
今天我们进入浏览器API的学习, 这一节课，我们来学习一下DOM API。DOM API是最早被设计出来的一批API，也是用途最广的API，所以早年的技术社区，常常用DOM来泛指浏览器中所有的API。不过今天这里我们要介绍的DOM，指的就是狭义的文档对象模型。DOM API介绍首先我们先来讲一讲什么叫做文档对象模型。顾名思义，文档对象模型是用来描述文档，这里的文档，是特指HTML文档（也用于XML文档，但是本课不讨论XML）。同时它又是一个“对象模型”，这意味着它使用的是对象这样的概念来描述HTML文档。说
2022-01-24 08:47:31
623
原创 36、浏览器：一个浏览器是如何工作的？（阶段五）
我们的浏览器系列已经进行到最后一篇。在之前的几篇文章中，我们已经经历了把URL变成字符流，把字符流变成词（token）流，把词（token）流构造成DOM树，把不含样式信息的DOM树应用CSS规则，变成包含样式信息的DOM树，并且根据样式信息，计算了每个元素的位置和大小。那么，我们最后的步骤，就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置。渲染首先我们来谈谈渲染这个词，渲染也是个外来词，它是英文词render的翻译，render这个词在英文里面，有“导致”“变成”的
2022-01-17 08:40:24
109
原创 35、浏览器：一个浏览器是如何工作的？（阶段四）
我们书接上文。浏览器进行到这一步，我们已经给DOM元素添加了用于展现的CSS属性，接下来，浏览器的工作就是确定每一个元素的位置了。我们的基本原则仍然不变，就是尽可能流式地处理上一步骤的输出。在构建DOM树和计算CSS属性这两个步骤，我们的产出都是一个一个的元素，但是在排版这个步骤中，有些情况下，我们就没法做到这样了。尤其是表格相关排版、Flex排版和Grid排版，它们有一个显著的特点，那就是子元素之间具有关联性。基本概念首先我们先来介绍一些基本概念，使你可以感性地认识一下我们平常说的各种术语。“排版”这个概
2022-01-12 08:39:38
95
原创 34、浏览器：一个浏览器是如何工作的（阶段三）
在上一节课中，我已经讲了浏览器的DOM构建过程，但是这个构建的DOM，实际上信息是不全的，它只有节点和属性，不包含任何的样式信息。我们这一节课就来讲讲：浏览器是如何把CSS规则应用到节点上，并给这棵朴素的DOM树添加上CSS属性的。整体过程首先我们还是要感性地理解一下这个过程。首先CSS选择器这个名称，可能会给你带来一定的误解，觉得好像CSS规则是DOM树构建好了以后，再进行选择并给它添加样式的。实际上，这个过程并不是这样的。我们回忆一下我们在浏览器第一节课讲的内容，浏览器会尽量流式处理整个过程。我们上一节
2022-01-07 08:51:01
201
原创 33、浏览器：一个浏览器是如何工作的？（阶段二）
今天我们继续来看浏览器的相关内容。我在上一篇文章中，简要介绍了浏览器的工作大致可以分为6个阶段，我们昨天讲完了第一个阶段，也就是通讯的部分：浏览器使用HTTP协议或者HTTPS协议，向服务端请求页面的过程。今天我们主要来看两个过程：如何解析请求回来的HTML代码，DOM树又是如何构建的。解析代码我们在前面讲到了HTTP的构成，但是我们有一部分没有详细讲解，那就是Response的body部分，这正是因为HTTP的Response的body，就要交给我们今天学习的内容去处理了。HTML的结构不算太复杂，我们
2022-01-06 08:47:51
103
flutter使用webrtc技术实现共享桌面，视频
2021-02-22
flutter_practies.zip
2021-01-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人