发表于 |

搭建ssr步骤

1.

发表于 |

概念

   在JS语言中，一个基本类型的数据可以隐式地转化为其他的基本类型的数据。什么意思呢？在JS中，主要分为两种数据类型，保存在栈中的数据，被称为原始数据类型或基本类型。保存在堆里的数据，被称为引用数据类型，因为访问这种类型的方式是通过引用进行访问的。而基本类型的值之间可以不同过明显的方式进行转化，显式地转化方式举个例子。

1
2
3
var str = '3';
var num = Number(str); //3
console.log(typeof num); // 'number';

   而隐式转换则为未通过这种明显的方式进行数据类型的转化。

常见场景

  1. 在if语句的判断条件中，string类型的值，空字符串’’会转化为布尔值false，非空字符串则会转化为布尔值true。number基本类型的值，数字0会转化为false, 其他数字会转化为true。undefined和null值都会转化为false。
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
var emptyStr = '',
    someStr = 'hello';
if(emptyStr) {
  console.log('Hello world!');
} else if(someStr) {
  console.log('Bye world!');
} else {
  console.log('Fuck world');
}
// 'Bye world'

var numberZero = 0,
    someNum = 4396;
if(numberZero) {
  console.log('Zero will not transform to fasle.')
} else if(someNum) {
  console.log('Zero will transform to false, and someNum will transform to true');
} else{
  console.log('Haha, number can\'t tranform to Boolean');
}
// 'Zero will transform to false, and someNum will transform to true'

var undefinedValue,
    nullValue = null;
if(!undefinedValue && !nullValue) {
  console.log('undefined and null will transform to fasle');
} else {
  console.log('They won\'t');
}
\\ 'undefined and null will transform to fasle'
  1. 在==判断中，能够转化为相同的布尔值则会返回true
      

发表于 |

css3 border attribute

  1. border-radius
  • WIIF: border-radius特性，可以给元素创建圆角效果。
  • WIII: border-radius,是border-top-left-raius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius的简写。这四个属性分别控制元素的四个边框radius。
  • 特别注意这四个属性接受两个属性值，x axis& y axis上的值，如果只给了一个值，则第二个值等于第一个值。
  • border-radius的值可以是px或百分比，百分比的值是相对元素的border宽度和高度。
  • 若border-radius设置一个值，则代表元素的四个角都为值，若设置两个值，则第一个值为左上角和右下角的值，第二个值为右上角和左下角的值。若设置三个值，则第一个值为左上角，第二个值为右上角和左下角，第三个值为右小角的值。四个值则分别为左上、右上、右下、左下的值。
  • border-radius不适用于table elements，因为border-collapse is collapse。
  1. box-shadow
  • WIIF: box-shadow用来设置元素的阴影效果
  • WIII: box-shadow可以设置多个阴影效果，多个设置之间用逗号连接。
  • box-shadow特性接受6个值。前两个值为X & Y offsets，X 和 Y方向上的偏移量，正数为向下和向右偏移，负数则相反。第三个值为blur length，控制着阴影的模糊程度，第四个值为spread radii，扩散半径，第五个值为背景颜色，可选值inset，设置之后，阴影在元素内部。
  1. border-image
  • WIIF: 以往给定border的样式是通过设置特性border-style实现的，通过border-image你可实现更加花哨的效果;
  • 这个属性是border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat的简写。

发表于 |

面试印象

   面试公司的环境非常好，工作氛围也很不错。当拿到面试题时，我是优点惊讶的，因为面试题是英文的，而且，主要内容时react技术栈的面试，然而在boss直聘看的岗位要求是vue技术栈，所以有点懵逼。然后就问了技术总管一个比较蠢的问题，面试题是不是拿错了，我面试的是前端实习岗位，岗位要求的技术栈是vue，面试题考察的是react。然后就感觉技术总管心情不太好，给我回了一句，没拿错，那react就别答了，空着吧。

笔试题

  1. git修改代码或者是新增feature的work flow。
      本人的git技能只会简简单单地push fetch，当时看到题目都是蒙蔽的，这是什么需求，应该怎么解决。

  2. implement binary search(二分法查找)。
       给定一个有序数组和目标值，返回目标值在数组中存在的位置，如果目标值不存在，返回-1。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function binarySearch(target, arr, start, end) {
        var start = start || 0,
            end = end || arr.length - 1,
            mid = parseInt((start + end) / 2);
        if(target > arr[end] || target < arr[start]){
            return -1;
        }
        else if(arr[mid] === target){
            return mid;
        }
        else if(target < arr[mid]){
            return binarySearch(target,arr,start,mid);
        }
        else if(target > arr[mid]){
            return binarySearch(target,arr,mid + 1,end);
        }
    }

  3. css实现未给定宽度和高度的块级元素居中
       使用css3的transform属性，代码如下:

  • HTML部分

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="container">
        <div class="inner">
            to bear, carry, <br>
            or move from one place, <br>
            position, etc., to another; <br>
            transfer.
        </div>
    </div>
    • CSS部分
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .container{
          height: 500px;
          position: relative;
      }
      .inner{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
      }

  1. short phrase for background property,简写属性background
       直接合起来写就行了，顺序没有要求。

  2. 箭头函数和function的区别
    箭头函数的this指向函数生成时的作用域，而不是调用时的作用域。

