组件开发原则：
当你想集百家之长时，这本身就是最大的短，做出来会是四不像，没人用。好的技术产品与好的用户产品一样，永远不要想着去满足所有人的需求。
灵魂拷问：
1、最有挑战性的一件事是什么
2、最有成就感的一件事是什么
3、最难沟通或者最难处理的一件事是什么
下面是一些你可以问的典型问题。
问题一：你们为什么要招聘这个职位？
Q1: Why are you currently recruiting for this position?
这个问题会使得面试官开始谈论当前的项目，或者谈论前一位离职人员。无论哪种情况，都会让你了解，一些与你最密切相关的公司情况。
问题二：你们的新员工多吗？
Q2: Do you have many new staffs?
这个问题起一个过渡作用，使得谈话导向公司内部的情况。但是，它本身也能说明一些问题。如果公司成立已经超过四年，又没有新项目，但是新员工却很多，这往往说明公司文化不是很健康。
问题三：你们公司（团队）目前面临的最大挑战是什么？
Q3: What are the biggest challenges your team are facing right now?
如果面试官开始谈论一些具体的技术问题，这很好；如果他的回答是项目时间紧迫，或者需要更多的资金，那你就要小心一点了，公司管理上面可能有问题。
问题四：什么新技术（编程语言）是你们未来希望采用的？
Q4: What technologies/languages would you like to see your team adapt to that aren’t currently being utilised?
如果你申请的是技术职位，面试官恰巧又是技术负责人，那么这个问题将会非常合适。你会对公司的技术路线有所了解和准备，一旦入职，就能更好地适应公司的需要。
问题五：在业务方面，有没有什么地方是你们不满意的，未来想要改进的？
Q5: Few companies, if any, are 100% satisfied with the way their business is operating. If you could simply flick a switch to fix it, what one thing would you change?
很少有公司，会百分之百满意自身的现状，即使那些状况很良好的公司也是如此。这个问题可以让你对公司管理层的关注重点和担忧之处，有所了解。
问题六：我申请的这个职位，对公司的业务有何影响？
Q6: If you struggle to fill the position I have applied for, what impact would that have on the business?
这个问题会让你了解自己在公司的角色，以及你的岗位对公司是否重要。
get跨域请求穷举法：
对于GET请求非常容易了，img标签链接不受浏览器的跨域限制，因此可以直接以img的形式发起请求；
JS:
用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
var arr = new Array(5);//包含五个empty的数组，不支持forEach方法var get2to32 = () => Math.floor(Math.random()*31+2)var i = 0;var pushData = () => {var data = get2to32();if(!arr.includes(data)){arr[i] = data;i = i+1;}if(i === 5){return;}return pushData();}pushData();
var arr = [];function randomNum(){return Math.floor(Math.random() * 31 + 2)}function arrFunc(arr, num){if(arr.length >= 5) return arr;if(!arr.includes(num)){arr.push(num);}return arrFunc(arr, randomNum())}arrFunc(arr, randomNum())
知识点：递归、随机数
难点：1颗星
这道题主要是想考递归的用法，同时顺带考了生成指定范围的随机数方法。
QAMD、CMD和CommonJS的理解
A
AMD,CMD和CommonJs是es6之前推出的模块化方案。
- CommonJs用在服务端
- AMD,CMD用在浏览器环境
一、CommonJs是由node推广使用的。
导出module.exports，导入require。因为所有的模块都存放在服务器本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间.
二、AMD是RequireJS在推广过程中对模块定义的规范化,推崇依赖前置、提前执行,
它主要是异步加载模块，模块的加载不影响后面语句的执行；所有依赖这些模块的语句，都定义到一个回调函数中，等依赖模块全部加载完成后，执行回调函数。
define(['回调函数的依赖模块'], function() {// 回调函数，依赖模块的语句...})define(['./a', './b'], function(a, b) { // 依赖刚开始就要去加载，加载依赖是异步加载// a b 依赖加载完成后，才去执行回调中语句a.doSomething()b.doSomething()...})
三、CMD是SeaJS在推广过程中对模块定义的规范化,推崇依赖就近、延迟执行。即在用到依赖的地方，才去加载依赖。
define(function(require, exports, module) {var a = require('./a') // 依赖等用的时候才去加载，加载依赖是同步加载a.doSomething()var b = require('./b')b.doSomething()// ...})
QPlugin与Preset执行顺序
A
可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。
先执行完所有Plugin，再执行Preset。
多个Plugin，按照声明次序顺序执行。
多个Preset，按照声明次序逆序执行。
比如.babelrc配置如下，那么执行的顺序为：
Plugin：transform-react-jsx、transform-async-to-generator
Preset：es2016、es2015
{
“plugins”: [
“transform-react-jsx”,
“transform-async-to-generator”
],
“presets”: [
“es2015”,
“es2016”
]
}
Q
A
Q
A
Q
A
DOM:
QstopPropagation()和preventDefault()这两个方法有什么区别
A
stopPropagation 是阻止事件冒泡，即冒泡事件到当前元素处就终止了，不会继续向上级元素传递。
preventDefault 是阻止默认事件，例如：在 a 标签的 click 事件中执行了该方法，则不会进行默认的链接跳转。
Qa标签属性rel=”noopener”有什么作用:
A
当我们使用targer=_blank打开一个新的标签页时, 新页面的window对象上有一个属性 opener, 它指向的是前一个页面的 window 对象, 因此, 后一个页面就获得了前一个页面的控制权. 甚至在跨域的情况下也可以生效, 你可以使用 window.opener.location.replace更改前一个页面的url.使用 rel=noopener可以把window.opener置为空, 老一些的浏览器可以使用 rel=noreferer.
Q主框架如何与iframe通信？如何解决跨域？
A
1.主域相同，子域不同，可以设置在两个页面都设置document.domain = ‘xxx.com’然后,两个文档就可以进行交互。
2.主域和子域都不同，则可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
接受消息: 监听message事件
QHTML5如何唤醒APP
A
URL Scheme：最常见
Intent: // ：Android
Universal Link ： iOS， 通过传统的 HTTP 链接即可打开 APP
唤醒途径
iframe的src
a标签的src
window.location
CSS：
Q请说说颜色中#F00的每一位分别表示什么？为什么会有三位和六位的表示呢？
A
#AABBCC类型的六位颜色表示,即可缩写为#ABC,
颜色三原色模式中,为红绿蓝,用十六进制模式表示,,故有16个字符用来表示等级,0-9,A-F等级,逐渐增高, #F00表示最高等级的红色,最低等级的绿色和蓝色
Q如何使用CSS实现段落首字母或首字放大效果:
A
div::first-letter {font-size: 24px;font-weight: bold;}
Q解释下为什么css的reset不建议直接这么写：{ margin:0; padding:0;}？
A
1.为通配符，使用通配符，即全局范围遍历，耗费浏览器效率，增大负荷；
2.会影响后面的设置的部分属性无效，例如：table设置的cellpadding，cellspacing。
Q怎样去除图片自带的边距
A
01:图片是行级标签的情况下, 可以考虑在父级容器设置一个font-size:0消;除图片的边距；
02:vertical-align: middle;
03: 不考虑副作用的话，可以直接设置图片display:block或则float:left|right
Qcss的预处理器和后处理器都有哪些
A
目前最主流的 CSS 预处理器：Sass、LESS、Stylus 。
优缺点
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
后处理器：Rework 、PostCSS、
优缺点
优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限.
Q浏览器是怎样解析CSS选择器的
A
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。
Q伪类和伪元素的区别
A
- 伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
- 伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
伪类
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:first-of-type 匹配属于其父元素的第一个特定类型的子元素。
:last-of-type 匹配属于其父元素的最后一个特定类型的子元素。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
伪元素
::before 在被选元素之前插入内容。需要指定content属性来插入内容。
::after 在被选元素之后插入内容。需要指定content属性来插入内容。
::first-letter 匹配元素中文本的首字母。
::first-line 匹配元素中第一行的文本(只能在块元素中使用)。
::selection 匹配被用户选中的部分。
Q
A
Q
A
正则表达式：
Q/\bb\b/是匹配什么字符串规则
A
‘b’、’ b’、’b ‘、’a b c’
Q有正则表达式:/\bb\b/,现在需要动态拼接它，应该如何实现，new RegExp(“\b” + “b” + “\b”)是这样子吗？
A
new RegExp(“\b” + “b” + “\b”);
Q用原生js实现类似getElementsByClassName的方法，不能使用querySelectorAll
A
//方法一function getElementsByClassName(className)const tags = document.getElementsByTagName('*');const tempTags = [];for(let i=0, len = tags.length; i< len; i++){let tag = tags[i];tag.classList.contains(className) && tempTags.push(tag)}return tempTags;}//方法二：function getElementsByClassName(className){const tags = document.getElementsByTagName('*');const reg = new RegExp("\\b" + className + "\\b");const tempTags = [];for(let i=0, len = tags.length; i< len; i++){let tag = tags[i];reg.test(tag.className) && tempTags.push(tag)}return tempTags;}
classList兼容性:https://www.caniuse.com/#search=classList
className兼容性:https://www.caniuse.com/#search=className
软技能：
你最希望css拥有什么样的特性？（目前没有的）
你有给自己制定过计划吗？怎么去落实的？
若有收获，就点个赞吧
0 人点赞
