- 博客(33)
- 资源 (3)
- 收藏
- 关注
原创 看了想忘都难的“三次握手”“四次挥手”
三次握手三次握手,建立连接:你:今天周五 ,下班去XXX嗨皮下?他:好呀你:好的,到时候见end...正常通信:你:喂,到了吗他:嗯,到了通过以上形象的对话,你已经初步认识了三次握手。你:客户端他:服务端让我们用专业的话术再来描述一下第一段对话:你:今天周五 ,下班去XXX嗨皮下?客户端把第一个 SYN 报文发送给服务端,向服务器发起连接他:好 服务器端响应,并将之前的报文加上ACK标识传送回客户端你:好的,到时候见 客户...
2021-07-28 17:19:54 140
原创 VueCli番外之recast
初次见面:project这个文件用来合并JS中的导出对象:source.js例如以上内容会被转化成:source.js看上去是不是只是将exports的值做了合并,似乎我们有另外一种方法可行:即将该文件读取并将module.exports的值用对象合并再重新写入文件。recastrecast的魅力在于它能帮助你拆分代码并改造任意位置和结构的代码,在很多流行框架中均有用到如:webpack、vue-cli这类前端自动化的工具等。还是以上代码,假如它是这样的:
2021-06-22 14:45:49 401
原创 VueCli番外-写入主文件
通过 generator 方法你能够修改项目中的文件。最有用的场景是针对main.js或main.ts文件的一些修改:新的导入,新的Vue.use()调用等。
2021-06-03 11:54:14 237
原创 VueCli番外-如何判断是否使用淘宝源
当你写的node进程运行在遥远的某一个客户端时,如何帮助用户判断是否使用淘宝源呢?伪代码还是按照我的习惯,上一段伪代码,先大概了解下Vue-Cli是如何判断的:shouldUseTaobao(包管理器command){ if(没有指定包管理器command){ 设置command = 包管理器 } if(已经调用过shouldUseTaobao) return 上一次调用的结果 const saved = 读取~/.vue.
2021-05-19 16:30:05 334
原创 精读VueCli《2.1》
来了,老弟!上一节我们讲到create这个方法,现在我们具体来解析:还是一样,打开以下几个文件只要剖析完这个create方法,你会发现整个Creator.js这个文件你都消化了首先,请安耐住你焦躁的心情,因为篇幅会比较长,但只要耐心看完,哪怕多花点时间,相信会有不一样的收获~~~????伪代码话不多说,先上伪代码:async create(cliOptions = {}, preset = null){ if(<预置属性presets> = 空){
2021-05-10 15:52:21 105
原创 精读VueCli《1》
我们知道,vue-cli的入口文件位置是 @vue/cli/bin/vue.js,相信你已经打开了该文件,并看到了熟悉的create命令:NODE版本检查在文件的开始处,有这么一段代码:const requiredVersion = require('../package.json').engines.nodefunction checkNodeVersion (wanted, id) { if (!semver.satisfies(process.version, wanted.
2021-05-08 17:05:51 4060 5
原创 精读VueCli《0》
官方文档首先,我们从github上下载其源码。想要了解一个工具的原理,我们可以从它怎么用开始去挖掘:我们知道,使用vue-cli时,我们会将其安装成全局依赖,并执行 vue create xxx来构建一个新的vue原型项目工程,并且vue-cli提供了许多其他的命令来支持项目开发。我们翻开代码,可以发现packages中有以下三个包,凭借着多年开发的经验,不得而知,@vue是我们需要重点关注的文件夹:@vue/cli/bin/vue.js 该文件是所有vue相关命令的集成,打开.
2021-05-07 10:30:07 93
原创 “三分钟“之上拉加载简单实现
仅实现上拉事件调用方式: new QScroll('',{ distance:32, onBottom:function(){ console.log('请求数据') } })具体实现:(function (global) { function QScroll() { // 提取配置参数 const args_len = argum.
2021-01-26 17:29:45 141
原创 “三分钟”之上拉加载
上拉加载通常我们在开发一个上拉加载的功能时,都会考虑到以下几个问题:怎么判断页面刚好到了底部 网络慢的情况下,该如何呈现页面 页面到达底部时,会触发多次到底事件,该如何解决怎么判断页面刚好到了底部:页面初始窗口状态滚动过的窗口滚动到底部窗口状态根据以上三个状态图,我们可以判断出:滚动距离+窗口高度(图中透明白色区域)>=内容高度即:scrollTop + clientHeight >=scrollHeight满足以上式子,即可判断出到达...
2021-01-26 14:34:16 123
原创 “三分钟”之SVG画微信LOGO
svg:可伸缩矢量图形效果如下:代码如下:<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <!--绿色大椭圆下的小尾巴--> <polygon points="70,92 85,97 65,107" style="fill:#84d845;"/> <!--绿色大椭圆..
2021-01-26 11:04:31 780 2
原创 十分钟理解-动态规划-算法
https://www.yuque.com/docs/share/a74ae2d7-22d3-41e2-afdc-7a5fa8a00582?# 《什么是动态规划?》
2020-07-07 15:16:30 826
原创 underscore 源码阅读【六】
链式调用如何实现?一般情况下我们使用的都是单个API,在特殊情况下也需要将一个数值进行多次处理,这个时候优雅的链式调用可以很方便的将其转化。什么是链式调用?即一次性对数据进行多次处理。没有链式调用的代码看上去会是这个样子:obj.setTitle('title')obj.setStyle('style')obj.map(v => {})obj.min()采用链式调用:o...
2019-10-28 14:50:29 127
转载 知识库【二】
1、下面代码的输出是什么?function checkAge(age) { if (age < 18) { const message = "Sorry, you're too young." } else { const message = "Yay! You're old enough!" } return message } co...
2019-10-15 16:15:17 154
原创 underscore 源码阅读【三】
一、节流什么是节流?就像春节回家过安检一样,你会发现有个保安人员拦住你,等到安检机前没人的时候再让你进。一个函数频繁地被调用可能导致异常情况,所以要让它隔段时间再执行。为什么要节流?这样做可以避免因人流太大导致安检机一次要处理的行李过多,人员拥挤等状况。js中的节流可以避免资源浪费,异常情况的发生等。_.throttlevar throttled = _.throttle(...
2019-10-14 17:22:06 102
转载 知识库【一】
1、下面代码的输出是什么?const settings = { username: "lydiahallie", level: 19, health: 90 }; const data = JSON.stringify(settings, ["level", "health"]); console.log(data); A:"{"level":19, "hea...
2019-10-11 11:27:40 304
原创 underscore 源码阅读【二】
_.reduce 和 _.reduceRightvar sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);=> 6Memo是reduce函数的初始值,会被每一次成功调用iteratee函数的返回值所取代 。这个迭代传递4个参数:memo,value 和 迭代的index(或者 key)和最...
2019-10-10 15:16:46 119
原创 jquery_3.4.1源码阅读【一】
JqueryJquery在JavaScript库中是一个“老司机”了,它给前端工作者提供了很多便捷的API。大小: 330kb点击下载each$("img").each(function(i){ this.src = "test" + i + ".jpg"; // 停止遍历 if( i === 1 ){ retrun false } });每次执行传递...
2019-10-09 16:18:41 797
原创 underscore 源码阅读【一】
underscore这是你第一次了解和使用underscore 吗。如果不是,则可以跳过此篇。underscore就是基于函数式编程实现的第三方库大小: 60kb点击下载函数式编程函数式编程是一种编程范式:一等公民 ,JavaScript深入浅出第2课:函数是一等公民是什么意思呢?;匿名函数 ;闭包 ;柯里化 ,只传递函数的一部分参数来调用它,让它返回一个函数去处理剩下的...
2019-10-09 14:26:05 161
原创 深度剖析element-ui之gen-cssfile【四】
gen-cssfile的作用用来生成主题样式分析代码模块1、fs文件读取写入模块2、path读取路径,NODE内置模块3、components.json这个JSON放在element的根目录下,将组件名和组件的入口对应起来,用于批量注册全局组件,在【三】也被引入到结构1、声明一个主题变量(Array)var themes = [ 'theme-chalk...
2019-06-28 14:15:15 275
原创 深度剖析element-ui之build-entry生成主入口文件【四】
build-entry.js 是干嘛的?见名知意,build-entry是建立入口。分析代码模块1、components.json "pagination": "./packages/pagination/index.js", "dialog": "./packages/dialog/index.js", "autocomplete": "./packages/autoco...
2019-06-27 16:15:57 853
原创 部署无服务器之腾讯云篇
部署无服务器之腾讯云篇安装1.查询你的python版本是否符合要求在cmd中输入以下命令回车:python2.安装pipcurl https://bootstrap.pypa.io/get-pip.py -o get-pip.py sudo python get-pip.py //运行安装脚本2.安装scfpip install scfjsonschema 3.0.1 ...
2019-06-19 18:11:03 550
原创 如何使用cross-env配置多个环境(前端)
什么是cross-env通过js在平台设置不同的环境变量的工具怎么用?第一步:安装npm install --save-dev cross-env第二步:指令在package.json中的scripts加上一条:// 使用cross-env配置一个环境变量env,且它的值为production生产环境cross-env env=production webpack-dev-se...
2019-06-06 16:29:08 20913 3
原创 HTML5 canvas入门实例
HTML5 canvas画布,环形进度图 代码:percent.htmlHTML5 canvas画布,条形调度图 代码:percent_Bar.htmlHTML5 canvas画布,多条形调度图 代码:percent_Bars.htmlHTML5 canvas时钟 代码:clock.html>github
2017-05-02 15:17:37 1162
原创 爬虫简单例子剖析
爬虫是什么?官方说明:是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。笔者认为:爬虫就是爬取网页上已经显示出来的数据。爬虫技术难不难?爬虫的实现可以有很多种,例如node.js,php,需要开发人员具备一定的html、javascript的专业知识。爬虫入门最好的实验网页是主要以列表展示的页面,因为它有固定的样式(方便我们遍历获取数据)。爬虫准备!基于NODE.JS,安装好NODE.JS,
2017-03-30 15:22:53 490
原创 JS执行与页面加载
序言我是在CSDN的技术问答中看到“JS中有没有jquery.ready这样的方法”这个问题后,再看到两篇不错的文章:深入分析jQuery的ready函数是如何工作的(工作原理) jquery $(document).ready() 与window.onload的区别以下是我结合问题及这两篇文章的相关性进行简单的编写:内容JS中定义的事件window.onload或者在<body>标签中注入:on
2017-03-09 15:32:52 302
原创 Node.js环境变量配置
Node.js环境变量配置 在初次安装node.js时,或许不会选择默认安装到C盘,会选择安装到其他盘,这个时候在cmd中直接输入命令node会报错。出错分析由于系统变量的配置中(PATH变量)没有加入node的路径,导致系统在解析你的命令时找不到node。设置系统变量1、修改PATH变量,例如:变量值:node.exe的路径(这里会告诉系统当执行到这个命令时可以在这里找到可执行的文件)
2017-03-09 10:22:53 605
原创 简单Webpacak+React入门实例
Webpacak入门实例 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 —— [ Webpack中文文档 ]本实例源代码请参考 [ WebpackEx ]. 项目目录名称:webpackEx 目录:目录阐述webpackEx :app【存放模块】components【存放React功能组件】Gr
2017-02-23 17:29:21 321 1
日期格式转换(人性化展示)
2017-09-21
日期人性化显示
2017-09-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人