misc-2024-09

1. ngc - Angular compiler
2. ngcc - Angular compatible compiler
3. . fems - Flattened ES Module, this is the angular file format for ES Module.
4. AOT - Ahead of Time Compilation
5. JIT - Just in Time Compilation
6. ng add vs npm install - ng add is a schematic that can install packages and run additional code to set up the package. npm install is just installing the package.
7. Angular HttpClient底层是基于HttpXMLRequest和Jsonp的，所以可以使用XMLHttpRequest的所有方法。
8. HostBinding - Angular Decorator that declares a DOM property to bind to. is equivalent to [property]=”expression”.
9. Angular如何处理scss文件的？package.json中并没有安装sass对应的包。难道是Angular CLI内置了sass的编译器，所以不需要安装sass包？
10. :ng-deep和:host如何配合使用
11. Angular中的ViewEncapsulation是如何实现的？有哪三种封装模式？
12. Reload page on same url with different parameters

    export const appConfig: ApplicationConfig = {
      providers: [
        provideRouter(
          appRoutes,
          withRouterConfig({ onSameUrlNavigation: 'reload' })
        ),
      ],
    };

13. 如何使用Native Federation?
14. How to mock service in Unit test(Jest) in Angular? https://stackoverflow.com/questions/79071748/mock-provided-service-in-standalone-component-in-jest-unit-test
15. 这种怎么测试？添加到Jest异步测试中。

    getData() {
      this.dataService.fetchData().subscribe((data: any) => {
        this.products = data;
      });
    }

16. Generate module based component after Angular 17.
    Start from Angular 17, Angular CLI use standalone component by default, however, you can still generate module based application with the following command.

ng g app my-app --standalone=false

17. Why Angular use Decorator instead of Abstract Class for Component and Service?
18. Android No matching client found for package name ‘com.jiyuzhai.caoquanbei’, update package name in file app/src/google-services.json to match your application id.
19. 一个Angular文件内可以定义多个组件。
20. Event loop and browser rendering是如何交互的，也就是Browser rendering是在Event loop哪个阶段进行的？
21. NW.js和Electron类似，都是用来开发跨平台桌面应用的框架。
22. Traceur和Babel都是用来将ES6+代码转换为ES5代码的工具。Traceur是Google开发的，Babel是社区开发的。
23. RxJS 社区中常见的约定：以 $ 结尾的变量通常表示它是一个 Observable（可观察对象）。
24. Virtual Dom的好处是什么？为什么要使用Virtual Dom？
    1. performance - 批量更新dom，而不是每次更新都操作dom。
    2. 可以跨平台 - 这点很重要，多数人回到虚拟DOM，都说性能，但是跨平台也很重要，虚拟DOM相当于一个中间层，可以对接不同平台，比如Android，IOS，Desktop，Web等。
    3. 为什么有些框架不用虚拟DOM还更快？这是因为React/Vue等框架的最小单元就是组件，无法做到控件级别的更新，所以只能更新整个组件，这样就会有性能问题。而有些框架是以控件为最小单元，所以可以做到控件级别的更新，这样就会更快。
25. Angular router可以传参数，用navigationExtras对象中的state.
    1. 在导航时传递参数

    this.router.navigate(['/detail'], { state: { id: 1 } });

    2. 在接收参数的组件中获取参数

    const id = history.state.id; // 不对吧？history 哪来的？

26. GraphQL playground.
27. You should never use function in angular template. - url
28. Directive composition API - search on angular.dev, this is a new feature in angular 15, why this is useful?
29. javascript, generator functions
30. default import syntax in ES6.
31. WeakMap is not iterable, why? TypedArray is not array.
32. Angular BehaviorSubject vs Subject - BehaviorSubject needs an initial value, Subject does not.
33. Angular aot can be enabled/disabled in angular.json file.
34. it.each in Jest - This need real example from project.
35. Why Jest need transformer? Because Jest only understand JavaScript, so it needs transformer to transform other file types to JavaScript. for example ts -> js, tsx/jsx -> js vue/angular -> js, by default Jest use babel-jest as transformer, you can also use angular-jest-preset for Angular project.
36. Proxy.revocable(target, handler).
37. What is cross-site request forgery (CSRF) attack? How to prevent it?
38. Website defacement - what’s this?
39. steps to use web component.
40. Grid layout.
41. HTML page will always show even it contains errors, the console won’t display html error, it only show javascript errors.
42. Html中标签的样式按照LVHA的顺序来写，这样可以避免样式覆盖的问题。
    1. :link - 未访问的链接
    2. :visited - 已访问的链接
    3. :hover - 鼠标悬停
    4. :active - 激活状态
