愿卿一路好风景

此心安处是吾乡

0%

发表于 更新于

display:none 在不删除元素的情况下隐藏元素，不会占据原有空间

visibility:hidden 会占据原有的空间

使用max-width 替代width能够解决当窗口宽度小于元素的宽度时不会出现进度条的移动

box-sizing属性，无需考虑内外边距对盒子大小的影响,以下代码可以兼容

1
2
3
4
-webkit-box-sizing: border-box; //chrome safari
    -moz-box-sizing: border-box; //火狐
    box-sizing: border-box;

position属性

static: 不会被特殊定位

relative:在没有添加top/left/right/left属性的时候表现没有任何影响，添加了之后会在相对其正常位置上偏离。

fixed:固定定位，固定在窗口上，页面滚动的时候不会移动，top/left/right/left属性是相对于浏览器窗口而言的。

absolute ：top/left/right/left属性是相对于父元素的位置的，如果父元素的position属性为satic,则直接参考body的位置定位。

**float:**可用于定位图片位置。父元素设置浮动以后，子元素的内容会围绕着这个父元素，要解除这种围绕，可以在子元素上添加CSS属性clear:left/right/top/bottomn

inline-block

使用inline-block布局时，需注意：

要设置每一列的宽度；

vertical-align属性会影响到inline-block元素，需将值设置为top;

如果HTML源代码中元素有空格，那么列与列之间会产生空隙；

column-count 属性

将div元素中的文本划分成三列

1
2
3
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

column-gap属性

规定列间的间隔为40像素

1
2
3
4
5
6
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

flex-box布局

设置div的flex:1 会得到剩余的宽度

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

设置在容器上的6个属性

1
2
3
4
5
6
flex-direction （竖排还是横排）  row|row-reverse|column|column-reverse
flex-wrap (是否换行)  nowrap| wrap|wrap-reverse
flex-flow   flex-direction和flex-wrap的结合 row nowrap
justify-content (容器中的子元素在横轴上的对齐方式)  flex-start|flex-end|center|sapce-   between|space-around
align-items (容器的子元素在竖轴的对齐方式) felx-start|flex-end|center|stretch|baseline
align-content (多条轴线的对齐方式)  flex-start|flex-end|center|space-between|space-around

设置在容器子元素里的6个属性

1
2
3
4
5
6
7
order 定义子元素的排列顺序，数值越小，排列越靠前，默认为O
flex-grow 定义项目的放大比例，默认为0 
flex-shrink 定义项目的缩小比例
flex-basis 定义在分配多余空间之前，项目占据的主轴空间
flex属性  flex-grow flex-shrink flex-basis的缩写 
align-self 属性允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性

font:16px/1.2 monospace; /* 字体大小/行高 字体 */

cursor: not-allowed;

当鼠标放在元素上方时显示红色警告符号，可表示禁用状态。

input的placeholder属性

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。例： placeholder=”Search ……”

Font Awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> //引入
</head>
<body>
 
<i class="fa fa-car"></i> //一般和伪类一起使用
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

去掉搜索框和按钮的默认边框outline: none;

1
2
3
4
.btn:focus,
  .input:focus{
    outline: none;
  }

input.focus()

使得鼠标自动聚焦在搜索框内

calc()函数

用在CSS中，可以直接计算属性值大小，例： width: calc(100% - 50px);　　background: hsl(100, calc(3 * 20%), 40%);

多类选择器

