Shero.

生活百般滋味,你要笑着面对😊


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

简单的函数方法

发表于 2020-04-28 | 分类于 JS

数组去重

1
2
3
4
##### 简单数组去重, 如:uniq([1, 3, 5, 3, 1])

* 利用ES6新增数据类型 Set
* Set类似于数组,但是成员的值都是唯一的,没有重复的值。

function uniq(arry) {
return […new Set(arry)];
}

1
* indexOf

function uniq(arry) {
var result = [];
for (var i = 0; i < arry.length; i++) {
if (result.indexOf(arry[i]) === -1) {
//如 result 中没有 arry[i],则添加到数组中
result.push(arry[i])
}
}
return result;
}

1
* includes

function uniq(arry) {
var result = [];
for (var i = 0; i < arry.length; i++) {
if (!result.includes(arry[i])) {
//如 result 中没有 arry[i],则添加到数组中
result.push(arry[i])
}
}
return result;
}

1
* reduce

function uniq(arry) {
return arry.reduce((prev, cur) => prev.includes(cur) ? prev : […prev, cur], []);
}

1
* Map

function uniq(arry) {
let map = new Map();
let result = new Array();
for (let i = 0; i < arry.length; i++) {
if (map.has(arry[i])) {
map.set(arry[i], true);
} else {
map.set(arry[i], false);
result.push(arry[i]);
}
}
return result;
}

1
2
3
4
5

#### flat
* 利用Array.prototype.flat
* ES6 为数组实例新增了 flat方法,用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数组没有影响。
* flat默认只会 “拉平” 一层,如果想要 “拉平” 多层的嵌套数组,需要给 `flat` 传递一个整数,表示想要拉平的层数。

function flattenDeep(arr, deepLength) {
return arr.flat(deepLength);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]], 3));

1
* 当传递的整数大于数组嵌套的层数时,会将数组拉平为一维数组,JS能表示的最大数字为 Math.pow(2, 53) - 1,因此我们可以这样定义 flattenDeep 函数

