update
This commit is contained in:
mozzie
parent
8f572a3036
commit
62df5ed09c
|
|
@ -294,7 +294,7 @@
|
|||
<p><a target="_blank" rel="noopener" href="https://baidu.com/">https://baidu.com</a></p>
|
||||
<p><a target="_blank" rel="noopener" href="http://www.this-anchor-link.com/">锚点链接</a> </p>
|
||||
<p><a href="mailto:test.test@gmail.com">mailto:test.test@gmail.com</a></p>
|
||||
<p>GFM a-tail link <a target="_blank" rel="noopener" href="https://my.oschina.net/u/3691274">@pandao</a> 邮箱地址自动链接 <a href="mailto:test.test@gmail.com">test.test@gmail.com</a> <a href="mailto:www@vip.qq.com">www@vip.qq.com</a></p>
|
||||
<p>GFM a-tail link <a target="_blank" rel="noopener" href="https://my.oschina.net/u/3691274">@pandao</a> 邮箱地址自动链接 <a href="mailto:test.test@gmail.com">test.test@gmail.com</a> <a href="mailto:www@vip.qq.com">www@vip.qq.com</a></p>
|
||||
<blockquote>
|
||||
<p>@pandao</p>
|
||||
</blockquote>
|
||||
|
|
|
|||
728
public/2023/11/06/front-end/Unity Shader入门精要/index.html
Normal file
728
public/2023/11/06/front-end/Unity Shader入门精要/index.html
Normal file
File diff suppressed because one or more lines are too long
799
public/2023/11/06/front-end/css奇技淫巧/index.html
Normal file
799
public/2023/11/06/front-end/css奇技淫巧/index.html
Normal file
File diff suppressed because one or more lines are too long
475
public/2023/11/06/front-end/ddd/index.html
Normal file
475
public/2023/11/06/front-end/ddd/index.html
Normal file
|
|
@ -0,0 +1,475 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>
|
||||
领域驱动设计
|
||||
</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="Mozzie">
|
||||
<link rel="canonical" href="https://mozzie.cn/2023/11/06/front-end/ddd/">
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/26c34ce6.css">
|
||||
|
||||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||||
|
||||
<body id="app">
|
||||
<!-- 响应式布局按钮 -->
|
||||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<path d="M9 4v16"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<aside>
|
||||
<div>
|
||||
|
||||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||||
|
||||
|
||||
<div class="home-bar">
|
||||
<a href="/" class="tip" data-tip="Home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<span>Mozzie</span>
|
||||
</a>
|
||||
<!-- 切换主题 -->
|
||||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="/js/0c01b885.js"></script>
|
||||
|
||||
<!-- search -->
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/3320a187.css">
|
||||
|
||||
<form class="search-group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="currentColor">
|
||||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span id="search-input">Search...</span>
|
||||
<div class="short-key">
|
||||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
window.algolia = {
|
||||
appId: "5DTW808BZ8",
|
||||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||||
}
|
||||
window.search = {
|
||||
enable: "true"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/js/9f145c31.js"></script>
|
||||
|
||||
|
||||
<!-- navigation -->
|
||||
|
||||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||||
|
||||
|
||||
<section class="category-nav scrollbar-obtrusive">
|
||||
<ul class="nav-items">
|
||||
<li data-path="archives">
|
||||
<a href="/archives">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 7v14"></path>
|
||||
<path d="M9 18l3 3l3-3"></path>
|
||||
<circle cx="12" cy="5" r="2"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Timeline</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="roadmap">
|
||||
<a href="/roadmap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||||
<path d="M13 9l2 2l-2 2"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Roadmap</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="resume">
|
||||
<a href="/resume">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||||
<circle cx="6" cy="14" r="3"></circle>
|
||||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Resume</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Category</p>
|
||||
<ul>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/EQ/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
EQ
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Hexo/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Hexo
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Finance/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Finance
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="active">
|
||||
<a href="/categories/Front-End/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Front-End
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="/js/f8b20eb9.js"></script>
|
||||
|
||||
<!-- icp -->
|
||||
|
||||
<div class="icp">
|
||||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<main>
|
||||
|
||||
<link rel="stylesheet" href="/css/e74b16a9.css">
|
||||
|
||||
|
||||
<div class="post-container">
|
||||
<div class="content">
|
||||
<header>
|
||||
|
||||
<link rel="stylesheet" href="/css/de5de8fb.css">
|
||||
|
||||
<nav class="breadcrumb">
|
||||
<a href="/" class="home tip btn-hover right" data-tip="Home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
<em>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="none">
|
||||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</em>
|
||||
<a href="/categories/Front-End/">
|
||||
Front-End
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<em>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="none">
|
||||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</em>
|
||||
<span class="ellipsis">
|
||||
领域驱动设计
|
||||
</span>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<script src="/js/31d6cfe0.js"></script>
|
||||
|
||||
</header>
|
||||
<main class="scrollbar-obtrusive">
|
||||
<div class="article-container">
|
||||
<!-- 文章tags -->
|
||||
|
||||
<!-- 渲染文章内容 -->
|
||||
<article><h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><ul>
|
||||
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903618680881165">蚂蚁金服数据体验技术团队 - 领域驱动设计</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://tech.meituan.com/2017/12/22/ddd-in-practice.html">美团 - 领域驱动设计在互联网业务开发中的实践</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://huhao.dev/posts/61190ae2/#%E9%97%AE%E9%A2%98%E5%AD%90%E5%9F%9F%E8%AF%86%E5%88%AB">领域驱动实战思考</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://www.tangshuang.net/8663.html">基于 DDD 的前端项目架构设计与实战</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://www.tangshuang.net/8212.html">React 语境下前端 DDD 的思考</a></li>
|
||||
</ul>
|
||||
<h1 id="架构对比"><a href="#架构对比" class="headerlink" title="架构对比"></a>架构对比</h1><p>从后端视角看，对比传统的三层架构，领域驱动</p>
|
||||
<ul>
|
||||
<li><code>充血</code>复用了：领域对外的接口</li>
|
||||
<li><code>领域服务</code>封装了：领域之间的联系</li>
|
||||
</ul>
|
||||
<p>贫血模型->充血模型，降低了<code>service层</code>的负担，同时保证了业务迭代，<code>entity</code>的独立性</p>
|
||||
<h2 id="MVC"><a href="#MVC" class="headerlink" title="MVC"></a>MVC</h2><p>从数据库视角、分析实体出发，进行系统的构建</p>
|
||||
<ul>
|
||||
<li>DAO 层</li>
|
||||
<li>Service 层</li>
|
||||
<li>Controller 层</li>
|
||||
</ul>
|
||||
<h2 id="后端-DDD"><a href="#后端-DDD" class="headerlink" title="后端 DDD"></a>后端 DDD</h2><blockquote>
|
||||
<p>针对基础设施层，也可以考虑加入<code>防腐层</code>、<code>工厂</code></p>
|
||||
</blockquote>
|
||||
<p>一个领域基本四层架构</p>
|
||||
<ol>
|
||||
<li>用户层(user interface): 对标 controller，对外提供 web 服务、接口</li>
|
||||
<li>应用层(application): 业务层，定义领域可以解决的问题 <code>domainService</code></li>
|
||||
<li>领域层(domain): 纯粹的描述业务实体</li>
|
||||
<li>基础设施层(infra): 持久化层(Builder+repository)</li>
|
||||
</ol>
|
||||
<p>同时，领域拆分带来如下两个致命问题</p>
|
||||
<ul>
|
||||
<li>领域化(微服务)后，数据库是分开的，导致实体调用链复杂，避免跨库查询</li>
|
||||
<li>避免分布式事务同步</li>
|
||||
</ul>
|
||||
<h2 id="前端-DDD"><a href="#前端-DDD" class="headerlink" title="前端 DDD"></a>前端 DDD</h2><blockquote>
|
||||
<p>?? 这里存在一个问题，api 网关到底要不要挪到前端领域目录下来开发</p>
|
||||
</blockquote>
|
||||
<ol>
|
||||
<li>用户层: web、mobile、mini-program …多端</li>
|
||||
<li>service: 暴露给 UI 组件的 <code>domainSerivce</code>，组织实体的状态流转</li>
|
||||
<li>entity: 实体、聚合实体、事件</li>
|
||||
<li>infra: api 请求、缓存、工具</li>
|
||||
</ol>
|
||||
<h2 id="工厂-Factory-x2F-Builder"><a href="#工厂-Factory-x2F-Builder" class="headerlink" title="工厂 Factory / Builder"></a>工厂 Factory / Builder</h2><ul>
|
||||
<li>数据库表设计层面，如果要<code>多对多</code>的关系，只能很别扭的设计一个中间表。</li>
|
||||
<li>实体 A 适合 <code>mongo</code>文档形存储，实体 B 适合<code>mysql</code>关系型存储。对于 <code>Builder</code> 而言，直接在这个领域搓出来 <code>A 和 B</code> 的 <code>CRUD</code>的实现方法</li>
|
||||
</ul>
|
||||
<h2 id="防腐层-Facade-x2F-Adaptor"><a href="#防腐层-Facade-x2F-Adaptor" class="headerlink" title="防腐层 Facade / Adaptor"></a>防腐层 Facade / Adaptor</h2><p>也被成为适配器，隔离第三方/外部服务，例如场景，用户上传文件到阿里云、腾讯云</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">UserUploadServiceFacade</span> <span class="token keyword">extends</span> <span class="token class-name">UserService</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">/**
|
||||
* 上传
|
||||
*/</span>
|
||||
<span class="token keyword">async</span> <span class="token function">upload</span><span class="token punctuation">(</span><span class="token parameter">oss</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>oss <span class="token operator">===</span> <span class="token string">"ali"</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">"OK"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>oss <span class="token operator">===</span> <span class="token string">"tx"</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">"FAIL"</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="领域模型"><a href="#领域模型" class="headerlink" title="领域模型"></a>领域模型</h1><p>实体的<code>贫血->充血</code>是一个随着业务发展过程演变的结果，初期业务场景不明确，很难充血，瞎几把充血，纯属找难受。</p>
|
||||
<p>是否需要引入<code>聚合根(aggregate root)</code>的概念，解决领域内实体独立、平铺关系带来的不方便，这个可能比较看心情</p>
|
||||
<h2 id="贫血模型-POJO-的问题"><a href="#贫血模型-POJO-的问题" class="headerlink" title="贫血模型(POJO)的问题"></a>贫血模型(POJO)的问题</h2><blockquote>
|
||||
<p>脱离了业务复杂度谈分层，好比抛开剂量谈毒性</p>
|
||||
</blockquote>
|
||||
<p>领域对象里只有<code>get/set</code>方法，所有的业务逻辑都不包含在内，从而造成<code>失忆症</code>，从实体中，无法知道发生了那些业务，需要去 <code>service层</code> 里挨个梳理，一旦业务迭代、<code>service 层</code>直接开始变成屎山</p>
|
||||
<h2 id="充血模型-amp-amp-领域服务的关系"><a href="#充血模型-amp-amp-领域服务的关系" class="headerlink" title="充血模型 && 领域服务的关系"></a>充血模型 && 领域服务的关系</h2><blockquote>
|
||||
<p>确保领域之间独立的，随着不断的充血，保证领域(实体)是独立发展的</p>
|
||||
</blockquote>
|
||||
<p>假定两个 domain(实体)：</p>
|
||||
<ul>
|
||||
<li>学生: 上课、做作业</li>
|
||||
<li>老师、全体起立、布置作业</li>
|
||||
</ul>
|
||||
<p>假定<code>老师</code>调用<code>全体起立</code>，对应肯定要<code>学生</code>调用<code>上课</code>，这个就是 <code>领域服务(domainService)</code> 需要去处理的，他俩不能建立直接的联系。</p>
|
||||
<ul>
|
||||
<li>增加新的业务逻辑：在 <code>domainService</code> 增加新的方法。</li>
|
||||
<li>调整旧的业务逻辑：修改<code>学生</code>，<code>老师</code>，内部具体的方法，<code>domainService</code> 完全不需要变化。</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/80d65618.css">
|
||||
|
||||
|
||||
<div class="copyright">
|
||||
<a target="_blank" href="https://mozzie.cn/2023/11/06/front-end/ddd/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||||
<path d="M3 6v13"></path>
|
||||
<path d="M12 6v13"></path>
|
||||
<path d="M21 6v13"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>领域驱动设计</span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Author</span>
|
||||
<p> Mozzie</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>Published on</span>
|
||||
<p>2023-11-06</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>License</span>
|
||||
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/js/31d6cfe0.js"></script>
|
||||
|
||||
|
||||
<!-- 评论 -->
|
||||
<div id="vcomments"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="meta-container">
|
||||
<div class="toc-wrapper content-dialog">
|
||||
<p class="catalog">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 6h16"></path>
|
||||
<path d="M4 12h16"></path>
|
||||
<path d="M4 18h12"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Catalog</span>
|
||||
</p>
|
||||
<!-- 文章toc -->
|
||||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">1.</span> <span class="toc-text">参考文献</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E5%AF%B9%E6%AF%94"><span class="toc-number">2.</span> <span class="toc-text">架构对比</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#MVC"><span class="toc-number">2.1.</span> <span class="toc-text">MVC</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8E%E7%AB%AF-DDD"><span class="toc-number">2.2.</span> <span class="toc-text">后端 DDD</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF-DDD"><span class="toc-number">2.3.</span> <span class="toc-text">前端 DDD</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B7%A5%E5%8E%82-Factory-x2F-Builder"><span class="toc-number">2.4.</span> <span class="toc-text">工厂 Factory / Builder</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E8%85%90%E5%B1%82-Facade-x2F-Adaptor"><span class="toc-number">2.5.</span> <span class="toc-text">防腐层 Facade / Adaptor</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">领域模型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B4%AB%E8%A1%80%E6%A8%A1%E5%9E%8B-POJO-%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">3.1.</span> <span class="toc-text">贫血模型(POJO)的问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%85%E8%A1%80%E6%A8%A1%E5%9E%8B-amp-amp-%E9%A2%86%E5%9F%9F%E6%9C%8D%E5%8A%A1%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">3.2.</span> <span class="toc-text">充血模型 && 领域服务的关系</span></a></li></ol></li></ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.katex = {
|
||||
enable: "true",
|
||||
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
|
||||
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
|
||||
}
|
||||
window.mermaid = {
|
||||
enable: "true",
|
||||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||||
}
|
||||
window.valine = {
|
||||
enable: "false",
|
||||
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
|
||||
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
|
||||
avatar: 'monsterid',
|
||||
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
|
||||
serverURLs: '//tismit6u.api.lncldglobal.com'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/js/a02fa72b.js"></script>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
<script>
|
||||
window.i18n = {
|
||||
"tip-collapse": "Collapse",
|
||||
"tip-expand": "Expand",
|
||||
"text-select": "select",
|
||||
"text-move": "movement",
|
||||
"text-esc": "close",
|
||||
"tip-status-done": "Done",
|
||||
"tip-status-doing": "In Progress",
|
||||
"tip-status-todo": "Todo",
|
||||
"tip-status-other": "Duplicate",
|
||||
"tip-status-default": "Default",
|
||||
"tip-roadmap-today": "Positioning to the today",
|
||||
"text-search": "Search...",
|
||||
"text-today": "Today",
|
||||
// month
|
||||
"January": "January",
|
||||
"February": "February",
|
||||
"March": "March",
|
||||
"April": "April",
|
||||
"May": "May",
|
||||
"June": "June",
|
||||
"July": "July",
|
||||
"August": "August",
|
||||
"September": "September",
|
||||
"October": "October",
|
||||
"November": "November",
|
||||
"December": "December",
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="/js/f7dea7e6.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
744
public/2023/11/06/front-end/git/index.html
Normal file
744
public/2023/11/06/front-end/git/index.html
Normal file
File diff suppressed because one or more lines are too long
726
public/2023/11/06/front-end/jquery/index.html
Normal file
726
public/2023/11/06/front-end/jquery/index.html
Normal file
File diff suppressed because one or more lines are too long
554
public/2023/11/06/front-end/wsl2/index.html
Normal file
554
public/2023/11/06/front-end/wsl2/index.html
Normal file
|
|
@ -0,0 +1,554 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>
|
||||
wsl2
|
||||
</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="Mozzie">
|
||||
<link rel="canonical" href="https://mozzie.cn/2023/11/06/front-end/wsl2/">
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/26c34ce6.css">
|
||||
|
||||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||||
|
||||
<body id="app">
|
||||
<!-- 响应式布局按钮 -->
|
||||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<path d="M9 4v16"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<aside>
|
||||
<div>
|
||||
|
||||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||||
|
||||
|
||||
<div class="home-bar">
|
||||
<a href="/" class="tip" data-tip="Home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<span>Mozzie</span>
|
||||
</a>
|
||||
<!-- 切换主题 -->
|
||||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="/js/0c01b885.js"></script>
|
||||
|
||||
<!-- search -->
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/3320a187.css">
|
||||
|
||||
<form class="search-group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="currentColor">
|
||||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span id="search-input">Search...</span>
|
||||
<div class="short-key">
|
||||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
window.algolia = {
|
||||
appId: "5DTW808BZ8",
|
||||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||||
}
|
||||
window.search = {
|
||||
enable: "true"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/js/9f145c31.js"></script>
|
||||
|
||||
|
||||
<!-- navigation -->
|
||||
|
||||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||||
|
||||
|
||||
<section class="category-nav scrollbar-obtrusive">
|
||||
<ul class="nav-items">
|
||||
<li data-path="archives">
|
||||
<a href="/archives">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 7v14"></path>
|
||||
<path d="M9 18l3 3l3-3"></path>
|
||||
<circle cx="12" cy="5" r="2"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Timeline</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="roadmap">
|
||||
<a href="/roadmap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||||
<path d="M13 9l2 2l-2 2"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Roadmap</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="resume">
|
||||
<a href="/resume">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||||
<circle cx="6" cy="14" r="3"></circle>
|
||||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Resume</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Category</p>
|
||||
<ul>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/EQ/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
EQ
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Hexo/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Hexo
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Finance/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Finance
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="active">
|
||||
<a href="/categories/Front-End/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Front-End
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="/js/f8b20eb9.js"></script>
|
||||
|
||||
<!-- icp -->
|
||||
|
||||
<div class="icp">
|
||||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<main>
|
||||
|
||||
<link rel="stylesheet" href="/css/e74b16a9.css">
|
||||
|
||||
|
||||
<div class="post-container">
|
||||
<div class="content">
|
||||
<header>
|
||||
|
||||
<link rel="stylesheet" href="/css/de5de8fb.css">
|
||||
|
||||
<nav class="breadcrumb">
|
||||
<a href="/" class="home tip btn-hover right" data-tip="Home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
<em>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="none">
|
||||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</em>
|
||||
<a href="/categories/Front-End/">
|
||||
Front-End
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<em>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="none">
|
||||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</em>
|
||||
<span class="ellipsis">
|
||||
wsl2
|
||||
</span>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<script src="/js/31d6cfe0.js"></script>
|
||||
|
||||
</header>
|
||||
<main class="scrollbar-obtrusive">
|
||||
<div class="article-container">
|
||||
<!-- 文章tags -->
|
||||
|
||||
<!-- 渲染文章内容 -->
|
||||
<article><h1 id="安装-wsl"><a href="#安装-wsl" class="headerlink" title="安装 wsl"></a>安装 wsl</h1><p>前置条件，主板 bios 开启 <code>intel 虚拟化</code></p>
|
||||
<blockquote>
|
||||
<p>ms app store如果打不开、转圈 -> 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>windows terminal 必备，ms store 下载</li>
|
||||
</ul>
|
||||
<p><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/windows/wsl/install">巨硬官方文档</a></p>
|
||||
<h1 id="ubuntu软件源"><a href="#ubuntu软件源" class="headerlink" title="ubuntu软件源"></a>ubuntu软件源</h1><p><a target="_blank" rel="noopener" href="https://developer.aliyun.com/mirror/">阿里开源镜像站</a></p>
|
||||
<p>下面是 ubuntu20.04 用的</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 备份apt默认源</span>
|
||||
<span class="token function">sudo</span> <span class="token function">cp</span> /etc/apt/sources.list /etc/apt/sources.list.bak
|
||||
<span class="token function">sudo</span> <span class="token function">vim</span> /etc/apt/sources.list
|
||||
<span class="token comment"># 替换 /srouces.list</span>
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
|
||||
|
||||
<span class="token comment"># deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse</span>
|
||||
<span class="token comment"># deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse</span>
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
|
||||
|
||||
|
||||
<span class="token comment"># 更新apt</span>
|
||||
<span class="token function">sudo</span> <span class="token function">apt</span> upgrade
|
||||
<span class="token function">sudo</span> <span class="token function">apt</span> update<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="安装-zsh"><a href="#安装-zsh" class="headerlink" title="安装 zsh"></a>安装 zsh</h1><blockquote>
|
||||
<p>注意<code>.zshrc</code>在安装的<code>用户</code>目录下，别和<code>root</code>搞混了</p>
|
||||
</blockquote>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 安装</span>
|
||||
<span class="token function">sudo</span> <span class="token function">apt</span> <span class="token function">install</span> <span class="token function">zsh</span>
|
||||
<span class="token comment"># 将 zsh 设置为默认 shell</span>
|
||||
chsh <span class="token parameter variable">-s</span> /bin/zsh
|
||||
<span class="token comment"># 检查，若没成功，重启试试看</span>
|
||||
<span class="token builtin class-name">echo</span> <span class="token environment constant">$SHELL</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="安装-oh-my-zsh"><a href="#安装-oh-my-zsh" class="headerlink" title="安装 oh-my-zsh"></a>安装 oh-my-zsh</h1><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 443 confused 手动 vim oh-my-zsh.sh 然后 bash ./oh-my-zsh.sh </span>
|
||||
<span class="token function">sh</span> <span class="token parameter variable">-c</span> <span class="token string">"<span class="token variable"><span class="token variable">$(</span><span class="token function">curl</span> <span class="token parameter variable">-fsSL</span> https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh<span class="token variable">)</span></span>"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="配置-oh-my-zsh-主题-x2F-插件-x2F-alias"><a href="#配置-oh-my-zsh-主题-x2F-插件-x2F-alias" class="headerlink" title="配置 oh-my-zsh 主题/插件/alias"></a>配置 oh-my-zsh 主题/插件/alias</h1><p>安装插件</p>
|
||||
<ul>
|
||||
<li>自动补全:</li>
|
||||
</ul>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/zsh-users/zsh-autosuggestions <span class="token variable">${ZSH_CUSTOM<span class="token operator">:-</span>~<span class="token operator">/</span>.oh-my-zsh<span class="token operator">/</span>custom}</span>/plugins/zsh-autosuggestions<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<ul>
|
||||
<li>代码高亮:</li>
|
||||
</ul>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/zsh-users/zsh-syntax-highlighting.git <span class="token variable">${ZSH_CUSTOM<span class="token operator">:-</span>~<span class="token operator">/</span>.oh-my-zsh<span class="token operator">/</span>custom}</span>/plugins/zsh-syntax-highlighting<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>修改<code>当前用户</code>目录下的 <code>.zshrc</code></p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 主题</span>
|
||||
<span class="token assign-left variable">ZSH_THEME</span><span class="token operator">=</span><span class="token string">"ys"</span>
|
||||
<span class="token comment"># 引入插件</span>
|
||||
<span class="token assign-left variable">plugins</span><span class="token operator">=</span><span class="token punctuation">(</span>git zsh-autosuggestions zsh-syntax-highlighting<span class="token punctuation">)</span>
|
||||
<span class="token comment"># alias</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">cls</span><span class="token operator">=</span><span class="token string">'clear'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">ga</span><span class="token operator">=</span><span class="token string">'git add'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">gc</span><span class="token operator">=</span><span class="token string">'git commit -m'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">gp</span><span class="token operator">=</span><span class="token string">'git push'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">gf</span><span class="token operator">=</span><span class="token string">'git fetch'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">update</span><span class="token operator">=</span><span class="token string">'sudo apt update'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">upgrade</span><span class="token operator">=</span><span class="token string">'sudo apt upgrade'</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">install</span><span class="token operator">=</span><span class="token string">'sudo apt install'</span>
|
||||
<span class="token comment"># windows文件管理器打开wsl文件</span>
|
||||
<span class="token builtin class-name">alias</span> <span class="token assign-left variable">open</span><span class="token operator">=</span><span class="token string">'explorer.exe'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="安装-Nodejs"><a href="#安装-Nodejs" class="headerlink" title="安装 Nodejs"></a>安装 Nodejs</h1><p><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl">巨硬文档赛高</a></p>
|
||||
<p>安装完注意文字提示</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># =>Appending nvm source string to /home/mozzie/.zshrc</span>
|
||||
<span class="token comment"># => Appending bash_completion source string to /home/mozzie/.zshrc</span>
|
||||
<span class="token comment"># => Close and reopen your terminal to start using nvm or run the following to use it now:</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
<p>照它说的做</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">export</span> <span class="token assign-left variable">NVM_DIR</span><span class="token operator">=</span><span class="token string">"<span class="token environment constant">$HOME</span>/.nvm"</span>
|
||||
<span class="token punctuation">[</span> <span class="token parameter variable">-s</span> <span class="token string">"<span class="token variable">$NVM_DIR</span>/nvm.sh"</span> <span class="token punctuation">]</span> <span class="token operator">&&</span> <span class="token punctuation">\</span>. <span class="token string">"<span class="token variable">$NVM_DIR</span>/nvm.sh"</span> <span class="token comment"># This loads nvm</span>
|
||||
<span class="token punctuation">[</span> <span class="token parameter variable">-s</span> <span class="token string">"<span class="token variable">$NVM_DIR</span>/bash_completion"</span> <span class="token punctuation">]</span> <span class="token operator">&&</span> <span class="token punctuation">\</span>. <span class="token string">"<span class="token variable">$NVM_DIR</span>/bash_completion"</span> <span class="token comment"># This loads nvm bash_completion</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>验证<code>nvm</code>安装 <code>nvm ls</code>，会看见类似</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">iojs -<span class="token operator">></span> N/A <span class="token punctuation">(</span>default<span class="token punctuation">)</span>
|
||||
<span class="token function">node</span> -<span class="token operator">></span> stable <span class="token punctuation">(</span>-<span class="token operator">></span> N/A<span class="token punctuation">)</span> <span class="token punctuation">(</span>default<span class="token punctuation">)</span>
|
||||
unstable -<span class="token operator">></span> N/A <span class="token punctuation">(</span>default<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>安装 <code>nodejs stable</code></p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">nvm <span class="token function">install</span> <span class="token function">node</span>
|
||||
<span class="token comment"># node -v | npm -v 验证安装版本</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<h1 id="外网-x2F-LAN-访问-wsl2-服务"><a href="#外网-x2F-LAN-访问-wsl2-服务" class="headerlink" title="外网/LAN 访问 wsl2 服务"></a>外网/LAN 访问 wsl2 服务</h1><p><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/windows/wsl/networking">巨硬官方解释</a></p>
|
||||
<p>When using a WSL 1 distribution, if your computer was set up to be accessed by your LAN, then applications run in WSL could be accessed on your LAN as well.</p>
|
||||
<p>This isn’t the default case in WSL 2. WSL 2 has a virtualized ethernet adapter with its own unique IP address. Currently, to enable this workflow you will need to go through the same steps as you would for a regular virtual machine. (We are looking into ways to improve this experience.)</p>
|
||||
<p>Here’s an example PowerShell command to add a port proxy that listens on port 4000 on the host and connects it to port 4000 to the WSL 2 VM with IP address 192.168.101.100</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">netsh interface portproxy <span class="token function">add</span> v4tov4 <span class="token assign-left variable">listenport</span><span class="token operator">=</span><span class="token number">4000</span> <span class="token assign-left variable">listenaddress</span><span class="token operator">=</span><span class="token number">0.0</span>.0.0 <span class="token assign-left variable">connectport</span><span class="token operator">=</span><span class="token number">4000</span> <span class="token assign-left variable">connectaddress</span><span class="token operator">=</span><span class="token number">192.168</span>.101.100<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<blockquote>
|
||||
<p>注意端口覆盖的问题，避免 windows 端口和端口 wsl2 冲突</p>
|
||||
</blockquote>
|
||||
<h2 id="netsh-端口映射"><a href="#netsh-端口映射" class="headerlink" title="netsh 端口映射"></a>netsh 端口映射</h2><ul>
|
||||
<li><p>listenaddress: 监听地址, 0.0.0.0 表示匹配所有地址</p>
|
||||
</li>
|
||||
<li><p>listenport: 监听的 windows 端口</p>
|
||||
</li>
|
||||
<li><p>connectaddress: 转发到 wsl2 的 ip地址, 这里设置为localhost，默认从 windows 可以通过localhost 访问 wsl2</p>
|
||||
</li>
|
||||
<li><p>connectport: 转发到 wsl2 的端口</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>例如 windows 的 ip 为 <code>192.168.1.100</code>，监听 windows 的 3000 端口，转发到 wsl2 ip localhost 的 3000 端口</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># windows-terminal 管理员权限执行</span>
|
||||
netsh interface portproxy <span class="token function">add</span> v4tov4 <span class="token assign-left variable">listenport</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token assign-left variable">listenaddress</span><span class="token operator">=</span><span class="token number">0.0</span>.0.0 <span class="token assign-left variable">connectport</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token assign-left variable">connectaddress</span><span class="token operator">=</span>localhost
|
||||
<span class="token comment"># 删除端口监听</span>
|
||||
netsh interface portproxy delete v4tov4 <span class="token assign-left variable">listenaddress</span><span class="token operator">=</span><span class="token number">0.0</span>.0.0 <span class="token assign-left variable">listenport</span><span class="token operator">=</span><span class="token number">3000</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h2 id="配置-windows-defender-防火墙入站规则"><a href="#配置-windows-defender-防火墙入站规则" class="headerlink" title="配置 windows defender 防火墙入站规则"></a>配置 windows defender 防火墙入站规则</h2><p>新建规则 -> 端口 -> TCP / 特定本地端口(3000) -> 允许链接 -> 下一步 -> 取个名字 -> Done</p>
|
||||
<h1 id="docker"><a href="#docker" class="headerlink" title="docker"></a>docker</h1><p>windows 宿主机安装 <code>docker desktop</code>，<code>设置 -> 资源 -> WSL INTEGRATION</code> 打开 对应的 linux发行版，即使用</p>
|
||||
<h2 id="mysql-容器"><a href="#mysql-容器" class="headerlink" title="mysql 容器"></a>mysql 容器</h2><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># brdige</span>
|
||||
<span class="token function">docker</span> network create <span class="token parameter variable">--driver</span> bridge <span class="token parameter variable">--subnet</span><span class="token operator">=</span><span class="token number">172.21</span>.0.0/16 wsl2
|
||||
<span class="token comment"># pull</span>
|
||||
<span class="token function">docker</span> pull mysql:5.7.38
|
||||
<span class="token comment"># 生产 mysql 5.7.38 容器</span>
|
||||
<span class="token function">docker</span> run <span class="token parameter variable">--restart</span><span class="token operator">=</span>always <span class="token parameter variable">--privileged</span><span class="token operator">=</span>true <span class="token parameter variable">-p</span> <span class="token number">3306</span>:3306 <span class="token parameter variable">--name</span> mysql <span class="token parameter variable">--net</span> wsl2 <span class="token parameter variable">--ip</span> <span class="token number">172.21</span>.0.5 <span class="token parameter variable">-e</span> <span class="token assign-left variable">MYSQL_ROOT_PASSWORD</span><span class="token operator">=</span>root <span class="token parameter variable">-d</span> mysql:5.7.38<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<h2 id="mongo-容器"><a href="#mongo-容器" class="headerlink" title="mongo 容器"></a>mongo 容器</h2><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">docker</span> pull mongo:5.0
|
||||
<span class="token comment"># 宿主机 /mongo/data</span>
|
||||
<span class="token function">docker</span> run <span class="token parameter variable">--restart</span><span class="token operator">=</span>always <span class="token parameter variable">-d</span> <span class="token parameter variable">-p</span> <span class="token number">27017</span>:27017 <span class="token parameter variable">-v</span> /mongo/data:/data <span class="token parameter variable">--name</span> mongo <span class="token parameter variable">--net</span> wsl2 <span class="token parameter variable">--ip</span> <span class="token number">172.21</span>.0.6 mongo:5.0 <span class="token parameter variable">--auth</span>
|
||||
<span class="token comment"># 初始化</span>
|
||||
<span class="token function">docker</span> <span class="token builtin class-name">exec</span> <span class="token parameter variable">-it</span> mongo /bin/bash
|
||||
<span class="token comment"># 进入 mongo shell</span>
|
||||
mongo
|
||||
<span class="token comment"># admin</span>
|
||||
use admin
|
||||
<span class="token comment"># 创建root用户，管理全部数据库的权限，这会可以navicat等gui链接数据库，用户名密码root，验证数据库admin</span>
|
||||
db.createUser<span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
user: <span class="token string">"root"</span>,
|
||||
pwd: <span class="token string">"root"</span>,
|
||||
roles: <span class="token punctuation">[</span> <span class="token punctuation">{</span> role: <span class="token string">"userAdminAnyDatabase"</span>, db: <span class="token string">"admin"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token comment"># 退出</span>
|
||||
<span class="token builtin class-name">exit</span>
|
||||
<span class="token comment"># 再次进入</span>
|
||||
mongo
|
||||
<span class="token comment"># 使用root登录授权，正确返回 1</span>
|
||||
db.auth<span class="token punctuation">(</span><span class="token string">"root"</span>,<span class="token string">"root"</span><span class="token punctuation">)</span>
|
||||
<span class="token comment"># 创建 testDB 数据库</span>
|
||||
use testDB
|
||||
<span class="token comment"># 创建 test 用户 管理 testDB</span>
|
||||
db.createUser<span class="token punctuation">(</span><span class="token punctuation">{</span>user:<span class="token string">'test'</span>,pwd:<span class="token string">'test'</span>,roles:<span class="token punctuation">[</span><span class="token punctuation">{</span>role:<span class="token string">'dbOwner'</span>,db:<span class="token string">'testDB'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>使用 navicat 登录，验证数据库 <code>admin</code> ，用户名密码 <code>test</code></p>
|
||||
<h1 id="默认-wsl-root-用户登录"><a href="#默认-wsl-root-用户登录" class="headerlink" title="默认 wsl root 用户登录"></a>默认 wsl root 用户登录</h1><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># wsl -l 查看 ubuntu版本，例如 Ubuntu-20.04</span>
|
||||
Ubuntu2004 config --default-user root<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
</article>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/80d65618.css">
|
||||
|
||||
|
||||
<div class="copyright">
|
||||
<a target="_blank" href="https://mozzie.cn/2023/11/06/front-end/wsl2/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||||
<path d="M3 6v13"></path>
|
||||
<path d="M12 6v13"></path>
|
||||
<path d="M21 6v13"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>wsl2</span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Author</span>
|
||||
<p> Mozzie</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>Published on</span>
|
||||
<p>2023-11-06</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>License</span>
|
||||
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/js/31d6cfe0.js"></script>
|
||||
|
||||
|
||||
<!-- 评论 -->
|
||||
<div id="vcomments"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="meta-container">
|
||||
<div class="toc-wrapper content-dialog">
|
||||
<p class="catalog">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 6h16"></path>
|
||||
<path d="M4 12h16"></path>
|
||||
<path d="M4 18h12"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Catalog</span>
|
||||
</p>
|
||||
<!-- 文章toc -->
|
||||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-wsl"><span class="toc-number">1.</span> <span class="toc-text">安装 wsl</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#ubuntu%E8%BD%AF%E4%BB%B6%E6%BA%90"><span class="toc-number">2.</span> <span class="toc-text">ubuntu软件源</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-zsh"><span class="toc-number">3.</span> <span class="toc-text">安装 zsh</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-oh-my-zsh"><span class="toc-number">4.</span> <span class="toc-text">安装 oh-my-zsh</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-oh-my-zsh-%E4%B8%BB%E9%A2%98-x2F-%E6%8F%92%E4%BB%B6-x2F-alias"><span class="toc-number">5.</span> <span class="toc-text">配置 oh-my-zsh 主题/插件/alias</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Nodejs"><span class="toc-number">6.</span> <span class="toc-text">安装 Nodejs</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%96%E7%BD%91-x2F-LAN-%E8%AE%BF%E9%97%AE-wsl2-%E6%9C%8D%E5%8A%A1"><span class="toc-number">7.</span> <span class="toc-text">外网/LAN 访问 wsl2 服务</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#netsh-%E7%AB%AF%E5%8F%A3%E6%98%A0%E5%B0%84"><span class="toc-number">7.1.</span> <span class="toc-text">netsh 端口映射</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-windows-defender-%E9%98%B2%E7%81%AB%E5%A2%99%E5%85%A5%E7%AB%99%E8%A7%84%E5%88%99"><span class="toc-number">7.2.</span> <span class="toc-text">配置 windows defender 防火墙入站规则</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#docker"><span class="toc-number">8.</span> <span class="toc-text">docker</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#mysql-%E5%AE%B9%E5%99%A8"><span class="toc-number">8.1.</span> <span class="toc-text">mysql 容器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mongo-%E5%AE%B9%E5%99%A8"><span class="toc-number">8.2.</span> <span class="toc-text">mongo 容器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4-wsl-root-%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95"><span class="toc-number">9.</span> <span class="toc-text">默认 wsl root 用户登录</span></a></li></ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.katex = {
|
||||
enable: "true",
|
||||
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
|
||||
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
|
||||
}
|
||||
window.mermaid = {
|
||||
enable: "true",
|
||||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||||
}
|
||||
window.valine = {
|
||||
enable: "false",
|
||||
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
|
||||
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
|
||||
avatar: 'monsterid',
|
||||
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
|
||||
serverURLs: '//tismit6u.api.lncldglobal.com'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/js/a02fa72b.js"></script>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
<script>
|
||||
window.i18n = {
|
||||
"tip-collapse": "Collapse",
|
||||
"tip-expand": "Expand",
|
||||
"text-select": "select",
|
||||
"text-move": "movement",
|
||||
"text-esc": "close",
|
||||
"tip-status-done": "Done",
|
||||
"tip-status-doing": "In Progress",
|
||||
"tip-status-todo": "Todo",
|
||||
"tip-status-other": "Duplicate",
|
||||
"tip-status-default": "Default",
|
||||
"tip-roadmap-today": "Positioning to the today",
|
||||
"text-search": "Search...",
|
||||
"text-today": "Today",
|
||||
// month
|
||||
"January": "January",
|
||||
"February": "February",
|
||||
"March": "March",
|
||||
"April": "April",
|
||||
"May": "May",
|
||||
"June": "June",
|
||||
"July": "July",
|
||||
"August": "August",
|
||||
"September": "September",
|
||||
"October": "October",
|
||||
"November": "November",
|
||||
"December": "December",
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="/js/f7dea7e6.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
1740
public/2023/11/06/front-end/码场悟道/index.html
Normal file
1740
public/2023/11/06/front-end/码场悟道/index.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
661
public/archives/2023/11/page/2/index.html
Normal file
661
public/archives/2023/11/page/2/index.html
Normal file
|
|
@ -0,0 +1,661 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>
|
||||
陈不渡 - 博观约取
|
||||
</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="Mozzie">
|
||||
<link rel="canonical" href="https://mozzie.cn">
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/26c34ce6.css">
|
||||
|
||||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||||
|
||||
<body id="app">
|
||||
<!-- 响应式布局按钮 -->
|
||||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<path d="M9 4v16"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<aside>
|
||||
<div>
|
||||
|
||||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||||
|
||||
|
||||
<div class="home-bar">
|
||||
<a href="/" class="tip" data-tip="Home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<span>Mozzie</span>
|
||||
</a>
|
||||
<!-- 切换主题 -->
|
||||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||||
fill="currentColor"></path>
|
||||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="/js/0c01b885.js"></script>
|
||||
|
||||
<!-- search -->
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/3320a187.css">
|
||||
|
||||
<form class="search-group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="currentColor">
|
||||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span id="search-input">Search...</span>
|
||||
<div class="short-key">
|
||||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
window.algolia = {
|
||||
appId: "5DTW808BZ8",
|
||||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||||
}
|
||||
window.search = {
|
||||
enable: "true"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script src="/js/9f145c31.js"></script>
|
||||
|
||||
|
||||
<!-- navigation -->
|
||||
|
||||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||||
|
||||
|
||||
<section class="category-nav scrollbar-obtrusive">
|
||||
<ul class="nav-items">
|
||||
<li data-path="archives">
|
||||
<a href="/archives">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 7v14"></path>
|
||||
<path d="M9 18l3 3l3-3"></path>
|
||||
<circle cx="12" cy="5" r="2"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Timeline</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="roadmap">
|
||||
<a href="/roadmap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||||
<path d="M13 9l2 2l-2 2"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Roadmap</div>
|
||||
</a>
|
||||
</li>
|
||||
<li data-path="resume">
|
||||
<a href="/resume">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||||
<circle cx="6" cy="14" r="3"></circle>
|
||||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ellipsis">Resume</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Category</p>
|
||||
<ul>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/EQ/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
EQ
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Hexo/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Hexo
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Finance/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Finance
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="/categories/Front-End/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||||
<div class="ellipsis">
|
||||
<span>
|
||||
Front-End
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="/js/f8b20eb9.js"></script>
|
||||
|
||||
<!-- icp -->
|
||||
|
||||
<div class="icp">
|
||||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<main>
|
||||
|
||||
<link rel="stylesheet" href="/css/efca006a.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="archive scrollbar-obtrusive">
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:25:00</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>有效对话指南</span>
|
||||
</div>
|
||||
<p>卡耐基说过：要说服别人同意你的观点，你就要让他觉得这是他自己的观点。也就是说，本质上没有人真正被别人说服，听或者不听都是他们自己的主动选择
|
||||
目的沟通目的无非两个：
|
||||
|
||||
让对方认同我们的观点
|
||||
或者按我们说...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/social/%E8%B5%B0%E7%A5%9E/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:20:01</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>走神</span>
|
||||
</div>
|
||||
<p>走神可以让我们活在任何时候，唯独不能活在当下。分心走神的原因，无非”当下太无聊、当下太痛苦”，因为身体受困于现实，只好让神思天马行空!
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/social/%E7%83%A6%E6%81%BC%E7%9A%84%E5%8E%9F%E5%9B%A0/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:19:41</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>烦恼的原因</span>
|
||||
</div>
|
||||
<p>分心开小差，很多人感觉可能不是个问题，甚至还对自己的一心二用而感觉沾沾自喜。比如跑步的时候考虑明后天的安排，吃饭的时候在担忧与他人的关系，睡觉的时候思绪像瀑布一样倾泻而出，是我们在不知不觉中徒生烦恼、...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/social/%E6%94%B9%E6%8E%89%E9%80%89%E6%8B%A9%E5%9B%B0%E9%9A%BE%E7%97%87/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:19:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>改掉选择困难症</span>
|
||||
</div>
|
||||
<p>对模糊零容忍。换句话说，就是想尽一切办法让自己找出那个最重要的、唯一的选项，让自己在某一个时间段里只有一条路可以走。如果不在这些选择的节点想清楚，我们就会陷入模糊的状态，它会使我们产生本能的反应——娱...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/social/%E9%9D%9E%E6%9A%B4%E5%8A%9B%E6%B2%9F%E9%80%9A/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:18:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>非暴力沟通</span>
|
||||
</div>
|
||||
<p>心理学有个史诗级的剧作叫做非暴力沟通，它能让一个人温柔而坚定的去说服对方。非暴力沟通大白话讲就是对他人足够的尊重，换取他人对你一次积极倾听的机会，所以这个技巧的核心是怎么做到尊重。一共分为四步
|
||||
1.表...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/social/%E5%86%85%E9%83%A8%E5%BE%AA%E7%8E%AF%E4%B8%8E%E4%BA%A7%E5%87%BA%E6%84%8F%E8%AF%86/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:18:22</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>内部循环与产出意识</span>
|
||||
</div>
|
||||
<p>每天早起、跑步、读书、学习，身体和心灵都在路上，然而这些都是内部循环，不直接对外产出，坚持这些习惯可以让我们成为更好的人，但不会成为更厉害的人。享受努力奋斗的同时，必须要有作品产出，参与到社会价值体系...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/finance/%E4%BB%98%E9%B9%8F%EF%BC%9A%E9%80%86%E5%85%A8%E7%90%83%E5%8C%96%E4%B8%8B%E7%9A%84%E5%85%A8%E7%90%83%E8%B5%84%E4%BA%A7%E9%85%8D%E7%BD%AE/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:17:08</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>付鹏：逆全球化下的全球资产配置</span>
|
||||
</div>
|
||||
<p>为什么会有中美贸易战？为什么会有特朗普？他们手上有个重要的东西，选票。法国人民手上有个重要的东西，什么东西？公会。财富分配，到最后是需要权力去平衡的，也就简单讲，富者恒富，穷者不富的时候，他手上会用一...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/finance/%E4%BB%98%E9%B9%8F%EF%BC%9A%E5%B1%95%E6%9C%9B2023%E5%B9%B4%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%85%A8%E7%90%83%E7%BB%8F%E6%B5%8E%E6%A0%BC%E5%B1%80%EF%BC%8C%E5%BC%82%E5%B8%B8%E7%9A%84%E5%88%A9%E5%B7%AE%E6%84%8F%E5%91%B3%E7%9D%80%E4%BB%80%E4%B9%88/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 13:14:30</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>付鹏：展望2023年下半年全球经济格局，异常的利差意味着什么</span>
|
||||
</div>
|
||||
<p>
|
||||
08年的金融危机，或者09年，是一个重要的时间节点，到今年(2023年)，在座各位你们将迎来第二个重要的节点，可能对于很多年轻人来讲，最好的一个时代结束了，我们所有人的下半辈子的投资，注意，也非常简...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/10/24/social/%E6%9C%89%E6%95%88%E5%AF%B9%E8%AF%9D%E6%8C%87%E5%8D%97/">
|
||||
<div class="timeline-info">
|
||||
<span>10-24 09:47:38</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>有效对话指南</span>
|
||||
</div>
|
||||
<p>卡耐基说过：要说服别人同意你的观点，你就要让他觉得这是他自己的观点。也就是说，本质上没有人真正被别人说服，听或者不听都是他们自己的主动选择
|
||||
目的沟通目的无非两个：
|
||||
|
||||
让对方认同我们的观点
|
||||
或者按我们说...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
|
||||
<div class="timeline-info">
|
||||
<span>10-23 12:01:13</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>Cosy 入门</span>
|
||||
</div>
|
||||
<p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
|
||||
#...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
|
||||
<div class="timeline-info">
|
||||
<span>10-23 12:01:13</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Markdown Sample</span>
|
||||
</div>
|
||||
<p>Linear Markdown Sample
|
||||
Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
|
||||
<div class="timeline-info">
|
||||
<span>10-20 10:25:55</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>verdaccio 搭建 npm私库</span>
|
||||
</div>
|
||||
<p>使用 docker 搭建 verdaccio创建 &amp; 配置config.yaml文件
|
||||
# Read about the best practices
|
||||
# https://verdaccio.o...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/js/31d6cfe0.js"></script>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
<script>
|
||||
window.i18n = {
|
||||
"tip-collapse": "Collapse",
|
||||
"tip-expand": "Expand",
|
||||
"text-select": "select",
|
||||
"text-move": "movement",
|
||||
"text-esc": "close",
|
||||
"tip-status-done": "Done",
|
||||
"tip-status-doing": "In Progress",
|
||||
"tip-status-todo": "Todo",
|
||||
"tip-status-other": "Duplicate",
|
||||
"tip-status-default": "Default",
|
||||
"tip-roadmap-today": "Positioning to the today",
|
||||
"text-search": "Search...",
|
||||
"text-today": "Today",
|
||||
// month
|
||||
"January": "January",
|
||||
"February": "February",
|
||||
"March": "March",
|
||||
"April": "April",
|
||||
"May": "May",
|
||||
"June": "June",
|
||||
"July": "July",
|
||||
"August": "August",
|
||||
"September": "September",
|
||||
"October": "October",
|
||||
"November": "November",
|
||||
"December": "December",
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="/js/f7dea7e6.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
|
|
@ -233,6 +233,155 @@
|
|||
<h2>2023</h2>
|
||||
<ul class="timeline">
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:02:18</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>css奇技淫巧</span>
|
||||
</div>
|
||||
<p>grid 布局
|
||||
flex 布局操纵的是一维、一行&#x2F;一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的float、display: inline-block、di...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/git/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:46</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<p>GIT 最佳实践GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
暂存区：工作区文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/jquery/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:01:17</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>jQuery</span>
|
||||
</div>
|
||||
<p>基础在 window 对象中挂载了 $和jQuery
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
|
||||
模块化原始写法只要把不同的函数（以及记录状态的变量）简单地...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 16:00:24</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>Unity Shader入门精要</span>
|
||||
</div>
|
||||
<p>代码基于c#，书籍 Unity Shader入门精要
|
||||
什么是 OpenGL、DirectX用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/wsl2/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:59:45</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
<span>wsl2</span>
|
||||
</div>
|
||||
<p>安装 wsl前置条件，主板 bios 开启 intel 虚拟化
|
||||
|
||||
ms app store如果打不开、转圈 -&gt; 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
|
||||
window...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:57:50</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>码场悟道</span>
|
||||
</div>
|
||||
<p>模板引擎严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/front-end/ddd/">
|
||||
<div class="timeline-info">
|
||||
<span>11-06 15:56:40</span>
|
||||
</div>
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
<span>领域驱动设计</span>
|
||||
</div>
|
||||
<p>参考文献
|
||||
蚂蚁金服数据体验技术团队 - 领域驱动设计
|
||||
美团 - 领域驱动设计在互联网业务开发中的实践
|
||||
领域驱动实战思考
|
||||
基于 DDD 的前端项目架构设计与实战
|
||||
React 语境下前端 DDD 的思考
|
||||
...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="timeline-item" href="/2023/11/06/A%20Guide%20to%20Effective%20Dialogue/">
|
||||
<div class="timeline-info">
|
||||
|
|
|
|||
|
|
@ -268,7 +268,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
<!-- 当前文章数量 -->
|
||||
<span class="post-num">Total of 1 Posts</span>
|
||||
<span class="post-num">Total of 8 Posts</span>
|
||||
<!-- 分页代码 -->
|
||||
<section class="pagination">
|
||||
|
||||
|
|
@ -279,6 +279,132 @@
|
|||
<!-- 分类文章列表 -->
|
||||
<ul class="table scrollbar-obtrusive">
|
||||
|
||||
<li data-status="doing">
|
||||
<a href="/2023/11/06/front-end/css%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>css奇技淫巧</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="done">
|
||||
<a href="/2023/11/06/front-end/git/">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>Git</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="done">
|
||||
<a href="/2023/11/06/front-end/jquery/">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>jQuery</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="done">
|
||||
<a href="/2023/11/06/front-end/Unity%20Shader%E5%85%A5%E9%97%A8%E7%B2%BE%E8%A6%81/">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>Unity Shader入门精要</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="done">
|
||||
<a href="/2023/11/06/front-end/wsl2/">
|
||||
|
||||
<span class="icon status tip right" data-tip="Done"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9 12l2 2l4-4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>wsl2</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="doing">
|
||||
<a href="/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>码场悟道</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="doing">
|
||||
<a href="/2023/11/06/front-end/ddd/">
|
||||
|
||||
<span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
|
||||
|
||||
|
||||
<p class="ellipsis">
|
||||
<span>领域驱动设计</span>
|
||||
</p>
|
||||
<span class="post-date">
|
||||
<b>
|
||||
11 06
|
||||
</b>
|
||||
<em>/ 2023</em>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li data-status="done">
|
||||
<a href="/2023/10/20/front-end/verdaccio/">
|
||||
|
||||
|
|
|
|||
468
source/_posts/front-end/Unity Shader入门精要.md
Normal file
468
source/_posts/front-end/Unity Shader入门精要.md
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
---
|
||||
title: Unity Shader入门精要
|
||||
categories:
|
||||
- Front-End
|
||||
status: done
|
||||
---
|
||||
|
||||
代码基于`c#`，书籍 `Unity Shader`入门精要
|
||||
|
||||
# 什么是 OpenGL、DirectX
|
||||
|
||||
用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发送渲染命令，而这些接口会依次向显卡驱动（Graphics Driver）发送渲染命令，这些显卡驱动是真正知道如何和 GPU 通信的角色，正是它们把 OpenGL 或者 DirectX 的函数调用翻译成了 GPU 能够听懂的语言，同时它们也负责把纹理等数据转换成 GPU 所支持的格式。一个比喻是，显卡驱动就是显卡的操作系统。
|
||||
|
||||
|
||||
|
||||
# 什么是 HLSL、GLSL、CG
|
||||
|
||||
如顶点着色器、片元着色器等。这些着色器的可编程性在于，我们可以使用一种特定的语言来编写程序，就好比我们可以用 C#来写游戏逻辑一样。
|
||||
|
||||
着色语言是专门用于编写着色器的，常见的着色语言有
|
||||
|
||||
- DirectX 的 HLSL（High Level Shading Language）
|
||||
|
||||
- OpenGL 的 GLSL（OpenGL Shading Language）
|
||||
|
||||
- NVIDIA 的 CG（C for Graphic）。
|
||||
|
||||
HLSL、GLSL、CG 都是“高级（High-Level）”语言，但这种高级是相对于汇编语言来说的，而不是像 C#相对于 C 的高级那样。这些语言会被编译成与机器无关的汇编语言，也被称为中间语言（Intermediate Language, IL）。这些中间语言再交给显卡驱动来翻译成真正的机器语言，即 GPU 可以理解的语言。
|
||||
|
||||
# GPU 流水线
|
||||
|
||||
当 GPU 从 CPU 那里得到渲染命令后，就会进行一系列流水线操作，最终把图元渲染到屏幕上。
|
||||
|
||||
|
||||
|
||||
- 顶点着色器（Vertex Shader）是完全可编程的，它通常用于实现顶点的空间变换、顶点着色等功能
|
||||
|
||||
- 曲面细分着色器（Tessellation Shader）是一个可选的着色器，它用于细分图元
|
||||
|
||||
- 几何着色器（Geometry Shader）同样是一个可选的着色器，它可以被用于执行逐图元（Per-Primitive）的着色操作，或者被用于产生更多的图元
|
||||
|
||||
- 裁剪（Clipping），这一阶段的目的是将那些不在摄像机视野内的顶点裁剪掉，并剔除某些三角图元的面片。例如，我们可以使用自定义的裁剪平面来配置裁剪区域，也可以通过指令控制裁剪三角图元的正面还是背面。
|
||||
|
||||
- 片元着色器（Fragment Shader），则是完全可编程的，它用于实现逐片元（Per-Fragment）的着色操作
|
||||
|
||||
## 顶点着色器 Vertex Shader
|
||||
|
||||
CPU 输入进来的每个顶点都会调用一次顶点着色器。顶点着色器本身不可以创建或者销毁任何顶点，而且无法得到顶点与顶点之间的关系。例如，我们无法得知两个顶点是否属于同一个三角网格。但正是因为这样的相互独立性，GPU 可以利用本身的特性并行化处理每一个顶点，这意味着这一阶段的处理速度会很快。
|
||||
|
||||
顶点着色器需要完成的工作主要有：
|
||||
|
||||
- 坐标变换：把顶点坐标转换到齐次裁剪坐标系下，接着通常再由硬件做透视除法后，最终得到归一化的设备坐标(NDC)
|
||||
|
||||
|
||||
|
||||
> 在 DirectX 中，NDC 的 z 方向取值范围是[0,1]，在 OpenGL 环境下是-1.0，DirectX 中是 0.0
|
||||
|
||||
- 逐顶点光照
|
||||
|
||||
## 裁剪
|
||||
|
||||
只有在单位立方体的图元才需要被继续处
|
||||
|
||||
|
||||
|
||||
## 屏幕映射
|
||||
|
||||
OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最小的窗口坐标值，而 DirectX 则定义了屏幕的左上角为最小的窗口坐标值
|
||||
|
||||
|
||||
|
||||
## 光栅阶段
|
||||
|
||||
从上一个阶段输出的信息：屏幕坐标系下的顶点位置以及和它们相关的额外信息，如深度值（z 坐标）、法线方向、视角方向等。光栅化阶段有两个最重要的目标：计算每个图元覆盖了哪些像素，以及为这些像素计算它们的颜色。
|
||||
|
||||
### 三角形设置
|
||||
|
||||
如果要得到整个三角网格对像素的覆盖情况，我们就必须计算每条边上的像素坐标。为了能够计算边界像素的坐标信息，我们就需要得到三角形边界的表示方式。
|
||||
|
||||
### 三角形遍历()
|
||||
|
||||
1. 扫描变换：三角形遍历（Triangle Traversal）阶段将会检查每个像素是否被一个三角网格所覆盖。如果被覆盖的话，就会生成一个片元（fragment）、
|
||||
|
||||
2. 使用三角网格 3 个顶点的顶点信息对整个覆盖区域的像素进行插值
|
||||
|
||||
|
||||
|
||||
这一步的输出就是得到一个片元序列。需要注意的是，一个片元并不是真正意义上的像素，而是包含了很多状态的集合，这些状态用于计算每个像素的最终颜色。这些状态包括了（但不限于）它的屏幕坐标、深度信息，以及其他从几何阶段输出的顶点信息，例如法线、纹理坐标等。
|
||||
|
||||
## 片元着色器 Fragment Shader
|
||||
|
||||
前面的光栅化阶段实际上并不会影响屏幕上每个像素的颜色值，而是会产生一系列的数据信息，用来表述一个三角网格是怎样覆盖每个像素的。而每个片元就负责存储这样一系列数据。真正会对像素产生影响的阶段是下一个流水线阶段——逐片元操作
|
||||
|
||||
> 在 DirectX 中，片元着色器被称为像素着色器（Pixel Shader）但片元着色器是一个更合适的名字，因为此时的片元并不是一个真正意义上的像素。
|
||||
|
||||
|
||||
|
||||
## 逐片元操作
|
||||
|
||||
这一阶段有几个主要任务:
|
||||
|
||||
- 决定每个片元的可见性。这涉及了很多测试工作，例如深度测试、模板测试等。
|
||||
|
||||
- 如果一个片元通过了所有的测试，就需要把这个片元的颜色值和已经存储在颜色缓冲区中的颜色进行合并，或者说是混合。
|
||||
|
||||
> !! 对于不透明物体，开发者可以关闭混合（Blend）操作。这样片元着色器计算得到的颜色值就会直接覆盖掉颜色缓冲区中的像素值。但对于半透明物体，我们就需要使用混合操作来让这个物体看起来是透明的。
|
||||
|
||||
## Draw Call
|
||||
|
||||
CPU 调用图像编程接口，如 OpenGL 中的 `glDrawElements` 命令或者 DirectX 中的 `DrawIndexedPrimitive`命令，以命令 GPU 进行渲染的操作。
|
||||
|
||||
### CPU 和 GPU 是如何实现并行工作的？
|
||||
|
||||
如果没有流水线化，那么 CPU 需要等到 GPU 完成上一个渲染任务才能再次发送渲染命令。但这种方法显然会造成效率低下。解决方法就是使用一个命令缓冲区（Command Buffer）。
|
||||
|
||||
由 CPU 向其中添加命令，而由 GPU 从中读取命令，添加和读取的过程是互相独立的。
|
||||
|
||||
### 为什么 Draw Call 多了会影响帧率？
|
||||
|
||||
每一个复制动作需要很多额外的操作，例如分配内存、创建各种元数据等。如你所见，这些操作将造成很多额外的性能开销，如果我们复制了很多小文件，那么这个开销将会很大
|
||||
|
||||
### 如何减少 Draw Call？
|
||||
|
||||
尽管减少 Draw Call 的方法有很多，但我们这里仅讨论使用批处理（Batching）的方法。我们讲过，提交大量很小的 Draw Call 会造成 CPU 的性能瓶颈，即 CPU 把时间都花费在准备 Draw Call 的工作上了。那么，一个很显然的优化想法就是把很多小的 DrawCall 合并成一个大的 Draw Call，这就是批处理的思想。
|
||||
|
||||
在游戏开发过程中，为了减少 Draw Call 的开销，有两点需要注意。
|
||||
|
||||
- 避免使用大量很小的网格。当不可避免地需要使用很小的网格结构时，考虑是否可以合并它们。
|
||||
|
||||
- 避免使用过多的材质。尽量在不同的网格之间共用同一个材质。
|
||||
|
||||
# 你明白什么是 Shader
|
||||
|
||||
- GPU 流水线上一些可高度编程的阶段，而由着色器编译出来的最终代码是会在 GPU 上运行的（对于固定管线的渲染来说，着色器有时等同于一些特定的渲染设置）
|
||||
|
||||
- 有一些特定类型的着色器，如顶点着色器、片元着色器等
|
||||
|
||||
- 依靠着色器我们可以控制流水线中的渲染细节，例如用顶点着色器来进行顶点变换以及传递数据，用片元着色器来进行逐像素的渲染。
|
||||
|
||||
# Unity Shader
|
||||
|
||||
> !! Unity Shader ! = 真正的 Shader
|
||||
|
||||
Unity Shader 实际上指的就是一个 ShaderLab 文件——硬盘上以．shader 作为文件后缀的一种文件，提供了一种让开发者同时控制渲染流水线中多个阶段的一种方式，不仅仅是提供 Shader 代码。
|
||||
|
||||
作为开发者而言，我们绝大部分时候只需要和 Unity Shader 打交道，而不需要关心渲染引擎底层的实现细节
|
||||
|
||||
Unity 编辑器会把这些 CG 片段编译成低级语言，如汇编语言等。通常，Unity 会自动把这些 CG 片段编译到所有相关平台（这里的平台是指不同的渲染平台，例如 Direct3D 9、OpenGL、Direct3D 11、OpenGL ES 等）上
|
||||
|
||||
## 基础
|
||||
|
||||
在没有 Unity 这类编辑器的情况下，如果我们想要对某个模型设置渲染状态，可能需要类似下面的代码：
|
||||
|
||||
上述伪代码仅仅是简化后的版本, 当渲染的模型数目、需要调整的着色器属性不断增多时，上述过程将变得更加复杂和冗长。
|
||||
|
||||
而且，当涉及透明物体等多物体的渲染时，如果没有编辑器的帮助，我们要非常小心如渲染顺序等问题。
|
||||
|
||||
```js
|
||||
// 初始化渲染设置
|
||||
void Initialization() {
|
||||
// 从硬盘上加载顶点着色器的代码
|
||||
string vertexShaderCode = LoadShaderFromFile(VertexShader.shader);
|
||||
// 从硬盘上加载片元着色器的代码
|
||||
string fragmentShaderCode = LoadShaderFromFile(FragmentShader.shader);
|
||||
// 把顶点着色器加载到GPU中
|
||||
LoadVertexShaderFromString(vertexShaderCode);
|
||||
// 把片元着色器加载到GPU中
|
||||
LoadFragmentShaderFromString(fragmentShaderCode);
|
||||
// 设置名为"vertexPosition"的属性的输入，即模型顶点坐标
|
||||
SetVertexShaderProperty("vertexPosition", vertices);
|
||||
// 设置名为"MainTex"的属性的输入，someTexture是某张已加载的纹理
|
||||
SetVertexShaderProperty("MainTex", someTexture);
|
||||
// 设置名为"MVP"的属性的输入，MVP是之前由开发者计算好的变换矩阵
|
||||
SetVertexShaderProperty("MVP", MVP);
|
||||
// 关闭混合
|
||||
Disable(Blend);
|
||||
// 设置深度测试
|
||||
Enable(ZText);
|
||||
SetZTestFunction(LessOrEqual);
|
||||
// 其他设置
|
||||
…
|
||||
}
|
||||
// 每一帧迚行渲染
|
||||
void OnRendering() {
|
||||
// 调用渲染命令
|
||||
DrawCall();
|
||||
// 当涉及多种渲染设置时，我们可能还需要在这里改变各种渲染设置
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
VertexShader.shader：
|
||||
|
||||
```js
|
||||
// 输入：顶点位置、纹理、MVP变换矩阵
|
||||
in float3 vertexPosition;
|
||||
in sampler2D MainTex;
|
||||
in Matrix4x4 MVP;
|
||||
// 输出：顶点经过MVP变换后的位置
|
||||
out float4 position;
|
||||
void main() {
|
||||
// 使用MVP对模型顶点坐标迚行变换
|
||||
position = MVP ＊ vertexPosition;
|
||||
}
|
||||
```
|
||||
|
||||
FragmentShader.shader：
|
||||
|
||||
```js
|
||||
// 输入：VertexShader输出的position、经过光栅化程序插值后的该片元对应的position
|
||||
in float4 position;
|
||||
// 输出：该片元的颜色值
|
||||
out float4 fragColor;
|
||||
void main() {
|
||||
// 将片元颜色设为白色
|
||||
fragColor = float4(1.0, 1.0, 1.0, 1.0);
|
||||
}
|
||||
```
|
||||
|
||||
## 材质和 Unity Shader
|
||||
|
||||
总体来说，在 Unity 中我们需要配合使用材质（Material）和 Unity Shader 才能达到需要的效果。一个最常见的流程是：
|
||||
|
||||
- 创建一个材质
|
||||
|
||||
- 创建一个 Unity Shader，并把它赋给上一步中创建的材质
|
||||
|
||||
- 把材质赋给要渲染的对象
|
||||
|
||||
- 在材质面板中调整 Unity Shader 的属性，如使用的纹理、漫反射系数
|
||||
|
||||
## Unity 表面着色器
|
||||
|
||||
表面着色器（Surface Shader）是 Unity 自己创造的一种着色器代码类型。它需要的代码量很少，Unity 在背后做了很多工作，但渲染的代价比较大。它在本质上和下面要讲到的顶点/片元着色器是一样的。也就是说，当给 Unity 提供一个表面着色器的时候，它在背后仍旧把它转换成对应的顶点/片元着色器。我们可以理解成，表面着色器是 Unity 对顶点/片元着色器的更高一层的抽象。它存在的价值在于，Unity 为我们处理了很多光照细节，使得我们不需要再操心这些“烦人的事情”。
|
||||
|
||||
```js
|
||||
Shader "Custom/Simple Surface Shader" {
|
||||
SubShader {
|
||||
Tags { "RenderType" = "Opaque" }
|
||||
CGPROGRAM
|
||||
#pragma surface surf Lambert
|
||||
struct Input {
|
||||
float4 color : COLOR;
|
||||
};
|
||||
void surf (Input IN, inout SurfaceOutput o) {
|
||||
o.Albedo = 1;
|
||||
}
|
||||
ENDCG
|
||||
}
|
||||
Fallback "Diffuse"
|
||||
}
|
||||
```
|
||||
|
||||
## 顶点/片元着色器
|
||||
|
||||
```js
|
||||
Shader "Custom/Simple VertexFragment Shader" {
|
||||
SubShader {
|
||||
Pass {
|
||||
CGPROGRAM
|
||||
#pragma vertex vert
|
||||
#pragma fragment frag
|
||||
float4 vert(float4 v : POSITION) : SV_POSITION {
|
||||
return mul (UNITY_MATRIX_MVP, v);
|
||||
}
|
||||
fixed4 frag() : SV_Target {
|
||||
return fixed4(1.0,0.0,0.0,1.0);
|
||||
}
|
||||
ENDCG
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# 坐标系
|
||||
|
||||
Unity 使用的是左手坐标系
|
||||
|
||||
## 左右手
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 向量(矢量)
|
||||
|
||||
### 模
|
||||
|
||||
矢量的模是一个标量，可以理解为是矢量在空间中的长度。它的表示符号通常是在矢量两旁分别加上一条垂直线
|
||||
|
||||
|
||||
|
||||
### 单位矢量
|
||||
|
||||
在很多情况下，我们只关心矢量的方向而不是模。例如，在计算光照模型时，我们往往需要得到顶点的法线方向和光源方向，此时我们不关心这些矢量有多长。在这些情况下，我们就需要计算单位矢量（unit vector）
|
||||
|
||||
单位矢量指的是那些模为 1 的矢量。单位矢量也被称为被归一化的矢量（normalized vector）。对任何给定的非零矢量，把它转换成单位矢量的过程就被称为归一化
|
||||
|
||||
|
||||
|
||||
### 点积
|
||||
|
||||
一个向量在另一个向量方向上投影的长度，是一个标量
|
||||
|
||||
公式：`a·b = |a||b|cosθ`
|
||||
|
||||
### 向量积 ∧ ×
|
||||
|
||||
> 向量积，数学中又称外积、叉积，物理中称矢积、叉乘
|
||||
|
||||
几何意义，一个和已有两个向量都垂直的向量，法向量
|
||||
|
||||
|
||||
|
||||
向量 a 和向量 b：
|
||||
|
||||
|
||||
|
||||
叉乘公式为：
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
|
||||
|
||||
根据 i、j、k 间关系，有：
|
||||
|
||||
|
||||
|
||||
例如
|
||||
|
||||
(1,2,3)×(-2,-1,4) = (2 × 4 - 3 × -1, 3 × -2 - 1 × 4, 1 × -1 - 2 × -2) = (11,10,3)
|
||||
|
||||
# 矩阵变换 Vec4
|
||||
|
||||
由于 3×3 矩阵不能表示平移操作，我们就把其扩展到了 4×4 的矩阵
|
||||
|
||||
## 平移矩阵
|
||||
|
||||
点的 x、y、z 分量分别增加了一个位置偏移。在 3D 中的可视化效果是，把点(x, y, z)在空间中平移了(tx, ty, tz)个单位
|
||||
|
||||
|
||||
|
||||
## 缩放矩阵
|
||||
|
||||
## 旋转矩阵
|
||||
|
||||
旋转操作需要指定一个旋转轴，这个旋转轴不一定是空间中的坐标轴，但本节所讲的旋转就是指绕着空间中的 x 轴、y 轴或 z 轴进行旋转
|
||||
|
||||
如果我们需要把点绕着 x 轴旋转 θ 度
|
||||
|
||||
|
||||
|
||||
绕 y 轴的旋转
|
||||
|
||||
|
||||
|
||||
绕 z 轴的旋转
|
||||
|
||||
|
||||
|
||||
## 复合变换
|
||||
|
||||
先进行大小为(2, 2, 2)的缩放，再绕 y 轴旋转 30°，最后向 z 轴平移 4 个单位。
|
||||
|
||||
> 矩阵乘法注意顺序
|
||||
|
||||
|
||||
|
||||
> ?? 如果我们需要同时绕着 3 个轴进行旋转，是先绕 x 轴、再绕 y 轴最后绕 z 轴旋转还是按其他的旋转顺序呢？
|
||||
|
||||
根据坐标系，需要调整轴的顺序
|
||||
|
||||
|
||||
|
||||
## 法线变换
|
||||
|
||||
在游戏中，模型的一个顶点往往会携带额外的信息，而顶点法线就是其中一种信息。当我们变换一个模型的时候，不仅需要变换它的顶点，还需要变换顶点法线，以便在后续处理（如片元着色器）中计算光照等。
|
||||
|
||||
# 坐标空间
|
||||
|
||||
事实上，在我们的生活中，我们也总是使用不同的坐标空间来交流。现在正在读这本书的你，很可能正坐在办公室或书房中。如果问你：“办公室的饮水机在哪里？”你大概会回答：“在办公室门的左方 3 米处。”这里，你很自然地使用了以门为原点的坐标空间。
|
||||
|
||||
要想定义一个坐标空间，必须指明其原点位置和 3 个坐标轴的方向。而这些数值实际上是相对于另一个坐标空间的（读者需要记住，所有的都是相对的）。也就是说，坐标空间会形成一个层次结构——每个坐标空间都是另一个坐标空间的子空间，反过来说，每个空间都有一个父（parent）坐标空间。对坐标空间的变换实际上就是在父空间和子空间之间对点和矢量进行变换。
|
||||
|
||||
## 模型空间
|
||||
|
||||
每个模型都有自己独立的坐标空间，当它移动或旋转的时候，模型空间也会跟着它移动和旋转。
|
||||
|
||||
> Unity 在模型空间中使用的是左手坐标系，因此在模型空间中，+x 轴、+y 轴、+z 轴分别对应的是模型的右、上和前向。
|
||||
|
||||
|
||||
|
||||
## 世界空间
|
||||
|
||||
世界空间（world space）是一个特殊的坐标系，因为它建立了我们所关心的最大的空间。一些读者可能会指出，空间可以是无限大的，怎么会有“最大”这一说呢？这里说的最大指的是一个宏观的概念，也就是说它是我们所关心的`最外层`的坐标空间。
|
||||
|
||||
## 摄像机空间
|
||||
|
||||
摄像机决定了我们渲染游戏所使用的视角。在观察空间中，摄像机位于原点
|
||||
|
||||
> Unity 中观察空间的坐标轴选择是：+x 轴指向右方，+y 轴指向上方，而+z 轴指向的是摄像机的后方
|
||||
|
||||
Q：模型空间和世界空间中+z 轴指的都是物体的前方，为什么这里不一样了呢？
|
||||
|
||||
A：Unity 在模型空间和世界空间中选用的都是左手坐标系，而在观察空间中使用的是右手坐标系。这是符合 OpenGL 传统的，在这样的观察空间中，摄像机的正前方指向的是-z 轴方向。
|
||||
|
||||
## 裁剪空间
|
||||
|
||||
用于变换的矩阵叫做裁剪矩阵（clip matrix），也被称为投影矩阵（projection matrix）。位于这块空间内部的图元将会被保留，否则他剔除。由视锥体（view frustum）来决定。
|
||||
|
||||
|
||||
|
||||
视锥体：指的是空间中的一块区域，这块区域决定了摄像机可以看到的空间。视锥体由六个平面包围而成，这些平面也被称为裁剪平面（clip planes）。视锥体有两种类型，这涉及两种投影类型：
|
||||
|
||||
- 正交投影（orthographic projection）：所有的网格大小都一样，而且平行线会一直保持平行
|
||||
- 透视投影（perspective projection）：地板上的平行线并不会保持平行，离摄像机越近网格越大，离摄像机越远网格越小。
|
||||
|
||||
|
||||
|
||||
> 追求真实感的 3D 游戏中我们往往会使用透视投影，而在一些 2D 游戏或渲染小地图等其他 HUD 元素时，我们会使用正交投影
|
||||
|
||||
### 透视摄像机视锥体模型
|
||||
|
||||
在 Unity 中，一个摄像机的横纵比由 Game 视图的横纵比和 Viewport Rect 中的 `W` 和 `H` 属性共同决定（实际上，Unity 允许我们在脚本里通过 `Camera.aspect` 进行更改，但这里不做讨论）
|
||||
|
||||
|
||||
|
||||
### 正交摄像机视锥体模型
|
||||
|
||||
通过 Camera 组件的 `Size` 属性来改变视锥体竖直方向上高度的一半，而 Clipping Planes 中的 Near 和 Far 参数可以控制视锥体的近裁剪平面和远裁剪平面距离摄像机的远近。
|
||||
|
||||
|
||||
|
||||
## 屏幕空间
|
||||
|
||||
> 在 Unity 中，从裁剪空间到屏幕空间的转换是由 Unity 帮我们完成的。
|
||||
|
||||
屏幕空间是一个二维空间，因此，我们必须把顶点从裁剪空间投影到屏幕空间中，来生成对应的 2D 坐标。这个过程可以理解成有两个步骤:
|
||||
|
||||
1. 标准齐次除法（透视除法）：用齐次坐标系的 w 分量去除以 x、y、z 分量，在 OpenGL 中，得到的坐标叫做归一化的设备坐标（Normalized Device Coordinates, NDC）
|
||||
|
||||
经过透视投影变换后的裁剪空间，经过齐次除法后会变换到一个立方体内。按照 OpenGL 的传统，这个立方体的 x、y、z 分量的范围都是[-1, 1]。但在 DirectX 这样的 API 中，z 分量的范围会是[0, 1]。而 Unity 选择了 OpenGL 这样的齐次裁剪空间，如图所示
|
||||
|
||||
|
||||
|
||||
而对于正交投影来说，它的裁剪空间实际已经是一个立方体了，而且由于经过正交投影矩阵变换后的顶点的 w 分量是 1，因此齐次除法并不会对顶点的 x、y、z 坐标产生影响，如图所示
|
||||
|
||||
|
||||
|
||||
2. 映射输出窗口的对应像素坐标
|
||||
|
||||
## Unity 内置变换矩阵
|
||||
|
||||
| 变量名 | 描述 |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------- |
|
||||
| UNITY MATRIX MVP | 当前的模型·观察·投影矩阵，用于将顶点/方向矢量从模型空间变换到裁剪空间 |
|
||||
| UNITY MATRIX MV | 当前的模型·观察矩阵，用于将顶点/方向矢量从模型空间变换到观察空间 |
|
||||
| UNITY MATRIX V | 当前的观察矩阵，用于将顶点/方向矢量从世界空间变换到观察空间 |
|
||||
| UNITY MATRIX P | 当前的投影矩阵，用于将顶点/方向矢量从观察空间变换到裁剪空间 |
|
||||
| UNITY MATRIX VP | 当前的观察投影矩阵，用于将顶点/方向矢量从世界空间变换到裁剪空间 |
|
||||
| UNITY MATRIX T MV | UNITYMATRIX MV 的转置矩阵 |
|
||||
| UNITY MATRIX IT MV | UNITYMATRIX MV 的逆转置矩阵，用于将法线从模型空间变换到观察空间，也可用于得到 UNITYMATRIXMV 的逆矩阵 |
|
||||
| Object2World | 当前的模型矩阵，用于将顶点/方向矢量从模型空间变换到世界空间 |
|
||||
| World2Object | Object2World 的逆矩阵，用于将顶点/方向矢量从世界空间变换到模型空间 |
|
||||
|
||||
|
||||
583
source/_posts/front-end/css奇技淫巧.md
Normal file
583
source/_posts/front-end/css奇技淫巧.md
Normal file
|
|
@ -0,0 +1,583 @@
|
|||
---
|
||||
title: css奇技淫巧
|
||||
categories:
|
||||
- Front-End
|
||||
status: doing
|
||||
---
|
||||
|
||||
# grid 布局
|
||||
|
||||
> flex 布局操纵的是一维、一行/一列，grid 布局具备操纵二维的能力
|
||||
|
||||
设为网格布局以后，容器子元素（项目）的`float`、`display: inline-block`、`display: table-cell`、`vertical-align`和 `column-`等设置都将失效。
|
||||
|
||||
- grid-template-columns: 定义每一列的列宽
|
||||
- grid-template-rows: 定义每一行的行高
|
||||
- grid-row-gap: 行间距
|
||||
- grid-column-gap: 列间距
|
||||
- grid-gap: 行列间距合并
|
||||
- grid-template-areas: 一个区域由单个或多个单元格组成
|
||||
- grid-auto-flow: 默认值是 row，即"先行后列",即先填满第一行，再开始放入第二行
|
||||
- justify-items: `单元格内容`的水平对齐
|
||||
- align-items: `单元格内容`垂直对齐
|
||||
- place-items: align-items 属性和 justify-items 属性的合并简写形式
|
||||
- justify-content: `整个内容区域`水平对齐
|
||||
- align-content: `整个内容区域`垂直对齐
|
||||
- place-content: align-content 属性和 justify-content 属性的合并简写形式
|
||||
|
||||
> 设置的行或者列比较多的时候，可以使用 repeat()这个函数简化重复的值
|
||||
|
||||
## repeat()
|
||||
|
||||
第一个参数是重复的次数，第二个参数是所要重复的值、也可以是某个模式
|
||||
|
||||
```css
|
||||
/* 重复 3个100px的列 */
|
||||
grid-template-columns: repeat(3, 100px);
|
||||
/* 重复这种布局2次 */
|
||||
grid-template-columns: repeat(2, 100px 20px 80px);
|
||||
/* 自动填充，直到容器放不下为止 */
|
||||
grid-template-columns: repeat(auto-fill, 100px);
|
||||
```
|
||||
|
||||
## fr
|
||||
|
||||
方便表示比例关系，网格布局提供了 fr 关键字
|
||||
|
||||
```css
|
||||
grid-template-columns: 1fr 1fr;
|
||||
```
|
||||
|
||||
## grid-template-areas
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"main main sidebar"
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
## item 定位
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* 1号项目就是从第二根垂直网格线开始第四根结束 */
|
||||
.item1 {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
background: red;
|
||||
}
|
||||
```
|
||||
|
||||
# 硬件加速(IE9+)
|
||||
|
||||
> 移动端开启,吃内存、增加耗电
|
||||
|
||||
`animation`、`transform`、`transition`不会自动开启`GPU`加速，利用`transform: translateZ(0)` 就可以开启`3D变换`，出发硬件加速
|
||||
|
||||
场景：`webKit内核`偶尔页面闪烁：`transform: translate3d(0, 0, 0);`
|
||||
|
||||
# 控制台打印 shield 徽章
|
||||
|
||||
```js
|
||||
console.log(
|
||||
"%c" +
|
||||
eval("'mozzie.com'") +
|
||||
"%cv" +
|
||||
eval("'2.0.0'") +
|
||||
"%c\r\n" +
|
||||
eval("'了解更多:https://www.mozzie.com'"),
|
||||
"color: #fff; background: #5281FA; font-size: 12px;border-radius:2px 0 0 2px;padding:3px 6px;",
|
||||
"border-radius:0 2px 2px 0;padding:3px 6px;color:#333;background:#EBEBEB",
|
||||
"margin-top:10px;"
|
||||
);
|
||||
```
|
||||
|
||||
# css 判断 input 是否为空
|
||||
|
||||
`:placeholder-shown`：占位符是否显示的伪类，配合 `:not()` （不是必须，反过来也可以）
|
||||
|
||||
```html
|
||||
<div id="demo">
|
||||
<input id="demo-input" type="text" placeholder="name" />
|
||||
<label id="demo-label">Name</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
#demo {
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
}
|
||||
#demo-input {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #ffa500;
|
||||
}
|
||||
#demo-input::placeholder {
|
||||
font-size: 0;
|
||||
}
|
||||
#demo-input:focus + label,
|
||||
#demo-input:not(:placeholder-shown) + label {
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
#demo-label {
|
||||
font-size: 22px;
|
||||
color: #ffa500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
body div {
|
||||
margin: auto;
|
||||
}
|
||||
body div input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
```
|
||||
|
||||
# 垂直居中
|
||||
|
||||
```html
|
||||
<div id="wrapper">
|
||||
<div id="box">box</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
`已知宽高`、`flex神教`，就不用说了
|
||||
|
||||
## tranform 大法
|
||||
|
||||
```css
|
||||
#wrapper {
|
||||
position: relative;
|
||||
}
|
||||
#box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
```
|
||||
|
||||
## 0000 大法
|
||||
|
||||
```css
|
||||
#wrapper {
|
||||
position: relative;
|
||||
}
|
||||
#box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## 如何让 img 垂直居中
|
||||
|
||||
```html
|
||||
<div id="imgWrapper">
|
||||
<img src="xxx.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.imgWrapper {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
## ul 下 li 居中
|
||||
|
||||
```html
|
||||
<!--外层包个div/section block元素 -->
|
||||
<div>
|
||||
<ul class="clearfix">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
div{
|
||||
text-align: center
|
||||
}
|
||||
ul{
|
||||
display: inline-block
|
||||
}
|
||||
li{
|
||||
display: inline
|
||||
float: left
|
||||
}
|
||||
```
|
||||
|
||||
# 随机渐变背景
|
||||
|
||||
```javascript
|
||||
function getRandomRangeNum(min, max) {
|
||||
return min + Math.floor(Math.random() * (max - min));
|
||||
}
|
||||
|
||||
function setRandomBg(el) {
|
||||
var left = getRandomRangeNum(0, 255);
|
||||
var bottom = getRandomRangeNum(0, 255);
|
||||
var css = [
|
||||
"linear-gradient(to left bottom,hsl(",
|
||||
left,
|
||||
", 100%, 85%) 0%,hsl(",
|
||||
bottom,
|
||||
", 100%, 85%) 100%)",
|
||||
];
|
||||
el.style.background = css.join("");
|
||||
}
|
||||
```
|
||||
|
||||
# css 三角形
|
||||
|
||||
```css
|
||||
span {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 40px solid transparent;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
border-bottom: 40px solid #ff0000;
|
||||
}
|
||||
```
|
||||
|
||||
# 1px 神迹
|
||||
|
||||
## pc 端最优解
|
||||
|
||||
```html
|
||||
<div style="height:1px;overflow:hidden;background:red"></div>
|
||||
```
|
||||
|
||||
## 移动端 - 媒体查询 + transfrom
|
||||
|
||||
```css
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.border-bottom::after {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 移动端 - 媒体查询 + 伪类
|
||||
|
||||
```css
|
||||
.border__1px:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 100%
|
||||
background-color: #000;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio:2) {
|
||||
.border__1px:before {
|
||||
transform: scaleY(0.5)
|
||||
}
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio:3) {
|
||||
.border__1px:before {
|
||||
transform: scaleY(0.33)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# 横竖屏适配
|
||||
|
||||
js 检测
|
||||
|
||||
```js
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.orientation === 180 || window.orientation === 0) {
|
||||
// 正常方向或屏幕旋转180度
|
||||
console.log("竖屏");
|
||||
}
|
||||
if (window.orientation === 90 || window.orientation === -90) {
|
||||
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
|
||||
console.log("横屏");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
css 检测
|
||||
|
||||
```css
|
||||
@media screen and (orientation: portrait) {
|
||||
/*竖屏...*/
|
||||
}
|
||||
@media screen and (orientation: landscape) {
|
||||
/*横屏...*/
|
||||
}
|
||||
```
|
||||
|
||||
# 像素
|
||||
|
||||
- 物理像素: 物理设备真实的像素
|
||||
- 独立像素: 平时开发写的 px
|
||||
- 设备像素比(DPR): = 物理像素 / 设备独立像素
|
||||
|
||||
```js
|
||||
// 获取 DPR
|
||||
window.devicePixelRatio;
|
||||
```
|
||||
|
||||
也可以使用媒体查询
|
||||
|
||||
```css
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
|
||||
}
|
||||
```
|
||||
|
||||
# srcset
|
||||
|
||||
使用 img 标签的 `srcset` 属性，浏览器会自动根据像素密度匹配最佳显示图片：
|
||||
|
||||
```html
|
||||
<img src="conardLi_1x.png" srcset="conardLi_2x.png 2x, conardLi_3x.png 3x" />
|
||||
```
|
||||
|
||||
# 字体 12px
|
||||
|
||||
css3 的 `transform` 属性，设置值为 `scale(x, y)` 定义 2D 缩放转换
|
||||
|
||||
# 盒子模型
|
||||
|
||||
padding，margin，content，border
|
||||
|
||||
# css 清浮动
|
||||
|
||||
```css
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
# 超出省略 ellipsis
|
||||
|
||||
## 单行
|
||||
|
||||
```css
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
```
|
||||
|
||||
## 多行
|
||||
|
||||
```css
|
||||
.ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; // 最多显示几行
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
# 页面导入样式时，使用 link 和@import
|
||||
|
||||
> 你可能不信，ie5+就支持@import 了
|
||||
|
||||
- link: 与`dom`异步加载
|
||||
- @import: 先加载`dom`
|
||||
|
||||
# inline-block 元素间的换行符空格间隙
|
||||
|
||||
- `letter-spacing`
|
||||
- `display: inline -3px;`
|
||||
- `<` 不换行
|
||||
|
||||
# em | rem 换算
|
||||
|
||||
浏览器的默认字体高都是 16px，因此:
|
||||
|
||||
- 16px = 1em
|
||||
- 12px = .75em
|
||||
- 10px = .625em
|
||||
|
||||
由于设配`ppi`不同，自行换算，eg:
|
||||
|
||||
给`<h3>`设置字体为`20px`=`16px * 1.25rem`
|
||||
|
||||
```css
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 js 检测设置
|
||||
|
||||
```js
|
||||
// set 1rem = viewWidth / 10
|
||||
function setRemUnit() {
|
||||
var docEl = document.documentElement;
|
||||
var rem = docEl.clientWidth / 10;
|
||||
docEl.style.fontSize = rem + "px";
|
||||
}
|
||||
|
||||
window.addEventListener("resize", setRemUnit);
|
||||
window.addEventListener("pageShow", function (e) {
|
||||
if (e.persisted) {
|
||||
setRemUnit();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
# less 常用
|
||||
|
||||
## 变量
|
||||
|
||||
LESS 中的变量为完全的 '常量' ，所以只能定义一次
|
||||
|
||||
```css
|
||||
@nice-blue: #5B83AD;
|
||||
@light-blue: @nice-blue + #111;
|
||||
|
||||
#header {
|
||||
color: @light-blue;
|
||||
}
|
||||
```
|
||||
|
||||
输出
|
||||
|
||||
```css
|
||||
#header {
|
||||
color: #6c94be;
|
||||
}
|
||||
```
|
||||
|
||||
## 混合
|
||||
|
||||
```css
|
||||
.bordered {
|
||||
border-top: dotted 1px black;
|
||||
border-bottom: solid 2px black;
|
||||
}
|
||||
```
|
||||
|
||||
使用
|
||||
|
||||
```css
|
||||
#menu a {
|
||||
color: #111;
|
||||
.bordered;
|
||||
}
|
||||
.post a {
|
||||
color: red;
|
||||
.bordered;
|
||||
}
|
||||
```
|
||||
|
||||
带参
|
||||
|
||||
```css
|
||||
.border-radius (@radius) {
|
||||
border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
-webkit-border-radius: @radius;
|
||||
}
|
||||
```
|
||||
|
||||
#header {
|
||||
.border-radius(4px);
|
||||
}
|
||||
|
||||
`@arguments`变量，包含了所有传递进来的参数. 如果你不想单独处理每一个参数
|
||||
|
||||
```css
|
||||
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
|
||||
box-shadow: @arguments;
|
||||
-moz-box-shadow: @arguments;
|
||||
-webkit-box-shadow: @arguments;
|
||||
}
|
||||
.box-shadow(2px, 5px);
|
||||
```
|
||||
|
||||
无参
|
||||
|
||||
```css
|
||||
.wrap () {
|
||||
text-wrap: wrap;
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre {
|
||||
.wrap;
|
||||
}
|
||||
```
|
||||
|
||||
## Color 函数
|
||||
|
||||
```css
|
||||
@color-base: #3bafda;
|
||||
@color-hover:lighten (@color-primary,10%);
|
||||
@color-focus:darken (@color-primary,10%);
|
||||
```
|
||||
|
||||
## JavaScript 表达式
|
||||
|
||||
```css
|
||||
@var: ` "hello" .toUpperCase() + "!" `;
|
||||
@height: `document.body.clientHeight`;
|
||||
```
|
||||
|
||||
## 父选择器
|
||||
|
||||
@只能代表父元素，不能代表父亲的父辈元素，施加改性类或伪类
|
||||
|
||||
```css
|
||||
a {
|
||||
color: blue;
|
||||
&:hover {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 重复父类名
|
||||
|
||||
```css
|
||||
.button {
|
||||
&-ok {
|
||||
background-image: url("ok.png");
|
||||
}
|
||||
&-cancel {
|
||||
background-image: url("cancel.png");
|
||||
}
|
||||
|
||||
&-custom {
|
||||
background-image: url("custom.png");
|
||||
}
|
||||
}
|
||||
```
|
||||
104
source/_posts/front-end/ddd.md
Normal file
104
source/_posts/front-end/ddd.md
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
---
|
||||
title: 领域驱动设计
|
||||
categories:
|
||||
- Front-End
|
||||
status: doing
|
||||
---
|
||||
|
||||
|
||||
# 参考文献
|
||||
|
||||
- [蚂蚁金服数据体验技术团队 - 领域驱动设计](https://juejin.cn/post/6844903618680881165)
|
||||
- [美团 - 领域驱动设计在互联网业务开发中的实践](https://tech.meituan.com/2017/12/22/ddd-in-practice.html)
|
||||
- [领域驱动实战思考](https://huhao.dev/posts/61190ae2/#%E9%97%AE%E9%A2%98%E5%AD%90%E5%9F%9F%E8%AF%86%E5%88%AB)
|
||||
- [基于 DDD 的前端项目架构设计与实战](https://www.tangshuang.net/8663.html)
|
||||
- [React 语境下前端 DDD 的思考](https://www.tangshuang.net/8212.html)
|
||||
|
||||
# 架构对比
|
||||
|
||||
从后端视角看，对比传统的三层架构，领域驱动
|
||||
|
||||
- `充血`复用了：领域对外的接口
|
||||
- `领域服务`封装了：领域之间的联系
|
||||
|
||||
贫血模型->充血模型，降低了`service层`的负担，同时保证了业务迭代，`entity`的独立性
|
||||
|
||||
## MVC
|
||||
|
||||
从数据库视角、分析实体出发，进行系统的构建
|
||||
|
||||
- DAO 层
|
||||
- Service 层
|
||||
- Controller 层
|
||||
|
||||
## 后端 DDD
|
||||
|
||||
> 针对基础设施层，也可以考虑加入`防腐层`、`工厂`
|
||||
|
||||
一个领域基本四层架构
|
||||
|
||||
1. 用户层(user interface): 对标 controller，对外提供 web 服务、接口
|
||||
2. 应用层(application): 业务层，定义领域可以解决的问题 `domainService`
|
||||
3. 领域层(domain): 纯粹的描述业务实体
|
||||
4. 基础设施层(infra): 持久化层(Builder+repository)
|
||||
|
||||
同时，领域拆分带来如下两个致命问题
|
||||
|
||||
- 领域化(微服务)后，数据库是分开的，导致实体调用链复杂，避免跨库查询
|
||||
- 避免分布式事务同步
|
||||
|
||||
## 前端 DDD
|
||||
|
||||
> ?? 这里存在一个问题，api 网关到底要不要挪到前端领域目录下来开发
|
||||
|
||||
1. 用户层: web、mobile、mini-program ...多端
|
||||
2. service: 暴露给 UI 组件的 `domainSerivce`，组织实体的状态流转
|
||||
3. entity: 实体、聚合实体、事件
|
||||
4. infra: api 请求、缓存、工具
|
||||
|
||||
## 工厂 Factory / Builder
|
||||
|
||||
- 数据库表设计层面，如果要`多对多`的关系，只能很别扭的设计一个中间表。
|
||||
- 实体 A 适合 `mongo`文档形存储，实体 B 适合`mysql`关系型存储。对于 `Builder` 而言，直接在这个领域搓出来 `A 和 B` 的 `CRUD`的实现方法
|
||||
|
||||
## 防腐层 Facade / Adaptor
|
||||
|
||||
也被成为适配器，隔离第三方/外部服务，例如场景，用户上传文件到阿里云、腾讯云
|
||||
|
||||
```js
|
||||
class UserUploadServiceFacade extends UserService {
|
||||
/**
|
||||
* 上传
|
||||
*/
|
||||
async upload(oss) {
|
||||
if (oss === "ali") return "OK";
|
||||
if (oss === "tx") return "FAIL";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# 领域模型
|
||||
|
||||
实体的`贫血->充血`是一个随着业务发展过程演变的结果，初期业务场景不明确，很难充血，瞎几把充血，纯属找难受。
|
||||
|
||||
是否需要引入`聚合根(aggregate root)`的概念，解决领域内实体独立、平铺关系带来的不方便，这个可能比较看心情
|
||||
|
||||
## 贫血模型(POJO)的问题
|
||||
|
||||
> 脱离了业务复杂度谈分层，好比抛开剂量谈毒性
|
||||
|
||||
领域对象里只有`get/set`方法，所有的业务逻辑都不包含在内，从而造成`失忆症`，从实体中，无法知道发生了那些业务，需要去 `service层` 里挨个梳理，一旦业务迭代、`service 层`直接开始变成屎山
|
||||
|
||||
## 充血模型 && 领域服务的关系
|
||||
|
||||
> 确保领域之间独立的，随着不断的充血，保证领域(实体)是独立发展的
|
||||
|
||||
假定两个 domain(实体)：
|
||||
|
||||
- 学生: 上课、做作业
|
||||
- 老师、全体起立、布置作业
|
||||
|
||||
假定`老师`调用`全体起立`，对应肯定要`学生`调用`上课`，这个就是 `领域服务(domainService)` 需要去处理的，他俩不能建立直接的联系。
|
||||
|
||||
- 增加新的业务逻辑：在 `domainService` 增加新的方法。
|
||||
- 调整旧的业务逻辑：修改`学生`，`老师`，内部具体的方法，`domainService` 完全不需要变化。
|
||||
511
source/_posts/front-end/git.md
Normal file
511
source/_posts/front-end/git.md
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
---
|
||||
title: Git
|
||||
categories:
|
||||
- Front-End
|
||||
status: done
|
||||
---
|
||||
|
||||
|
||||
# GIT 最佳实践
|
||||
|
||||
GIT 本质是一个数据库，用来存代码的
|
||||
|
||||
- 工作区：一个沙箱环境，GIT 不负责管理，你尽管在沙箱里面对文件进行操作
|
||||
- 暂存区：`工作区`文件变动先不急着提交，暂存到一定数量，在提交到版本库
|
||||
- 版本库：
|
||||
|
||||
> !! Linus 永远的神！
|
||||
|
||||
## 配置用户
|
||||
|
||||
```bash
|
||||
git config --global user.name "mozzie"
|
||||
git config --global user.email himozzie@foxmail.com
|
||||
```
|
||||
|
||||
## alias 别名
|
||||
|
||||
解决参数太多，记不住的问题
|
||||
|
||||
> !! HEAD -> master HEAD 相当于一个指针，指向当前所在分支
|
||||
|
||||
```bash
|
||||
# 查看项目分支图,
|
||||
git config --global alias.lo "log --oneline --decorate --graph --all"
|
||||
```
|
||||
|
||||
## .git 文件结构
|
||||
|
||||
- hooks：提交代码前，检查代码格式……
|
||||
- info：包含一个排除性文件
|
||||
- logs：保存日志信息，不太需要
|
||||
- `objects`：相当于数据库，存储所有数据内容
|
||||
- `refs`：存放提交对象指针，管理分支的
|
||||
- config：配置文件
|
||||
- description：仓库描述信息
|
||||
- `HEAD`：指示目前被检出的分支
|
||||
- `index`：文件保存暂存区信息
|
||||
|
||||
## 修改远程仓库
|
||||
|
||||
```bash
|
||||
# way 1
|
||||
git remote set-url origin [url]
|
||||
# way 2
|
||||
git remote rm origin
|
||||
git remote add origin [url]
|
||||
# way3
|
||||
修改 config 文件
|
||||
```
|
||||
|
||||
## 高层命令
|
||||
|
||||
### 初始化仓库
|
||||
|
||||
`git init`
|
||||
|
||||
### 修改添加到暂存区
|
||||
|
||||
`git add ./`，相当于如下操作：
|
||||
|
||||
```bash
|
||||
# 有多少文件改动，就执行多少次
|
||||
git hash-object -w 文件名
|
||||
git update-index
|
||||
```
|
||||
|
||||
> !! git add ./ 先把工作区生成 git 对象，放到版本库，然后再放到暂存区
|
||||
|
||||
### 暂存区提交到版本库
|
||||
|
||||
`git commit -m 'comment'`，相当于如下操作：
|
||||
|
||||
```bash
|
||||
git write-tree
|
||||
git commit-tree
|
||||
```
|
||||
|
||||
也可以跳过暂存区提交，`git commit -a -m `
|
||||
|
||||
### 查看哪些修改没有暂存
|
||||
|
||||
`git diff`：没有暂存
|
||||
|
||||
`git diff --staged`：查看哪些修改以及被暂存了，但没有提交
|
||||
|
||||
### 查看提交历史记录
|
||||
|
||||
`git log --oneline`，打印出`hash值`是提交对象
|
||||
|
||||
## 分支
|
||||
|
||||
本质是一个`提交对象`，每次`git branch name`中的`name`，指针`HEAD`，就会根据`name`指向提交对象
|
||||
|
||||
如果要开发新功能，就新建一个`分支A`，写完再合`master`分支，正常来说`master`分支不会轻易给修改权限。
|
||||
|
||||
如果另一个新功能，和`分支A`同级、并行的，那就`切到master`分支，在`master`分支基础上，开`分支B`，进行新功能开发
|
||||
|
||||
> 一般来说，master 分支没有权限，需要自己重新写开一个分支，分支名用 nickname
|
||||
|
||||
```bash
|
||||
C1 master
|
||||
|——C2——C3——C4 mozzie
|
||||
```
|
||||
|
||||
### 分支列表
|
||||
|
||||
`git branch`
|
||||
|
||||
### 创建分支
|
||||
|
||||
`git branch 分支名`，并不会自动切换到分支
|
||||
|
||||
### 切换分支
|
||||
|
||||
> !! 最佳实践：每次切换分之前，git status 查一下，当前分支一定要是干净的
|
||||
|
||||
`git checkout 分支名`
|
||||
|
||||
### 合并分支
|
||||
|
||||
> !! 做任何事情，确保做完了，再合并到 master 分支
|
||||
|
||||
场景：需要增加功能`feat:#53`
|
||||
|
||||
```bash
|
||||
# HEAD -> master，新开一个分支
|
||||
git checkout -b 'feat53'
|
||||
```
|
||||
|
||||
突然发现 bug，需要修复`bug:#52`
|
||||
|
||||
```bash
|
||||
# HEAD -> feat53，先提交#53分支的工作
|
||||
git commit -a -m 'feat53 完成50%'
|
||||
# 切回 master 分支
|
||||
git checkout master
|
||||
# HEAD -> master，创建 issue52 分支
|
||||
git checkout -b 'issue52'
|
||||
# 改完了issue52
|
||||
git commit -a -m 'fix:issue52'
|
||||
# HEAD -> master
|
||||
git checkout master
|
||||
# 合
|
||||
git merge issue52
|
||||
# 删除 issue52分支(hash还在)
|
||||
git branch -d issue52
|
||||
```
|
||||
|
||||
> 此时，由于`issue52`是在之前的 master 分支上生成的，故而`feat53`的分支仍然存在`issue52`的 bug，所以有可能存在冲突，需要手动解决
|
||||
|
||||
```bash
|
||||
# HEAD -> master
|
||||
git merge feat53
|
||||
# 此处省略解决冲突
|
||||
git add ./
|
||||
git commit -m 'fix:merge conflict'
|
||||
# 删除 feat53
|
||||
git branch -d feat53
|
||||
```
|
||||
|
||||
### 删除分支
|
||||
|
||||
查看哪些分支合并到当前分支，`git branch --merged`，这个列表中分支名字前没有\*号的分支通常可以使用`git branch -d 分支名`删掉
|
||||
|
||||
`git branch -D 分支名`，强制删除
|
||||
|
||||
### 新建分支并指向指定提交对象
|
||||
|
||||
`git branch name commitHash`，例`git log --oneline`如下：
|
||||
|
||||
```bash
|
||||
* hasfh2asd 1.txt
|
||||
* 1shfd2zsw 2.txt
|
||||
* 67rf73has 3.txt
|
||||
* 03uhr4rug 4.txt
|
||||
```
|
||||
|
||||
输入`git branch CCC 03uhr4rug`，那么会创建一个名为`CCC`的分支，并且`CCC`分支有`4.txt`
|
||||
|
||||
> 通常想看原来的某个版本的代码，就可以这样操作，看完，把这个分支删了
|
||||
|
||||
### 远程分支
|
||||
|
||||
> `git clone`下来的分支，默认就会建立一个`远程跟踪分支`(同步关系),例如 master 分支
|
||||
|
||||
- 本地分支
|
||||
|
||||
场景一：如果想公开一个`share`分支 ，与他人共同写作：
|
||||
|
||||
```bash
|
||||
# 过程中会生成生成一个远程跟踪分支 origin/share
|
||||
git push origin share
|
||||
```
|
||||
|
||||
场景二：创建一个本地分支`b1`，直接跟踪远程分支`orgin/b1`
|
||||
|
||||
```bash
|
||||
git checkout -b 'b1' 'origin/b1'
|
||||
```
|
||||
|
||||
场景三：已存在一个本地分支`dev`，改成远程跟踪分支
|
||||
|
||||
```bash
|
||||
# HEAD -> dev，建立 本地分支 dev 与 远程分支 origin/dev 关系
|
||||
git branch -u origin/dev
|
||||
# 这样就可以直接
|
||||
git push / git pull
|
||||
```
|
||||
|
||||
- 远程分支
|
||||
|
||||
查看远程分支：`git remote -v`
|
||||
|
||||
查看当前本地分支的远程跟踪分支：`git branch -vv`
|
||||
|
||||
## 远程分支删除, 本地更新 --prune
|
||||
|
||||
```bash
|
||||
# 不加 --prune，和 fetch 等价， 远程被删除的分支不会同步删除本地origin的分支
|
||||
git remote update origin --prune
|
||||
```
|
||||
|
||||
# 提交规范
|
||||
|
||||
```bash
|
||||
type(scope): subject
|
||||
# 例如
|
||||
feat(miniprogram): 增加了小程序模板消息相关功能
|
||||
```
|
||||
|
||||
通常`type`有如下：
|
||||
|
||||
- feat - 新功能 feature
|
||||
- fix - 修复 bug
|
||||
- docs - 文档注释
|
||||
- style - 代码格式(不影响代码运行的变动)
|
||||
- refactor - 重构、优化(既不增加新功能，也不是修复 bug)
|
||||
- perf - 性能优化
|
||||
- test - 增加测试
|
||||
- chore - 构建过程或辅助工具的变动
|
||||
- revert - 回退
|
||||
- build - 打包
|
||||
|
||||
## 自动生成 Change log
|
||||
|
||||
原理：利用 `child_process`获取 `git log`内容，处理字符串
|
||||
|
||||
```js
|
||||
const execSync = require("child_process").execSync; //同步子进程
|
||||
const fs = require("fs");
|
||||
const process = require("process");
|
||||
const path = require("path");
|
||||
const inquirer = require("inquirer");
|
||||
const dayjs = require("dayjs");
|
||||
const axios = require("axios");
|
||||
|
||||
// env
|
||||
const isForCommanHuman = process.argv.includes("--common");
|
||||
|
||||
// changelog.md生成路径
|
||||
const outputpath = path.resolve(process.cwd(), "./changelog.md");
|
||||
// 非空检测
|
||||
if (!fs.existsSync(outputpath)) fs.writeFile(outputpath, "", (err) => {});
|
||||
// 华丽的gitlog日志
|
||||
const perfectGitLog = (startTime, endTime) =>
|
||||
isForCommanHuman
|
||||
? `git log --since="${startTime}" --until="${endTime}" --no-merges --pretty=format:"%cr %C(cyan)%s"`
|
||||
: `git log --since="${startTime}" --until="${endTime}" --no-merges --pretty=format:"%C(yellow)%h %C(green)%cn %C(redz)(%cr:%ci) %C(cyan)%s"`;
|
||||
|
||||
const wxrobotHook =
|
||||
"https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=be4d4473-c290-4ddd-a089-41df3ed1d601";
|
||||
|
||||
// 当前时间
|
||||
const now = Date.now();
|
||||
// 2周前
|
||||
const weeks_2_ago = now - 14 * 24 * 60 * 60 * 1000;
|
||||
|
||||
inquirer
|
||||
.prompt([
|
||||
{
|
||||
type: "input",
|
||||
name: "startDate",
|
||||
message: `起始时间,默认13天前 \n`,
|
||||
default: dayjs(weeks_2_ago).format("YYYY.MM.DD"),
|
||||
validate: (val) => /\d{4}.\d{2}.\d{2}/.test(val),
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
name: "endDate",
|
||||
message: `结束时间,默认今天 \n`,
|
||||
default: dayjs(now).format("YYYY.MM.DD"),
|
||||
validate: (val) => /\d{4}.\d{2}.\d{2}/.test(val),
|
||||
},
|
||||
{
|
||||
type: "rawlist",
|
||||
message: "是否通知到微信机器人:",
|
||||
name: "notifyWxrobot",
|
||||
choices: ["Y", "N"],
|
||||
},
|
||||
])
|
||||
.then((answers) => {
|
||||
const { startDate, endDate, notifyWxrobot } = answers;
|
||||
const rowTemplate = perfectGitLog(startDate, endDate);
|
||||
let fmt = execSync(rowTemplate)
|
||||
.toString()
|
||||
.trim()
|
||||
.replace(/feat: /gi, "✅: ")
|
||||
.replace(/fix: /gi, "🐛: ")
|
||||
.replace(/chore: /gi, "🎨: ")
|
||||
.replace(/perf: /gi, "⚡: ")
|
||||
.replace(/docs: /gi, "📝: ")
|
||||
.replace(/refactor: /gi, "🔨: ")
|
||||
.replace(/anno: /gi, "🔖: ")
|
||||
.replace(/style: /gi, "👷: ");
|
||||
fs.writeFileSync(outputpath, fmt, (err) => {});
|
||||
// 通知微信群聊机器人
|
||||
if (notifyWxrobot === "Y") {
|
||||
axios.post(wxrobotHook, {
|
||||
msgtype: "markdown",
|
||||
markdown: {
|
||||
content: fmt,
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.isTtyError) {
|
||||
// Prompt couldn't be rendered in the current environment
|
||||
} else {
|
||||
// Something else went wrong
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 使用 husky+eslint 规范提交
|
||||
|
||||
> 需要配合 eslint
|
||||
|
||||
`git init`后，`yarn add husky`，在`package.json`配置
|
||||
|
||||
```json
|
||||
{
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 生成 ssh key
|
||||
|
||||
```bash
|
||||
ssh-keygen -t rsa -C "himozzie@foxmail.com"
|
||||
```
|
||||
|
||||
## 查看 ssh 公钥
|
||||
|
||||
```bash
|
||||
cat ~/.ssh/id_rsa.pub
|
||||
```
|
||||
|
||||
# git 代理
|
||||
|
||||
> 前提条件是开了扶墙工具
|
||||
|
||||
git clone 拉取方式选择 http/https(默认会让你输入账号密码，比较蛋疼)，不要选择 ssl 拉取
|
||||
|
||||
```bash
|
||||
git config --global http.proxy 'http://127.0.0.1:1081'
|
||||
git config --global https.proxy 'https://127.0.0.1:1081'
|
||||
# 清除
|
||||
git config --global --unset http.proxy
|
||||
git config --global --unset https.proxy
|
||||
```
|
||||
|
||||
# 终端临时代理
|
||||
|
||||
```bash
|
||||
# cmd临时代理方案（cmd窗口关闭，则代理失效）
|
||||
set http_proxy=http://127.0.0.1:50015
|
||||
set https_proxy=http://127.0.0.1:50015
|
||||
```
|
||||
|
||||
# git 钩子(hooks)
|
||||
|
||||
原理:项目 git push 到远程仓库,远程仓库的钩子 post 通知 www/wwwroot 下的站点 pull 远程仓库
|
||||
|
||||
> git 钩子需要 git 服务和 pull 在同一环境中
|
||||
|
||||
- 创建远程仓库,配置钩子,git post-receive 钩子
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
unset $(git rev-parse --local-env-vars);
|
||||
# post-receive接收到pull指令后,执行bash命令
|
||||
cd /www/wwwroot/doc.mozzie.cn/ && git pull origin master
|
||||
```
|
||||
|
||||
> web 目录下 doc.mozzie.cn 是网站目录,本地项目编译打包后,直接 git push 的目录
|
||||
|
||||
## web 钩子
|
||||
|
||||
待耍
|
||||
|
||||
# 项目
|
||||
|
||||
## 统计项目代码行数
|
||||
|
||||
统计所有人代码增删量，拷贝如下命令， git bash 终端，git 项目某分支下执行
|
||||
|
||||
```bash
|
||||
git log --format='%aN' | sort -u | while read name; do echo -en "$name\t"; git log --author="$name" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -; done
|
||||
|
||||
```
|
||||
|
||||
## 统计制定提交者代码量
|
||||
|
||||
替换`username`为提交者的名称
|
||||
|
||||
```bash
|
||||
git log --author="username" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -
|
||||
```
|
||||
|
||||
# 搭建 gogs
|
||||
|
||||
gogs 官网下载,压缩包解压到`www/wwwroot/`下
|
||||
|
||||
```bash
|
||||
cd /www/wwwroot/gogs
|
||||
# 启服务,默认3000的端口，被占用则 ./gogs web -port 3001
|
||||
./gogs web
|
||||
```
|
||||
|
||||
浏览器访问`http://yourip:3000/install`,注意服务器安全组放行 3000 端口
|
||||
|
||||
- 为 gogs 添加 mysql 数据库
|
||||
- 配置 mysql
|
||||
- 配置 gogs 相关信息
|
||||
- 配置其他信息
|
||||
|
||||
停掉`./gogs web`
|
||||
|
||||
在刚安装的 gogs 路径下，找到`/gogs/scripts/systemd/gogs.service` 文件复制一份
|
||||
|
||||
```bash
|
||||
User=root
|
||||
Group=root
|
||||
WorkingDirectory=/www/wwwroot/git.mozzie.cn
|
||||
ExecStart=/www/wwwroot/git.mozzie.cn/gogs web
|
||||
Restart=always
|
||||
Environment=USER=root HOME=/www/wwwroot/git.mozzie.cn
|
||||
```
|
||||
|
||||
将修改好的`gogs.service`文件上传到`/etc/systemd/system`下，并执行以下命令来激活 gogs
|
||||
|
||||
```bash
|
||||
sudo systemctl enable gogs
|
||||
# 启动gogs
|
||||
sudo systemctl start gogs
|
||||
```
|
||||
|
||||
`/gogs/custom/conf/app.ini`,修改该文件可以自定义配置,安装步骤填错了,可以这里修改,重启 gogs 服务即可
|
||||
|
||||
## 配置 gogs GIT 钩子
|
||||
|
||||
场景：以 Gogs 为例，先 git push `A项目` 到远程仓库 `REPO`，服务端 web 目录`webB`文件夹触发钩子执行 git pull
|
||||
|
||||
1、gogs 初始化一个仓库`REPO`，仓库设置=>管理 GIT 钩子=>post-receive，填入
|
||||
|
||||
```bash
|
||||
#!/bin/sh
|
||||
export GIT_WORK_TREE=/www/wwwroot/webB
|
||||
export GIT_DIR=${GIT_WORK_TREE}/.git
|
||||
cd ${GIT_WORK_TREE}
|
||||
git pull
|
||||
```
|
||||
|
||||
2、利用 ssh 工具登录服务器
|
||||
|
||||
```bash
|
||||
ssh root@mozzie.cn
|
||||
```
|
||||
|
||||
3、生成 ssh key
|
||||
|
||||
```bash
|
||||
ssh-keygen -t rsa -C "himozzie@foxmail.com"
|
||||
```
|
||||
|
||||
4、配置公钥到 gogs
|
||||
|
||||
```bash
|
||||
cat ~/.ssh/id_rsa.pub
|
||||
```
|
||||
|
||||
把打印出的公钥，配置到 ssh 密钥
|
||||
|
||||
5、最后一步
|
||||
|
||||
配置好服务端的公钥后，就可以无需用户名密码，`cd /webB`目录下，执行`git pull`，此后每次`git push A项目`，服务端都会触发`GIT钩子`，自动从`REPO`拉取最新的仓库文件
|
||||
454
source/_posts/front-end/jquery.md
Normal file
454
source/_posts/front-end/jquery.md
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
---
|
||||
title: jQuery
|
||||
categories:
|
||||
- Front-End
|
||||
status: done
|
||||
---
|
||||
|
||||
# 基础
|
||||
|
||||
在 `window` 对象中挂载了 `$`和`jQuery`
|
||||
|
||||
```js
|
||||
window.jQuery();
|
||||
window.$ = window.jQuery;
|
||||
```
|
||||
|
||||
# 模块化
|
||||
|
||||
## 原始写法
|
||||
|
||||
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
|
||||
|
||||
> 缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
|
||||
|
||||
```js
|
||||
function m1() {
|
||||
//...
|
||||
}
|
||||
|
||||
function m2() {
|
||||
//...
|
||||
}
|
||||
```
|
||||
|
||||
## 对象写法
|
||||
|
||||
把模块写成一个对象
|
||||
|
||||
> 写法会暴露所有模块成员，内部状态可以被外部改写。
|
||||
|
||||
```js
|
||||
var module1 = new Object({
|
||||
_count: 0,
|
||||
|
||||
m1: function () {
|
||||
//...
|
||||
},
|
||||
|
||||
m2: function () {
|
||||
//...
|
||||
},
|
||||
});
|
||||
|
||||
// 使用
|
||||
module1.m1();
|
||||
```
|
||||
|
||||
## IIFE 立即执行函数写法[推荐]
|
||||
|
||||
> 外部代码无法读取内部的成员变量
|
||||
|
||||
```js
|
||||
var module1 = (function () {
|
||||
var _count = 0;
|
||||
|
||||
var m1 = function () {
|
||||
//...
|
||||
};
|
||||
|
||||
var m2 = function () {
|
||||
//...
|
||||
};
|
||||
|
||||
return {
|
||||
m1: m1,
|
||||
m2: m2,
|
||||
};
|
||||
})();
|
||||
|
||||
console.info(module1._count); //undefined
|
||||
```
|
||||
|
||||
## (宽)放大模式
|
||||
|
||||
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"
|
||||
|
||||
```js
|
||||
var module1 = (function (mod) {
|
||||
mod.m3 = function () {
|
||||
//...
|
||||
};
|
||||
return mod;
|
||||
})(module1);
|
||||
```
|
||||
|
||||
mod 可能存在异步，不知道内部哪个部分会先加载，如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
|
||||
|
||||
```js
|
||||
var module1 = (function (mod) {
|
||||
//...
|
||||
return mod;
|
||||
})(window.module1 || {});
|
||||
```
|
||||
|
||||
## 输入全局变量[推荐]
|
||||
|
||||
为了在模块内部调用全局变量，必须显式地将其他变量输入模块
|
||||
|
||||
```js
|
||||
var module1 = (function ($, YAHOO) {
|
||||
//...
|
||||
})(jQuery, YAHOO);
|
||||
```
|
||||
|
||||
# 链式操作
|
||||
|
||||
```js
|
||||
$('div').find('#child').addClass('red')
|
||||
// end() 函数返回上一级
|
||||
$('div').find('#child').addClass('red').end().addClass（'yellow'）
|
||||
```
|
||||
|
||||
# 选择器
|
||||
|
||||
## 筛选器
|
||||
|
||||
```js
|
||||
// $('li').first()
|
||||
$("li:first"); //第一个元素
|
||||
// $('li').last()
|
||||
$("li:last"); //最后一个元素
|
||||
$("tr:even"); //索引为偶数的元素，从 0 开始
|
||||
$("tr:odd"); //索引为奇数的元素，从 0 开始
|
||||
// $("tr").eq(1)
|
||||
$("tr:eq(1)"); //给定索引值的元素
|
||||
$("tr:gt(0)"); //大于给定索引值的元素
|
||||
$("tr:lt(2)"); //小于给定索引值的元素
|
||||
$(":focus"); //当前获取焦点的元素
|
||||
$(":animated"); //正在执行动画效果的元素
|
||||
```
|
||||
|
||||
## 内容选择器
|
||||
|
||||
```js
|
||||
$("div:contains('nick')"); //包含nick文本的元素
|
||||
|
||||
$("td:empty"); //不包含子元素或者文本的空元素
|
||||
|
||||
$("div:has(p)"); //含有选择器所匹配的元素
|
||||
|
||||
$("td:parent"); //含有子元素或者文本的元素
|
||||
```
|
||||
|
||||
## 表单选择器
|
||||
|
||||
```js
|
||||
$(":input"); //匹配所有 input, textarea, select 和 button 元素
|
||||
|
||||
$(":text"); //所有的单行文本框
|
||||
|
||||
$(":password"); //所有密码框
|
||||
|
||||
$(":radio"); //所有单选按钮
|
||||
|
||||
$(":checkbox"); //所有复选框
|
||||
|
||||
$(":submit"); //所有提交按钮
|
||||
|
||||
$(":reset"); //所有重置按钮
|
||||
|
||||
$(":button"); //所有button按钮
|
||||
|
||||
$(":file"); //所有文件域
|
||||
|
||||
$("input:radio[name=sex]:checked"); //所有name 尾input选中的元素
|
||||
|
||||
$("select option:selected"); //select中所有选中的option元素
|
||||
```
|
||||
|
||||
## 查找
|
||||
|
||||
```js
|
||||
$("#xxx"); //返回 一个 jquery 对象
|
||||
|
||||
$("#xxx").find(".xxx"); //查找#xxx里的.xxx元素
|
||||
|
||||
$("#xxx").parent(); //获取父类
|
||||
|
||||
$("#xxx").parents("xxx"); //获取xxx祖先
|
||||
|
||||
$("#xxx").children(); //获取子类
|
||||
|
||||
$("#xxx").siblings(); //获取同一父类的其他元素
|
||||
|
||||
$("#xxx").next(); //获取下一个元素
|
||||
|
||||
$("#xxx").prev(); //获取上一个元素
|
||||
```
|
||||
|
||||
## 属性操作
|
||||
|
||||
```js
|
||||
$("img").attr("src"); //返回文档中所有图像的src属性值
|
||||
|
||||
$("img").attr("src", "test.jpg"); //设置所有图像的src属性
|
||||
|
||||
$("img").removeAttr("src"); //将文档中图像的src属性删除
|
||||
|
||||
$("input[type='checkbox']").prop("checked", true); //选中复选框
|
||||
|
||||
$("input[type='checkbox']").prop("checked", false);
|
||||
|
||||
$("img").removeProp("src"); //删除img的src属性
|
||||
```
|
||||
|
||||
## css 操作
|
||||
|
||||
```js
|
||||
$("p").addClass("selected"); //为p元素加上 'selected' 类
|
||||
|
||||
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
|
||||
|
||||
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
|
||||
|
||||
$("p").css("color"); //访问查看p元素的color属性
|
||||
|
||||
$("p").css("color", "red"); //设置p元素的color属性为red
|
||||
|
||||
$("p").css({ color: "red", background: "yellow" }); // 设置多个属性
|
||||
```
|
||||
|
||||
## 文档处理
|
||||
|
||||
内部插入
|
||||
|
||||
```js
|
||||
$("p").append("<b>nick</b>"); //每个p元素内后面追加内容
|
||||
|
||||
$("p").appendTo("div"); //p元素追加到div内后
|
||||
|
||||
$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容
|
||||
|
||||
$("p").prependTo("div"); //p元素追加到div内前
|
||||
```
|
||||
|
||||
外部插入
|
||||
|
||||
```js
|
||||
$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
|
||||
|
||||
$("p").before("<b>nick</b>"); //在每个p元素同级之前插入内容
|
||||
|
||||
$("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面
|
||||
|
||||
$("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
|
||||
```
|
||||
|
||||
## 复制
|
||||
|
||||
```js
|
||||
$("p").clone(); //克隆元素并选中克隆的副本
|
||||
|
||||
$("p").clone(true); //布尔值指事件处理函数是否会被复制
|
||||
```
|
||||
|
||||
# attr 和 prop 区别
|
||||
|
||||
prop 和 attr 均可获取属性值，但 prop 获取的是 `DOM 对象内置属性`。
|
||||
|
||||
> !! 例如 input，radio，slect 元素，请使用 prop 获取
|
||||
|
||||
```html
|
||||
<img src="https://www.runoob.com/images/pulpit.jpg" />
|
||||
<p tinyval="12"></p>
|
||||
```
|
||||
|
||||
```js
|
||||
// 因为页面源代码中没有设置 width 属性
|
||||
$("img").attr("width"); // undefined
|
||||
$("img").prop("width"); // 284
|
||||
|
||||
// 由于 tinyval 并非 HTML 标准属性
|
||||
$("p").prop("tinyval"); // undefined
|
||||
$("p").attr("tinyval"); // 12
|
||||
```
|
||||
|
||||
# 事件
|
||||
|
||||
## 事件委托
|
||||
|
||||
- 可极大减少事件绑定次数，提高性能
|
||||
- 可让动态加入的子元素绑定相同的命令
|
||||
|
||||
```js
|
||||
function handleClick(event) {
|
||||
// this 表示当前单击的元素
|
||||
alert($(this).html());
|
||||
}
|
||||
// 把子级li元素的单击事件委托在父级ul身上
|
||||
$("ul").delegate("li", "click", handleClick);
|
||||
```
|
||||
|
||||
## 单事件单元素
|
||||
|
||||
```js
|
||||
function handleClick() {}
|
||||
$xxx.on("click", handleClick);
|
||||
```
|
||||
|
||||
## 单事件多元素
|
||||
|
||||
```js
|
||||
function handleClick() {}
|
||||
$xxx.on("click", "#aaa, .bbb", handleClick);
|
||||
```
|
||||
|
||||
## 多事件多元素
|
||||
|
||||
```js
|
||||
function handleClick() {}
|
||||
function handleMounseEnter() {}
|
||||
$xxx.on(
|
||||
{
|
||||
click: handleClick,
|
||||
mounseenter: handleMounseEnter,
|
||||
},
|
||||
"#aaa, .bbb"
|
||||
);
|
||||
```
|
||||
|
||||
## 一夜情事件
|
||||
|
||||
```js
|
||||
function handleClick() {}
|
||||
$xxx.one("click", handleClick);
|
||||
```
|
||||
|
||||
# 对象操作
|
||||
|
||||
```js
|
||||
$.trim(); //去除字符串两端的空格
|
||||
|
||||
$.each(); //遍历一个数组或对象，for循环
|
||||
|
||||
$.inArray(); //返回一个值在数组中的索引位置，不存在返回-1
|
||||
|
||||
$.grep(); //返回数组中符合某种标准的元素
|
||||
|
||||
$.extend(true, {}, a, b); // 深浅拷贝合并 a、b 到 {} 上
|
||||
|
||||
$.makeArray(); //将对象转化为数组
|
||||
|
||||
$.type(); //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
|
||||
|
||||
$.isArray(); //判断某个参数是否为数组
|
||||
|
||||
$.isEmptyObject(); //判断某个对象是否为空(不含有任何属性)
|
||||
|
||||
$.isFunction(); //判断某个参数是否为函数
|
||||
|
||||
$.isPlainObject(); //判断某个参数是否为用"{}"或"new Object"建立的对象
|
||||
|
||||
$.support(); //判断浏览器是否支持某个特性
|
||||
```
|
||||
|
||||
# 禁止右键功能菜单
|
||||
|
||||
```js
|
||||
$(window).on({
|
||||
contextmenu: function () {
|
||||
return false;
|
||||
},
|
||||
keydown: function (e) {
|
||||
if (e.ctrlKey || (e.metaKey && (e.keyCode === 67 || e.keyCode === 8)))
|
||||
return false;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
# 自动修改破损图像
|
||||
|
||||
```js
|
||||
$("img").on("error", function () {
|
||||
$(this).prop("src", "img/broken.png");
|
||||
});
|
||||
```
|
||||
|
||||
# 模块化 jquery 最佳实践
|
||||
|
||||
```js
|
||||
// xx 视图模块 #xx
|
||||
(function ($, $view) {
|
||||
console.log($ + "has been imported");
|
||||
|
||||
// 缓存 dom需要用到的 dom，提高性能
|
||||
var $partA = $view.find(".partA"),
|
||||
$partB = $view.find(".partB");
|
||||
|
||||
// 链式表结构，事件委托
|
||||
$view
|
||||
.on("focus", "#btnFocusPartA", handleBtnFocusPartA)
|
||||
.on("click", ".btnClickPartB", handleBtnClickPartB);
|
||||
|
||||
// 方法，建议函数式
|
||||
function handleBtnFocusPartA() {
|
||||
console.log($partA + "handler");
|
||||
}
|
||||
|
||||
function handleBtnClickPartB(e) {
|
||||
console.log($partB + "handler", "，click 的 e.target" + e.target);
|
||||
}
|
||||
})(jQuery || window.jQuery || window.$, $("#viewModule"));
|
||||
```
|
||||
|
||||
更骚的`路由表`的写法，搭配模块化开发更优雅，更方便管理
|
||||
|
||||
```js
|
||||
// xx 视图模块 #xx
|
||||
(function ($, $view) {
|
||||
console.log($ + "has been imported");
|
||||
|
||||
// 缓存 dom需要用到的 dom，提高性能
|
||||
var $partA = $view.find(".partA"),
|
||||
$partB = $view.find(".partB");
|
||||
|
||||
// $view 视图的事件委托表
|
||||
var eventTable = [
|
||||
{
|
||||
name: "focus",
|
||||
elem: "#btnFocusPartA",
|
||||
handler: handleBtnFocusPartA,
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
elem: ".btnClickPartB",
|
||||
handler: handleBtnClickPartB,
|
||||
},
|
||||
];
|
||||
|
||||
// 注册事件
|
||||
eventTable.forEach(function (item) {
|
||||
$view.on(item.name, item.elem, item.handler);
|
||||
});
|
||||
|
||||
// 方法，建议函数式
|
||||
function handleBtnFocusPartA() {
|
||||
console.log($partA + "handler");
|
||||
}
|
||||
|
||||
function handleBtnClickPartB(e) {
|
||||
console.log($partB + "handler", "，click 的 e.target" + e.target);
|
||||
}
|
||||
})(jQuery || window.jQuery || window.$, $("#viewModule"));
|
||||
```
|
||||
229
source/_posts/front-end/wsl2.md
Normal file
229
source/_posts/front-end/wsl2.md
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
---
|
||||
title: wsl2
|
||||
categories:
|
||||
- Front-End
|
||||
status: done
|
||||
---
|
||||
|
||||
# 安装 wsl
|
||||
|
||||
前置条件，主板 bios 开启 `intel 虚拟化`
|
||||
|
||||
> ms app store如果打不开、转圈 -> 关闭小飞机，也可以试试 改 ipv4 host 4.2.2.2
|
||||
|
||||
- windows terminal 必备，ms store 下载
|
||||
|
||||
[巨硬官方文档](https://docs.microsoft.com/en-us/windows/wsl/install)
|
||||
|
||||
# ubuntu软件源
|
||||
|
||||
[阿里开源镜像站](https://developer.aliyun.com/mirror/)
|
||||
|
||||
下面是 ubuntu20.04 用的
|
||||
|
||||
```bash
|
||||
# 备份apt默认源
|
||||
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
|
||||
sudo vim /etc/apt/sources.list
|
||||
# 替换 /srouces.list
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
|
||||
|
||||
# deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
|
||||
# deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
|
||||
|
||||
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
|
||||
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
|
||||
|
||||
|
||||
# 更新apt
|
||||
sudo apt upgrade
|
||||
sudo apt update
|
||||
```
|
||||
|
||||
# 安装 zsh
|
||||
|
||||
> 注意`.zshrc`在安装的`用户`目录下，别和`root`搞混了
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
sudo apt install zsh
|
||||
# 将 zsh 设置为默认 shell
|
||||
chsh -s /bin/zsh
|
||||
# 检查，若没成功，重启试试看
|
||||
echo $SHELL
|
||||
```
|
||||
|
||||
# 安装 oh-my-zsh
|
||||
|
||||
```bash
|
||||
# 443 confused 手动 vim oh-my-zsh.sh 然后 bash ./oh-my-zsh.sh
|
||||
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
|
||||
```
|
||||
|
||||
# 配置 oh-my-zsh 主题/插件/alias
|
||||
|
||||
安装插件
|
||||
|
||||
- 自动补全:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
|
||||
```
|
||||
|
||||
- 代码高亮:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
|
||||
```
|
||||
|
||||
修改`当前用户`目录下的 `.zshrc`
|
||||
|
||||
```bash
|
||||
# 主题
|
||||
ZSH_THEME="ys"
|
||||
# 引入插件
|
||||
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
|
||||
# alias
|
||||
alias cls='clear'
|
||||
alias ga='git add'
|
||||
alias gc='git commit -m'
|
||||
alias gp='git push'
|
||||
alias gf='git fetch'
|
||||
alias update='sudo apt update'
|
||||
alias upgrade='sudo apt upgrade'
|
||||
alias install='sudo apt install'
|
||||
# windows文件管理器打开wsl文件
|
||||
alias open='explorer.exe'
|
||||
```
|
||||
|
||||
# 安装 Nodejs
|
||||
|
||||
[巨硬文档赛高](https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl)
|
||||
|
||||
安装完注意文字提示
|
||||
|
||||
```bash
|
||||
# =>Appending nvm source string to /home/mozzie/.zshrc
|
||||
# => Appending bash_completion source string to /home/mozzie/.zshrc
|
||||
# => Close and reopen your terminal to start using nvm or run the following to use it now:
|
||||
```
|
||||
照它说的做
|
||||
|
||||
```bash
|
||||
export NVM_DIR="$HOME/.nvm"
|
||||
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
|
||||
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
|
||||
```
|
||||
|
||||
验证`nvm`安装 `nvm ls`，会看见类似
|
||||
|
||||
```bash
|
||||
iojs -> N/A (default)
|
||||
node -> stable (-> N/A) (default)
|
||||
unstable -> N/A (default)
|
||||
```
|
||||
|
||||
安装 `nodejs stable`
|
||||
|
||||
```bash
|
||||
nvm install node
|
||||
# node -v | npm -v 验证安装版本
|
||||
```
|
||||
|
||||
# 外网/LAN 访问 wsl2 服务
|
||||
|
||||
[巨硬官方解释](https://docs.microsoft.com/en-us/windows/wsl/networking)
|
||||
|
||||
When using a WSL 1 distribution, if your computer was set up to be accessed by your LAN, then applications run in WSL could be accessed on your LAN as well.
|
||||
|
||||
This isn't the default case in WSL 2. WSL 2 has a virtualized ethernet adapter with its own unique IP address. Currently, to enable this workflow you will need to go through the same steps as you would for a regular virtual machine. (We are looking into ways to improve this experience.)
|
||||
|
||||
Here's an example PowerShell command to add a port proxy that listens on port 4000 on the host and connects it to port 4000 to the WSL 2 VM with IP address 192.168.101.100
|
||||
|
||||
```bash
|
||||
netsh interface portproxy add v4tov4 listenport=4000 listenaddress=0.0.0.0 connectport=4000 connectaddress=192.168.101.100
|
||||
```
|
||||
> 注意端口覆盖的问题，避免 windows 端口和端口 wsl2 冲突
|
||||
|
||||
## netsh 端口映射
|
||||
|
||||
- listenaddress: 监听地址, 0.0.0.0 表示匹配所有地址
|
||||
- listenport: 监听的 windows 端口
|
||||
|
||||
- connectaddress: 转发到 wsl2 的 ip地址, 这里设置为localhost，默认从 windows 可以通过localhost 访问 wsl2
|
||||
- connectport: 转发到 wsl2 的端口
|
||||
|
||||
例如 windows 的 ip 为 `192.168.1.100`，监听 windows 的 3000 端口，转发到 wsl2 ip localhost 的 3000 端口
|
||||
|
||||
```bash
|
||||
# windows-terminal 管理员权限执行
|
||||
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=localhost
|
||||
# 删除端口监听
|
||||
netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=3000
|
||||
```
|
||||
|
||||
## 配置 windows defender 防火墙入站规则
|
||||
|
||||
新建规则 -> 端口 -> TCP / 特定本地端口(3000) -> 允许链接 -> 下一步 -> 取个名字 -> Done
|
||||
|
||||
# docker
|
||||
|
||||
windows 宿主机安装 `docker desktop`，`设置 -> 资源 -> WSL INTEGRATION` 打开 对应的 linux发行版，即使用
|
||||
|
||||
## mysql 容器
|
||||
|
||||
```bash
|
||||
# brdige
|
||||
docker network create --driver bridge --subnet=172.21.0.0/16 wsl2
|
||||
# pull
|
||||
docker pull mysql:5.7.38
|
||||
# 生产 mysql 5.7.38 容器
|
||||
docker run --restart=always --privileged=true -p 3306:3306 --name mysql --net wsl2 --ip 172.21.0.5 -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7.38
|
||||
```
|
||||
|
||||
## mongo 容器
|
||||
|
||||
```bash
|
||||
docker pull mongo:5.0
|
||||
# 宿主机 /mongo/data
|
||||
docker run --restart=always -d -p 27017:27017 -v /mongo/data:/data --name mongo --net wsl2 --ip 172.21.0.6 mongo:5.0 --auth
|
||||
# 初始化
|
||||
docker exec -it mongo /bin/bash
|
||||
# 进入 mongo shell
|
||||
mongo
|
||||
# admin
|
||||
use admin
|
||||
# 创建root用户，管理全部数据库的权限，这会可以navicat等gui链接数据库，用户名密码root，验证数据库admin
|
||||
db.createUser({
|
||||
user: "root",
|
||||
pwd: "root",
|
||||
roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
|
||||
})
|
||||
# 退出
|
||||
exit
|
||||
# 再次进入
|
||||
mongo
|
||||
# 使用root登录授权，正确返回 1
|
||||
db.auth("root","root")
|
||||
# 创建 testDB 数据库
|
||||
use testDB
|
||||
# 创建 test 用户 管理 testDB
|
||||
db.createUser({user:'test',pwd:'test',roles:[{role:'dbOwner',db:'testDB'}]})
|
||||
```
|
||||
|
||||
使用 navicat 登录，验证数据库 `admin` ，用户名密码 `test`
|
||||
|
||||
|
||||
# 默认 wsl root 用户登录
|
||||
|
||||
```bash
|
||||
# wsl -l 查看 ubuntu版本，例如 Ubuntu-20.04
|
||||
Ubuntu2004 config --default-user root
|
||||
```
|
||||
1730
source/_posts/front-end/码场悟道.md
Normal file
1730
source/_posts/front-end/码场悟道.md
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user