front-core
front-core copied to clipboard
airuikun
前端前沿技术实现原理+源码解析
zhoulujun.cn，个人博客里面相关的，暂时先整理这些吧，算不算广告？ 色彩基础理论 色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV 2016-02-17 三色视者与四色视者身后的理论基础:色彩原理 2016-02-15 透析矩阵，由浅入深娓娓道来—高数-线性代数-矩阵 2017-09-28 线性代数-矩阵-建模案列:矩阵密码|路线问题|信道编码|迁徙 点线面旋转其空间坐标坐标变换:坐标旋转的三个角度推导 解读png的 PNG文件解读(1):PNG/APNG格式的前世今生 2020-05-06 PNG文件解读(2):PNG格式文件结构与数据结构解读—解码PNG数据 2020-05-06 PNG文件解读(3):图像数据块IDAT细节—PNG压缩与解码编码详解 2020-05-06 解读jpg的 JPEG/Exif/TIFF格式解读(1):JEPG图片压缩与存储原理分析 2020-04-30 JPEG/Exif/TIFF格式解读(2):图片元数据保存及EXIF详解 2020-04-30 JPEG/Exif/TIFF格式解读(3):TIFF与JPEG里面EXIF信息存储原理解读 2020-04-30 JPEG/Exif/TIFF格式解读(4)：win10照片旋转win7不识别。 2020-04-30 JPEG/Exif/TIFF格式解读(5)：exif marker Tag ID...
## 背景 2019年6月9号，星期天，晴，33度 今天的bug格外的难解 对面商店的小姐姐，依然是我不敢奢求的梦 进入商店 小蝌蚪：您好，我想买两包妹子 她：嗯？ 小蝌蚪：错了，买两包烟 她：一共20块。 小蝌蚪：太贵了，23块行不行？ 她：行，还有什么需要的吗？ 小蝌蚪：有需要，我有一场恋爱需要和妳谈谈 话音刚落就被姑娘的拳击男友爆揍了一顿 小蝌蚪拖着受伤的身躯蹲在路边 微风吹过我的脸庞，我很迷茫 多希望有个富婆能看穿我的逞强 让我卸下所有伪装，走进她的心房 话音刚落就被包工头在电话里骂了一顿 因为线上出现了bug ## 端口转发 由于电脑不在身边，小蝌蚪直接进了间网吧，这个bug的问题出在公司内网数据库中，只要调整数据数据就能解。 可是，没有vpn，怎么连接到内网数据库呢？ 小蝌蚪发出了诡异的笑声，为了应付紧急情况，小蝌蚪早就做好了准备， 通过隧道技术，在内网打穿了一个洞，击穿了内网。以便不时之需。 假设，小蝌蚪个人服务器叫server1，公司的对外网站服务器叫server2，公司内网的数据库叫MySQL. 公司的对外网站服务器server2能通过ssh连接到小蝌蚪的server1， 但server1不能通过ssh连接server2。 并且只有公司的对外网站服务器server2能连接数据库。...
## 背景 今天凌晨一点，突然有个人加我的qq，一看竟然是十年前被我删掉的初恋。。。。 因为之前在qq空间有太多的互动，所以qq推荐好友里面经常推荐我俩互相认识。。。。谜之尴尬 同意好友申请以后，仔细看了她这十年间所有的qq动态和照片。 她变美了，会打扮了，以前瘦瘦的身材配上现在的装扮和妆容，已经是超越我认知的女神了。 而我依然碌碌无为，逐渐臃肿的身体加上日益上扬的发际线，每天为生活操劳和奔波，还穷。 用一句话形容现在的感受就是： “妳已经登上更高的巅峰 而我只能望着妳远去的背影”。 默默点了根烟，把她长得好看的照片都保存了下来。 咦？发现每一张照片都是.png的图片格式。 png？？png的图片我们每天都在用，可是png到底是什么，它的压缩原理是什么？ 很好，接下来我将会给大家一一阐述。 ## 什么是PNG PNG的全称叫便携式网络图型（Portable Network Graphics）是目前最流行的网络传输和展示的图片格式，原因有如下几点： - `无损压缩`：PNG图片采取了基于LZ77派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。 - `体积小`：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG图片文件的体积更小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择PNG格式的图片。 - `支持透明效果`：PNG支持对原图像定义256个透明层次，使得图像的边缘能与任何背景平滑融合，这种功能是GIF和JPEG没有的。 ## PNG类型 PNG图片主要有三个类型，分别为 PNG 8/...
## 背景 狗蛋年近三十，被老母亲逼着跟隔壁村大花成亲 狗蛋厌倦了种田，觉得自己的人生要自己决定 于是在某大型婚恋平台上约了个妹纸 狗蛋感觉有诈 ，于是叫我今晚陪他一起去面基 到了约定的饭店后 我们都震惊了 见到妹纸的一瞬间 我们俩全部都沦陷 宇宙创世的光芒 冲击着我们的天盖骨 由于狗蛋从小到大都在敲代码 没见女人 狗蛋的额头冒出了豆大般的汗珠子 腿就像烧柴油的马达 在桌子下狂抖 女神问：“嗯？地震了？” 我急忙用牙签插进了狗蛋的腿 微笑说：“女神您好 那是我见了您后的心跳声 嘻嘻” 说完我看向狗蛋 他双手紧握狗腿 额头上冒出了土豆般大的汗珠子 稳定住局面后 我快速对女神进行多维度剖析： 通过音色得知她是南方人 身高168cm...
> 作者：第一名的小蝌蚪 > 微信公众号：前端屌丝 > github： https://github.com/airuikun/blog 灰色的天 妳的脸 说分手的语气斩钉截铁 小蝌蚪：“能不走吗” 女神：“不能” 小蝌蚪：“那个男人有什么好” 女神：“他说话好听，长得帅，还有钱” 小蝌蚪：“我没房没车没存款，但我有一颗爱妳的心” 高富帅出现：“我有房有车有存款，我也有一颗爱她的心” 小蝌蚪：“我能跑十公里去为她买宵夜” 高富帅：“我开兰博基尼去为她买宵夜” 小蝌蚪：“我一分钟能敲5000行代码” 高富帅：“你们公司的老板，是我爸” 小蝌蚪：“这。。。” 在金钱力量面前，一切言语都显得那么苍白无力 小蝌蚪跪在地上，望着高富帅远去的尾灯，消失在地平线 失恋第三十天，小蝌蚪上山拜佛 小蝌蚪：“伟大的佛，为何我感情如此失败” 佛曰：“因为你不够渣，一次只爱一个人，下次同时爱一百个试试？” 小蝌蚪若有所悟 小蝌蚪：“伟大的佛，那我如何才能成为江湖第一的渣男” 佛说：“想要成为顶级渣男，你要闯过三关” 佛：“第一关我们称之为”...
## 什么是koa框架？ koa是一个基于node实现的一个新的web框架，它是由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度高。它更express相比，它是一个更轻量的node框架，因为它所有功能都通过插件实现，这种插拔式的架构设计模式，很符合unix哲学。 koa框架现在更新到了2.x版本，本文从零开始，循序渐进，讲解koa2的框架源码结构和实现原理，展示和详解koa2框架源码中的几个最重要的概念，然后手把手教大家亲自实现一个简易的koa2框架，帮助大家学习和更深层次的理解koa2，看完本文以后，再去对照koa2的源码进行查看，相信你的思路将会非常的顺畅。 本文所用的框架是koa2，它跟koa1不同，koa1使用的是generator+co.js的执行方式，而koa2中使用了async/await，因此本文的代码和demo需要运行在node 8版本及其以上，如果读者的node版本较低，建议升级或者安装babel-cli，用其中的babel-node来运行本文涉及到的代码。 本文实现的轻量版koa的完整代码gitlab地址为：[article_koa2][1] ## koa源码结构  上图是koa2的源码目录结构的lib文件夹，lib文件夹下放着四个koa2的核心文件：application.js、context.js、request.js、response.js。 ### application.js application.js是koa的入口文件，它向外导出了创建class实例的构造函数，它继承了events，这样就会赋予框架事件监听和事件触发的能力。application还暴露了一些常用的api，比如toJSON、listen、use等等。 listen的实现原理其实就是对http.createServer进行了一个封装，重点是这个函数中传入的callback，它里面包含了中间件的合并，上下文的处理，对res的特殊处理。 use是收集中间件，将多个中间件放入一个缓存队列中，然后通过koa-compose这个插件进行递归组合调用这一些列的中间件。 ### context.js 这部分就是koa的应用上下文ctx,其实就一个简单的对象暴露，里面的重点在delegate，这个就是代理，这个就是为了开发者方便而设计的，比如我们要访问ctx.repsponse.status但是我们通过delegate，可以直接访问ctx.status访问到它。 ### request.js、response.js 这两部分就是对原生的res、req的一些操作了，大量使用es6的get和set的一些语法，去取headers或者设置headers、还有设置body等等，这些就不详细介绍了，有兴趣的读者可以自行看源码。 ## 实现koa2的四大模块 上文简述了koa2源码的大体框架结构，接下来我们来实现一个koa2的框架，笔者认为理解和实现一个koa框架需要实现四个大模块，分别是： - 封装node http server、创建Koa类构造函数 -...
> 最近在阅读一些tensorflow.js相关的国外文档和文章，学习到了一些人工智能相关的知识，其中通过机器学习来拟合曲线，推测函数方程，这块觉得挺好玩的，想记录下来分享给大家。 ![图片描述][1] # 什么是tensorflow.js tensorflow.js是一个能运行在浏览器和nodejs的一个机器学习、机器训练的javascript库，众所周知在浏览器上用javascript进行计算是很慢的，而tensorflow.js会基于WebGL通过gpu进行运算加速来对高性能的机器学习模块进行加速运算，从而能让我们前端开发人员能在浏览器中进行机器学习和训练神经网络。本文要讲解的项目代码，就是要根据一些规则模拟数据，然后通过机器学习和训练，根据这些数据去反向推测出生成这些数据的公式函数。 # 基本概念 接下来我们用五分钟过一下tensorflow的基本概念，这一部分主要介绍一些概念，笔者会用一些类比方式简单的讲述一些概念，旨在帮助大家快速理解，但是限于精力和篇幅，概念的具体详细定义读者们还是多去参照官方文档。 # 张量（tensors） 张量其实就是一个数组，可以一维或多维数组。张量在tensorflow.js里就是一个数据单元。 ```javascript const tensors = tf.tensor([[1.0, 2.0, 3.0], [10.0, 20.0, 30.0]]); tensors.print(); ``` 在浏览器里将会输出： ![图片描述][2] tensorflow还提供了语义化的张量创建函数：tf.scalar（创建零维度的张量）, tf.tensor1d（创建一维度的张量）, tf.tensor2d（创建二维度的张量）, tf.tensor3d（创建三维度的张量）、tf.tensor4d（创建四维度的张量）以及...