function flattenDeep(arr) {
//当然,大多时候我们并不会有这么多层级的嵌套
return arr.flat(Math.pow(2,53) - 1);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

1
* 利用 reduce 和 concat

function flattenDeep(arr){
return arr.reduce((acc, val) => Array.isArray(val) ?
acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

1
2

* 使用 stack 无限反嵌套多层嵌套数组

function flattenDeep(input) {
const stack = […input];
const res = [];
while (stack.length) {
// 使用 pop 从 stack 中取出并移除值
const next = stack.pop();
if (Array.isArray(next)) {
// 使用 push 送回内层数组中的元素,不会改动原始输入 original input
stack.push(…next);
} else {
res.push(next);
}
}
// 使用 reverse 恢复原数组的顺序
return res.reverse();
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));
`

js监听事件

发表于 2020-04-24 | 分类于 JS

js监听事件的叠加和移除

监听事件
  • html DOM元素有很多on开头的监听事件,如onload、onclick等,见DOM事件列表。但是同一种事件,后面注册的会覆盖前面的
    1
    2
    3
    4
    5
    6
    7
    window.onresize = () => {
    alert(1);
    }
    window.onresize = () => {
    alert(2);
    }
    // 改变窗口大小时,只会弹出2
addEventListener监听
  • element.addEventListener(type,handler,false/true)

    • type: 事件类型
    • handler: 事件执行触发的函数
    • false/true: false为冒泡/ture为捕获,参数是true,表示在捕获阶段调用事件处理程序;参数是false,表示在冒泡阶段调用事件处理程序。
    • 事件捕获:父级元素先触发,子集元素后触发;
    • 事件冒泡:子集元素先触发,父级元素后触发;
    • 一般的绑定事件,都是采用冒泡方式,即false
  • 利用addEventListener添加监听事件,可以重复添加,但是并不会互相覆盖

    1
    2
    3
    4
    5
    6
    7
    window.addEventListener('resize', () => {
    alert(1);
    })
    window.addEventListener('resize', () => {
    alert(2);
    })
    // 改变窗口大小时,先后弹出1和2
removeEventListener移除监听
  • removeEventListener跟addEventListener相对应,用于移除事件监听
  • 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部具名函数,匿名函数事件是无法移除哒
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 匿名函数事件无法移除
    window.addEventListener('resize', () => {
    alert(1);
    })

    // 监听具名函数事件
    function myResize() {
    alert(2);
    }
    window.addEventListener('resize', myResize);

    // 移除事件监听
    window.removeEventListener('resize', myResize);
dispatchEvent() 允许发送事件到监听器上
  • 标准浏览器中使用dispatchEvent派发自定义事件:element.dispatchEvent(),除此之外,还有创建和初始化事件:
  • 一般的流程是:创建 >> 初始化 >> 派发。
  • 对应的事件流程:document.createEvent() >> event.initEvent() >> element.dispatchEvent()
    • createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型
    • initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。 支持三个参数:initEvent(eventName, canBubble, preventDefault). 分别表示: 事件名称,是否可以冒泡,是否阻止事件的默认操作
    • dispatchEvent()就是触发执行了,element.dispatchEvent(eventObject), 参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!-- let el = document.getElementById("eventId");
      el.addEventListener('customEvent', () => {
      alert('弹弹弹,弹走鱼尾纹~~');
      })
      // 创建
      let evt = document.createEvent('eventName');
      // 初始化
      evt.initEvent('alert', false, false);
      // 触发
      dom.dispatchEvent(evt); -->

      // document上绑定自定义事件oneating
      document.addEventListener('customEvent', (event) => {
      alert(`${event.mingzi}, ${event.message}`);
      }, false);
      // 创建event的对象实例。
      var event = document.createEvent('HTMLEvents');
      // 3个参数:事件类型,是否冒泡,是否阻止浏览器的默认行为
      event.initEvent('customEvent', true, true);
      /*属性,随便自己定义*/
      event.mingzi = 'hello,我是xx';
      event.message = '我今天18岁';
      // 触发自定义事件oneating
      document.dispatchEvent(event);

布局方式

发表于 2020-04-23 | 分类于 CSS

flex

flex很实用的属性
  • align-self(控制子项自己在侧轴上的排列方式)
    • align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch
  • order(属性定义项目的排列顺序)
    • 数值越小,排列越靠前,默认为0。注意:和 z-index 不一样
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <style>
      .wrapper {
      display: flex;
      width: 80%;
      height: 300px;
      background: #ff9400;
      }
      .item {
      width: 100px;
      height: 100px;
      background: #c40;
      margin-right: 5px;
      }
      .item:nth-child(3) {
      align-self: flex-end;
      order: -1;
      }
      </style>
      <div class="wrapper">
      <span class="item">1</span>
      <span class="item">2</span>
      <span class="item">3</span>
      </div>

css3特殊样式(webkit)

1
2
3
4
5
6
7
8
9
10
11
/*CSS3盒子模型*/
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

front-tool前端开发工具

发表于 2019-07-20 | 分类于 ide

开发工具插件

VScode常有插件
  • To Learn More…
  • 安装javascript console utils (crtl + shift + l)快捷console语句
  • 安装Path Autocomplete 路径自动补全
VScode快捷键
  • To Learn More…
  • ctrl + shift + f(command + shift + f)项目目录中,搜索任何匹配的文本
  • 合并行 Control + J
    左侧可以单击小箭头,出现第二框,即替换的内容

  • 为 tabs 设置强调色(Material Theme)(Command + K 再 Command + T)

    • 打开的命令面板(Ctrl(Command) + Shift + P),选择 Material Theme: Set accent color并从列表中选择一个颜色,它将更改选项卡的下划线颜色
  • 进程资源管理器

    • 在VsCode 中按Ctrl + Alt + Delete可以打开该任务管理器
  • Expand Bracket Selection

    • 打开键盘快捷键(Ctrl + Shift + P 或 command + Shift + p),搜索 Expand Bracket Selection
    • 自动选择整个块,从开始的大括号到结束(比如选择if/else)
  • 重新打开关闭的编辑页面(Windows: Ctrl + Shift + T Mac: command + Shift + T)

  • 通过匹配文本打开文件

    • Windows: Ctrl + T Mac: command + Tconsole.log();
  • 集成终端

    • Windows: Ctrl + Mac: control +
    • 通过 Ctrl + `可以打开或关闭终端
  • 查看正在运行的插件

    • (Ctrl + Shift + P)并输入 Show running extensions
  • 重新加载

    • Windows: Ctrl + Alt + R Mac: Control + Option + R
  • 移动tabs栏

    • Mac:Command + Option + 左右键 Windows:Ctrl + Alt + 左右键头
  • 选择左侧或者右侧所有的内容

    • Mac:Command + Shift + 左右键 Windows:Ctrl + Shift + Home/End
  • 删除上一个单词

    • Mac:option + delete Windows: Ctrl + Backspace
  • 逐个选择文本

    • Mac:option + shift + 左右键 Windows: Ctrl + shift + 左右键
  • 重复行

    • Mac:option + shift + 上下键 Windows: Alt + shift + 上下键
  • 移至文件的开头和结尾

    • Mac:Command + 上下键 Windows: Ctrl + Home/End
  • 批量替换当前文件中所有匹配的文本

    • Ctrl + F2 (Mac: Command + F2)一次改所有出现的文本
  • 向上/向下移动一行

    • Mac:option + 上下键 Windows: Alt + 上下键
  • 删除一行

    • Mac:Command + X / Command + shift + k Windows: Crtl + X /Ctrl + shift + K
  • 复制光标向上或者向上批量添加内容

    • Mac:Command + option + 上下箭头 Windows: Ctrl + Alt + 上下箭头
      vscode注释插件推荐
  • Better Comments:特点是可以改变注释的颜色,通过不同颜色来表示不同情况
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    文件顶部的注释,包括描述、作者、日期、最后编辑时间,最后编辑人

    ```typescript
    /*
    * @Description: app im菜单配置列表中的表格模块
    * @Author: maoyuyu
    * @Date: 2019-08-05 10:31:12
    * @LastEditTime: 2019-08-14 17:08:33
    * @LastEditors: Please set LastEditors
    */

文件头部添加注释快捷键:window:ctrl+alt+i,mac:ctrl+cmd+i

在光标处添加函数注释:window:ctrl+alt+t,mac:ctrl+cmd+t

vscode setting 配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"fileheader.configObj": {
"autoAdd": false, // 自动添加头部注释开启才能自动添加
},
"fileheader.customMade": {
"Author":"[you name]",
"Date": "Do not edit", // 文件创建时间(不变)
"LastEditors": "[you name]", // 文件最后编辑者
"LastEditTime": "Do not edit", // 文件最后编辑时间
"Description":""
},
"fileheader.cursorMode": {
"Author":"[you name]",
"description": "",
"param": "",
"return":""
}
1
* koroFileHeader:特点是可以在文件头部快捷添加注释和函数注释

! , 红色注释
? , 蓝色注释
// , 灰色删除线注释
todo ,橘红色注释

  • , 浅绿色注释
  • setting.json配置
    “better-comments.tags”: [
    {
    “tag”: “!”,
    “color”: “#FF2D00”,
    “strikethrough”: false,
    “backgroundColor”: “transparent”
    },
    {
    “tag”: “?”,
    “color”: “#3498DB”,
    “strikethrough”: false,
    “backgroundColor”: “transparent”
    },
    {
    “tag”: “//“,
    “color”: “#474747”,
    “strikethrough”: true,
    “backgroundColor”: “transparent”
    },
    {
    “tag”: “todo”,
    “color”: “#FF8C00”,
    “strikethrough”: false,
    “backgroundColor”: “transparent”
    },
    {
    “tag”: “*”,
    “color”: “#98C379”,
    “strikethrough”: false,
    “backgroundColor”: “transparent”
    }
    ]
    `

小程序canvas

发表于 2019-07-13 | 分类于 微信小程序

在小程序某一个页面使用canvas绘制多个动态圆环

  • 封装的公共的canvas.js

    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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    // 绘制圆环动画共有方法
    export default{
    // data: {
    // percentage: '', //百分比
    // animTime: '', // 动画执行时间
    // },
    options:{
    /* @description {绘制圆形进度条方法}
    * @date 2019-7-13
    * @author pengyf
    * @param c: 绘制动画进度, id: canvas画板id, w,h: 圆心的横纵坐标
    * @returns 无
    */
    run(c, w, h, id) {
    // 需要在这里重新获取一下id,不然只能绘制一次
    let context = wx.createCanvasContext(id);
    let num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
    context.arc(w, h, w - 8, -0.5 * Math.PI, num); // 每个间隔绘制的弧度
    // 设置为渐变的颜色
    var gradient = context.createLinearGradient(200, 100, 100, 200);
    gradient.addColorStop('0', '#2661DD');
    gradient.addColorStop('0.5', '#40ED94');
    gradient.addColorStop('1.0', '#5956CC');
    context.setStrokeStyle(gradient);
    // 设置单一的颜色
    // context.setStrokeStyle('#5ba2b6');
    context.setLineWidth('16');
    context.setLineCap('butt');
    context.stroke();
    context.beginPath();
    context.setFontSize(20); // 注意不要加引号
    context.setFillStyle('#ffef00');
    context.setTextAlign('center');
    context.setTextBaseline('middle');
    context.fillText(c + '%', w, h);
    context.draw();
    },

    /* @description {绘制圆环的动画效果实现}}
    * @date 2019-7-13
    * @author pengyf
    * @param start: 起始百分比, end: 结束百分比,
    w,h: 圆心的横纵坐标, id: canvas画板id
    * @returns 无
    */
    canvasTap(start, end, time, w, h, id) {
    start++;
    if (start > end) {
    return false;
    }
    this.run(start, w, h, id);
    setTimeout(() => {
    this.canvasTap(start, end, time, w, h, id);
    }, time);
    },

    /* @description {绘制圆环}}
    * @date 2019-7-13
    * @author pengyf
    * @param id: canvas画板id, percent: 进度条百分比,time: 画图动画执行时间
    * @returns 无
    */
    draw(id, percent, animTime) {
    let time = animTime / percent;
    wx.createSelectorQuery().select('#' + id).boundingClientRect((rect) => {
    //监听canvas的宽高
    let w = parseInt(rect.width / 2); // 获取canvas宽的的一半
    let h = parseInt(rect.height / 2); // 获取canvas高的一半,
    this.canvasTap(0, percent, time, w, h, id);
    }).exec();
    }
    }
    }
  • 在page页面使用
    使用了grid布局

  • wxml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <view class="contain">
    <view class="data">
    <view class="row" wx:for="{{canvasList}}" wx:key="{{index}}">
    <view class='bigCircle pos-center'></view>
    <view class='littleCircle pos-center'></view>
    <canvas canvas-id="{{item.id}}" id="{{item.id}}" class='canvas pos-center'></canvas>
    </view>
    </view>
    </view>
  • wxss

    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
    46
    47
    .data {
    width: 100%;
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(350rpx, 1fr));
    grid-template-rows: repeat(2, 350rpx);
    }
    .data .row {
    /* flex: 1; */
    /* width: 350rpx;
    height: 500rpx; */
    position: relative;
    background-color: #f5f5f5;
    border: 1rpx solid #ddd;
    }
    /* .canvasBox{
    height: 500rpx;
    position: relative;
    background-color: #f5f5f5;
    } */
    .pos-center {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    }
    .bigCircle{
    width: 320rpx;
    height: 320rpx;
    border-radius: 50%;
    background-color: #313250;
    }
    .littleCircle{
    width: 256rpx;
    height: 256rpx;
    border-radius: 50%;
    background-color: #171a3b;
    }
    .canvas{
    width: 320rpx;
    height: 320rpx;
    z-index: 99;
    }
  • js

    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
    import Canvas from '../../utils/canvas.js'
    Page({
    ...Canvas.options, // 通过解构赋值,将共有文件中的方法和数据传递到要使用方法的文件
    /**
    * 页面的初始数据
    */
    data: {
    canvasList: [{
    id: 'circle-one',
    percent: 60
    },
    {
    id: 'circle-second',
    percent: 45
    },
    {
    id: 'circle-three',
    percent: 30
    }],
    },
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    const _canvasList= this.data.canvasList;
    const len = _canvasList.length;
    for(let i = 0; i < len; i++) {
    this.draw(_canvasList[i].id, _canvasList[i].percent, 1000);
    }
    // this.draw(canvasList[0], this.data.percent2, 1000);
    // this.draw('three', this.data.percent2, 1000);
    }
    })

