2018-09-13

weex的坑，以后也记录在这里了

weex很久之前写的，放下上来

more >>

2018-09-09

vue-cli 3.0 学习

vue-cli 3.0 vue.config.js自行在根目录配置

more >>

2018-09-08

每周记录---第一期

这里记录下我所学了的东西，还有有趣的事情。

这周星期五去面试红尾猫，待遇是微信虎牙4399的两倍实习工资。可惜的是我自身能力不够，面试的过程也很开心，技术经理觉得我不合适
，也给了我路费。(技术经理委婉的说法：有候选人面试比你早点。或许是真的这样才不用我，那我下次收到电话就早点来吧，毕竟这个拖了5天，也感觉我去面试的时候，他们已经有人了，不好意思直接拒绝我。)

我所要去补的： vue源码全套 vue-cli 2.0 3.0 (我记错了没有4.0 是webpack4.0 vue-cli 3.0兼容 4.0 webpack) 的区别跨域（面试的时候我答不上… 因为两个月前学的跨域ruanf的文章） XSS CSRF 复习下

我感觉自己要去学习的： e2e单元测试熟悉webstorm 熟悉习惯使用ESlint 学习jest

这半年我都过得很不开心，很多挫折。
可是这些我都没有想过放弃(嘛… 也被人劝退过)
为嘛我不放弃？抱歉，我是抖M，这些事经历得越多，我心理就越爽。

一。有趣的事情

长时间坚持做一件事是怎么样的体验？

我想说的是… 我之前玩的一个叫零用钱大作战，我玩不过我表弟是什么回事？他6k分，我40k分。
某一次我和他玩的时候，我放狠话说你不可能打得过我的，如果你打得过我就… 然后各种嘲讽。
最后我竟然玩不过他…
然后后面几天又继续玩这个游戏，玩不过他是因为手感问题吗？
输给他后，我也反思过，不是手速问题，手感虽然也有一定影响，这个游戏其实更加讲究的是方法。
分析得出方法后，我尝试去打败那些国家分段的人，甚至也没有怎么输过。
给我感受的是，学习过程中，总结也是很重要的，这就是为什么有些人成长快，有些人成长慢，
我们也要放得下自己，输了，该总结下了。

2012刚开始画画

2016上海市动漫大赛一等奖

二。新闻

firefox 更新了几个开发者使用的工具(62)

Firefox 62 – Tools Cool for School!

css-shape 控制文档流工具、可视化设置font-szie、:screenshot –dpr 0.5 对网页进行截图(输入控制台)、
3-column mode。

firefox 媒体播放

  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
  if ("srcObject" in video) {
    videoEl.srcObject = stream;
  } else {
    videoEl.src = URL.createObjectURL(stream);
  }
});

三。技术教程

js内存管理

本文介绍了Arraybuffer，ShareArrayBuffers，直接操作内存的问题(webworker)。三篇文章 ES8--ShareArrayBuffers

带你彻底弄懂Event Loop

mecrotask,microtask。UI render。NodeJS中的Event Loop。

axios设计一个简单的Loading logo过度

题主并没有解决多个请求，会使Loading提前消失的问题。
如果多个请求的情况下，如果是async的，那么直接final()设置成true就可以了。
如果不是，那么使用Promise.race([])。
题主的方法，只适合单个请求。不是单个请求的情况下请使用Promise。
顺便说一下axios没有this。所以在拦截器使用Promise就不行了。你使用箭头函数来传入this，倒不如直接来。

前端每日实战：107# 视频演示如何用纯 CSS 创作一只单眼怪兽

对于不太熟悉动画的，这个很好理解。
transform: rotate(calc(10deg * var(--direction)));
这里可以了解下css自定义变量
github

有了这 4 大特性，CDN 好用到飞起(又拍云 CDN)

没有了CommonsChunkPlugin，咱拿什么来分包

五。小知识

object.observe被废弃了怎么办?
使用proxy.set(target, propKey, reeiver)。
异步修改使用Promise.resolve()。

ECMAScript modules in browsers --- always-cors

1
2
3

   script type="module"
