Algorithm 每周至少一道算法题：力扣 20. 有效括号
/** * s 仅由括号 '()[]{}' 组成 * @param {string} s * @return {boolean} */var isValid = function(s) { let stack = [] let obj = { '{':'}', '[':']', '(':')' } for(let i = 0; i < s.length; i++){ const element = s[i] // 如果匹配到左边的括号 则入栈 if( element in obj){ stack.push(element) } else { // 没有匹配到左边的 则弹出栈中括号进行匹配 // 如果没有匹配到 说明不是有效括号 if( element != obj[stack.pop()]){ return false } } } // 如果栈是空的则说明都匹配到了 return !stack.length};
复制代码
Review 阅读并点评至少一篇英文技术文章：前端开发和后端开发的区别到底是什么？
Front End Developer vs Back End Developer – Definition and Meaning In Practice
其实一开始没有前后端这一说法，随着项目结构越来越庞大，慢慢的一部分人专注于处理数据来源和组合逻辑，另外一部分人更关注界面 UI 交互，就分离出了前端和后端。
前端语言基本是 js 的天下，随着 nodejs 日益完善，js 语言也可以跑在服务器上了。
Jeff Atwood 曾提出过 "any application that can be written in JavaScript, will eventually be written in JavaScript."
我相信以后开发者可以使用一种语言就可以开发应用。
Tip 学习至少一个技术技巧：Web Components 的使用
web components 主要用于封装自定义的元素达到复用代码的效果。
由 3 部分组成：
**Custom elements（自定义元素）：**一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML 模板）： [` 和 `` 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
基本使用：
// 创建一个类似 bootstrap 的消息弹窗组件 msg-modalclass MsgModal extends HTMLElement{ // 表示私有属性 #shadowDom; constructor(){ super(); // model open 表示展示虚拟节点 this.#shadowDom = this.attachShadow({mode:"open"}); // 创建对话框 let content = `<div class="mask"></div><div class="modal-container"> <div class="header"> <span class="title">提示</span><span class="close">X</span> </div> <div class="body"> <span>这是一段文本</span> <input type="text" /> </div> <div class="footer"> <span class="cancel">取消</span> <span class="primary">确定</span> </div></div> `; this.#shadowDom.appendChild(content); this.#close(); this.addEvent(); } addEvent(){ let modal = this.#shadowDom.querySelector("modal-container"); modal.onclick = e=>{ switch(e.target.className){ case 'close': this.#close(); this.dispatchEvent(new CustomEvent('cancel')); break; case 'cancel': this.dispatchEvent(new CustomEvent('cancel')); this.#close(); break; case 'primary': this.dispatchEvent(new CustomEvent('success')); this.#close(); break; } }
} #close(){ this.#shadowDom.querySelector(".mask").style.display = "none"; this.#shadowDom.querySelector(".modal-container").style.display = "none"; } open(){ this.#shadowDom.querySelector(".mask").style.display = "block"; this.#shadowDom.querySelector(".modal-container").style.display = "block"; }}customElements.define("msg-modal",MsgModal);
复制代码
Share 分享一篇观点和思考的技术文章：
什么是 WebGL
评论