前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
return str.replace(camelizeRE, toUpper);
}
function toUpper(_, c) {
return c ? c.toUpperCase() : ‘’;
}
function pascalize(str) {
var camelCase = camelize(str);
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1)
}
对于与一个 Vue 新手,经常对以下示例代码不能正常运行感到非常疑惑:(注意:我们现在讨论的是 vue 1.x 下的情景)
Vue.component(‘MyComponent’, {
template: ‘
})
new Vue({
el: ‘#app’,
template: ‘’
})
如果我们按照模板解析的过程推理,就很好解释了。模板 插入到 DOM 后会变成 。标签 mycomponent 匹配的组件依次为 mycomponent(原标签名)、mycomponent(camelCase形式)、Mycomponent(PascalCase形式),并没有匹配到注册的组件名 MyComponent,所以会报找不到组件 的警告。
命名限制
通过分析组件注册和模板解析的过程,发现 Vue 组件命名限制并没有我们想象得多。大家可以尝试一下各种命名,我试过 <a_=-*%按钮></a_=-*%按钮> 都可正常运行。
但是,并不意味着完全没有限制。由于在模板需要插入到 DOM 中,所以模板中的标签名必须能够被 DOM 正确地解析。
主要有三种情况:
一是完全不合法的标签名,例如 </>;
二是与 HTML 元素重名会产生不确定的行为,例如使用 input 做组件名不会解析到自定义组件,使用 button 在 Chrome 上正常但在 IE 上不正常;
三是与 Vue 保留的 slot、partial、component 重名,因为会优先以本身的意义解析,从而产生非预期的结果。
上述命名限制存在的根本原因,在于模板解析的过程依赖了 DOM。能不能对模板解析过程改进一下,使其不依赖于 DOM 呢?实际上,这正是 Vue 2.0 的主要改进,将模板解析过程使用 Virtual DOM 实现,使得组件命名更加灵活。
Vue 2.x 组件命名机制
==============
组件注册
Vue 2.0 的组件注册过程与 Vue 1.0 基本相同,只是 HTML 标签和 Vue 保留标签范围有些不同:
// 区分大小写
var isHTMLTag = makeMap(
‘html,body,base,head,link,meta,style,title,’ +
‘address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,’ +
‘div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,’ +
‘a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,’ +
‘s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,’ +
‘embed,object,param,source,canvas,script,noscript,del,ins,’ +
‘caption,col,colgroup,table,thead,tbody,td,th,tr,’ +
‘button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,’ +
‘output,progress,select,textarea,’ +
‘details,dialog,menu,menuitem,summary,’ +
‘content,element,shadow,template’
);
// 不区分大小写
var isSVG = makeMap(
‘svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,’ +
‘font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,’ +
‘polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view’,
true
);
var isReservedTag = function (tag) {
return isHTMLTag(tag) || isSVG(tag)
};
// 区分大小写
var isBuiltInTag = makeMap(‘slot,component’, true);
虽然 HTML 元素重名警告的标签数大大增加了,但重要的是重名区分大小写,所以我们可以愉快地使用 Input、Select、Option 等而不用担心重名。这个功劳属于 Vue 2.0 引入的 Virtual DOM。
(关于 vue 2.0 中的新特性,请看:[Vue 2.0 发布了!](
)、[Announcing Vue.js 2.0](
))
文末
逆水行舟不进则退,所以大家要有危机意识。
同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总