import 'https://….now.sh/no-cors';

这不是普通的script 里面的import也是，他们需要Access-Control-Allow-Origin:* || your site
CORS 使用vue-cli的时候记住去配置 crossorigin :use-credentials
可是奇怪了... --modern 是build的时候的我们为嘛需要development的东西？这里留坑。除非是babel poloyfill useBuiltIns: 'usage'

六。我所理解错的，或者是忘记的

1.我以为Promise( () =>{ 这里也是mecrotesk } )。这就是为嘛需要Promise.resolve().then()的原因

2.style lang="scss"

2018-09-04

Common webpage design mistakes(翻译：网页设计的常见错误)

看见一篇很好网站设计文章，这里翻译下内容。

more >>

2018-09-01

sass用法总结和思考

media pc mobile ipad

mobile pc ipad

mobile: @media screen and(max-width:700px) and(max-aspect-ratio:1/1.6)

pc: @media screen and(max-width:700px) and(min-aspect-ratio:16/9)

ipad: @media only screen and(max-width:1000px) and(min-aspect-ratio:1/1.3) and (max-aspect-ratio:17/9)

#container {
p , a {
编译: container p 。 container a
}

& : hover { //&是根那个选择器 #container 实际上就是根选择器的全名称

}

&-asd {
  编译: #container-asd
  用途: 组件名称-具体工具名称
}

<h3 a="asda">style简写</h3>
margin {
  top:
  right:
  bottom:
  left:
  用途:
  ①margin直接设置的话，是会根据值的个数不同而不同的，3值2会作为left right ，2值1 top bottom 2 left right
  ②其他各种font-family font-size 
}


/*这
 *注释
 *不会
  被放进编译好的css中*/
//但是这个会
$version: "1.2.3";
/* 版本 #{$version}插值语句同样适用*/

$width: 5em;  //块级变量
<h3 a='mpimbg'>golbal</h3>
.inner {
  $height: 4em !global;
  //任何地方都能使用了
  width: $width;

}

.another {
  height: $height;
  用途: 我能想到的就是覆盖了
}



//#{} 引号字符串将被弄成无引号字符串 方便mixin中引用选择器名

p {
  font: 10px/8px
  编译: font: 10px/8px
  用途: 这部分感觉有点乱 到底是除法还是css分隔数字？1.如果值或值的一部分是变量或者函数的返回值
  2.如果值被圆括号包裹
  3.如果值是算术表达式的一部分 1px + 2px /2px   或者 8px / 2 
  当你的值是变量，但是又不想被当作除法处理的时候 #{$value} / #{$another}
  color: #050709 * 2 ;
  编译: 05 *2 + 07 *2 + 09 *2;
  color: rgba(1,2,3,0.5) +rgba(3,5,9,0.1)
  编译: 1+3,2+5,3+9,0.5+0.1
  $color-red: rgba(255, 0, 0, 0.3)
  color:opacify(  $color-red, 0.1  ) 
  编译: color: rgba(255, 0, 0, 0.4)
  color: transparentize (   $color-red, 0.1  )
  编译: color: rgba(255, 0, 0, 0.1)
}

<h3 a='mpimbgzz'>字符串算法</h3>
.my-div {
  display: g + rid;
  编译display: grid;
  //注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
  //总的来说是 谁在最左边谁用自身来决定返回的是有引号还是无引号
  //什么时候需要有引号？  content: '这样就需要引号了' 
}

$name_z: class-name
.#{$name_z}{
  编译: .class-name{}
}

$content: null;
$content: "Non-null content" !default;

.z {
  content: $content ;
  编译： Non-null content
}

<h3 a='mpimbgzzaa'>默认import</h3>
//Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import 'zz.css' //导入zz.css
@import 'zz'  //尝试寻找sass 或者 scss 但是不会是css
@import 'a' , 'b'  //允许导入多个文件 这是css不支持的
$family: unquote('zz')
@import url('http://fonts.googleapis.com/css?family=\#{$family}')
//这里说一下unquote，是用来把引号变成无引号的 所以会编译成\#zz 
//@import 可以用于很多位置 但是会为其嵌套
//不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

