回望初心,笑看那年盛夏

回望初心,笑看那年盛夏

六月 23, 2021 本文共计: 1.4k 字 预计阅读时长: 5分钟

我猜你肯定是被标题吸引了,其实,你没看错,这是一篇”记叙文”或者说是”议论文”。

前言

开头的话,我可以义正言辞的声明,我肯定不会在本文中去写代码或者技术啥的,因为男人的嘴骗人的鬼。

引子

回望初心,初心是什么呢?初心当然是在技术的海洋里自由翱翔,曾经写过毕业于MIT大学,因为热爱开源,当然也想站在开源的立场去更多的对待技术。

大智若愚说的是那些智者,回首毕业这么久,我遇到了很多人,也结识了一些志同道合的技术人,像小夕淘戏卡字辈……

每当深夜去读大家的文章的时候,总有一种望尘莫及的感觉,在深思,我能不能像这样,然后又给自己打气:我能这样,我可以的,完全没问题,那一字一句中,透露着那个时候的不羁与中二。

看过《惊悚乐园》,至今怀念不觉若雨那种情调,怀念甚至向往一代笔者的风范(我不会告诉你至今我还文笔稚嫩,稚嫩到半天写技术爽文章的时候,憋不出一句屁来。),害!算了,那段过去的,就让它过去吧。

我有时候确实想过,去做一个好的作者,去做一个好的技术产出者,或许是疲于内卷,难道我的目标就是成为卷王?一次又一次的在内心呐喊,向着那个另一面的自己(我相信一个人存在双重人格,真的,我相信),这个时候的我应该露出玩味的笑容,然后看着你:嗨,好兄弟(好姐妹),你看过《暗黑魔女库伊拉》吗?就那个一半头发白的,一半头发黑的,拥有者双重人格的外国女人。当然这里的”外国女人”不包含任何歧视的语气,女主还是很漂亮的……

不好意思,又扯远了,刚刚我们聊到了初心,然后到了内卷,然后到了库伊拉(电影)接下来,我要介绍的那年盛夏:

正文

那年盛夏究竟发生了什么呢?

此处省略10w字。

番外篇:AMD\UMD|CMD|CJS|ESM究竟怎么玩,怎么玩?

第一个怎么玩的意思就是怎么去认识它,了解它:

像我们了解鲁迅先生,从百草园三味书屋,再到儿时的玩伴少年闰土……

AMD:将代码写成让浏览器认识的样子。

1
2
3
4
define(['jQuery'], function ($) {
// todo some
});

它作为Require.js的模块定义规范,(这里提一嘴,Require.js是什么呢?RequireJS不是框架,是模块加载器;)

虽然我不太了解,甚至只有在刷面试题的时候才了解,但是不得不说这是时代的产物,是ES Module之前的杰作,其实想一想jQuery,在ReactVueAngularSevlte…..这些杰作未出来之前,再想想,从真实DOM虚拟DOM。这些东西都是时代的产物,过去的东西并没有死去,过去的东西只是慢慢的在被取代。

CMD是在sea.js中被提出来的,当然也是针对于浏览器端。

只不过针对与AMD而言,它属于哪里需要再在哪里加载。

1
2
3
4
5
6
7

define(function(require, exports, module) {
var a = require('xxx.js')
console.log(a)
var b = require('yyy.js')
console.log(b)
})

但是这里的就地加载,并不是说,碰到require再去加载:

可以看下sea.js的源码中是这样干的。

1
2
3
4
5
window.define = function(callback) {
var id = getCurrentJs()
var depsInit = s.parseDependencies(callback.toString())
var a = depsInit.map(item => basepath(item))
}

其实用大白话讲就是,AMD&CMD都是会提前加载所有模块,但是AMD是加载完就执行,而CMD是碰见require再执行。

当然也可以推翻市面上的说法:

ADM 是异步的,CMD是同步的。

加载当然都是异步的,只不过CMD执行是一个同步过程。

CJS:CommonJS

不要被CJS吓到了,这玩意儿就是个缩写:

1
var _ = require('lodash');

适用于Node端的模块加载使用方案,同步引入。

这里可以顺带提一口,TS下的引入:

1
import _ = require('lodash')

这种语法是合乎规范的:

可以参见: https://www.typescriptlang.org/docs/handbook/modules.html

也可以看看stackoverflow上,大佬们的讨论: https://stackoverflow.com/questions/52534910/difference-between-import-x-requirex-and-const-x-requirex-in-typ

UMD:既适用于Node端,也适用于客户端

可以理解为AMD/CMD/ESM + CJS的结合。

看过常用库(jQuery,pubsub.js)的同学肯定见过如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node
module.exports = factory(require('jquery'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
return {};
}));

ESM也是大势所趋,浏览器端支持良好,Node端也开始慢慢支持

对于时下,广为人知的几个模块,我们先讨论到这里,这里可以先打个预备草稿:

另外一个玩一玩,当然指的是,知道他们后,抛砖引玉,去玩一玩主流的打包工具:

rollupgulpwebpacktsdx……

真的太多太多了,但是各有优势,然后我想,我还可以就这个打包工具再出一篇文章:《从零开始打造组件库/工具库》

期待下一期再与你见面~