项目_面试_总结

1.1. 模仿华为云页面

1. 配置路由,让不同的页面可以由url进行转发
   1. 路由有一个导出,一个导入
2. 对页面进行分栏布局
3. 在每一个分开的页面上使用devui组件搭建
4. 优化调整每一块的显示
5. 必要的链接关联事件与各个页面

---

1.2. 代码与性能优化

1. 将重复使用的模块如getName()导出成模块解耦
2. 考虑插件不必要时不必激活

• 是否引入了对应依赖,如@angualr
• 是否写了标志性的符号,如<或d-
• 是否时对应的文件,html或ts

值得注意的是,如果是在3.0之前的框架下,这个或许只能考虑读取本地文件¹使用正则表达式检测app.module.ts中是否引入了devui,避免无效启动插件浪费资源;当升级了工具—使用AST来定位元素时,问题就迎刃而解了. 3. 多判定结构使用键值对匹配

1.3. 难点

所有的难点在于不熟悉.

• 不熟悉项目架构
• 不熟悉基础语法(高级语法反而可查)
• 不熟悉API 你永远不知道一个api能帮你完成什么… 不熟悉的结果除了开发难以下手,debug更是令人痛苦. 技术本身的问题需要依靠基础知识:操作系统的调度,网络通信的建立,路由负载的平衡,数据结构的运用等: 业务的问题更多的还是在于需求,如果一开始能对业务需求了然于胸,也就能知道能否实现,性能,工作量和扩展方面都能取得平衡.

1.4. 碰到的最大的困难?

最难的是对已经写好的代码进行解耦. 原本做过OJ,用的thealeaf,前后端不分离; 前端项目在入口的extension.ts中写全部代码,并且在macos上开发,后来迁移到windows上,并且选择解耦,客户端与服务端分离,每个功能导出模块.

说起来主要是都不会,从零开始,这个正则debug的时间最久,本身对业务逻辑不清晰,正则恰好匹配不容易,就特别容易导致反复试错.

1.4.1. 正则表达式翻译

1. const importRegex = /import[\s\S]*from\s'devui/g;

   1. \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]
   2. 注意 Unicode 正则表达式会匹配全角空格符;\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v];
   3. 正则表达式后面的全局标记 g 指定将该表达式应用到输入字符串中能够查找到的尽可能多的匹配 检测:

<script>
var str = "import { Component, OnInit } from '@angular/core';";
var patt1 =  /import[\s\S]*from\s'@angular/core'/g;
document.write(str.match(patt1));
</script>

2. const componentRegex = /<([A-Z][a-zA-Z0-9]*)\b[^<>]*$/g;

   1. [A-Z]大写字母开头,之后匹配所有字母与数字;
   2. 括号内的表示这是一个分组,将括号内的作为一个整体;
   3. \b指示前面为单词的开始或结束(其实代表边界条件);
      1. 123结合代表提取出所有的大写字母开头的单词
   4. [^<>]*$指非以0个或多个<>结尾的 检测:

<script>i
var str = "<d-button bsStyle=\"primary\">确认</d-button>";
//   var patt1 = /((d-[a-zA-Z0-9]*)\b)+(?=>)/g;// 这个是一段提取啊,在悬浮提示的静态提取中或许有用?
var patt1 = /<(d-[a-zA-Z0-9-]*)\b[^<>]*$/g;
document.write(str.match(patt1));
// console.log(str.match(patt1));
</script>

3. /\/package.json$/.test(fileName)

上面这个正则表达式在mac里运行是true,但是在win里运行就是false,这难道就是传说中的不可移植?

2. 问面试官的问题

关注它们的业务 关注它们的技术栈

Footnotes

1. JavaScript进阶学习（三）—— 基于html5 File API的文件操作 ↩