.example {
  color: red;
}

#main {
  @import 'example'
}
对应的scss为：
 #main {
   .example {
     color: red;
   }
 }

}

extend 占位符

现在假设组件A 和组件B 部分样式不一样

#main %exterme {

}

#A {
@extend %exterme; //#main #A //#A取代%exterme
selfcss ;
}

#B {
@extend %exterme;
selfcss ;
}

可为什么用@extend而不是直接在外层套进去呢？因为这样拓展性更高，假设你专门弄一套scss是%extend的，那么其他不在同一套体系的，可以直接extend来拓展。
你是在外层套进去的话，就不能组织管理%extend起来了，其不在同一套scss的，也难以拓展。

extend .类

.a {
width:10px;
}

.a.ccc {
color: red;
}

这里叫多类选择器，不懂请百度下

.b {
@extend .a; //这里继承.a的东西就是直接把 .b 添加进.a
height:6px;
}

//编译后 .a , .b{ } .a.ccc{} .b.ccc{}

注意不是直接把.a里面的内容填进去而是.a , .b。
任何其他使用到.a的样式也会同样继承给.b ，这里请好好理解下extend的作用，这意味着拓展一切相关的东西(你也
可以理解为编译出一套新的把.a的名称改成.b 的css样式)

当合并选择器时，@extend 会很聪明地避免无谓的重复，.seriousError.seriousError 将编译为 .seriousError，不能匹配任何元素的选择器（比如 #main#footer ）也会删除。

sass 可以extend任何单个元素的选择器 :hover伪类 ::after伪元素 .a.ccc 多类选择器 a[a ^=”https://“]
来复习一波熟悉选择器
还可以多重延伸，就是可以@extend .a , .b 等于 @extend .a ; @extend .b;

.foo .bar {

}
.a {
@extend .foo .bar
}

这是不允许的，因为不是单个元素的选择器！这是基于单个元素的选择器！看上面的举例。
1
2
3
4
5
6
7
8
9
<h3 a=‘mol’>!optional</h3>
h1.c{
  color: red;
}
a.text {
  @extend .c;
  background-color: pink;
}
现在修改为
a.text {
@extend .c !optional;
}
编译：
h1.c{
color: red;
}
a.text {
background-color: pink;
}
造成这样的一个原因是 h1与a是有冲突的添加!optional 是为了解决冲突如果遇到这种情况那么不生成，等同于@extend c; 在这个样式中失败。
@media screen and() {
.a {}
}
.c {
@extend .a;
}
这样子是不允许的，在@media中使用@extend 你只能在@media里面选取
原文：

在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

分音_

当你想混合scss的时候你使用@import ‘a.scss’
假如你不想sass去编译你的a为a.css
那么你可以修改文件名为 _a.scss
注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

@media嵌套

@media 和css用法一样，但是sass允许被嵌套
允许使用插值#{} 变量函数 @media #{$media} and ($feature: $value)
.main {
width: 100px;
@media screen and (max-width:300px) {
width: 600px;
color: red;
}
}

编译：//把@media被嵌套的父选择器来嵌套@media所写的规则
.main {
width: 100px;
}
@media screen and (max-width: 300px) {
.main {
width: 600px;
color: red;
}
}

这样的做法更方便于选取父选择器，这里要注意的是父选择器是css编译完成后的父选择器

@at-root

.parent {
color: red;
@at-root .child{
font-size:1em;
}
}
编译：
.parent {
color: red; }
.child {
font-size: 1em; }

.parent {
color: red;
@at-root {
.child { font-size:1em; }
.sec { background-color: red; }
}
}
编译：
.parent {
color: red; }
.child {
font-size: 1em; }
.sec {
background-color: red; }

@at-root 指令，编译到根，摆脱父选择器的影响

@media print{
.parent {
color: red;
@at-root .child{
background-color: red;
}
}
}
编译：
@media print {
.parent {
color: red; }
.child {
background-color: red; } }

@at-root是用来摆脱选择器的，但并摆脱不了@media 假如你想摆脱@media 那么@at-root (without:media)

出一道关于@media的题给你吧
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
<h3 a=‘zltynyin’>@at-root (without: media support 指令)</h3>
@media screen and(max-width:100px) {
  @support (display:grid){
  
    .GG{
    
      font-szie: 50px;
      @media (min-width:50px){
      
        .parent {
          color: red;
          @at-root (without: media support) .child{
            background-color: red;
          }
        }
      }
    }
  } 
}

答案：
@media screen and (max-width: 100px) {
  @support (display:grid) {
    .GG {
      font-szie: 50px; }
      @media (min-width: 50px) {
        .GG .parent {
          color: red; } } } }

.child {
  background-color: red; }
你还可以去去除其他指令例如@support ，你还可以without: all 摆脱一切指令。

@debug 指令用于输出表达式的值
such as: @debug 1px + 2px
@warn 用于输出警告

@if

p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
@if 后面可以跟@else if

for

语法格式： @for $var from through
@for $i from 1 through 3 {
.item-#{$i} { } //包含start 和 end
}

语法格式： @for $var from to
@for $i from 1 through 3 {
.item-#{$i} { } //包含start 但是不包含end
}
语法格式： @each $var in
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
}
}
编译：
.puma-icon {
background-image: url(‘/images/puma.png’); }
.sea-slug-icon {
background-image: url(‘/images/sea-slug.png’); }
.egret-icon {
background-image: url(‘/images/egret.png’); }
.salamander-icon {
background-image: url(‘/images/salamander.png’); }

