记录1.27前端题笔试题

242 阅读3分钟

修改commit的message

一、对于已经提交过的commit,SCM一般不建议去修改,如果只是为了修正轻微的错误或进行清理,通常建议在未来的commit中进行纠正修改。

二、对于未提交的commit: 1、最近一条的message可以在终端中用 git commit --amend命令,打开vim编辑器修改 2、往期的某一条:

  • 假设要修改倒数第五条, 运行git log命令,记录好倒数第六条的哈希值,假设为the-former-hash
  • 运行命令git rebase -i the-former-hash,会展示一个commit的列表
  • 在列表中将需要修改的那次提交的message之前额pick改为r,且保存后退出
  • git会重新应用commit,并会自动打开vim,让你修改刚刚标记了r的message
  • 修改完后保存退出,输入git log可以按到修改结果

更换commit的顺序

对于未提交的commit,假设要修改倒数第三和第四条commit的顺序:

一、运行git log命令,记录好倒数第五条的哈希值,假设为the-former-hash 二、运行命令git rebase -i the-former-hash,会展示一个commit的列表 三、在打开的vim编辑器中,手动更换第三和第四条commit的顺序 四、修改完后保存退出,输入git log可以按到修改结果

ts工具类型Partial实现

  type Partial<T> = {
    [P in keyof T]?: T[P];
  };

倒计时hook useCountDown实现

const useCountDown = (initialTime:number) => {
  // 设置初始时间
  const [timeLeft, setTimeLeft] = useState(initialTime);

  useEffect(() => {
    // 如果时间已经结束,就不做任何事
    if (timeLeft === 0) return;

    // 每秒减少1
    const interval = setInterval(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);

    // 清理interval
    return () => clearInterval(interval);
  }, [timeLeft]);

  // 提供重置时间的功能
  const resetTime = () => {
    setTimeLeft(initialTime);
  };

  return [timeLeft, resetTime];
};

UI实现

//已知后端返回数据类型为 
{
    id:number;
    name:string;
    netWorth?:number;
}
//为可选字段netWorth设计UI,有数据时千分位显示数字,无数据时显示"-"

const placeHolder = "-";

export default () => {
    const {netWorth} = useUser();

    const formatNetWorth = (netWorth?: number): string => {
        // 如果netWorth有值,则格式化;否则返回占位符
        return netWorth !== undefined ? netWorth.toLocaleString() : placeholder;
    };

    return <div>
        {formerNetWorth(netWorth)}
    </div>
}

ESLint用于排序import语句的规则

sort-imports 之前不太清楚,刚了解,这是官方文档

CCS隔离方案的偏好

本人已知的:

  • CSS Modules:用过的,也是之前的项目中使用的是对类名进行哈希,达到CSS局部作用域的效果 ;

  • BEM:和CSS Modules相同,本质上也是通过命名方案或者约定实现隔离。BEM将类名分为BlockElementModifer三部分,如:

<ul class="main__selector">
    <li class="selector__option">0</li>
    <li class="selector__option selector__option--selected">1</li>
</ul>
  • Shadow DOM:浏览器原生支持的DOMCSS以及JS的封装功能,真正意义上的CSS隔离

  • css-in-js: 在Js中写Css,典型的有如React Native的StyleSheet.create

因为之前的项目用的都是CSS Modules,所以我CSS Modules用的最多。 但论最喜欢哪个的话,应该是css-in-js。或许是用React多了,受其范式的影响,我不太感冒Vue的那种html,css以及js分开的写法,而是更喜欢js梭哈。 不论是html还是css都可以用js写的感觉真的很不错。