目标是实现一个评论系统。

数据结构

因为还没有学后端，所以先自己实践一个。

import {reactive} from "vue"
const list=reactive([
    {
        name:'xx',
        comment:"xxx",
        like:5,
        child:[
            {
             name:"23",
             comment:"3ef",
             like:0,
             parent_name:'xx',
             child:[...]
            },
            {
             name:"2113",
             comment:"311ef",
             like:0,
             parent_name:'xx',
             child:[]
            },
        ]
    },
    {
        name:'x11x',
        comment:"x1xx",
        like:51,
        child:[]
    }
])

大致如是,一个嵌套的数组,一层数组表示一级评论,一级评论表示对文章的评论,二级评论表示对一级评论的评论,放在一级评论的里面,用child字段表示,并加一个parent_name 的属性,用来指向它的父评论,应该用一个id来表示,但是为了方便,就偷懒用父评论的name了.

当然后端的数据库不会这样表示,这个只是为了用vue的组件方便,因为组件也可以嵌套.对于嵌套的数据结构,我想应该可以用递归把它拍平,具体代码,就坑了吧.

vue实践

一个简单的评论系统起码应该分成两部分,一个用来展示评论,一个用来回复,对应的vue组件的话,展示部分用两个组件,一个负责一级评论,一个负责剩下的级别.因为二者展示的方式不同,如果放在一个组件里面,用组件的自嵌套的话,逻辑比较复杂. 分开成俩后,一个包含嵌套,一个不包含,可能复用性会好一点,当然这些都是我实践完后的想法,当时,肯定是因为实现起来比较复杂.

回复部分就一个组件,虽然对文章的评论与对评论的评论,在数据结构上面不一样,但是复杂度不高,而且这本来就是一个自己编的数据结构,所以…

其他的像时间,点赞数之类的小挂件,在数据结构上添加相应的字段即可,暂且不提.

效果

对文章的评论: 对评论的评论: 反手一个赞: 其实整体部分实践起来不太困难,时间主要花在一个组件间的通讯,props如何使用上.

二就是写模板,写css,调整效果比较麻烦,还好有bootstrap库,

TODO

在截图的时候,发现回复和点赞icon也应该做成响应式的,😄

数据验证功能,又是一个坑…

• 文件放到GitHub了

All paths lead to Rome,as a newbie, what i can do is to write some sample myself.The easiest part of Vue may be the reactive function.So, let’s get rid of it.

//The core concept of reactive is when we change the data,
//the view can update simultaneously.
//Of course,the javaScript do not do this automatically,
//when we change the data of an variable, just change it, nothing happen.
//Luckily,we can solve this by the proxy API in es6.
function reactive(object){
  if(object !== null && typeof object == "object"){
    return makereactive(object)
  }else{
    return object
  }
}
function makereactive(object){
  return new Proxy(object,handler)
}
let handler={
  get(target,key,receiver){
    //we can do what we want do here!
    let res=Reflect.get(target,key,receiver)
    return res
    }
  //ok, you can add other handlers you need ,do it yourself.
}

At this stage , problems below should be solved:

• how to make a nested object reactive
• if we use the method of array,the handlers such as getting may be triggered more than once.
• some other problems we don’t know, you are the newbie!

Function Reactive

Ok,let’s assume that all problems above had been solved,how about function?

As we know,the procedure ,such as joining or splitting the string,whatever,can also change the date.if we change the string, the returns of function must be changed too.how to implement this?

Simplified answer:if we change the object involved in the function, we recall this function.

Does JS can remember which function should be recalled when we change the object ?

Of course not,we have to construct a container to remember this,which store the object and the function ,what’s more,this object may have many properties,our function may only related one of them,or many other properties too.

what a mess,whatever, let’s call it verybigmap.

let verybigmap= new WeakMap();

• The key is that when we call a function, we want verybigmap to remember and then we change the object ,call it again the handler getter must be triggered. Obviously,we should implant our code in handler.

let handler={
  get(target,key,receiver){
    track(target,key)//track is a function that throw target and key into verybigmap
    ...
  }
}

And then we make the function reactive

effect(fn){
  //1,throw the fn to verybigmap
  //2,run fn to trigger the track function
  //which one be first?
}
//I think this name 'effect' get from the terminology `side effect`

The problem in above code segments may be not a problem for experts,but no one forbid me to have a question.if we throw the fn to the verybigmap first,where we place it,the key,or the value?

