- 博客(65)
- 收藏
- 关注
RSS订阅原创 Axios源码解读
为何要阅读源码？用尤大的话：提升自己的行业竞争力。本文以Axios为例，带你一下学习源码。之所以选择Axios，因为它是一款非常流行的处理http请求的库，前端几乎人人在用，复杂度适中且有很好的注释解释。姿势很重要正式开始前，先普及一下源码阅读的正确姿势：去Github fork一个你想学习的项目（如果你不知道Github，那你不用往下看了）在fork的项目下建一个学习分支熟悉、理解项目结构开始阅读（最好遵循一定的顺序）在源代码里添加你自己的理解或标记提交学习记录到学习分支再有，就.
2021-05-21 00:13:36
316
原创 npm包发布时忽略某些文件(夹)
最近在看axios源码，看到项目根目录下有一个名为.npmignore的文件，查询文档发现它是一种黑名单机制，在包发布时用于排除某些文件或目录。内容语法格式跟.gitignore基本一样。下面是axios源码里的配置内容：**/.**.imlcoverage/examples/node_modules/typings/sandbox/test/bower.jsonCODE_OF_CONDUCT.mdCOLLABORATOR_GUIDE.mdCONTRIBUTING.mdCO.
2021-05-17 17:24:49
5255
原创 微前端实践--webpack5模块联邦
webpack5推出一个非常有趣的功能叫module federation,翻译为中文叫模块联邦，顾名思义就是将提供一套调度不同构建之间的模块依赖的运行机制。它很像微前端，但又不限于此。本文结合案例介绍一下该特性的应用场景和运作原理。应用场景当项目变得庞大且复杂时，我们会想到将其拆分一个个的子项目，这些子项目之间彼此隔离、独立开发、部署，又可以共享功能模块，这是micro frontends思想，这种思想一直没有一个相对规范的实现，直到webpack5推出了模块联邦的概念。一句话概括就是：web.
2021-05-17 12:42:41
1664
原创 巧用GitHub REST API搭建云相册
一直想以自己的方式（my own way）给出生不久的小女儿一个小礼物：它应该是一个体现了老爸特色（程序员）、恒久的东西。考虑到小孩儿变化快，需要一个东西记录，于是决定做个相册，考虑到可以方便跟踪每次上传记录、有朝一日下载备份，决定将图片存到github仓库我们已习惯于通过命令行或集成工具与GitHub仓库进行交互，不过GitHub也提供了REST API，让开发者可以通过接口commit、获取仓库的内容，这为了我们实现云相册提供了基础.功能点分析首先，有以下几个功能点和问题需要注意：上传图片.
2021-05-11 00:15:29
722
4
原创 谈谈JSX的编译原理
说起JSX，几乎无人不知：它在React扮演着描述了UI界面、关联渲染逻辑的重要角色。但JSX如何被编译、又如何变成一个个的元素，相信就没那么多人知道了。本文将对JSX编译结果分析，以加深对React里JSX工作原理的理解准备JSX编译环境需要安装三个包(开发依赖)@babel/cli@babel/core@babel/preset-react安装完毕在根目录添加配置文件.babelrc,内容如下：{ "presets": ["@babel/preset-react"]}最后.
2021-05-08 23:56:09
1294
2
原创 记一次参与开源项目的过程
jQuery作为一款老牌js库，在DOM操作上依然有不错的优势，最近在认真演习jQuery源码，顺带写着一个专栏：《Js编程技巧之jQuery源码分析》，记录一下里面有用的技巧、写法和设计思想。在一次查阅API文档时，发现了一个问题，并尝试定位、解决此问题，提交了issue，本文在此记录一下。发现问题API文档里的错误截图（红色方框里）：根据提示可以得知，由于回调函数可能返回两个参数，文档定义了两个参数类型：String或者Array，导致抛出了错误信息：ERROR: A single retu.
2021-05-04 18:31:36
360
5
原创 Js编程技巧之jQuery源码（代码技巧篇二）
本文是文章《Js编程技巧之jQuery源码》系列的第四篇。继续介绍jQuery里的代码技巧（不会对细节面面俱到，欢迎留言讨论）灵活巧妙的参数设计jQuery里很多工具函数的参数设计的非常巧妙：有些参数是可选的，有些参数是多种类型的。使用者只需关心暴露的API，使用起来非常的便捷。接下来以源码里的三个模块为例介绍一下.extend模块该模块属于Utilities类别，用于将一个对象的成员扩展到另一个对象上。看文档里介绍，有三种入参方式：有四个需要关注的点：是否深拷贝源头：从哪里拷贝。.
2021-04-28 20:13:35
196
3
原创 前端中的 ；
nbsp的全称是：no breaking space,意为非截断空白符，该符号与前后单词合并为一个单词，不应该被截断,除非设置cssword-break:break-all;。HTML中的应用html会将多余的空白符合并为一个，如果需要在html里添加多余一个空白，就可以使用 除了在内容里添加空白以外，还可以发挥非截断的效用比如，这里有一个段落<p>Hello,everyone,my name is he zebing</p>当盒子空间狭小时会发生.
2021-04-27 21:13:24
30558
原创 Js编程技巧之jQuery源码（Callbacks模块设计流程与思想）
本文是专栏《Js编程技巧之jQuery源码分析》的第三篇，介绍一下Callback模块。它本质上是一种观察者（订阅者）设计模式。这种模式在jQuery里具体实现是怎样的？有哪些核心的概念，本文会做探讨，不会面面俱到，但求清晰易于理解，抛砖引玉。如何使用通过.add添加观察者，然后通过.fire通知观察者const cb = $.Callbacks()cb.add(function(msg){ console.log("first add: " + msg)})cb.add(functio.
2021-04-22 11:43:29
124
2
原创 开发一个web工具分析nginx访问日志
我的博客网站有时候会被黑客光顾，短时间有大量的request涌入（1s内有上百个访问），直接导致CPU爆表，造成网站无法正常访问，于是考虑写一个日志分析工具.实施步骤主要有三步：通过正则提取访问日志里的关键信息 处理提取的数据（将日期处理为javascript可识别的日期格式）。 数据渲染到页面，可通过用户界面操作、查看、分析日志数据编写正则表达式通过观察可以发现日志有以下格式：第一部分为IP，然后是两个横杠，紧接着第二部分日期，然后空格分开双引号里是访问路径；每条记录占一行。.
2021-04-20 22:08:38
251
原创 Js编程技巧之jQuery源码（代码技巧篇）
逻辑运算符的高级用法逻辑运算符可以结合多重运算实现更强大的操作双“非”语法：!!var_name需求：获取变量对应的boolean值!!0 //false!! undefined //false!! 1 //true!! null //false“且”连接其他表达式语法：condition && expression满足条件时才运算表达式并返回它的值expression 可以为赋值表达式、算数运算表达式、函数调用表达式等var locked = false;fu
2021-04-14 22:16:16
256
2
原创 Js编程技巧之jQuery源码（写法篇）
本文介绍jQuery的一些非常有用的写法，当编写业务模块或项目的基础库时可以参考借用逗号运算符用逗号把多个表达式联接起来，构成一个更大的表达式。优点：节省力气，代码精简。一开始不是很喜欢，用惯后发现真香:一次性声明多个变量：let variable1,variable2,...搭配赋值运算符:let variable2 = 1,variable2 = 2,...IIFE(立即调用函数表达式)优点：私有作用域，不污染其他作用域。适用场景：开发类库（包括 webpack 最终编译的包也.
2021-04-14 22:10:26
200
原创 解决iframe嵌套项目无法登录的问题
以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索...问题分析由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪：翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！这个提示包含了两个信息：设置cookie时有个连带的SameSite属性 .
2021-04-11 20:34:49
13767
8
原创 Ajax里的XHR对象支持单例模式吗
之前跟同事探讨一个Ajax的问题：ajax是否可以封装一下，实现其他类库如Axios的单例模式呢？对当时的结论不置可否，今天验证一下之前跟同事探讨一个Ajax的问题：ajax是否可以封装一下，实现其他类库如Axios的单例模式呢？对当时的结论不置可否，今天验证一下服务端代码准备通过express写一些基础代码：constexpress=require('express');constpath=require('path')constapp=express();/...
2021-04-11 20:00:53
111
原创 一个终端同时运行多条Nodejs命令
一个终端同时运行多条Nodejs命令项目开发中，常遇到需要并行处理多个任务的情况，比如一个命令负责启动本地开发服务器、一个命令负责打包静态资源js、css等，这种需求在Micro frontends里更加明显：同时启动多个单独的微应用。本文介绍一个解决这种需求的工具.项目结构一个前后端分离的项目，包含了server端和前端。server端提供接口服务，前端则由另一个项目编译成静态资源（由webpack的监听打包），二者统一由express托管：目录结构是：外层是一个express
2021-04-11 19:42:04
1761
2
原创 Web技术实现仿苹果手机计算器
目录一切都是为了好玩实现大体过程后续的思考一切都是为了好玩除了日常的画画页面、写写业务代码，工作之余，一直关注并尝试着在前端做一些好玩有趣的东西，也经常逛各种社区网站寻找灵感，今天搬弄着手机想，为何不做一个手机计算器的web版呢？稍微想了一下大体实现思路，于是一款web应用诞生了！//此处粘贴计算器的效果版，旋转、操作、添加背景音乐。实现大体过程既然要做成苹果手机上的那样，自然需要观察这...
2020-04-26 11:30:55
1658
3
原创 页面滚动到指定位置的方法
视口中可显示的信息是有限的，因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式：纯html实现（锚点）跳转按钮：<a href="#anchorName">点击跳转当前页面指定锚点</a>设置锚点：<a name="anchorName">a标签锚点</a>、<p id="anchorName">id锚点</p>...
2019-08-02 14:15:21
15148
3
原创 更好地编写Js正则表达式
什么是正则一种文本匹配工具，用来识别、提取符合规则的字符串，提供多种辅助方式。普通的使用方式编写正则表达式 => 调用匹配。两种编写方法：字面量和构造函数模式:// 字面量let regIns1 = /^\d$/;let regIns2 = new RegExp("^\\d$");字面量形式无法组合，而构造函数基于的字符串可以由多个片段组合而成，增强了灵活性。一些复杂的...
2019-08-01 15:59:08
215
原创 情侣之间争吵，到底是为了什么？
情侣之间争吵，到底是为了什么？发生了什么心中的问号从相识说起如何维系关系再谈爱情关系发生了什么昨天不知道什么原因，跟女朋友大发脾气：滚!她立马不依不挠，收拾东西，换衣服。在即将破门而出地一刹那，我的理智出现了:天色已晚，晚上9点多了，不能让她走。于是堵在门口，我们拉扯了大半天，她的眼泪也浸湿好几张纸巾，我也说了一大堆好话。最终消停了，俩人都能疲倦，代价是一晚没咋休息。心中的问号现在...
2019-07-29 11:28:45
596
1
原创 用node开发并发布一个cli工具
cli本质是一种用户操作界面，根据一些指令和参数来与程序完成交互并得到相应的反馈，好的cli还提供帮助信息，我们经常使用的vue-cli就是一个很好的例子。本文将使用nodejs从头开发并发布一款cli工具，用来查询天气。项目效果图如下：配置项目初始化一个项目：npm init -y编写入口文件index.js:module.exports = function(){ con...
2019-01-02 16:00:33
666
原创 JavaScript拖拽详解（二）拖拽的应用及示例
文章目录数据的传输自定义拖拽效果指定一张图片，在拖拽中跟随鼠标小图标提示拖拽上传文件总结上一篇介绍了拖拽的基础知识，这节我们谈谈拖拽的一些应用。HTML5不仅仅定义了拖拽的事件类型，还在事件对象中规范了一个重量级的对象：dataTransfer,借助它，我们可以实现数据传输、拖拽图案设定、拖拽文件上传，可通过event.dataTransfer来访问该对象.数据的传输需要借助event....
2018-12-24 18:46:19
436
原创 JavaScript拖拽详解（一）基础简介
文章目录拖拽的历史画一张流程图要点概括总结一共有哪些事件哪些实体可以被拖关于放，有哪些限制？拖放会冒泡嘛？小结人类喜欢将自然界的事物步骤化，第一步干什么，第二步再做什么，甚至第三部等等。一个作家构思一部鸿篇巨制，必然要考虑将内容划分为几个部分，每个部分刻画相应的人物背景故事.同理，拖拽也一样，分为 拖、放两个步骤，本文将以两个步骤为基础讨论拖拽.拖拽的历史web开发中的拖拽标准是在H...
2018-12-24 14:33:04
337
原创 React研习之旅（二）：视图控制器-路由
文章目录react中的路由对比Vue框架谈谈jsx再谈谈高阶组件画张草图巩固一下小结react中的路由A JavaScript library for building user interfaces：一个用于构建用户界面的JavaScript库官方这句话措辞恳切严谨，有两点需要注意：灵活：react只是个库，开发者可以自由灵活地选择组件模块。跨平台：react用于构建用户界面，而...
2018-12-23 12:12:02
306
原创 React研习之旅（一）：React基础与核心
文章目录react简介与Vue框架的对比一直在用的jsx究竟是个啥？为啥用高阶组件？画张草图巩固一下react简介A JavaScript library for building user interfaces：一个用于构建用户界面的JavaScript库措辞恳切严谨，有两点需要注意：灵活：react只是个库，开发者可以自由灵活地选择组件模块。跨平台：react用于构建用户界面，...
2018-12-22 12:37:13
200
原创 正则表达式分解剖析（一文悟透正则表达式）
目录从字符说起常用模式或场景常用的方法画一张思维导图实现前言中的小需求看JavaScript框架设计，读到一段“innerHTML”操作无法执行里面的script标签里的代码，于是想动手弥补下该操作。实现很简单，执行完innerHTML后，找出所有的script标签并取出里面的代码字符调用eval()，（仅考虑内联script标签）,所以问题就来到了如何查找代码字符的问题上。这是正则表达式做...
2018-12-19 19:43:33
623
原创 谈谈web项目中的凭证与依赖凭证
凭证或者token,是一种认证机制，相当于一把钥匙，有了它，才能打开特定的锁进入对应的门，这相当于增加了一层保护机制，过滤掉那些不合理的操作。首先介绍下web项目中的一些token或认证类型，再简单举例在React项目中的使用。web中的认证还记得大学时期，第一次购物的场景激动的不得了，当时有个叫网盾的东西（建设银行的），usb连上电脑，通过认证才可支付，俗称网银盾。这个盾就提供了一层防...
2018-12-18 13:47:35
1763
原创 React中页面的拦截
页面拦截是web项目中常用的基础技术，本文简单地分析页面拦截的前因后果。为什么拦截页面？打个比方：项目中的页面相当于一个party,而查看页面的人类似于参加party的人：只有特定的人才能参加partyparty也许有等级限制，只有高层人士才能坐第一排（maybe）参加party，只能去预定好的位置或包厢或餐桌除此之外，如果客人走错路，需要有专人将引到正确的地方，或者比较明显的...
2018-12-18 10:19:31
4029
2
原创 如何禁止内联盒子里的自由文本（无width宽度的）换行
当我们想横排一个个的文字和图表组成的item时，发现文本莫名其妙的换行了。解决方案给盒子定宽，这样文字宽度够了自然不会换行，也带来一个问题就是不同的item之间的文字多少可能有别，这样会导致不同的item之间空白（空隙）不一样，给人不适感，不好。指定该盒子的white-space:nowrap;不主动换行，并且将enter和空白、制表符合并。最优解代码.no-newline{ ...
2018-12-17 17:47:29
300
原创 手动实现一个react导航组件并优化
为何要手写？既定的时间内没有找到合适的现有选择，放弃无谓的搜寻，自己写一个。基本原理菜单数据接口获取，一级菜单UI事件监听，对应的下层二级菜单放到一级菜单item的dataset属性里，事件触发时取出并显示。事件监听（由于菜单之前不存在，于父层监听菜单item的冒泡事件）。一级菜单：监听mouseover而不是mouseenter,二级菜单监听click并实现跳转页面草图效果...
2018-12-14 11:54:52
1064
原创 React项目组件继承实战
囿于reat使用组合而不是继承的提示，大家似乎都不怎么使用继承，然而在一些方面继承还是能发挥不少作用。为什么使用继承当我们有多个页面需要执行页面初始化操作，可能是动态计算视口的宽高度、计算屏幕的分辨率，甚至为一些节点添加初始化的事件（注意页面卸载时注销），或者一些其他的http请求、验证等初始化行为。这些行为有一个特点：需要重复执行或某一时间后重复执行。继承实现了代码的共享与复用。执行顺...
2018-12-10 21:50:08
4716
2
原创 雨中漫步所想
打扫完房间，准备好煮粥的材料，装好垃圾袋、拿着发芽的土豆下楼去。扔完垃圾，讲土豆丢到菜地，顺势绕着活动场地绕几圈，也想了一些事。照顾好自己日常起居按时睡觉，按时起床，吃好早饭，按时上班。最多连打两把游戏，不能沉溺。注意饮食，不暴饮暴食，晚上喝杯暖暖的核桃汁。早上吃一个大枣加，牛奶等。晚上早点洗脚早点刷牙。要独立自强，因为只有照顾好了自己，才能照顾好未来的宝宝，才能孝顺父母。实现...
2018-12-09 20:31:24
223
原创 今日，你我分离
今天你（女友）结束了10天之旅，启程回家。说实话，还真有点不舍。想想过去10天一起的时光，有甜蜜也有小争吵，更多的是明白互相体谅的重要性，借此时机，写下几件印象深刻的事情，供日后回味或思考。11月29日早晨，见到了你不知道等这天等了多久，截止到昨天，突然想早点见到你不就意味着早点分别么？算了还是晚点来，我把这句话给你说了，你回道既然这么不想人家来，倒不如不去了呢。哈哈，我的心情是复杂的呢。...
2018-12-08 19:56:02
190
原创 从自我怀疑到自我实现
日常焦虑的场景地铁上：为打发无聊时间，刷刷短视频，看看技术博客，既不是消遣也不是充电，可能看了别人的光彩或技术思考，开始怀疑自身，想想自己的差距，不够努力…，焦虑开始了滋生。工作间隙，或上个厕所，思考自己宏伟的目标，再想想工作中的自己，开始自我怀疑,…，焦虑继续滋生。下班，走在街道上，人来人往，有人开豪车前簇后拥，反看自己，…焦虑又滋生…上面可能有些夸张，但不可否认的是，可能大多数现...
2018-12-07 17:05:16
1419
原创 最近在忙的三件事
最近在忙三件事：新项目前端工程的搭建与完善、项目组招人、Vue课程的准备新项目前端工程一个数据服务监控的项目，监控的有接口，服务。包括：服务的申请。监控详情与记录。用户权限体系采用客户自有体系。权限涉及到页面资源的查看权限技术栈：框架:reactUI框架：antd脚手架：create-react-app状态机：redux总体设计思想：轻量：按需引入，尽量不...
2018-11-14 21:01:08
341
原创 vue项目前端架构设计
为更好地实施我们的业务需求，需要一些规则或思考来帮助我们设计架构我们的前端工程,本文将以Vue项目为例，讨论如何设计与实施我们的项目架构，来满足版本的迭代、更新.组件组件：一个个的可复用单元，单页面程序的组件跟传统的UI组件稍有不同，不仅仅包含了样式，也包含了容器元素。可以泛化组件，抽取出一些参数，根据参数来渲染为不同的视图。全局组件一次注册，遍地使用，方便。适用于高频使用的组件，会...
2018-10-24 17:57:17
8912
原创 记一次直播授课之后
讲课情况时间长达2个小时。从样式到逻辑从结构到模块从空文件夹到项目从沉重到优化（代码）从封装到泛化正则表达式牵涉面很广了…仅仅这些涉及面，搞两个小时一点都不夸张。问题是这节课程是否达到了一个期望的效果？课程内容与课程目标本堂课的中心是“模块介绍与模块实战”，所以核心是介绍模块，然后给大家来个实战，教大家如何使用模块思想，分离我们的代码。彼此的课堂状况授课长达两个小时...
2018-10-19 10:57:45
529
原创 Mysql基础（二）
我们已经知道了通过select 查询记录、通过update 更新记录、通过delete删除记录，通过where子句限制条件。我们来讲一些高级的用法。合并多个查询有两条sql查询:select id,name from user_tb、select id,u_name from client_tb;现在我发现其实这两条查询可以合并：name 和 u_name只是命名不同，本质意义是一样地，那...
2018-09-28 14:54:02
116
原创 Mysql基础（一）
数据库知识对软件开发者是很基础的内容，由于前端的工作性质导致接触数据库的场景不多，越从应用底层思考越感觉数据库的重要性，因此鄙人将以两个篇幅来介绍Mysql的基础知识.Mysql的安装与设置下载：官网、社区版本安装：设置用户名和密码Mysql的登录与数据库操作登录Mysql服务 :cmd:mysql -uroot -p123;(root用户名，密码123)新建数据库：crea...
2018-09-27 14:26:41
106
原创 ES6函数的扩展特性
ES6函数添加了一些新的特性，极大的方便了开发者的编程体验：箭头函数的简洁、默认的参数…函数的默认参数增加了默认参数（值或表达式）特性，让我们可以进一步思考函数的输入input(arguments),而不是简单的依照理所当然的方式去假定参数类型并据此执行操作代码（避免一些诸如... can not read property of undefined的错误）不能使用const、let对...
2018-09-26 18:34:15
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人