JavaScript 组件之旅（二）编码实现和算法_javascript技巧
首先，我们要考虑一下它的源文件布局，也就是决定代码如何拆分到独立的文件中去。为什么要这么做呢？还记得上期结尾处我提到这个组件会使用“外部代码”吗？为了区分代码的用途，决定将代码至少分成两部分：外部代码文件和 Smart Queue 文件。
区分用途只是其一，其二，分散到独立文件有利于代码的维护。试想，以后的某一天你决定要在现有的队列管理基本功能之上，添加一些新的扩展功能，或是把它包装成某个实现特定任务的组件，而又希望保持现有功能（内部实现）和调用方式（对外接口）不变，那么将新的代码写到单独的文件是最好的选择。
嗯，下期会重点谈谈文件布局的话题，现在要开始切入正题了。第一步，当然是要为组件创建自己的命名空间，组件所有的代码都将限制在这个顶层命名空间内：
<span style="COLOR: #0000c0">var</span> SmartQueue = window.SmartQueue || {};
SmartQueue.version = <span style="COLOR: #008000">'0.1'</span>;初始化的时候，如果碰到命名空间冲突就把它拉过来用。通常这个冲突是由重复引用组件代码导致的，因此“拉过来用”会将对象以同样的实现重写一次；最坏的情况下，如果碰巧页面上另一个对象也叫 SmartQueue, 那不好意思了，我会覆盖你的实现——如果没有进一步的命名冲突，基本上两个组件可以相安无事地运行。同时顺便给它一个版本号。
接着，按三个优先级为 SmartQueue 创建三个队列：
<span style="COLOR: #0000c0">var</span> Q = SmartQueue.Queue = [[], [], []];
每个都是空数组，因为还没有任务加进去嘛。又顺便给它建个“快捷方式”，后面要访问数组直接写 Q[n] 就可以啦。
接下来，我们的主角 Task 隆重登场——怎么 new 一个 Task, 定义在这里：
<span style="COLOR: #0000c0">var</span> T = SmartQueue.Task = <span style="COLOR: #b000b0">function</span>(fn, level, name, dependencies) {
<span style="COLOR: #c00000">if</span>(<span style="COLOR: #c00000">typeof</span> fn !== FUNCTION) {
<span style="COLOR: #c00000">throw</span> <span style="COLOR: #c00000">new</span> <span style="COLOR: #606060">Error</span>(<span style="COLOR: #008000">'Invalid argument type: fn.'</span>);
}
<span style="COLOR: #0000c0">this</span>.fn = fn;
<span style="COLOR: #0000c0">this</span>.level = _validateLevel(level) ? level : LEVEL_NORMAL;
<span style="COLOR: #707070"> // detect type of name</span>
<span style="COLOR: #0000c0">this</span>.name = <span style="COLOR: #c00000">typeof</span> name === STRING && name ? name : <span style="COLOR: #008000">'t'</span> + _id++;
<span style="COLOR: #707070"> // dependencies could be retrieved as an 'Object', so use instanceof instead.</span>
<span style="COLOR: #0000c0">this</span>.dependencies = dependencies <span style="COLOR: #c00000">instanceof</span> <span style="COLOR: #606060">Array</span> ? dependencies : [];
};里面的具体细节就不说了，有必要的注释，一般我们的代码也能做到自我描述，后面代码也是这样。这里告诉客户（使用者）：你想新建一个 SmartQueue.Task 实例，就要至少传一个参数给这个构造函数（后 3 个都可以省略进行缺省处理），否则抛出异常伺候。
但是这还不够，有时候，客户希望从已有 Task 克隆一个新实例，或是从一个“残废体”（具有部分 Task 属性的对象）修复出“健康体”（真正的 Task 对象实例），通过上面的构造方式就有点不爽了——客户得这样写：
<span style="COLOR: #0000c0">var</span> task1 = <span style="COLOR: #c00000">new</span> SmartQueue.Task(obj.fn, <span style="COLOR: #008000">1</span>, <span style="COLOR: #008000">''</span>, obj.dependencies);
我很懒，我只想传 fn 和 dependencies 两个属性，不想做额外的事情。好吧，我们来重构一下构造函数：
<span style="COLOR: #0000c0">var</span> _setupTask = <span style="COLOR: #b000b0">function</span>(fn, level, name, dependencies) {
<span style="COLOR: #c00000">if</span>(<span style="COLOR: #c00000">typeof</span> fn !== FUNCTION) {
<span style="COLOR: #c00000">throw</span> <span style="COLOR: #c00000">new</span> <span style="COLOR: #606060">Error</span>(<span style="COLOR: #008000">'Invalid argument type: fn.'</span>);
}
<span style="COLOR: #0000c0">this</span>.fn = fn;
<span style="COLOR: #0000c0">this</span>.level = _validateLevel(level) ? level : LEVEL_NORMAL;
<span style="COLOR: #707070"> // detect type of name</span>
<span style="COLOR: #0000c0">this</span>.name = <span style="COLOR: #c00000">typeof</span> name === STRING && name ? name : <span style="COLOR: #008000">'t'</span> + _id++;
<span style="COLOR: #707070"> // dependencies could be retrieved as an 'Object', so use instanceof instead.</span>
<span style="COLOR: #0000c0">this</span>.dependencies = dependencies <span style="COLOR: #c00000">instanceof</span> <span style="COLOR: #606060">Array</span> ? dependencies : [];
};
<span style="COLOR: #0000c0">var</span> T = SmartQueue.Task = <span style="COLOR: #b000b0">function</span>(task) {
<span style="COLOR: #c00000">if</span>(arguments.length > <span style="COLOR: #008000">1</span>) {
_setupTask.apply(<span style="COLOR: #0000c0">this</span>, arguments);
} <span style="COLOR: #c00000">else</span> {
_setupTask.call(<span style="COLOR: #0000c0">this</span>, task.fn, task.level, task.name, task.dependencies);
}
<span style="COLOR: #707070"> // init context/scope and data for the task.</span>
<span style="COLOR: #0000c0">this</span>.context = task.context || window;
<span style="COLOR: #0000c0">this</span>.data = task.data || {};
};如此一来，原来的构造方式可以继续工作，而上面的懒人可以这样传入一个“残废体”：
<span style="COLOR: #0000c0">var</span> task1 = <span style="COLOR: #c00000">new</span> SmartQueue.Task({<span style="COLOR: #c00000">fn</span>: obj.fn, <span style="COLOR: #c00000">dependencies</span>: obj.dependencies});当构造函数收到多个参数时，按之前的方案等同处理；否则，视唯一的参数为 Task 对象或“残废体”。这里通过 JavaScript 中的 <font face="新宋体">apply</font>/<font face="新宋体">call</font> 方法将新实例传给重构出来的 <font face="新宋体">_setupTask</font> 方法，作为该方法的上下文 (context, 也有称为 scope), <font face="新宋体">apply</font>/<font face="新宋体">call</font> 是 JavaScript 在方法之间传递上下文的法宝，要用心体会哦。同时，允许用户定义 <font face="新宋体">task.fn</font> 在执行时的上下文，并将自定义的数据传递给执行中的 fn.
经典的 JavaScript 对象三段式是什么？
- 定义对象的构造函数
- 在原型上定义属性和方法
- new 对象，拿来用
所以，下面要为 <font face="新宋体">SmartQueue.Task</font> 对象的原型定义属性和方法。上期分析过 Task （任务）有几个属性和方法，部分属性我们已经在 <font face="新宋体">_setupTask</font> 中定义了，下面是原型提供的属性和方法：
T.prototype = {
<span style="COLOR: #c00000">enabled</span>: <span style="COLOR: #008000">true</span>,
<span style="COLOR: #c00000">register</span>: <span style="COLOR: #b000b0">function</span>() {
<span style="COLOR: #0000c0">var</span> queue = Q[<span style="COLOR: #0000c0">this</span>.level];
<span style="COLOR: #c00000">if</span>(_findTask(queue, <span style="COLOR: #0000c0">this</span>.name) !== -<span style="COLOR: #008000">1</span>) {
<span style="COLOR: #c00000">throw</span> <span style="COLOR: #c00000">new</span> <span style="COLOR: #606060">Error</span>(<span style="COLOR: #008000">'Specified name exists: '</span> + <span style="COLOR: #0000c0">this</span>.name);
}
queue.push(<span style="COLOR: #0000c0">this</span>);
},
<span style="COLOR: #c00000">changeTo</span>: <span style="COLOR: #b000b0">function</span>(level) {
<span style="COLOR: #c00000">if</span>(!_validateLevel(level)) {
<span style="COLOR: #c00000">throw</span> <span style="COLOR: #c00000">new</span> <span style="COLOR: #606060">Error</span>(<span style="COLOR: #008000">'Invalid argument: level'</span>);
}
level = parseInt(level, <span style="COLOR: #008000">10</span>);
<span style="COLOR: #c00000">if</span>(<span style="COLOR: #0000c0">this</span>.level === level) {
<span style="COLOR: #c00000">return</span>;
}
Q[<span style="COLOR: #0000c0">this</span>.level].remove(<span style="COLOR: #0000c0">this</span>);
<span style="COLOR: #0000c0">this</span>.level = level;
<span style="COLOR: #0000c0">this</span>.register();
},
<span style="COLOR: #c00000">execute</span>: <span style="COLOR: #b000b0">function</span>() {
<span style="COLOR: #c00000">if</span>(<span style="COLOR: #0000c0">this</span>.enabled) {
<span style="COLOR: #707070"> // pass context and data</span>
<span style="COLOR: #0000c0">this</span>.fn.call(<span style="COLOR: #0000c0">this</span>.context, <span style="COLOR: #0000c0">this</span>.data);
}
},
<span style="COLOR: #c00000">toString</span>: <span style="COLOR: #b000b0">function</span>() {
<span style="COLOR: #0000c0">var</span> str = <span style="COLOR: #0000c0">this</span>.name;
<span style="COLOR: #c00000">if</span>(<span style="COLOR: #0000c0">this</span>.dependencies.length) {
str += <span style="COLOR: #008000">' depends on: ['</span> + <span style="COLOR: #0000c0">this</span>.dependencies.join(<span style="COLOR: #008000">', '</span>) + <span style="COLOR: #008000">']'</span>;
}
<span style="COLOR: #c00000">return</span> str;
}
};如你所见，逻辑非常简单，也许你已经在一分钟内扫过了代码，嘴角不经意间露出一丝心领神会。不过，这里要说的是简单而且通常最不被重视的 <font face="新宋体">toString</font> 方法。在一些高级语言中，为自定义对象实现 <font face="新宋体">toString</font> 方法被作为最佳实践准则而推荐，为什么呢？因为 <font face="新宋体">toString</font> 可以很方便地在调试器中提供有用的信息，可以方便地将对象基本信息写入日志；在统一的编程模式中，实现 <font face="新宋体">toString</font> 可以让你少写一些代码。
嗯，我们继续推进，我们要实现 SmartQueue 的具体功能。上期分析过，SmartQueue 只有一个实例，因此我们决定直接在 SmartQueue 下面创建方法：
SmartQueue.init = <span style="COLOR: #b000b0">function</span>() {
Q.forEach(<span style="COLOR: #b000b0">function</span>(queue) {
queue.length = <span style="COLOR: #008000">0</span>;
});
};这里用到 JavaScript 1.6 为 Array 对象提供的遍历方法 <font face="新宋体">forEach</font>. 之所以这样写是因为我们假定“外部代码”已经在前面运行过了。设置 Array 对象的 <font face="新宋体">length</font> 属性为 <font face="新宋体">0</font> 导致，它被清空并且释放所有的项（数组单元）。
最后一个方法 <font face="新宋体">fire</font>, 是整个组件最主要的方法，它负责对所有任务队列进行排序，并逐个执行。由于代码稍长了一点，这里只介绍排序使用的算法和实现方式，完整代码在这里。
<span style="COLOR: #0000c0">var</span> _dirty = <span style="COLOR: #008000">true</span>, <span style="COLOR: #707070">// A flag indicates weather the Queue need to be fired.</span>
_sorted = [], index;
<span style="COLOR: #707070">// Sort all Queues.</span>
<span style="COLOR: #707070">// ref: <a href="http://en.wikipedia.org/wiki/Topological_sorting"><font color="#0000ff">http://en.wikipedia.org/wiki/Topological_sorting</font></a></span>
<span style="COLOR: #0000c0">var</span> _visit = <span style="COLOR: #b000b0">function</span>(queue, task) {
<span style="COLOR: #c00000">if</span>(task._visited >= <span style="COLOR: #008000">1</span>) {
task._visited++;
<span style="COLOR: #c00000">return</span>;
}
task._visited = <span style="COLOR: #008000">1</span>;
<span style="COLOR: #707070"> // find out and visit all dependencies.</span>
<span style="COLOR: #0000c0">var</span> dependencies = [], i;
task.dependencies.forEach(<span style="COLOR: #b000b0">function</span>(dependency) {
i = _findTask(queue, dependency);
<span style="COLOR: #c00000">if</span>(i != -<span style="COLOR: #008000">1</span>) {
dependencies.push(queue[i]);
}
});
dependencies.forEach(<span style="COLOR: #b000b0">function</span>(t) {
_visit(queue, t);
});
<span style="COLOR: #c00000">if</span>(task._visited === <span style="COLOR: #008000">1</span>) {
_sorted[index].push(task);
}
},
_start = <span style="COLOR: #b000b0">function</span>(queue) {
queue.forEach(<span style="COLOR: #b000b0">function</span>(task) {
_visit(queue, task);
});
},
_sort = <span style="COLOR: #b000b0">function</span>(suppress) {
<span style="COLOR: #c00000">for</span>(index = LEVEL_LOW; index var queue = Q[index];
_sorted[index] = [];
_start(queue);
<span style="COLOR: #c00000">if</span>(!suppress && queue.length > _sorted[index].length) {
<span style="COLOR: #c00000">throw</span> <span style="COLOR: #c00000">new</span> <span style="COLOR: #606060">Error</span>(<span style="COLOR: #008000">'Cycle found in queue: '</span> + queue);
}
}
};我们将按任务指定的依赖关系对同一优先级内的任务进行排序，确保被依赖的任务在设置依赖的任务之前运行。这是一个典型的深度优先的拓扑排序问题，维基百科提供了一个深度优先排序算法，大致描述如下：
图片来自维基百科
- 访问待排序的每一个节点
- 如果已经访问过了，则返回
- 否则标记为已访问
- 找出它连接（在这里是依赖）的每个节点
- 跳到内层1递归访问这些节点
- 访问完了就把当前节点加入已排序列表
- 继续访问下一个
如果 A 依赖 B, B 依赖 C, C 依赖 A, 那么这 3 个节点形成了循环依赖。 文中指出这个算法并不能检测出循环依赖。通过标记节点是否已访问，可以解决循环依赖造成的递归死循环。我们来分析一下循环依赖的场景：
从节点 A 出发的时候，它被标记为已访问，当从节点 C 再回到节点 A 的时候，它已经被访问过了。不过这个时候 C 并不知道 A 是否在自己的上游链上，所以不能直接判定发生了循环依赖，因为 A 可能是其他已“处理”（跑完了内层递归）过的节点。如果我们知道节点是不是第一次被访问过，就可以判断是哪一种情况。
改造一下上面的算法，将“是否已访问”改成“访问计数” (<font face="新宋体">task._visited++</font>)。仅当节点被访问过 1 次的时候 (<font face="新宋体">task._visited === 1</font>)，才将其加入到已排序列表，全部遍历完之后，如果待排序的节点数比已排序的多 (<font face="新宋体">queue.length > _sorted[index].length</font>)，则表明待排序中多出的节点发生了循环依赖。
至此，队列管理组件的编码实现已经完成。什么？怎么使用？很简单啦：
<span style="COLOR: #0000c0">var</span> t1 = <span style="COLOR: #c00000">new</span> SmartQueue.Task(<span style="COLOR: #b000b0">function</span>() {
alert(<span style="COLOR: #008000">"Hello, world!"</span>);
}), t2 = <span style="COLOR: #c00000">new</span> SmartQueue.Task(<span style="COLOR: #b000b0">function</span>() {
alert(<span style="COLOR: #008000">"High level task has name"</span>);
}, <span style="COLOR: #008000">2</span>, <span style="COLOR: #008000">'myname'</span>);
t1.register(); t2.register();
SmartQueue.fire();更多功能，如任务的依赖，等待你去发掘哦。
本期贴出的代码都是一些局部片段，部分 helper 方法代码没有贴出来。查看完整的代码请访问这里。后面我们将介绍如何管理组件文件，以及构建组件，下期不见不散哦。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
CLIP-BEVFormer：明確監督BEVFormer結構，提升長尾偵測性能
Mar 26, 2024 pm 12:41 PM
寫在前面&筆者的個人理解目前，在整個自動駕駛系統當中，感知模組扮演了其中至關重要的角色，行駛在道路上的自動駕駛車輛只有通過感知模組獲得到準確的感知結果後，才能讓自動駕駛系統中的下游規控模組做出及時、正確的判斷和行為決策。目前，具備自動駕駛功能的汽車中通常會配備包括環視相機感測器、光達感測器以及毫米波雷達感測器在內的多種數據資訊感測器來收集不同模態的信息，用於實現準確的感知任務。基於純視覺的BEV感知演算法因其較低的硬體成本和易於部署的特點，以及其輸出結果能便捷地應用於各種下游任務，因此受到工業
使用C++實現機器學習演算法：常見挑戰及解決方案
Jun 03, 2024 pm 01:25 PM
C++中機器學習演算法面臨的常見挑戰包括記憶體管理、多執行緒、效能最佳化和可維護性。解決方案包括使用智慧指標、現代線程庫、SIMD指令和第三方庫，並遵循程式碼風格指南和使用自動化工具。實作案例展示如何利用Eigen函式庫實現線性迴歸演算法，有效地管理記憶體和使用高效能矩陣操作。
探究C++sort函數的底層原理與演算法選擇
Apr 02, 2024 pm 05:36 PM
C++sort函數底層採用歸併排序，其複雜度為O(nlogn)，並提供不同的排序演算法選擇，包括快速排序、堆排序和穩定排序。
人工智慧可以預測犯罪嗎？探索CrimeGPT的能力
Mar 22, 2024 pm 10:10 PM
人工智慧(AI)與執法領域的融合為犯罪預防和偵查開啟了新的可能性。人工智慧的預測能力被廣泛應用於CrimeGPT(犯罪預測技術)等系統，用於預測犯罪活動。本文探討了人工智慧在犯罪預測領域的潛力、目前的應用情況、所面臨的挑戰以及相關技術可能帶來的道德影響。人工智慧和犯罪預測：基礎知識CrimeGPT利用機器學習演算法來分析大量資料集，識別可以預測犯罪可能發生的地點和時間的模式。這些資料集包括歷史犯罪統計資料、人口統計資料、經濟指標、天氣模式等。透過識別人類分析師可能忽視的趨勢，人工智慧可以為執法機構
改進的檢測演算法：用於高解析度光學遙感影像目標檢測
Jun 06, 2024 pm 12:33 PM
01前景概要目前，難以在檢測效率和檢測結果之間取得適當的平衡。我們研究了一種用於高解析度光學遙感影像中目標偵測的增強YOLOv5演算法，利用多層特徵金字塔、多重偵測頭策略和混合注意力模組來提高光學遙感影像的目標偵測網路的效果。根據SIMD資料集，新演算法的mAP比YOLOv5好2.2%，比YOLOX好8.48%，在偵測結果和速度之間達到了更好的平衡。 02背景&動機隨著遠感技術的快速發展，高解析度光學遠感影像已被用於描述地球表面的許多物體，包括飛機、汽車、建築物等。目標檢測在遠感影像的解釋中
九章雲極DataCanvas多模態大模型平台的實踐與思考
Oct 20, 2023 am 08:45 AM
一、多模態大模型的歷史發展上圖這張照片是1956年在美國達特茅斯學院舉行的第一屆人工智慧workshop，這次會議也被認為拉開了人工智慧的序幕，與會者主要是符號邏輯學屆的前驅（除了前排中間的神經生物學家PeterMilner）。然而這套符號邏輯學理論在隨後的很長一段時間內都無法實現，甚至到80年代90年代還迎來了第一次AI寒冬期。直到最近大語言模型的落地，我們才發現真正承載這個邏輯思維的是神經網絡，神經生物學家PeterMilner的工作激發了後來人工神經網絡的發展，也正因為此他被邀請參加了這個
演算法在 58 畫像平台建置中的應用
May 09, 2024 am 09:01 AM
一、58畫像平台建置背景首先和大家分享下58畫像平台的建造背景。 1.傳統的畫像平台傳統的想法已經不夠，建立用戶畫像平台依賴數據倉儲建模能力，整合多業務線數據，建構準確的用戶畫像；還需要數據挖掘，理解用戶行為、興趣和需求，提供演算法側的能力；最後，還需要具備數據平台能力，有效率地儲存、查詢和共享用戶畫像數據，提供畫像服務。業務自建畫像平台和中台類型畫像平台主要區別在於，業務自建畫像平台服務單條業務線，按需定制；中台平台服務多條業務線，建模複雜，提供更為通用的能力。 2.58中台畫像建構的背景58的使用者畫像
即時加SOTA一飛沖天！ FastOcc：推理更快、部署友善Occ演算法來啦！
Mar 14, 2024 pm 11:50 PM
寫在前面&筆者的個人理解在自動駕駛系統當中，感知任務是整個自駕系統中至關重要的組成部分。感知任務的主要目標是使自動駕駛車輛能夠理解和感知周圍的環境元素，如行駛在路上的車輛、路旁的行人、行駛過程中遇到的障礙物、路上的交通標誌等，從而幫助下游模組做出正確合理的決策和行為。在一輛具備自動駕駛功能的車輛中，通常會配備不同類型的信息採集感測器，如環視相機感測器、雷射雷達感測器以及毫米波雷達感測器等等，從而確保自動駕駛車輛能夠準確感知和理解周圍環境要素，使自動駕駛車輛在自主行駛的過程中能夠做出正確的決斷。目