用途：类似于 for let {null,value}in 循环输出value

数组

puma, sea-slug, egret, salamander 这是数组
还有一种数组是 ( A B C D E F G)

高级用法 @each $A $B $C in (xzx,zxz,xzxz),(zx,zxz,xza),(zxzxm,xzxz,zxzxz)
例子：
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
border: 2px solid $color;
cursor: $cursor;
}
}
js里面的剧名匹配法:
@each $A $B in(1:10px,2:20px,3:30px ){
h#{$A} {
font-size: $B;
}
}

while
$i: 6;
@while $i > 0{ //6次

$i: $i +1;
}

Mixin 与include

用来定于可重复使用的样式
@mixin 名称{
cssstyle: 1;
//可以引用父选择器
&:hover{

}
}
.style {
@include: 名称;
}

当然你在最外层使用@include 名称也可以。就当全局了。
疑问：名称支持 #{$var}吗？
1
2
3
4
5
6
7
8
9
$var: haha;

@mixin #{$var}{
  a{
    color: red;
  }
}

@include haha ;
报错，我也不知道为嘛不允许。

参数模式mixin

@mixin asd($a, $b: 5) { //有默认值功能
font-#{$a}: $b + px;
}
p{
@include asd($a:’size’, 10); //你传size也行，我里面已经帮你转换了#{$a} 。
//$a是关键词参数方便看也方便默认值的空缺
}

默认值空缺：
@mixin asd($a: 10, $b: 10){
font-size: #{$b};

}

p{
@include asd($b: 20px);
}
这预示着可以打乱顺序了

哇，这厉害了，这也有。
就是不确认参数有多少个的时候
@mixin name ($arguments…){
margin: $arguments ;//这是第一个
padding: $arguments ;//这是第二个
}
p{
@include name ( $width: 1px,2px,3px,4px ,5px, 6px, 7px, 8px ) //你可以传入关键词！！！这里警告下把$width删除吧。
}

不要传入关键词，我现在还不理解传关键词的目的和作用，传进去了直接报错Error: ordinal arguments must precede named arguments
，而且按照语义解释 name怎么才利用到$width? 也没有相关语法。

反转过来也OK
$arguments: 1, 2, 3;

@mixin name ($a,$b,$c){
font-size: $a+ px;
padding-right: $b+ px;
padding-left: $c+ px;
}

p{
@include name ($arguments…)
}

翻译结果：
p {
font-size: 1px;
padding-right: 2px;
padding-left: 3px; }

向混合样式中导入内容 @content

