前端依赖包的种种往事
本文简单聊聊前端依赖管理器npm的大致逻辑npm基本上是目下的前端项目管理依赖的默认工具。一般项目工程中所涉及到的所有依赖包，均会记录在package.json文件中。去到公司，初次down下来的项目，需要我们通过命令npm install来安装所有依赖。那么承担依赖管理器的npm，具体是如何管理的呢？同时他跟其他的比如cnpm、yarn有什么区别呢？
一. 版本规则一般在package.json文件中，依赖的信息格式如下:
"dependencies": {
"antd": "3.1.2",
"react": "~16.0.1",
"redux": "^3.7.2",
"lodash": "*"
}
版本格式为：主版本号.次版本号.修订号版本号的递增规则如下：
主版本号：当你做了不兼容的 API 修改。大改，更新需谨慎。
次版本号：当你做了向下兼容的功能性新增。加功能的小改, 如antd新增了某些组件
修订号：当你做了向下兼容的问题修正。修复问题的版本
除了指定明确的版本号，也可以指定一个范围。
~：只升级修订号
^：升级 ...
React系列: 第一回(基础干货)
自本文开始，我们将逐步介绍react相关的所有内容。
是啥一个标准的数据驱动视图的前端开发框架。整体逻辑如下：
带来了啥？
声明式编码 + 虚拟dom + diff算法，一种编程范式，关注的是你要做什么，而不是如何做。主要区别之前jquery时代的开发模式，专注功能逻辑的开发，而无需关注dom实现。
组件化开发。基本标准：可组合、可维护、可复用
react-native中，使用js开发移动端应用
jsx语法JavaScript 中夹杂着 HTML 的语句在其中,称之为jsx语法，它是对 JavaScript 语法的扩展，jsx代码经过babel编译后，会生成React.createElement的调用，本质是React.createElement的语法糖。为了生成虚拟dom，两种写法：
// jsx
const element = <h1 className="title">Hello, React</h1>;
+ babel转换后，等同于下方 ↓
// React.createElement
const element = React.createElement( ...
Eventloop事件循环，到底是个啥？
本文介绍所谓EventLoop相关内容在具体讲这个话题前，我强烈推荐大家去看一篇文章，就是朴灵对阮一峰讲解的eventloop文章的注解，很有意思。对于操作系统和硬件层面的内容有过学习的同学，看完之后的感觉相信跟我是一样的，高下立判。类比有时候是需要的，但类比终究是类比，他会丧失很多细节。最严重的，类比到了最后，就变成了胡扯。
https://www.cnblogs.com/simonbaker/p/5715393.html
首先思考：为什么说js是单线程语言？
专业点讲，js是一门非阻塞的单进程单线程语言，就是说，不存在并行代码，只能一行一行的执行。应用场景决定了语言特性。js起家就是用于操作dom。倘若js是多线程。目下有两个线程，其中一个改了节点内容，另一个删除了节点，执行哪个？注意：线程的执行是并行的。所以，可以姑且认为现在是单线程，今后至少在相当长的时间内，依旧会是单线程。
那么一个显然的问题就来了，我们经常听到的js中的异步请求是什么鬼？不是说是单线程吗？异步任务是谁在执行？是跑js的那个环境，需要严重分清一个概念，循环队列这种规则机制，不是js的运行机制，而是跑j ...
仿生学应用：电子蝌蚪(二)
本文中，我们继续讲解，怎么让蝌蚪军团，一个个的逼真的动起来的。前面简单介绍了小蝌蚪这个类的基本变量，及蝌蚪实例化及绘制出来的方法，实现了基本绘制的功能。动起来实际很简单，无非就是每次执行run的时候，给当前蝌蚪实例移动到一个新的位置，然后重绘即可。那么问题是，这个新的位置，我们该如何确定。
最简单粗暴的方式，就是随便去一个随机向量，用该向量，去更新实例坐标。
updateVector () {
this.vector = paper.Point.random()
}
updatePosition () {
const newP = this.position.add(this.vector)
this.position = newP.clone()
}
moveHead () {
this.head.position = this.position
}
run (boids: Array<Boid>) {
// this.flock(boids)
this.updateVector( ...
仿生学应用：电子蝌蚪(一)
前面介绍了一些基础概念和示例，本篇开始进入正题，目标是实现一个电子化蝌蚪的小项目首先再来回看一下我们想要做出的最终效果：
界面中的每一个小蝌蚪，彷佛有生命般的在”自由“运动，他们长得一样，身体的结构都是由一个头，一个颈部和一个尾巴组成，但是各自都有各自的运动方向，及运动速度,同时还添加了类似碰撞检测的机制。这模仿的效果，相当的惊艳。以上的描述，实际上就是我们本次任务的需求，那么废话不多说，让我们钻进代码的世界中，用代码，“创造虚拟生命”吧。本项目是基于vue2框架开发。
执行逻辑：在mounted生命周期中，依次调用了三个函数mounted() {
this.init()
this.drawLovePath()
this.drawTadpole()
},
首先，我们需要利用paperjs，我们需要初始化世界。
initWorld() {
console.log("$-_------------初始化世界---------------$-_-");
const canvas = this.$refs.tadpole;
// can ...
CSS系列：基础内容
页面视图相关网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕物理分辨率的高： window.screen.height屏幕物理分辨率的宽： window.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度： window.screen.availWidth屏幕缩放因子：window.device ...
Webpack系列：第五回(性能优化)
本文中，我们会借助一个项目，展示webpack的各个优化手段，对项目的优化效果代码分割🔴 优化前（单个 Bundle）bundle.js: 315 KB
总文件数: 1 个
首屏加载: 需要下载全部 315 KB
缓存效率: 低（任何代码变化都会重新下载整个文件）
🟢 优化后（代码分割）main.xxx.js: 71.8 KB (应用代码)
vendors.xxx.js: 552 KB (第三方库)
总文件数: 2 个
首屏加载: 只需下载 71.8 KB 的应用代码
缓存效率: 高（第三方库代码变化少，缓存效果好）
配置内容：optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
priority: 10,
}, ...
Vue.js系列：Diff（patch）算法
本文尝试尽可能详细的介绍Diff(patch)算法的核心原理首先我们要知道,diff用来干嘛的？比较新旧两节点的差异, 尽可能少的操作dom, 更新视图。
更新页面的策略有两种
其一：频繁操作dom
其二：将页面的所有节点，转化成AST，又称为虚拟dom表示，本质就是js的对象。然后通过一些算法，找出前后两者的差异，更新差异之后，再还原成真实的dom节点render。区别在于： 第一种，改数据，render，改数据，render….第二种，改数据，改数据，改数据，改数据，改数据，render。
代码举例验证一个事实：频繁的操作数据，远快于频繁的操作dom，因为后者会增加一个额外的开销：渲染
// 第一组
<script>
const div = document.getElementById('123')
console.time('1')
for (let i = 0; i < 100000; i++) {
div.innerHTML = i
}
console.timeEnd('1')
&l ...
无线电研究：第一回
由于个人近期的需要，准备着手研究一下无线电，所以就有了本系列，用于一些必要的记录。本文做一个开场热身。
谈及无线电就不得不提电磁波。世界是神奇的，我们都知道空气存在，但是不可见，无线电波亦是如此。任何高于绝对零度（零下273，15摄氏度）的物体，都在发射着电磁波，包括人。温度越高，波长越短。这就是测温枪的原理。想象一下，如果电磁波可见，那么这个世界会是什么样的盛况？我们看每一个人，都是大仙。电磁波的传播速度就是光的速度，30万公里/s，光也是一种电磁波。
无线电波分布在3Hz–3000GHz的频率范围内，被分成了12个波段，如下所示。
无线电特性
频率越低，波长越长，覆盖距离越远，绕射能力越强，穿透能力越低。反之亦反。这就是为什么，在城市中，常见的手持电台都是分米波，就是俗称的UV段中的U，见上图的UHF和VHF。不需要传输的有多远，但需要强悍的穿透力。但是在野外活动，基本就是V段。
电磁波的发射，需要有足够高的震荡频率。频率越高，发射电磁波的本领越大。
电磁波的接收。电磁波在空气中传播时，如果遇到导体，会让导体产生感应电流，感应电流的频率和激发他的电磁波频率一致。当接收 ...
网络请求与远程资源：第一回
本系列文章主要用于介绍获取网络资源的三种方式：Ajax、Fetch和WebSocket1. Ajax（Asynchronous Javascript + XML），异步js和xml注：ajax基本被淘汰，现在基本是fetch或者axios曾经的页面及其简单。页面类似于公告栏，文字加图片。打开地址拿到资源展示即可。什么？你说你还想要点击交互？刷新页面吧。而作为上古技术的ajax的出现，第一次实现了无需刷新也能重新发送请求获取数据。提到ajax就一定会涉及到XHR（XMLHttpRequest）。下面时经典的ajax请求写法
const xhr = new XMLHttpRequest()
xhr.onreadystateChange = function() {
// 状态码4代表响应完成
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
...