Leaving it aside first,our aim is,after we trigger the setter(change a data),we recall the function,right? At first ,we must find the function in the verybigmap, at that moment, what we know is the target and the key(from the setter handler). Let’s go back to previous problem, the answer is easy, fn must be the value. Yet hard question followed, how can we place a value in a map before we get a key?

It looks like we should run fn first,nevertheless,from the context of effect function,we can not get the key connected to fn.

There must be some kind of bridge to connect the target with fn,regardless of which one run first.you the wise must know that we can use the same trick again,when we run one step, push the key or value in stack,when we run the second procedure,we get the key or value from the stack top,then pop it.wow,there we go,fix it.

This article cost me a little time,I am so tired,the rest will be in next post.

To be continued…

基础不牢,地动山摇.

当我看了Vue的100集视频教程后,发现没记下什么东西的时候,感觉到不妙了.操作性的东西,按照文档做问题不大,但是光记下流程没用,为啥要这样做？等版本一更新,学的流程就废了.

原型链

初级的javascript教程里面,根本没有提及这个东西。Vue视频里面有谈到,看到老师用了,大概明白是做什么的,看了就过了.后来,想了解下vue的原理,搜索到一篇导读文章,里面表示此点要弄懂,遂翻了好多帖,最后一个视频里面看讲清楚了—— new方法,跟Object.create方法生成对象的原型链之异同.其实是阮一峰的es5教程里面先学了,照着敲了敲,再看视频,有一点点豁然开朗.

响应式

Vue的响应式是怎么实现的呢?相关文章就能看懂个开头,😰就是Object.defineProperty的getter setter来劫持,还是看es5教程的时候的,知道有这么个方法.可惜Vue-next用es6的proxy了.路漫漫其修远兮.

其他

promise相关的问题比较难懂呀,还有es6的反射,ts语法,真心想要神奇道具.

字典

简单来说,主要需求就是把加班费自动填上卡号,再分开成业务科室和行政科室汇总做2个报表.按照b站的教程,分类汇总用到了vba字典的特性:key值不能重复,核心代码就一句

dic("'" & Preview.List(j, 3)) = dic("'" & Preview.List(j, 3)) + CInt(Preview.List(j, 2)) 'preview是listbox

缘起

其实最初ld是拿输入好的姓名,让我填相关信息,我看有花名册,就直接vlookup了外加pivot了,结果加班费发错了,ld受了批评.😰 原来vlookup只能找不重复值,而表里面姓名重复的多了去了,几千人我也没仔细看,以后取名还是不要那么大众,如果所有人姓名跟身份证号一样唯一,羞愧难当.知道问题后,本来还是想在公式上面想办法,但是客户(ld)表示记不住那么多公式,需要一键生成,这个就只能学习窗体控件了.写了一个原型–一个能分业务和行政的窗体. 在三月份的加班费统计中试用,出bug了,bug原因很简单,就是字典key的唯一性问题,因为姓名,卡号,科室需要一一对应,更好的数据结构应该是唯一key,对应一个姓名,科室之类的数组,但是,好在数据量不多,多来几个字典顺利解决问题.

事故

上月设想是还要加上一个最终汇总拷贝粘贴的宏.因为ld还要分成几个表格的留底,所以不能大一统生成,需要分开输入后统一汇总.具体业务流程没有参考性,就不多说了. 可惜电脑重装了下,宏还没来得及试用就没了,ssd还不能用数据恢复软件,只能重新写.再拿到当初的代码的时候,终于知道什么叫eat your dogfood,没有注释的代码看起来真让人头大,再加上当初面向百度编程,有很多代码片段都没完全弄明白.

思路

既然已经有了窗体,干脆所有功能集中一起.按钮一多,重复代码问题就显现出来,于是把以前面向过程的代码又抽出公用函数,本来还想做成一个类,但是后来把函数参数简化后,能满足需求,就算了就是这么容易放弃.其实还可以进一步模块化,但是我想还是等学习了更多,再来重新弄.

尾声

其实整个开发过程中,很多时间花在了流程界面设计,和输入输出控制上,再有就是测试,但是我没有那么多时间,基本测测结果正确就完了,结果就是漏洞百出,但是能用的这么一个东西了.🙂,待ld再使用的过程中慢慢反馈bug吧. 本来这样七拼八凑的代码不应该放上来,但保不齐有我这样水平的后来者有类似需求,如果有幸能被他/她发现,也算能节约一点时间,不用趴在excelhome之类的论坛慢慢翻帖了.

• 文件放到GitHub了