这个我感觉是mixin的相反了。include插进mixin。
@mixin name {
html {
@content
}
}

@include name { //这里的用法很奇特不熟悉就对比下上面的
p {
color: red;
}
}

转换成sass理解就是
html {
p {
color: red;
}
}

这里还需要注意下如果没有html{} 包裹会怎么样？
对的你的name 会被这样翻译：
.name p {
color: red;
}

方便表示法

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

来看看作用域

$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}

编译：
.colors{
background-color: blue;
color: white;
border-color: blue;
}

这个太简单了吧.. 自己看代码理解？就是一开始没有传值，所以在块里面是默认值嘛，然后content的
是引用外部的。嘛，很好理解。

注意这里就是没有被包裹，看上面我说的html{}去除，重点！name变成一个类 .name

真正的函数指令来了！

和mixin的区别在于有return

@function caculation ($a,$b){
@return ($a + $b) + px;
}
p {
font-size: caculation(1,2);
}

这里说下，一个我多次犯错的点就是我写函数的时候，使用的时候也喜欢加一个空格
，这个习惯要改，因为加了空格进去 caculation (1,2) 就被当成css的两部分了

输出格式

设置方式 :style option

:nested 这是默认输出的
这样让你看起来，知道他是嵌套的。
例如这样：

#main {
color: #fff;
background-color: #000; }

#main p {
width: 10em; }

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

:expanded
就平时手写那样
例如：
a {
…
}
a.b {
…
}
a.b .c{
…
}

:compact 每条样式只占据一行，嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
a{}
a.b{}
a.b c{}

.nothing{}
.nothing.op{}

.nothing2{}

:compress 力求样式体积压缩到最小

2018-08-25

vue源码分析(1)

vue源码分析，过程可能会有点久。process.env.NODE_ENV devpolement 暂时排除。

more >>

2018-08-19

display:conetnt可以用来干嘛？

css display:content 是用来把ul的子元素li设置成grid-item

more >>

2018-08-13

SSR

2018-08-22更新 (你可以去用koa的好像是叫koa-wepack-dev-middle,那里帮你封装好了)

more >>

2018-08-11

构建一个延迟渲染指令(拆v-if 来渲染)

终结！如需要延迟渲染看这个https://vuefe.cn/v2/guide/components-dynamic-async.html#异步组件

more >>

2018-08-07

vue-cli 构建(期限2天内，因为还不是很熟悉webpack)

构建了dev , 速度很快。 production还没有去构建。

more >>

日，我的纯webpack搭建的VUE SSR怎么就炸了？？？？

weex的坑，以后也记录在这里了

vue-cli 3.0 学习

每周记录---第一期

js内存管理

带你彻底弄懂Event Loop

axios设计一个简单的Loading logo过度

前端每日实战：107# 视频演示如何用纯 CSS 创作一只单眼怪兽

代码视频网站教程，可以复制视频中的代码

TCP UDP网络教程

有了这 4 大特性，CDN 好用到飞起(又拍云 CDN)

Common webpage design mistakes(翻译：网页设计的常见错误)

sass用法总结和思考

media pc mobile ipad

extend 占位符

extend .类

分音_

@media嵌套

@at-root

@if

for

数组

while
$i: 6;
@while $i > 0{ //6次

$i: $i +1;
}

Mixin 与include

参数模式mixin

向混合样式中导入内容 @content

方便表示法

来看看作用域

真正的函数指令来了！

输出格式

vue源码分析(1)

display:conetnt可以用来干嘛？

SSR

构建一个延迟渲染指令(拆v-if 来渲染)

vue-cli 构建(期限2天内，因为还不是很熟悉webpack)

media pc mobile ipad

extend 占位符

extend .类

分音_

@media嵌套

@at-root

@if

for

数组

while$i: 6;@while $i > 0{ //6次 $i: $i +1;}

Mixin 与include

参数模式mixin

向混合样式中导入内容 @content

方便表示法

来看看作用域

真正的函数指令来了！

输出格式

while
$i: 6;
@while $i > 0{ //6次

$i: $i +1;
}