手写Vue

项目初始化

• 初始化项目 npm init -y

• 安装依赖 rollup 打包和 babel 转译 npm i rollup @babel/core rollup-plugin-babel bel @babel/preset-env -D

  阅读全文 »

rollup

rollup 是一个 JavaScript 的模块打包器，一般用来编写库或者组件，因为它打包生成的文件仍然保持原来的文件结构，和 webpack 大有不同，同时也有 treeshaking 功能。

使用

安装

npm init、npm i rollup -D

创建配置文件

在根目录下新建 rollup.config.js 文件，导出一个对象

1
2
3
4
5
6
7
8

// rollup.config.js
export default {
    input: './src/main.js', // 入口文件
    output: {
        file: './dist/js/main.min.js',
        format: 'iife' // 输出格式，这里是匿名的立即执行函数作用域，其他有 cjs es amd 和 umd
    }
}

在 package.json 中加入指令 build: rollup -c 或者 build: rollup --config 可以让根目录下的 config 生效。

数据处理

最近处理了一个比较复杂的显隐及展示逻辑判断，根据后端返回的字段控制几个不同组件的显隐状态及展示状态，写了大概几百行的逻辑判断。由此感觉后端与前端的分工其实在我这并不明确，实际上，即使后端把所有数据全都返回回来，只要存在数据，前端就能自己处理后渲染，仿佛后端只是一个读取数据的接口一样。随着业务的扩张，model 层将会逐渐转移至前端。

Typescript

已经听到很久很久这个名字，但一直没有真正使用过，每次都是浅尝辄止，试着整理一下吧。

扫码跳转

微信小程序

如果想要从未打开小程序的状态下，扫码进入小程序，需要以下步骤：

1. 先到微信公众平台中，设置一个空白页，作为中转页面，同时，它应该以 / 为结尾，才能匹配到 /bbb/aaa，否则以 /bbb/aaa 这样定义路径，将匹配为 /bbb ，将会丢弃 aaa。

2. 后端也需要为这个地址做特殊处理

3. 在空白页中写上对应代码，它将会被写成 {q: string} 的形式，传入 onLoad 中，其中 {, }, =, : 这些特殊字符将被转译为 ASCII，如 %C20，之后解析这个 q，做相应处理即可

leetcode

704. 二分查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number}
 */
var search = function(nums, target) {
    const n = nums.length
    let l = 0,
        r = n - 1
    while( l <= r) {
        const mid = Math.floor(l + (r - l) / 2) // 防止整型溢出 2^53 - 1
        if (nums[mid] === target) {
            return mid
        }

        if (nums[mid] > target) {
            r = mid - 1
        } else {
            l = mid + 1
        }
    }
    return -1
}

预处理器

scss

我们可能经常在项目中使用 css 预处理器，在 vue 中，我们可能会写成

1
2
3
4
5
6
7
8
9
10
11

<script lang="scss">
    .title {
        &:first-child {
            
        }
        
        &:last-child {
            
        }
    }
</script>

这种普通的用法，仅仅是为了把 .title 省略，写起来其实与 css 并无不同，如果仅仅需要这种功能，我推荐使用 stylus，毕竟它连 { } : ; 都可以省略。

@mixin

一般预处理器中都有 mixin 这个混入功能，允许你把一些 css 代码混入到指定位置。在 scss 中，使用 @mixin name 来定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@mixin b($block) {
    $B: $namespaced + '-' + $block !global; // !global 表示这个变量不是全局变量，只允许在它的子元素用访问，即在 b() { 这里访问 }。
    .#{$B} {
        @content; // 表示调用 mixin 的原代码块
    }
}

@mixin e($element) {
    @at-root { // 表示根路径，减少样式权重，例如不加的话可能变成 .message .message__header，加了之后变成 .message__header
        .#{$B + $element-prefix + $element} { // $B 如上所述，只允许在 b(){} 中调用，如果 e() 外层没有 b()，将不会生效（或者报错？）。
            @content;
        }
    }
}

@include

调用定义好的 @mixin 方法

小程序 cover-view

众所周知，小程序中有些原生组件，默认层级最高，普通的 view 无法在上面覆盖，此时需要使用 cover-view 标签。而这个标签相比于 view，缺少很多属性，使用的时候发现这里没有那里也没有。

覆盖原生组件时，只可以使用 cover-view 和 cover-image，其中 cover-view 不允许设置 background-image (因此 linear 这些渐变色背景也无法使用)，可以使用 cover-image ，把内容绝对定位来替代，cover-image 不允许使用 base64，支持网络路径。

cover-view 已经支持 overflow-y: scroll 了，我在实现 map 组件上的覆盖物滚动时，使用了 touchstart, touchmove, touchend 三个事件修改 top 值来拟造滑动效果，虽然可以实现，但滑动效果非常卡，并且一旦滑动过快，会出现闪烁，touchmove 并不能完全监听到我所有的滑动，而是隔一段时间才监听到一次，看起来是内部已经做了节流处理，因此我改用了 overflow 属性带来的原生滚动，舒服多了。但从地图底部拖动到顶部时的拖动边界，仍然监听不灵敏，目前考虑将其置为按钮，不允许自定义滚动位置，仅允许滚动到两个固定位置，否则回退。

Vue2的节流函数

在 Vue2 的 methods，中，想定义一个高阶函数返回的方法时，this 的指向需要注意一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// util.js
export function throttle(fn, wait, _this) {
    let timer
    // console.log(_this) // undefined
    // console.log(this) // undefined
    return function (...args) {
        if (!timer) {
            // console.log(this) // Vue Components
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, wait)
        }
    }
}

// .vue 文件
import { throttle } from '@/utils/util'
export default {
    methods: {
        mouseMove: throttle(function () {
            console.log(this) //  Vue Components
        }, 300, this)
    }
}

在上面使用的过程中，在高阶函数返回的函数外部，得到的 this 是空，但同时传进去的 _this 也是空，只是因为，在页面初始化的时候，这个 mouseMove 函数已经执行了 throttle()，但是此时， Vue Components 还未被实例化，无法得到 this，因此是 undefined（小程序中，网页可能得到全局变量）。而在返回得函数中能拿到 this，是因为返回的函数是注册在 methods 中的，Vue 把 this 绑定给这个 function 了，因此这个返回的函数能拿到 this，进而 apply，也因此 methods 中真正调用的函数可以打印出 this.

uniapp 坑

1. uniapp 中不支持 reduce 方法。

2. 不要使用行内方法，用 computed 或 filter 来代替

   阅读全文 »