`

  • To Learn More…
使用wx-charts画图
  • 参考实例1
  • 参考实例2
  • 参考实例3
  • 支持图标类型
    • 饼图 pie
    • 圆环图 ring
    • 线图 line
    • 柱状图 column
    • 区域图 area
    • 雷达图 radar
热力图
  • inMap
  • 参考实例1
  • 涉及的Blog
微信小程序里面评论功能
  • 参考实例1
微信小程序图片预加载
  • 参考实例1
微信小程序分享相关
  • action-sheet 底部弹窗
    • 参考实例1
    • 参考实例2

css技巧

发表于 2019-07-10 | 分类于 CSS

css的一些使用技巧(含css3)

按钮渐变动画效果
  • 改变渐变的位置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
    }
    button:hover {
    background-position: 0 0;
    }
包裹长文本(不确定长度)
1
2
3
4
pre {
white-space: pre-line;
word-wrap: break-word;
}
css设置模糊文本
1
2
3
4
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
用css实现省略号动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
content: "\2026"; /* ascii code for the ellipsis character */
animation: ellipsis 2s infinite;
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
样式重置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
css清除浮动
1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
1
2
3
4
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
自定义文本选中后的颜色
1
2
3
.txt::selection { 
background: #e2eae2;
}
css设置背景渐变
1
2
3
4
5
6
7
8
9
.colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
css原图案
1
2
3
4
5
body {
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;
}
  • To Learn More…
flex-wrap
  • 遇到问题自动换行木有效果
    子元素需要设置具体的宽度
    1
    2
    flex-wrap: wrap; // 父元素设置
    flex: 1; // 子元素不能这样设置,必须是具体的宽度
emmet语法
  • ul>li*3>{hello$}
css实现边框齿轮效果
  • To Learn More…
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
    .toothbg {
    width: 100%;
    height: 20px;
    background: #ff94000;
    background-image:-webkit-gradient(linear,50% 0,0 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#e5e5e5),to(#e5e5e5)),
    -webkit-gradient(linear,50% 0,100% 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#e5e5e5),to(#e5e5e5));
    background-image:-moz-linear-gradient(50% 0 -45deg,transparent,transparent 50%,#e5e5e5 50%,#e5e5e5),
    -moz-linear-gradient(50% 0 -135deg,transparent,transparent 50%,#e5e5e5 50%,#e5e5e5);
    background-size:30px 15px;
    background-repeat:repeat-x;
    background-position:0 100%;
    }
    </style>
    <div class="toothbg"></div>
css实现动画效果
  • 国外网站参考
  • To Learn More…
css边框
1
border-style: none | solid | dashed | dotted | double;
css文本控制
  • first-letter 选中首个字符(针对块元素有作用)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .txt {
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border: 1px double #ff9400;
    text-align: center;
    }
    .txt::first-letter {
    font-size: 40px;
    color: #ff0000;
    }

    <p class="txt">¥ 200</p>
  • text-transform 指定文本大小写(应用在假设输入框只能输入大小写)

  • capitalize 首字母大写 | uppercase 全部大写 lowercase 全部小写 none

    1
    transform: capitalize | uppercase | lowercase | none;
  • word-spacing 指定空格间隙(前后空格没有用,设置的是字符之间空格)

    1
    word-spacing: 10px;
  • white-space 空白符处理

  • To Learn More…

    1
    white-space: normal | nowrap | pre | pre-wrap | pre-line;
  • text-align: justify 设置两端对齐

    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
    <style>
    div {
    outline: 1px solid;
    }
    span {
    display: inline-block;
    width: 100px;
    line-height: 100px;
    border-bottom: 1px solid lightcyan;
    text-align: center;
    background: cyan;
    }
    i {
    display: inline-block;
    width: 100px;
    outline: 1px dashed;
    }
    </style>
    <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <i></i><i></i><i></i>x
    </div>

grid

发表于 2019-07-09 | 分类于 CSS

grid 布局优势

  • 固定或弹性的轨道尺寸
  • 定位项目
  • 创建额外的轨道来保存内容
  • 对齐控制
  • 控制重叠内容(z-index)

grid VS flexbox

  • flexbox是yi w一维布局,只能在一条直线上放置内容区块
  • grid是二维布局,根据设计需求将内容区块放置到任何地方

  • 实际上

    • grid和flexbox可以很好到
  • Grid Container网格容器

    • 元素应用display: grid,他是其所有网格项的父元素
      1
      2
      3
      4
      5
      6
      7
      .container {
      display: grid;
      }
      <div class="container">
      <div class="item">One</div>
      <div class="item">Two</div>
      </div>
  • Grid Item 网格项

    • 网格容器的子元素,下面的item元素是网格项
  • Grid Line 网格线
    • 组成网格项的分界线
  • Grid Track 网格轨道
    • 两个相邻的网格线之间的网格轨道
  • Grid Cell 网格单元
    *两个相邻的列网格线和两个相邻的行网格线组成的是网格单元
  • Grid Area 网格区域

    • 四个网格线包围的总空间
  • 单位

    • fr(单位)
    • 剩余空间分配数,用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩余的空间根据各自的数字按比例分配
    • gr(单位)—–暂未认证
    • 网格数
  • display: grid|inline-grid|subgrid
  • 注意
    • 当元素设置了网格布局,column, float, clear, vertical-align属性无效
    • subgrid目前所有浏览器不支持
  • grid-template
  • grid-template-columns 列
  • grid-template-rows 行推荐值,使用auto(高度确定平均分布,高度不确定平均收缩)
    • 属性值
      • 轨道大小(track-size):可以使用css长度(px,em等),百分比或用分数(用fr单位)
      • 网格线名字(line-name):可以选择任用名字
  • grid-template-area:网格区域的名称来定义网格区域

    • none
    • . empty
      1
      2
      3
      grid-template-areas: "header header header header"
      "main main . slider"
      "footer footer . footer"
  • grid-column-gap/grid-row-gap 设置网格间距

  • 设置行列简写

    • grid-gap: grid-row-gap行 grid-column-gap列;
    • gap: grid-row-gap行 grid-column-gap列;
      1
      2
      grid-column-gap: 10px;
      grid-row-gap: 15px;
  • items

  • justify-items: start | end | center | stretch(内容宽度占据整个网格区域); // 沿着行轴(水平)对齐网格内的内容
  • align-items
(grid布局应用)一行css代码搞定响应式
  • fraction单位值,很容易更改列的宽度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
    .container {
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 50px;
    }
    </style>
    <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    </div>
  • 上面列子总是三列宽,预期希望网格能根据容器的宽度改变列的数量

  • repeat(param1, param2)函数,强大的指定列和行的方法,param1指定行与列的数量,param2指定行与列的宽度

    1
    2
    3
    4
    5
    6
     .container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    border: 1px solid #ddd;
    }
  • auto-fit 可跳过固定数量的列,将3替换为自适应数量

    1
    2
    3
    4
    5
    6
    7
     .container {
    display: grid;
    grid-gap: 5px; // 设置网格之间的间距
    grid-template-columns: repeat(auto-fit), 100px);
    grid-template-rows: repeat(2, 50px);
    border: 1px solid #ddd;
    }
  • auto-fit 自适应设置,存在问题,网格右侧通常留有空白部分
    解决方法minmax()

    • minmax()函数定义的范围大于或等于 min, 小于或等于 max。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .container {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      grid-template-rows: repeat(2, 100px);
      }
      ```
      * 为网格添加图片,使图片适应于每个条目,将其宽高设置为于条目本身一样
      **使用object-fit: conver**
      * 将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪





















