ARTS 第二周（2019.9.23~2019.9.29）

[caimel]

Algorithm 删除排序数组中的重复项

• 题目：删除排序数组中的重复项
• 思路：起初使用传统思路，直接记录重复项的下标，然后再将数组删掉，但是这样只能通过部分测试用例，而且涉及的变量太多，代码也长。
  后来参考了网上的思路，学习了不少，代码量也少。因为数组是有序的，所以下标越大的项，值越大，根据这个特性，可以定义一个变量记录数值不同的下标，并且用这个值取作为下标覆盖掉原数组中该下标的值

/**
 * @param {number[]} nums
 * @return {number}
 */
var removeDuplicates = function(nums) {
 
var number = 0;
for(var i =0; i<nums.length;i++){
    // 数组中的每个值都依次与前面不同值作比较，不同下标才++，并且覆盖旧值
    if(nums[i]!=nums[number]){
       number++;
       nums[number] = nums[i];
    }
}
// 不同数字为总量= number+1
return ++number
};

• 结果：161 / 161 个通过测试用例
  执行用时：80 ms

Review 实现一个 Vue 动态组件

https://medium.com/scrumpy/dynamic-component-templates-with-vue-js-d9236ab183bb

复述：本文讲述了，动态组件的应用，及优点。

• 模板中只使用一个dynamic-link组件（动态组件）

<template>
    <div class="comment">
        // comment text    
        <p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link :data="someData" :type="type" />
    </div>
</template>

• dynamic-link组件的实现，并且使用Webpack动态导入组件实现按需导入组件

<template>
    <component :is="component" :data="data" v-if="component" />
</template>
<script>
export default {
    name: 'dynamic-link',
    props: ['data', 'type'],
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!this.type) {
                return null
            }
            return () => import(`templates/${this.type}`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                this.component = () => import('templates/default')
            })
    },
}
</script>

• 优点/结论：
  一个组件实现多个不同的视图
  方便组件扩展
  这时异步。模板只需要在需要的时候加载
  让代码更简洁

Tip vue作用域插槽

作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数
比如定义一个基础布局组件A，只负责布局，不管数据逻辑，然后另外定义一个组件B 负责数据处理，布局组件A 需要数据的时候就去 B 里面去取。假设，某一天我们的布局变了，我们只需要去修改组件A 就行，而不用去修改组件B，从而就能充分复用组件B 的数据处理逻辑 作用域插槽就能很好的完成这一操作
在子组件中，将数据作为slot元素的特性绑定：

<span>  
<slot v-bind:user="user">
    {{ user.lastName }}  
</slot>
</span>

在父组件引用的时候，就可以给 v-slot带一个值来定义我们提供的插槽 prop 的名字：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

引用来自这里了解更多小技巧

Share uni-app 路由插件uni-simple-router实践

https://github.com/SilurianYang/uni-simple-router

• 实践：实现了路由配置
  在useRouter.js中引用路由插件，并且配置router

import Vue from 'vue'
import Router from 'uni-simple-router';

Vue.use(Router);

const router = new Router({
	routes: [{
			path: "/pages/router1/router1",
			name: 'router1'
		},
		{
			path: "/pages/router2/router2",
			name: 'router1'
		}]

main.js中引入useRouter.js

import router from './common/uni-app-router/useRouter.js'
...
const app = new Vue({
    ...App,
	store,
	router
})

使用this.$Router.push实现路由跳转

onMenuItemClick (id,pathUrl) {
				this.$Router.push({name: pathUrl})
}