xixigiggling 发布的文章

2025-04-25 00:17:14，下班比较晚，到家附近已经23点多了，久违的遇到了23点之后可以享受优惠充电的机会，但是事还是没有做完...

打开电脑，看着一堆的tab栏，想着先清理一下，于是一边看之前的浏览tab，一边好像进入了一种心流的状态，看着张鑫旭博客，看着陈伟华大佬的技术追求与天花板，趁着要关闭tab，把没记录下来的技术细节，写一下，再看着自己已经很久没有记录过的所谓的技术，突然感觉有点陌生又熟悉的味道

回长沙已经4年多了吧，21年3月，回望那时候，想起老婆现在的嘲讽，“之前不是说好的，回长沙了，我就有更多的时间了，更能做自己喜欢的事，结果呢？天天回家了就躺着了吧”，感觉好像之前的自己已经完全不见了啊

回长沙大半是家庭原因，要回家结婚了，虽然同事走之前都有点觉得我可惜，毕竟应届生还没干满一年，就回老家了，可是回过过头来看，回长沙的四年，的确也完成了很多家庭相关的事，回来的第一年，订婚、买房、结婚，那时新公司也再加班学习，技术氛围也很好，后面的几年，家庭方面：装修、买车、备孕、怀孕、生娃、带娃，到今天，已经是一位半岁娃的爸爸了，这好像是以前想都不敢想的事情了吧，好像家庭方面上，已经完成人生很多的使命，房有了，车有了，娃有了

待续...

一直苦恼了很久的一个问题就是：

  1. 在mpvue源码中的runtime/lifecycle.js中，原先的createMP函数是在initMP函数里面的，而现在的master分支上确实被抽离出来，但问题是找不到引用createMP的地方了？？？
  2. 打包后的代码的改变：
// 最新的master上，运行npm run build:mpvue，后packages/mpvue/index.js
var entryRuntime = {
  Vue: Vue$2,
  createMP: createMP
};
return entryRuntime;

// 在使用[mpvue-quickstart](https://github.com/mpvue/mpvue-quickstart)创建的项目中node_modules中的mpvue/index.js是：
return Vue$3;

可以看到打包后的代码，在最新的master上是多了一个entryRuntime的包裹，而实际使用mpvue的时候，直接是把Vue返回的。

- 阅读剩余部分 -

bash命令

cat /xxx/file       # 查看文件
touch /xxx/file     # 创建文件
du -sh /xxx/path    # 查看文件占据空间

git记录

全局设置：

git config --list                      # 查看
git config --global user.name "xxx"    # 设置
git config --global --unset user.name  # 删除

合并之后会出现冲突，但是此时不想解决，想放弃合并：

git merge --abort

自定义指令

首先直接说一下自定义指令的简单认识：

注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

在上述官方文档中说的也很清楚，自己的体会就是，自定义指令通过提供钩子函数暴露出当前指令绑定的dom元素、指令值（binding对象）、vnode等从而提供了底层操作的可能，方便开发者去实现封装、重用dom处理的逻辑。

总而言之，当有一些通用的dom操作想重用，或者复杂的dom操作不想揉杂到代码里，不妨用一下自定义指令。

- 阅读剩余部分 -

Less中calc(100vh - 64px) === 36vh
在使用less的vue项目中，发现calc(100vh - 64px) === 36vh？？？，原来是先经过less编译处理...

anything inside brackets in the LESS would be calculated by LESS first. So I had to parse the calc as Escape string for LESS

解决：width: ~"calc(100% - 30px)";，注意:：这样就不能加变量了

参考：CSS3 calc() in LESS CSS

设计稿只给了PingFangSC-Bold这种苹果字体，但没给font-weight，该怎么做呢?

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Regular (Normal、Book、Roman)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)
参考：常见设计稿字体对应字重font-weight大小

ajax 异步打开新链接被拦截
主要是不是用户自己点击触发的跳转，会被浏览器拦截，看到网上有把ajax变成同步请求来解决的，还有另一种，就是stackoverflow的通过新打开一个页面，然后在重置href来实现：

const target = window.open("","_blank");
ajax().then((data) => {
    target.location.href = data.url;
})

参考链接：jquery window.open in ajax success being blocked

使用了isomorphic-fetch，IE11仍然报Here is no "fetch" on the window env, you need to polyfill it
使用fetch-polyfill的方法，但是明明使用的是isomorphic-fetch，应该已经是polyfill之后的了啊，后在github/fetch中看到：

For use with webpack, add this package in the entry configuration option before your application entry point: entry: ['whatwg-fetch', ...]
于是在webpack入口同样增加：['isomorphic-fetch', ...]，也正常了

参考：IE11无法启动,import-html-entry Here is no "fetch" on the window env, you need to polyfill it

记住一次赋值号引起的bug

做leetcode的第二题时，出现一个莫名奇妙的错误：

代码如下：（测试了一下链表的每个节点的值）

/**
 * Definition for singly-linked list.
 * struct ListNode {
 *     int val;
 *     ListNode *next;
 *     ListNode(int x) : val(x), next(NULL) {}
 * };
 */
class Solution {
public:
    ListNode* addTwoNumbers(ListNode* l1, ListNode* l2) {
        if( (l1->val=0 && l1->next==nullptr)) {
            return l2;
        }else if( (l2->val=0 && l2->next==nullptr)) {
            return l1;
        }
        // 测试
        ListNode* temp = l1;
        while(temp !=NULL) {
             cout<<"temp->val: "<<temp->val<<endl;
             temp = temp->next;
        }
        // ...code here
    }
}

样例输入是：[2,4,3]，却直接遍历输出了：[0,4,3]，查了半天才发现是刚开始的语句就写错了...

记得c的缺陷与陷阱中好像就提过，等号被误用成赋值号，一直没遇到过，这次遇到了，长个记性！

在react的一个评论组件中，大致如下的写法：

render() {
    return (
        <form>
            <div>
                <label htmlFor="username">用户名: </label>
                <input
                  type="text"
                  name="username"
                  value={ this.state.username }
                  onChange={ this.handleOnChange.bind(this, 'username') }
                  required
                ></input>
            </div>
            <div>
                <label htmlFor="commentContent">评论内容: </label>
                <textarea
                  ref={ textarea => this.textArea = textarea }
                  value={this.state.commentContent}
                  onChange={ this.handleOnChange.bind(this, 'commentContent') }
                  name="commentContent"
                  cols="30"
                  rows="10"
                ></textarea>
            </div>
            <button onClick={ this.submitComment.bind(this) }>发布</button>
        </form>
    );
  }

其中的form表单里面使用了原生button元素，神奇的是，每次发表评论后，页面会重新加载，这就很可怕了。在大佬的帮助下，debug的过程略过，结论就是：

在form表单中的button如果没有显示写明type属性为什么，则默认是为type="submit"

- 阅读剩余部分 -

昨天在学习reactjs小书的时候遇到一个string相关的问题，也就是这样的一个需求：

用户会在textarea中输入文本，当提交文本，在下方显示的时候，要对具有\`\`这样的字符围起来的字符串进行<code></code>的转化（也就是markdown中的行内代码语法）

直接字符替换

起初没多想，不就是字符替换吗？而且这就是个递归问题嘛，遇到第一个\`符号用<code>替换遇到第二个\`符号用</code>替换，然后递归下去，直到找不到\`符号，于是在经过一番调试，抓脑之后，写成了现在的版本：

- 阅读剩余部分 -

  1. 1
  2. 2
  3. 3