发表于 |

ajax是什么？

   ajax，全名asynchronous JavaScript + XML的缩写，这一技术实现了无需卸载页面就能够向服务器请求数据。ajax技术的核心是XMLHttpRequest对象，简称XHR对象，XHR为向服务器获取数据和解析服务器的响应信息提供了接口。通过XHR获取数据之后，再将获取的数据通过DOM插入到页面之中。

XMLHttpRequest对象

   创建XMLHttpRequest对象的方法是，通过new XMLHttpRequest()构造函数.

1
var xhr = new XMLHttpRequest();

XMLHttpRequest对象的用法

   使用ajax请求数据有两个步骤，首先open一个准备好的请求，然后发送请求。第一步中调用XHR对象的open方法，这个方法接受三个参数。

  1. 请求的方法，get、post等；
  2. 请求的url；
  3. 是否异步执行的Boolean value，true为异步执行，false为同步执行，立马执行。
    1
    xhr.open('get','example.php',false);

   第二步，发送请求，调用XHR对象的send方法，这个方法接受一个参数，要向服务器发送的数据，若不需要发送数据，将参数设置为null。

1
xhr.send(null);

   从服务器获取的数据会自动填充到XHR对象的属性中，下面是关于属性的说明。

  • status: HTTP请求的状态，200，404等；
  • statusText: HTTP状态的说明；
  • responseText: 作为响应主体的文本；
  • responseXML: 如果响应内容的类型是xml，那么这个属性就保存着XML DOM文档。
  • readystate：表示当前请求或响应的状态
       0：还未调用open() method；
       1：已经调用open()，还未send()；
       2：已经send()，还未收到response；
       3：已经接受部分响应数据；
       4：已经接受全部响应数据。
       XHR对象的readystate属性发生改变时，都会触发readystatechange事件，由于请求是异步的，所以通过这个事件，在请求数据完成时完成DOM树的更改。

发表于 |

实现方法

  在vue-cli3中，实现跨域的配置方法有两种。

  1. 一种是在项目中的根目录，即与package.jason文件平行目录下创建vue.config.js。然后在文件中配置devServer的proxy属性。具体事项方法请参考链接；vue-cli3代理配置。

    1
    2
    3
    4
    5
    module.exports ={
    	devsever: {
    		proxy: '代理地址'
    	}
    }

  2. 第二种方法在上文的链接中也提过，在package.jason文件中配置proxy对象。

    1
    2
    3
    4
    //本人使用的是追书神器的api
    "proxy": {
    	"/ranking": "http://api.zhuishushenqi.com"
    }

   配置之后，只要是项目中使用了匹配”/ranking”地址的都会自动替换。例如：

1
2
3
this.$axios
	.get("/ranking/gender")
	.then(...)

   “api/ranking/gender”会被解析为”http://api.zhuishushenqi.com/ranking/gender"。
如果想要深入了解，请访问这个链接。

发表于 |

Markdown 语法

标题

  在markdown中，只要在文本的前面添加#符号，即可实现一级标题的效果。注意，#字符需要与文本直接隔一个空格。尝试了一下，不隔也没有出现什么问题，但避免出现未知的错误，最好按照标准在#字符与文本之间添加一个空格字符。
  一般来说，文章的章节目录都是二级标题，三级标题则作为二级标题的子目录，直到下一个二级标题出现，注意这一点。当然你也可以不遵守，但是为了读者更好的阅读体验，最好还是遵守这个默认的规定。

列表

  列表分为两种，分别是无需列表和有序列表。

无序列表

  在markdown中，可以通过在文本前面添加-字符实现无序列表。

  • 苹果
  • 香蕉
  • 菠萝

    有序列表

      实现有序列表的方式很简单，在文本前面添加1.,2.,3.就可以了
  1. 起床
  2. 刷牙
  3. 洗脸

    链接锚

      在markdown中，实现链接格式的方法是，用中括号也被称为方括号[]包裹住显示的文本，后面跟着是小括号()包裹的url链接。如，我要展示谷歌的链接，google。

    图片

      插入图片的方式为![] 加上(),括号里面要添加图片的地址哦，网上的免费图床很多,路过图床很棒，还支持markdown语法的，直接复制就行。我是dlw

    引用

      引用真的很重要，说一声是某某某大名人说的话，倾听者就会认为你说的可信度很高。显示引用的格式为在文本前面添加大于号 >,例如。

    我媳妇说过，我特么就是个天才。
      这个

    粗体和斜体

      粗体和斜体的实现方式很相似，都是通过*包裹文本实现，不同的是，一个*包裹的是斜体，两个*号包裹的是粗体。

    代码引用

      代码引用分为单行代码引用和多行代码引用，单行代码引用可以通过在文本前添加4个空格符完成，或者一个tab字符(在简书试了，并无效果，还是采用另一种方法)。另一种方法为在代码的前后一行添加\
    1
    2
    ```
    var a = 1;

注意事项

  在文本前添加字符的实现方式一定要加空格符，要显示如\ 的符号，要在前面添加转义字符\。