• 按照b站的教程,实现了走马灯的和渐隐的轮播图,但是走马灯的实在是卡,如下图: 自能说搞清了原理,具体优化,我看还是等学了前端框架再来弄了.

portfolio部分的弹出

• 按照psd文件,应该是每一个小图片点一下会弹出一个详解,但是还没有时间去弄.就先直接摆上去图片了.

header部分的背景

• 原来是直接整个header部分切图,但是背景图片过大,想看能否用原生的css实现,学习了Background-blend属性,貌似有点样子,但是logo部分有个问题卡住了, logo在nav和轮播图中间,不规则的缺刻用一个trick解决了,用的是伪元素的实现

.trick{
    overflow: hidden;
    position: relative;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.5));
}

.trick::before{
    content: "";
    position: absolute;
    left:50%;
    transform: translate(-50%,-50%);
    top:-49px;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    box-shadow: 0 -2px 0 1000px rgba(255, 255, 255, 0.1);
    
   
}

• 二者之间的阴影使用filter实现,但是副作用是轮播图片和文字都被影响了,也有了阴影.更严重的是它们之间还有dotted line,这个就没得办法了,感觉毫无出路,还是实力不够.

• 这样一折腾感觉大小还是没有缩小,可优化的路数是减小布纹材质图片的大小,现在的是500*500px的,应该是可以用更小的代替.

• 就算能加上dotted line,感觉质感不如原图,用data_url加质感看看吧.

• 用Background-blend属性后,:hover伪类的实现也受到了影响.给hover的背景渐变没有了.如下图 在css里面指定了blend-mode为none没用,感觉走错了方向,权当学习了.

• 文件放到GitHub了

一些坑记录下，造福一下像我这样的人吧

遇到问题先上网查

• travis自动编译一直出 TOCSS: failed to transform “css/style.css” (text/x-scss): resource “scss/zhang-fork/zhang-fork.github.io/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae"的问题 看样子是模板的问题,发现style.scss_c16d144eee185fbddd582cd5e25a4fae在模板示例文件夹下的resources里面,以为是要把这个加到hugo目录结构中的resources文件夹里,但是搞不定,凡事不能想当然,要是早点查就不会浪费时间了.虽然查了没发现跟这个一样的问题,但是有个类似问题的解决的途径是hugo要用extended版本的.现在还不能确认到底是模板的问题,还是hugo的问题.

多测试

• 后来我在本机hugo server了一下,也出现TOCSS: failed to transform的问题,要是我在本机先测试成功再push到github,可能又能节约很多时间吧,(lll￢ω￢).既然用extended可以解决类似问题,下了个extended的hugo,hugo server不报错了,本机多试没坏处.不过也犯了经验主义错误,先没有切换分支的时候本机测试过一遍,以为就没问题了,结果哪知道环境一变就出问题了.还是要多测

一定要仔细看帖子，多看英文帖子,并注意时效性

• 在travis.yml的配置修改为下载extended的hugo版本后,travis还是通不过,一直显示hugo: /usr/lib/x86_64-linux-gnu/libstdc++.so.6:缺lib文件,以为是要在配置文件中加script来下载相应的库文件 按照这个方向查,但这其实也是弯路,还好浪费的时间不多,翻issue里面说改dist,我之前在mipad1上装过Ubuntu,反应过来这个dist是发行版的意思,我抄的配置文件里面,dist 是trustly,😰,我还特意找的近一个月的文章 ,中文网页很多都是一大抄,看来这个文章抄的也是几年前的英文的帖子.还是要自己仔细看,多用英文google.

要多确认,记忆不一定靠谱

• 这个解决后travis还是没通过,显示invalid option “–token=” ,字面上看就是token问题,但是我确认我的token应该没问题,因为我参考的所有文章都是github-token: $GITHUB_TOKEN,但是我在travis的setting里面确认了下,我写的是$GH_TOKEN,真尴尬.

• 在travis.yml改了token后,输入https://zhang-fork.github.io/posts/终于见到了页面,但是一点post就404,一脸懵,还好在网址上发现了问题,config.toml里baseurl不是https://zhang-fork.github.io/posts/.

选对路线

• 不敢想要是用hexo,会不会出问题的地方还是多,先前编译psd2html的时候,各种nodejs版本问题,包依赖问题,环境配置问题,简直是地狱,所以这次果断了选了hugo.没想到麻烦也不断,但是网络上的文章,貌似个个都很顺利,不知道是不说,还是我太菜.