Jealh's Blog

介绍：js 模块加载器。这个开源项目应该是多年前的了，最新版本也是在 2014-03-06 的 2.2.0 版本了。所以，对于现在的浏览器，使用 script 标签的 type=”module” es6-in-depth-modules,便可以使用模块化了。

这篇起因是刷到了玉伯大佬离职的消息，了解到 seajs 这个模块加载器是他写的，所以就阅读了一手，如有冒犯，恳请原谅。

依旧延续上次的方法，我们先从使用方式开始。

1
2
3
4
5
6
7

// 定义模块
define(function (require, exports, module) {
  var $ = require("jquery");
  var Spinning = require("./spinning");

  exports.moduleParam = "param";
});

上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js，一切都很自然。

文件目录结构

内部使用了封装的 seatools npm 包，使用的是 Grunt 打包，使用了其中的 contact file 功能。其会进行文件合并操作，所以会见到源码的 intro.js 与 outro.js 那种不完整的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

concat: {
      dist: {
        src: [
          'src/intro.js',
          'src/sea.js',
          'src/util-lang.js',
          'src/util-events.js',
          'src/util-path.js',
          'src/util-request.js',
          'src/util-cs.js',
          'src/util-deps.js',
          'src/module.js',
          'src/config.js',
          'src/outro.js'
        ],
        dest: 'dist/sea-debug.js'
      },
      ...
}

前言：koa 作为一个轻量版的 node 服务端框架，其独特的洋葱圈模型是值得一探究竟的。这篇 blog 就来学习一下其中的奥妙吧。

开始

首先，我们可以从其使用方式开始。通过引入 koa, 创建一个 app 实例，通过 use 方法，拦截请求。然后 listen 端口。

1
2
3
4
5
6
7
8

const Koa = require("koa");
const app = new Koa();

app.use(async (ctx) => {
  ctx.body = "Hello World";
});

app.listen(3000);

打开源码可以发现，默认导出的是一个 Application 对象。

1

module.exports = class Application extends Emitter {};

原文链接：https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react

深入研究 React 的名为 Fiber 的新架构，了解新协调算法的两个主要阶段。我们将详细了解 React 如何更新 state 和 props 以及处理 children。

对于 JavaScript 中的一些运算符（如：==）来说是比较迷惑的。它们产生的结果有时会让我们变得混淆，那这一切的背后就是“隐式转换”在作祟了。

前置

Number 强制转换

string 解析失败：

• 忽略前导与尾随的空格/行终止符
• 前导 0 不会识别为八进制文本
• +和-允许在字符串开头，且只能出现一次，后面不能跟空格
• Infinity 和 -Infinity 当作字面量
• 空串或全为空格解析成 0
• 不能含数字分割符

原文：https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

一开始，Javascript 没有导入/导出模块的方法。这是个问题。想象一下只在一个文件中编写您的应用程序——那将是一场噩梦！

然后，比我聪明得多的人试图为 Javascript 添加模块化。其中一些是 CJS、AMD、UMD 和 ESM。您可能听说过其中一些方法（还有其他方法，但这些都是大玩家）。

2022 年就要结束了，回想这一年可谓是五味杂陈啊。也是经历许多第一次的一年吧。

原文：https://web.dev/optimize-long-tasks/

你曾被告诉过，不要阻塞主线程并且分解你的长任务，但是有想过这样做的意义吗？

如果你读了很多关于网站性能的资料, 保持 JavasScript 应用程序快速运行的建议往往涉及以下的建议：

• 不要阻塞主线程
• 分解你的长任务

那这些意味着什么？减少 JavaScript 是好的，但这是否自动等同在整个页面生命周期中更快速的用户界面？也许是，也许不是.

背景：一次左滑加载更多的的交互开发

填坑开始

在最开始时，我得到了一个提示，左滑加载更多类似下拉刷新。想了想，好家伙，不就是把下拉刷新横过来嘛，碰巧下拉刷新还是前几天新增的一个组件，这回可以借鉴借鉴了 😍。OK 开干！

定义

svg（Scalable Vector Graphics）可缩放的矢量图形，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。

开始注册事件

• 这里只是简单的设置一些变量值，见下面代码

1
2
3
4
5
6
7

// 注册事件
// DOMPluginEventSystem.ts
SimpleEventPlugin.registerEvents();
EnterLeaveEventPlugin.registerEvents();
ChangeEventPlugin.registerEvents();
SelectEventPlugin.registerEvents();
BeforeInputEventPlugin.registerEvents();

1
2
3
4
5
6
7

allNativeEvent:Set<DOMEventName> = {'click','keyup','keydown',...};

registrationNameDependencies["onClick"] = ["click"];
registrationNameDependencies['onMouseEnter'] = ['mouseout', 'mouseover']; //...

topLevelEventsToReactNames:Map<DOMEventName,string|null> = {"click":"onClick"};