`

interviewSummary

发表于 2019-07-09 | 分类于 JS

Web Interview Summary

new的实现原理

npm与yarn

发表于 2019-07-08 | 分类于 tool

npm与yarn

  • 对于已经安装过的包
    • yarn确实比npm快,而且节省空间。
  • 对于从来没有安装过的包
    • yarn会节省空间,但是会比npm安装速度慢一些(yarn要40多s,而npm时间10多s)
  • yarn比npm更可靠 (在npm5.0之前,因为没有package-lock.json文件,安装都是依赖package.json文件的。而package.json中对于模块的版本配置都是不确定的)
  • yarn比npm更安全(yarn比npm检查更加严格)
  • yarn和npm的命令
    • 想了解more跳转
  • yarn和npm安装或者升级包的时候,都可以指定对应的版本

    1
    2
    3
    4
    npm install [package]@[version]
    npm install [package]@[tag]
    yarn add [package]@[version]
    yarn add [package]@[tag]
  • yarn和npm独有的命令

vue3与vue2

发表于 2019-07-08 | 分类于 前端框架

vue3(指vue-cli3)与vue2差异

  • vue3
    • 性能的提升
      • 打包大小减小41%
      • 初次渲染快55%,更新快了33%
      • 内存使用减少54%
    • Composition API
    • 其他特性和新增加的内置组件
    • 更好的 Typescript 支持
  • vue2
    • 随着功能的增长,复杂组件的代码变得越来越难以维护
      • Mixin缺点
        • 命名冲突
        • 不清楚暴露出来变量的作用
        • 重用到其它component经常会遇到问题
    • Vue2 对 Typescript 的支持不完善
      创建项目,vue3比起vue2简单很多
      • vue create xxx(项目名称) 或者vue ui
        • 选择安装模式
        • ts-sass自己安装过的模板
        • default系统默认
        • Manually select features自己选配置
        • 注意的是
        • 卸载 npm uninstall vue-cli -g
        • npm install -g @vue/cli // 安装cli3.x
        • 更新node到最新版本 npm install -g n(安装模块 这个模块是专门用来管理node.js版本的) n stable(sudo n stable) // 更新node版本
      • 想了解more跳转
      • 移动端vue3配置 <a href=”https://juejin.im/post/5cbf32bc6fb9a03236393379“ style=”color: blue;”>想了解more跳转
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
// vue.config.js的配置
// vue.config.js
module.exports = {
// 选项...
// 当使用基于 HTML5 history.pushState 的路由时;
// 当使用 pages 选项构建多页面应用时。
baseUrl:"",
// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
outputDir:"webApp",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir:"assets",
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath:"index.html",
// 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
filenameHashing:true,
// 多页面
pages:undefined,
// 编译警告
lintOnSave:false,
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
runtimeCompiler:false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
transpileDependencies:[],
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap:false,
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
crossorigin:undefined,
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
integrity:false,
// 反向代理
devServer:{
// devServer: {
// proxy: {
// '/api': {
// target: '1',
// ws: true,
// changeOrigin: true
// }
// }
// }
}
}
* cd xxx(项目名称)
* yarn serve
vue开发技巧
  • To Learn More
  • 长列表性能优化
    • vue会通过Object.defineProperty对数据进行劫持,来实现视图响应数据的变化,有些时候我们的组件就是纯粹的数据展示,不会有任何改变,就不需要vue来劫持我们的数据,在大量数据展示的情况下,能够很明显的减少组件初始化的时间,如何禁止vue劫持我们的数据呢?
      可以通过object.freeze方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了
      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
      export default {
      data: () => ({
      users: {}
      }),
      async created() {
      const users = await axios.get("/api/users");
      this.users = Object.freeze(users);
      }
      };
      // 冻结了users的值,引用不会被冻结,当需要reactive数据的时候,可以重新给users赋值
      export default {
      data: () => ({
      users: []
      }),
      async created() {
      const users = await axios.get("/api/users");
      this.users = Object.freeze(users);
      },
      methods:{
      // 改变值不会触发视图响应
      this.users[0] = newValue
      // 改变引用依然会触发视图响应
      this.users = newArray
      }
      };
vue中8种组件的通信方式
  • To Learn More
  • props/$emit

    • 父组件通过props的方式向子组件传递数据,通过$emit子组件向父组件通信
      props只可以从上一级组件传递到下一级组件(父子组件),即单向数据流。且props只读,不可被修改,所有修改都会失效并警告
      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
      // section父组件
      <template>
      <div class="section">
      <com-article :articles="articleList"></com-article>
      </div>
      </template>

      <script>
      import comArticle from './test/article.vue'
      export default {
      name: 'Section',
      components: {
      comArticle
      },
      data () {
      return {
      articleList: ['活着', '生活是一种奢侈', '小王子']
      }
      }
      }
      </script>

      // 子组件 article.vue
      <template>
      <div>
      <span v-for="(item, index) in articles" :key="index">{{item}}</span>
      </div>
      </template>

      <script>
      export default {
      props: ['articles'] // 获取父组件的数据
      }
      </script>
  • 子组件向父组件传值

    • $emit绑定一个自定义事件,当指令执行时,就会将参数arg传递给父组件,父组件通过v-on监听并接收参数
      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
      46
      47
      // 父组件中
      <template>
      <div class="section">
      <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
      <p>{{currentIndex}}</p>
      </div>
      </template>

      <script>
      import comArticle from './test/article.vue'
      export default {
      name: 'Section',
      components: {
      comArticle
      },
      data () {
      return {
      currentIndex: -1,
      articleList: ['活着', '生活是一种奢侈', '小王子']
      }
      },
      methods: {
      // 监听子组件传递的参数
      onEmitIndex (idx) {
      this.currentIndex = idx;
      }
      }
      }
      </script>

      <template>
      <div>
      <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
      </div>
      </template>

      <script>
      export default {
      props: ['articles'],
      methods: {
      // 派发到父组件的事件
      emitIndex(index) {
      this.$emit('onEmitIndex', index)
      }
      }
      }
      </script>
  • $children/$parent

    • 通过$children和$parent可以访问组件的实例,代表可以访问组件的所有方法和data
      在#app上拿$parent得到的是new Vue()的实例,在这实例上再拿$parent得到的是undefined,而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样,$children的值是数组,而$parent是个对象
  • 父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。
1…4567
yongfeng.peng

yongfeng.peng

(女英

67 日志
13 分类
11 标签
© 2022 yongfeng.peng