前端导航项目笔记

完整项目链接

https://codesandbox.io/s/qian-duan-dao-hang-mobile-2id6xs?file=/src/index.js:540-578

前端要做好两点

1. 把所有细节做好

2. 只要能看到的地方都不能出bug

参考前端导航站点

http://www.alloyteam.com/nav/

用Figma设计草图

资源：

iconfont.cn

下面这段代码可以防止双指放大

<meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />

高度不得不写的时候才写。

a tag是inline元素，div是block元素，应该是不允许內联元素包裹块级元素的，但是atag可以。

<a href="https://acfun.cn">
            <div class="site">
              <div class="logo">A</div>
              <div class="link">acfun.cn</div>
            </div>
          </a>

如何去除atag的默认样式

a {
  color: inherit;
  text-decoration: none;
}

当设置logo图片是，图片过大可以通过下面的代码解决。

意思是，图片最宽和最高都不能超过容器本身。

img {
  max-width: 100%;
  max-height: 100%;
}

引入jQuery,引入最新版本，选择xxx.min.js

https://releases.jquery.com/

如何知道jQuery有没有引入成功？

直接console.log(jQuery)/console.log($)如果有返回东西就是有了。JQuery是函数。

console.log(jQuery)
console.log($)

//ƒ (e,t){return new S.fn.init(e,t)}

如何监听button？用jQuery

这里用到的数据结构是hashMap，[{}]

如何监听用户关闭窗口？

window.onbeforeunload

developer tool里选择preserve log可以看到一闪而过的console.log信息。

localStorage只能存字符串，不能存对象，所以要把hashmap变成字符串

const string = JSON.stringify(hashMap)

把string存到localStorage里面，'x'指的是在localStorage里面设置一个x的key，把string存到这个变量里面。

localStorage.setItem('x',string)

developer tool里，打开Application可以看到Local Storage里的东西。

Screen Shot 2022-05-26 at 10.29.18 PM

如何把localStorage的东西读出来？

const x = localStorage.getItem('x')
const xObject = JSON.parse(x)

JSON.parse()如果传入的是一个空值（null），不会报错。

localStorage里存的东西什么时候会被删除或者消失？

1. 只有当用户选择在浏览器中选择清除Cookie及其他网站数据是，localStorage里存的东西才会清空。

2. 或者，当用户的硬盘满了，chrome需要空间就会把比较早之前的数据清除，但是这种几率非常非常小。

3. 如果我们使用chrome的无痕浏览，localStorage写入的内容只存在于用户打开页面的那一刻，当用户关掉浏览器后localStorage里的内容会被清空。

如何让工作精益求精？

1. 定一个很小的目标，然后实现它。

2. 没有完美。但是要做到看不到bug。

有两种方法可以控制字母大写

1. 一种是在js中使用

   <div class="logo">${node.logo[0].toUpperCase(0)}</div>

2. 另一种是在css中

   text-transform: uppercase;

如何删除过长的网址

在test的时候发现，如果输入的网址过长，就会出现下面的效果，于是又有了新目标去完成。做项目就是不管确立小目标，然后一个一个去完成。

Screen Shot 2022-05-30 at 3.57.30 PM

这种情况需要使用正则表达式来处理，因为前面已经简化了网址中的www，https和http，所以只需要添加一行replace和正则表达式就可以达到我们想要的结果。

推荐一个正则表达式入门，文章名《三十分钟入门正则表达式》

https://deerchao.cn/tutorials/regex/regex.htm

学习正则表达式只有一个诀窍，就是背，不背就不会。工作中可以直接谷歌，或者直接写一篇博客然后忘掉它。

删除功能

阻止冒泡

$li.on("click", ".close", (e) => {
      e.stopPropagation();//阻止冒泡

webstrom的一个快捷键

某个变量比如xxx后面加.log，然后按tab，会自动变成console.log(xxx)

平均布局一般用负margin，space-between会有问题.

@media (min-width: 500px) {
  .siteList {
    margin-left: 0;
    margin-right: -25;
  }
}

PC网站的宽度一般都是确定的。

媒体查询

//以下代码的意思是宽度小于500px的不管
@media (min-width: 500px){

}

//以下代码的意思是宽度大于500px的不管
@media (max-width: 500px) {
  .searchForm {
    background: red;
  }
}

//完整代码
.searchForm {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 500px) {
  .searchForm {
    max-width: 400px;
  }
}

如何使居中？

margin: 0 auto;

什么时候可以使用margin: 0 auto;来居中?

当元素有最大宽度，或者宽度固定的时候，就可以使用margin: 0 auto;来居中元素。但是只有新手才会用margin: 0 auto;，因为会把其他的上下margin给覆盖掉，所以最好写成

margin-left:auto;
margin-right:auto;