1
2
.user.login /* 匹配同时包含user和login的元素 */
.user .login{ /* 匹配含user下的含login的元素 */

background-size:cover;

把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉

input的required属性

required 属性规定必需在提交表单之前填写输入字段。

innerHTML和innerText的区别

innerHTML 显示的内容不包括标签，而innerText的内容包含标签。

transform

x是往右延申，-x是往左延申，y是往下延申，-y是往上延申

transform: translateX(10px/-10px);

transform: translateY(10px/-10px);

background-image: linear-gradient()

如果使用 background: -webkit-linear-gradient(to right,#FFB95E 15%,#FCA661 5%,#FCA362 5%,#FA8F66 25%,#F5736B 20%,#F35C70 30%); 效果如下

draggable属性

draggable 属性规定元素是否可拖动。

input 里的type属性：color

1
<input type="color" id="color">

显示如下：

1627139676834

margin-left：auto；

margin-left: auto ；可以使元素靠右

object-fit属性

指定元素的内容应该如何去适应指定容器宽度和高度

.progress { *animation: go-left-right 3s infinite alternate; }

把动画 “go-left-right” 应用到元素上

持续 3 秒

持续次数：infinite (无限)

每次都改变方向

表单中checked伪类

1
2
3
4
5
6
.toggle:checked + .label {
  background-color: #8e44ad;
}
//toggle为input的类名，利用label的for属性将label和input绑定，当input（type为checkbox）被选中时,设置label里面的元素的背景颜色。
可以将input隐藏起来，当点击label区域时，input会被自动选中，就会出现点击lable区域时背景颜色发生变化的效果，再次点击，input取消选择，背景颜色恢复原样。

内容超出容器后自动换行

1
2
3
4
5
6
7
8
white-space: pre; /* CSS2 */ 试过如果是英文不会自动换行
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */ 建议使用这个

skewX() skewY()属性

skewX(45deg)沿着X轴倾斜

input标签type为number时怎么去掉加减按钮

1
<input type="number">
1
2
3
4
5
6
7
8
9
10
11
12
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none; 
    margin: 0; 
}
/* 火狐 */
input{
    -moz-appearance:textfield;
}

input的valid伪类

设置在输入框在正确的条件下的样式

例：

1
2
3
4
input:valid {
  border-color: #3498db;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

CSS中bottom和margin-bottom的区别

1.bottom是指元素与定位元素的距离，而margin-bottom是指同级元素之间的距离。
2.增加margin-bottom的长度，元素整体的高度也会相应增加，在border-box模式中会减少。

input中type属性range

1
<input type="range" id="range" min="0" max="100">

1628088129883

::-webkit-slider-thumb

这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效

使用方式

该伪类需要配和**::-webkit-slider-runnable-track**使用,否则会没有效果…….

1
2
3
4
5
6
7
8
9
10
11
12
13
input[type=range]::-webkit-slider-thumb{
   -webkit-appearance: none;/*清除默认样式*/
   height:7vw;/*设置滑块高度*/
   width:5vw;/*设置滑块宽度*/
   background:#000;/*设置背景色*/
   border-radius:10vw 10vw;/*加个圆角边*/
   margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
}
input[type=range]::-webkit-slider-runnable-track{
   border-radius: 30px; 
   background:#128;
   height:15px;
}

实现单行/多行文本溢出

单行文本溢出

可使用text-overflow实现，但是该属性有效的前提是设置了overflow: hidden和white-space:nowrap才能生效

1
2
3
4
text-overflow: ellipsis;
 white-space:nowrap;
 overflow:hidden;

多行文本溢出省略

1
2
3
4
5
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; //是用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式；

单词拆分

word-break: keep-all //当单词数量超过行宽时，会按照整个单词自动换行

而word-break: break-all //不按单词换行，而是按照字母拆分

字体引入

1
2
3
4
@font-face{
font-family:''
src:url('文件存放的位置') format('opentype')
}

设定format(‘opentype’)可以让浏览器在有该字体的时候就加载，没有的时候就不加载了，可以减少网络带宽

行高

行高单位不要用px,建议用响应式的如百分比、em 、rem，因为当字体大小发生变化的时候用px单位文本显示会错乱。

字母大小写

控制字母的大小写可以根据js来进行控制

1
2
3
4
const message = 'hello world'
console.log(message.toUpperCase()) //大写
console.log(message.toLowerCase()) //小写
console.log(message.slice(0,1).toUpperCase().concat(message.slice(1,))) //首字母大写

其实通过css来控制更为简单

1
2
text-transform: uppercase;
text-transform: capitalize;//首字母大写

表格间距

去掉表格单元格之间的间距

1
2
3
 td {
border-collapse:collapse;
}

列表前缀

ul > li 布局 

1
2
3
ul{
list-style-image:url('照片路径')这个可以用在网页布局中，那么居中就没这么困难了
}

或者可以使用背景图片

1
2
3
4
5
6
7
8
9
10
ul li{
background-image:url('');
background-repaet:no-repeat;
background-size: 10px 10px;
background-position: 0px 5px;
textp-indent:20px;
border-bottom:solid 1px #ddd;
margin-bottom:10px;
padding-bottom:5px;
}

透视

保持容器比例

1
aspect-radio:1/1

容器内容可编辑

1
contentditable=true

发表于 更新于

m多行匹配修正符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let hd= `
#1 js, 200元 #
#2 php,300元 #
#9 houdunfren.com # 后盾人
#3 node.js, 180元 #
`;

let reg = hd.match(/^\s*#\d+\s+.+\s+#$/gm)
let result = reg.map(v=>{
  v=v.replace(/^\s*#\d+\s*/,'').replace(/#/,'');
  // console.log(v);
 [name,price] =v.split(',');
 return {name,price};
})
console.dir(result);

汉字和字符属性

exec具有lastIndex属性，每次执行只会匹配一次，于此同时回更新index的值，并包含属性，而使用match函数的话在全局匹配下时没有显示属性的

1
2
3
4
let hd= "houdunren";
let reg = /\w/g;
console.log(reg.exec(hd));
console.log(reg.exec(hd));

执行结果

1
2
["h", index: 0, input: "houdunren", groups: undefined]
["o", index: 1, input: "houdunren", groups: undefined]

如果一个正则对象不是全局(global)的,则其lastIndex属性会被完全忽略(不会读取,也不会赋值).

区别一：全局匹配(/g)操作会读取还会更新lastIndex属性的值.类似于全局匹配,粘滞匹配(/y)也会让这样做.不过会有点区别,就是如果是全局匹配,在匹配失败后,lastIndex属性的值会被重置为0,但粘滞匹配不会.

区别二： 粘滞匹配不能像普通正则那样,跳过那些匹配失败的字符后接着执行后面字符的匹配操作.在本例中就是,/o/在匹配字符f失败之后,就完全失败了,不会接着匹配f后面的o 

1
2
/o/.test("foo")     //true
/o/y.test("foo")    //false

粘滞的意思就是”使用隐式的^锚点把正则锚定在了lastIndex所指定的偏移位置处。

y模式（粘滞匹配）

1
2
3
4
5
6
7
8
9
let hd = `后盾人QQ群:11111111,99999999,88888888
 后盾人不断分享视频教程，后盾人网址是houdunren.com`;
 let reg = /(\d+),?/y;
 reg.lastIndex=7;
//  console.log(reg.exec(hd));
let qq= [];
while((res = reg.exec(hd))){
  qq.push(res[1])}//res返回一个数组，res[1]数组的第二个属性为匹配到的值
  console.log(qq);

原子表，按单一字符匹配

1
2
3
let tel = '2022/02/23'
let reg= /^\d{4}([-\/])\d{2}\1\d{2}$/g;  //   \1表示要和前面的原子组(([-\/])保持一致
console.log(tel.match(reg));

!!!!!注意原子表中的字符不解析。例如（）表示原子组，但是在原子表里面它就是普通括号

1
2
3
4
let hd = "(houdnren.com).+";
console.log(hd.match(/[()]/gi));
输出结果：
["(", ")"]

区间匹配

1
2
3
4
5
6
7
8
9
<body>
  <input type="text" name='username'>
<script >
let input = document.querySelector('input');
input.addEventListener('keyup',function(){
  this.value.match(/^[a-z]\w{3,6}$/i)//这里其实是4-7位,[a-z]算一位
})
</script>
</body>

排除匹配

1
2
let hd = `张三：010-99999999,李四：020-8888888`;//注意这里的冒号是的中英文格式要一致
  console.log(hd.match(/[^\d：\-,\s]+/g));   //[^\d：\-,\s]匹配排除

！！！！匹配排除的和区间匹配的重要区别是^是一个在方括号的里面，一个在方括号的外面

匹配中文的方式

1
hd.match(/\p{sc=Han}+/gu)

嵌套分组与不记录组

1
2
3
4
5
6
7
8
9
10
let hd=`
https://www.houdunren.com
http://houdunwang.com`;

let result=[];
let  reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|org|cn))/ig;
while(res=reg.exec(hd)){
  result.push(res[1])      
}
console.log(result);

在原子组（）的前面加？:表示这个组不会被记录下来（1：第一个组；2：第二个组）

输出结果

1
2
3
4
5
["www.houdunren.com", "houdunwang.com"]
0: "www.houdunren.com"
1: "houdunwang.com"
length: 2
__proto__: Array(0)

批量使用正则完成密码匹配

将密码用数组包起来，然后用数组的every方法遍历全部满足的请款

1
2
3
4
5
6
7
8
9
10
11
12
let input=document.querySelector('input');
input.addEventListener('keyup',()=>{
let value = event.target.value;

const regs =[
  /^[a-z0-9]{5,10}$/i,
  /[A-Z]/,
]

let status=regs.every(e=>e.test(value));
console.log(status?'正确':'错误');
})

禁止贪婪？

1
2
3
4
let hd ="hdddd";
console.log(hd.match(/hd{2,3}?/));//此时只能匹配到hdd(2个d)
console.log(hd.match(/hd*?/));//此时只能匹配到h(*表示0个或者多个)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
HTML部分

 <main>
  <span>houdunrenwang</span>
  <span>hdcms</span>
  <span>houdunren.com</span>
  </main>

JS部分
const main=document.querySelector('main')

let reg= /<span>([\s\S]+?)<\/span>/gi;
  // console.log(main.match(reg));
  main.innerHTML = main.innerHTML.replace(reg,(v,p1)=>{
    console.log(p1);               //v是匹配到的字符串，p1是原子组的内容。
  return `<h4  style="color: red">后盾人-${p1}</h4>`

})

使用matchAll完成全局匹配

1
2
3
4
5
6
7
8
9
10
11
let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/ig;
const body = document.querySelector('main');
let contents=[];
let hd= document.body.innerHTML.matchAll(reg);
for (const iterator of hd) {
  console.dir(iterator);
  contents.push(iterator[2])
}
console.table(contents);


为低端浏览器定义原型方法matchAll

1
2
3
4
5
6
7
8
9
10
String.prototype.matchAll=function(reg){
  let res = this.match(reg);
  if(res){
    let str = this.replace(res[0],"^".repeat(res[0].length));
    let match = str.matchAll(reg) || [ ];
    return [res, ...match];
  }
}
let hd = 'houdunren.com';
console.log(hd.matchAll(/(u)/

使用exec完成全局匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html部分
<h1>houdunren.com</h1>
<h2>hscms.com</h2>
<h1>后盾人</h1>

JS 部分
<script >
function searchs( string, reg){
  let result=[];
  while(res=reg.exec(string)){
    result.push(res)
  }
return result;
}
let matchs = searchs(document.body.innerHTML, /<(h[1-6])>([\s\S]+?)<\/\1>/ig);
console.log(matchs);
</script>

$&的使用

1
2
3
4
5
6
7
8
9
html部分
<main>
在线教育是一种高效的学习方式，教育是一生的事业
</main>
JS部分
let main = document.querySelector('body main');
main.innerHTML=main.innerHTML.replace(/教育/g,"<a href=https://www.hdcms.com>$&</a>")
//$&可以取到匹配到的值

原子组别名

1
2
3
4
5
6
7
let hd= `
<h1>houdunren</h1>
<span>后盾人</span>
<h2>hdcms</h2>
`
let  reg = /<(h[1-6])>(?<con>.*?)<\/\1>/ig;  //?<con>取别名的地方
console.log(hd.replace(reg,"<h4>$<con></h4>")); //$<con>使用别名

零宽先行断言

1
2
3
4
5
6
7
8
9
10
11
12
13
html部分

<main>
后盾人不断分享视频教程,学习后盾人教程提升编程能力。
</main>

JS部分

let main = document.querySelector('main');
let reg = /后盾人(?=教程)/g;  //表示后盾人后面是教程的
main.innerHTML= main.innerHTML.replace(reg,`
<a href="https://houdunren.com">$&</a>`)

零宽后行断言

1
2
3
4
5
6
7
8
9
10
11
12
html代码
<mian>
  <a href ="https://baidu.com">百度</a>
  <a href="https://yahu.com">雅虎</a>
</mian>

JS
const mian= document.querySelector('mian');
let reg = /(?<=href=(['"])).+(?=\1)/ig;  //断言不是组
console.log(mian.innerHTML.match(reg));
mian.innerHTML=mian.innerHTML.replace
(reg,"https://houdunren.com")

电话号码后四位模糊处理

1
2
3
4
5
6
7
8
9
10
let users=`
向军电话：12345678999
后盾人电话：89893893893
`;
let reg =/(?<=\d{7})\d{4}/gi;
// console.log(users.match(reg));
users = users.replace(reg,v=>{    //v是匹配到的内容8999，3893
  return '*'.repeat(4)   
})
console.log(users);

零宽负向先行断言

1
2
3
let hd = "houdunren2010hdcms";
let reg = /[a-z]+(?!\d+)$/ig;  不加$的话，houdunre也会匹配到
console.log(hd.match(reg));

断言限制用户名关键词

1
2
3
4
5
6
let input = document.querySelector(`input`);
input.addEventListener('keyup',function(){
  const reg = /^(?!.*向军.*).*/i;        //用户名不能存在向军开头，注意如果在向军的前后不加.*的话匹配会存在问题向军在别的字符后面的情况会被匹配到。
  console.log(this.value.match(reg));
});

零宽负向后行断言（前面不能是……）

1
2
3
4
let hd = "hdcms99houdunren";
let reg = /^(?<!\d+)[a-z]+/ig;  
console.log(hd.match(reg));

使用断言排除法同一数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html部分
  <main>
      <a href="https://www.houdunren.com/1.jpg">1.jpg</a>
      <a href="https://oss.houdunren.com/2.jpg">2.jpg</a>
      <a href="https://cdn.houdunren.com/2.jpg">3.jpg</a>
      <a href="https://houdunren.com/2.jpg">后盾人</a>
    </main>
    
 js部分
 let main =document.querySelector('main');
const reg = /https:\/\/([a-z]+)?(?<!oss)\..+?(?=\/)/ig;
console.log(main.innerHTML.match(reg));
main.innerHTML=main.innerHTML.replace(reg, v=>{
  return "https://oss.houdunren.com"
});

发表于

proxy

一个Proxy对象包装另一个对象并拦截诸如读取、写入属性和其他操作，可以选择自行操作它们，或这允许proxy对象透明地处理它们

带有”get“捕捉器的默认值

get(target, property, receiver)

target：目标对象；

property: 目标属性名

receiver: 如果目标属性是一个 getter 访问器属性，则 receiver 就是本次读取属性所在的 this 对象。通常，这就是 proxy 对象本身（或者，如果我们从 proxy 继承，则是从该 proxy 继承的对象）。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let numbers = [0, 1, 2];

numbers = new Proxy(numbers, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return 0; // 默认值
    }
  }
});

alert( numbers[1] ); // 1
alert( numbers[123] ); // 0（没有这个数组项）

使用”set”捕捉器进行验证

1
2
3
4
5
6
set(target, property, value, receiver)：

target —— 是目标对象，该对象被作为第一个参数传递给 new Proxy，
property —— 目标属性名称，
value —— 目标属性的值，
receiver —— 与 get 捕捉器类似，仅与 setter 访问器属性相关。
1
2
3
4
5
6
7
8
9
10
11
12
13
let numbers=[];
numbers= new Proxy(numbers,{
  set(target, prop, val){
    if(typeof val=='number'){
      target[prop]=val;
      return true;//这里要返回true
    }else{
      return false;
    }
  }
});
numbers.push(1);
console.log(numbers);//[1],添加其他的会报错

发表于

先上链接：https://github.com/h5bp/html5-boilerplate

HTML5 Boilerplate

HTML5 Boilerplate是一个标准的HTML模板，直接用它来开发新页面可以省掉很多麻烦。

npm和npx

npm是Node.js的软件包管理器 ，相当于软件安装管家，可 在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。

npx是执行Node软件包的工具 

1
2
3
4
5
npx create-html5-boilerplate new-site
//将create-html5-boilerplate项目安装到new-site 文件夹下
cd new-site
npm install
npm star

如上图npm install 安装失败，报错404，一般是网络问题，可以通过切换镜像解决。下载包的速度很忙有的还会卡住几十分钟，所以我们需要切换镜像，这样下载的速度会快很多。

yrm 是一个 yarn源管理器，可以快速地在源间切换（如npm,cnpm,taobao,yarn），yarn是npm的升级版

可使用以下指令安装yrm

1
npm install -g yrm

安装成功。

发表于 更新于

发表于 更新于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
///模块管理工具的开发

//需要有一个容器来管理模块，定义模块，往容器中添加模块，模块之间存在依赖，可以相互使用

let module =(function (){
  const modulelist = {}  //定义一个容器来存储模块
  function define(name,modules,action) {
    //依赖模块，m是依赖的具体模块，i是模块所在的索引号，
  modules.map((m,i)=>{
  modules[i]=modulelist[m];
  // console.log(modulelist[m]);
  // console.log(modules);

  })

   //执行并保存模块，保存的是它的结果
   modulelist[name]=action.apply(null,modules)

}
  return {define}
})()


//模块的名字，依赖其他模块,模块的功能
module.define('hd', [ ], function(){
  return {
    first(arr){
      return arr[0];
    },
    max(arr,key ){
      return arr.sort((a,b)=>{return b[key]-a[key]})[0];
    }
  };
})

module.define('lesson', ['hd'], function(hd){
  console.log(hd);
  let data = [
    {name:'js', price: 199}, {name: 'mysql' ,price: 78}
  ]
console.log(hd.max(data,'price'));
});

</script>

模块的基本使用

导入模块时要把导入和导出的模块放在同一文件夹下，否则无法导出

模块具有独立的作用域

模块处于严格模式下

模块的预解析，只解析一次

模块的具名导入导出

模块的批量导出 

1
import *as api from "./xxx.js"

导入导出的别名使用

模块的默认导出 

1
2
3
export default class User{}
或者
export {User as default}

具名和默认导入导出的混合使用

1
import hd,{User} from "./xxx.js"
1
export {hd as default, User};

使用import函数按需动态加载模块

1
2
3
4
5
6
7
8
<script  type="module">
document.querySelector('button').addEventListener('click',()=>{
  import("./test.js").then (({site,url})=>{
    console.log(site, url);
  })
})

</script>

发表于

第一篇博文新鲜出炉，记录下遇到的问题，Hexo搭建的博客页面在浏览器中无法加载出来，我看了网上很多解决办法，都是安装各种插件，但是这个办法貌似对我来说没用，此刻只想说一句能不能靠谱点，可能也是我自己太菜了，没参透其中的精髓哈哈。

其实在使用Typora的教程中，插入图片有两种方式，第一种是上传网页上的图片，把它的地址直接粘过来，这种方法不太安全，如果图片被删了，你这图片地址也没用了。第二种是上传本地图片，不过本地图片上传，GitHub上是没有图片的，把图片上传到github我不知道可不可以，现在暂时不想研究。

最最最最简单又有点傻的方法，把图片上传道QQ空间，然后复制在QQ空间打开原图，复制地址粘贴过来就OK了。

就目前的使用Hexo布局网页的体验感来看，hexo搭建的博客文章修改过后重新发布有点慢，有时候会怀疑你的更改没有成功，其实是页面响应过慢了。还有虽然上面的方法解决了图片无法显示的问题，但总感觉很麻烦，不过功能已经满足我的需求了，我只想安安静静地记个笔记。

等我哪天无聊了再来研究，完结撒花！

发表于 更新于

在搭建Hexo的过程中，我自己也遇到很多坑，看着别人写的文章做下来，其实也是会发现很多问题的。作为一名菜鸟，我花两个晚上才把它给搭，当然就是你现在看到的页面，虽然看起来有点low，但是这个过程我觉得很享受。以下内容只是我自己搭建时的过程，可能在你自己搭的时候情况会不太一样，所以此文只供参考，要相信你自己在遇到问题的时候也会完美解决的！！！

一、安装Git和Node.js

Git和Node.js的安装网上有很多教程，按照教程安装就可以了，但是在安装Node.js的时候需要配置环境，如果不配置好,后面的操作就无法成功，以下是配置环境的参考链接，按照这个配就OK了

[https://www.cnblogs.com/liuqiyun/p/8133904.htm]:

二、开始安装Hexo

在任意一个磁盘下面新建一个Hexo文件夹

鼠标放在文件夹上方右键使用Get Bash Here方式打开，输入命令

1
npm install -g hexo-cli

安装完成后可以用hexo -v 查看下版本，接着初始化hexo

1
hexo init myblog #myblog可以随便你取，这个命令相当于新建了一个文件夹，这就是你的博客站点文件夹。

进入myblog文件夹

1
2
cd myblog #进入文件夹
npm install

安装完成后，会有这些文件夹，当然可能你的会和我的不太一样，我的已经被修改过了。

用以下命令启用服务器

1
hexo server

注意上面的步骤要确保 npm install 这里是要保证成功执行的，不然后面会有问题，如果不成功，可能是你的环境配置有问题需要把bin文件的路径D:\Hexo\blog\node_modules.bin添加到电脑的系统环境变量中。

如果还是不成功，建议使用以下指令

1
2
3
4
npx hexo init blog
cd blog
npm install
npx hexo server

hexo server运行完之后，会提示你可以使用localhoat:4000访问到你的博客页面，4000是默认的访问端口，如果出现你的4000端口无法访问，可以在myblog站点文件的_config.yml（这个文件需要用编辑器打开，我用的VSCode）内加上如下代码更改端口号 

1
2
3
4
server:
  port: 5000 #端口号可以随你改
  compress: true
  header: true

再启动一遍服务器，用提示的链接打开，本地页面就搭建好了。

页面长这个样子的

三、将本地页面同步到gitHub上

刚才再本地布好的页面只能再本地看到，你在GIt Bash上按Ctr C 停止你的页面就访问不到了，所以将博客同步到gitHub上很方便访问。

首先，你得注册一个gitHub账号，登录后新建一个 repository

新建以后这个地址链接就是你博客的访问链接了。

接下来，我们需要新建SSH密钥将本地服务器和GitHub连接起来。

在git bash中，输入以下指令

1
2
3
4
5
git config --global user.name "yourname"  
#yourname要是你要对应上gitHUb的用户名

git config --global user.email "youremail"   
#同样email也要和和你gitHub上的邮箱相同

然后回车，输入指令

1
ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。并告诉你在你的电脑中路径，找到这个文件夹打开

将里面的内容复制粘贴到key中，title随便取都行的。

添加之后，回到git bash 使用以下命令验证是否添加密钥成功

1
ssh -T git@github.com

这里还有有个步骤需要做，差点忘了，要在你的站点文件夹deploy位置修改下代码

repo的值在这里。。。。。。github上不去截不了图，难受，查看其他教程吧，不好意思我累了。。。

密钥建立成功之后，使用下面的指令

1
2
3
hexo clean
hexo generate
hexo deploy

用你对应的地址就可以访问到了，比如我的就是

[https://long-ying.github.io/]:

要保持你本地和gitHub上的内容跟新同步，还需要设置一个地方，同样也是在站点文件夹的_config.yml里面修改一下配置

好了，完结撒花，到这个站点就布好了，页面肯定是有点丑的，后续还有一些主题修改，文章发布什么的，你把这个站点布好去看那些就不怕了，重要的是这个过程，作为一只菜鸟我也在修饰我的博客嘿嘿，慢慢研究吧。