43. css function env - env() 函数可以用来获取环境变量的值，比如获取视口的宽度。
44. css @support operator - @supports 操作符用来检测浏览器是否支持某个CSS属性。
45. video tag: source vs src - What’s the differences?
46. CSS attributes selectors - ^, $, *, ~ - What’s the differences? [attr*=value] vs [attr~=value].
47. compare in javascript:
    1. ==
    2. ===
    3. Object.is
    4. SameValueZero - MDN
48. chunk load error: https://rollbar.com/blog/javascript-chunk-load-error/
49. drag and drop:
    1. https://material.angular.io/cdk/drag-drop/overview
    2. https://github.com/swimlane/ngx-dnd
    3. https://packery.metafizzy.co/
50. What’s the differences between markForCheck() and detectChanges() in Angular? - stackoverflow
51. SASS vs SCSS
    1. SASS - Syntactically Awesome Style Sheets
    2. SCSS - Sassy CSS
    3. SASS is the older syntax, it use indentation to define blocks, SCSS is the newer syntax, it use curl braces to define
52. 如何查看JS编译后的代码？比如变量提升后的代码，Google的V8引擎可以实现这个功能。而Node底层也是V8，所以用Node命令可以查看，但是输出的代码不是很直观。需要进一步研究，参考资料：https://medium.com/@drag13dev/https-medium-com-drag13dev-how-to-get-javascript-bytecode-from-nodejs-7bd396805d30
53. JavaScript中有些时候使用new和不使用new结果完全不同，比如：
    1. Date() vs new Date(): Date()返回的是字符串，new Date()返回的是Date对象。
    2. String() vs new String(): String()返回的是字符串，new String()返回的是String对象。- 在这里， 不加new其实相当于类型转换
    3. Number() vs new Number(): Number()返回的是数字，new Number()返回的是Number对象。- 同上
    4. 注意：对于Array，加不加new，结果一样，都是数组。
54. Harmony Import/Export - 其实就是ES6中的Import/Export，这是ES6的模块化规范，可以用来导入导出模块。参考这里：https://en.wikipedia.org/wiki/ECMAScript_version_history#4th_Edition_(abandoned) 和这里：https://stackoverflow.com/questions/52871611/what-is-harmony-and-what-are-harmony-exports
55. Immutable.js - 一个用来处理不可变数据的库，可以用来提高性能。参考这里：https://immutable-js.com/
56. 性能优化好文 - https://zhuanlan.zhihu.com/p/41292532
57. html中的checkbox/radio button默认的样式由浏览器决定，不是十分好定制化，如果只是更改颜色的话，可以使用accent-color属性，如果要更改大小的话，可能就需要其他手段了。比如这里：https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/69164710#69164710
58. 有哪些样式是CSS改变不了的？
    1. select控件中option的高亮色，就是鼠标划过每个选项时的高亮色，这个一般是蓝色，且不能更改。如果想改，那么需要使用ul/li模拟select控件。
59. 浏览器如何处理双击，双击的时候，浏览器会选取最近的能选到的文本，所以随便打开一个网站，找个空白处双击一下，你会发现有文本被选中了。如何禁止这种行为呢？
    以下方法会禁止所有选中文本的行为，包括用户主动选择的，要找到最近的node，手动设置一下。

function disableTextSelection() {
	document.addEventListener('selectstart', (e) => e.preventDefault());
}