Posts

为什么要从 Second Commit 开始阅读呢？ 答案来自我看过我的一篇博客，但是关于 First Commit，基本是关于 Grunt 的配置，现代前端开发中，多以使用 Webpack 为主，所以粗略看了一下之后并无记录的打算。 不罗嗦，直接看代码 在这段代码我们已经触及了 Vue 的核心：data bind，实际上也跟我们现在写的 Vue 差不多（当然，这里不是指 SFC ） 首先在 HTML 部分，我们看到了文档中的“Mustache”语法，接下来我们看看最初的 data bind 是如何实现的。 在第 23 行，var content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)，用正则表达式匹配{{...}}， 关于 String.prototype.replace() 你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。 当第二个参数是一个函数时，函数接收多个参数，第一个参数match，表示匹配的子串，比如：{{msg}}、{{what}}等，第二个参数用于匹配正则表达式中括号匹配到的字符串，就是匹配正则表达式的这一部分：(.*)，并且这里可以接收多个参数：p1,p2,p3...，他们分别是括号对应的索引，具体参见 MDN。 ok，我们继续回到 23 行，每次匹配执行后都会执行这个函数，这个函数首先会往bindings内填充key:value，key 是{{}}内的值，value 则是一个空对象，然后 return 一个字符串 return '<span ' + bindingMark + '="' + variable +'"></span>' 接着遍历 bindings 执行 bind 方法 function bind (variable) { bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]') ;[].forEach.call(bindings[variable].els, function (e) { e.removeAttribute(bindingMark) }) Object.defineProperty(data, variable, { set: function (newVal) { [].forEach.call(bindings[variable].els, function (e) { bindings[variable].value = e.textContent = newVal }) }, get: function () { return bindings[variable].value } }) } 首先会找到含有bindingMark=... Attribute的 Element，并在bindings对应的key中记录它，接着再删除元素中的bindingMark Attribute，最后使用Object.defineProperty来做到 data bind，这也是 Vue 数据响应的核心。 ...

首先请确保已安装 Git 下载字体 下载并安装字体，为了修复乱码 地址: https://github.com/ryanoasis/nerd-fonts/releases 我使用的是 Hack。 Install PowerShell 安装方式很多，自行搜索，我是直接从 Microsoft store 安装 Terminal 的基本设置 修改字体为你下载的字体 开启亚克力效果 设置默认终端 安装 Scoop iwr -useb get.scoop.sh | iex 安装 Neovim scoop install neovim gcc nvim --version PowerShell 配置 # 确认处于 user\xxx 目录下 nvim .config/powershell/user_profile.ps1 让我们先搞点 alias # Alias Set-Alias vim nvim Set-Alias ll ls Set-Alias g git if(!(Test-Path $PROFILE.CurrentUserCurrentHost)) {New-Item -Type File -Path $PROFILE.CurrentUserCurrentHost -Force} nvim $PROFILE.CurrentUserCurrentHost 输入以下代码并:wq . $env:USERPROFILE\.config\powershell\user_profile.ps1 完成以上操作我们就可以重启 Terminal # 验证我们的配置文件是否生效 ll g --version 安装 posh-git/oh-my-posh/Terminal-Icons Install-Module posh-git -Scope CurrentUser -Force Install-Module oh-my-posh -Scope CurrentUser -Force Install-Module -Name Terminal-Icons -Repository PSGallery -Force # 确保当前在 user/xxx 下 vim ./.config/powershell/user_profile.ps1 导入模块 # Prompt Import-Module posh-git Import-Module oh-my-posh Set-PoshPrompt -Theme JanDeDobbeleer # Icons Import-Module -Name Terminal-Icons # 设置主题，后续可以根据自己的喜好更改，google oh-my-posh theme 查看相关主题 此时你终端内的图标应该会改变 ...

什么是 Grid Grid 是一种 CSS 布局方案 将浏览器划分为一个个网格并可以任意组合 Flex 和 Grid 看似相似，但内在相差很大 Flex 是轴线布局，只能指定 Item 处于轴线某个位置 Grid 是网格布局，将容器划分为行和列，产生单元格，并指定 Item 处于某个单元格中 基本概念 row 行 column 列 grid line 网格线 cell 单元格 将容器设置为display: grid后，容器内子元素的float、diaplay: inline-block、display: table-cell、vertical-align和column-*等设置都会失效 这个游戏能帮你更好的学习 grid 容器属性 grid-template-columns 和 grid-template-rows <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> .container{ display: grid; grid-template-columns: 100px 100px 100px; /*将元素分为三列,，每一列的宽度是100px*/ grid-template-rows: 100px 100px 100px; /*将元素分为三行，每一行的高度是100px*/ /* 产生一个三行三列的网格，列宽和行高都是100px 除了使用px单位，也可以使用百分比 */ } .container > div { border: 1px solid blue; margin: 5px; } repeat() .container{ display: grid; width: 300px; height: 300px; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); } repeat()的第一个参数表示重复的次数，第二个参数表示重复的值，不过它并不是只能接受两个参数 ...

修改软件源为 aliyun 更新系统 # 更新本地包数据库 sudo apt update # 更新所有已安装的包 sudo apt upgrade 安装 git apt install git 安装 Terminnator sudo add-apt-repository ppa:gnome-terminator sudo apt update sudo apt install terminator 安装 zsh apt install zsh chsh -s `which zsh` 安装 oh-my-zsh wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh 安装 zsh 插件 autojump apt install autojump echo "[[ -s /usr/share/autojump/autojump.sh ]] && . /usr/share/autojump/autojump.sh" >> ~/.zshrc zsh-autosuggestions ...

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 ex1: 输入：l1 = [1,2,4], l2 = [1,3,4] 输出：[1,1,2,3,4,4] tip: 两个链表的节点数目范围是 [0, 50] -100 <= Node.val <= 100 l1 和 l2 均按 非递减顺序 排列 code: /** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } */ /** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} */ var mergeTwoLists = function(l1, l2) { if(!l1 && !l2){ return null } if(!l1){ return l2 }else if(!l2){ return l1 } if(l1.val <= l2.val){ l1.next = mergeTwoLists(l1.next, l2) return l1 }else{ l2.next = mergeTwoLists(l1, l2.next) return l2 } };