javascript
有一个全局变量 a,有一个全局函数 b,实现一个方法bindData,执行后,a的任何赋值都会触发b的执行。
vue简单的双向绑定原理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function bindData(target, event){
for(var key in target) {
if(target.hasOwnProperty(key)) {
(function(){
var v = target[key];
Object.defineProperty(target, key, {
get: function() {
return v;
},
set: function(_value) {
v = _value;
event.call(this)
}
})
})()
}
}
}
- 将数字转换成中文大写的表示,处理到万级别,例如 12345 -> 一万二千三百四十五 CodePen
- react生命周期 参考答案
- 闭包
- v8引擎区别浏览器做的优化
- 编译型和解释型语言的区别
- 跟缓存相关的配置
- 如何提高webpack打包的速度
- nginx 转发的配置
- node 的一些特点
- node对于字节流的控制
- 如何处理js的错误:eslint。
- node垃圾回收
- js内存溢出
- if([]) 是true,但是[]==false,因为任何类型跟bool比较都会先转化为数值型。[]是object ,if的时候不是false。
()=>{} 箭头函数的区别
- 更短的语法糖
- 不绑定this,没有自己的this
- 没有arguments
- 不可以作为构造函数,不能用new
- 没有prototype
实现一个function 输入字符串,验证其字符串是合法的html标签,只要开闭合理就可以。使用栈来解决。
- setTimeout(function(){},0)和process.nextTick()的区别
- 红黑树
- promise,原生写一个
- 取得body下所有元素的tagname,并去重输出。
- 前端国际化
- react组件,如何更换主题
- setImmediate
- flex布局 ie10 11不支持
- css选择器优先级:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
- 事件驱动
- viewport有几种
- prerender
- []==[] false 基本数据类型是值的比较,引用类型是地址的比较。
proto和prototype
1
2
3
4Object.prototype.__proto__=null
Object.__proto__=== Function.prototype
Function.__proto__===Function.prototype
Function.__proto__.__proto__=== Object.prototype事件过程 事件捕获-》目标-》事件冒泡
阻止冒泡方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 阻止冒泡
stopPropagation() //chrome
event.cancelBubble() //IE
// 阻止默认事件
preventDefault() //chrome
event.returnValue() //IE
//JQuery 提供了两种方式来阻止事件冒泡。
$("#div1").mousedown(function(event){
event.stopPropagation();
});
$("#div1").mousedown(function(event){
return false;
});断点续传,断点下载
- array的基本方法
- arguments转化为真正的数组Array.prototype.slice.call(arguments)
js数组去重
1
2
3
4
5
6
7
8
9
10
11
12
13
14//for循环时,每次取出一个元素与对象///进行对比,如果这个元素不重复,则把//它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());深拷贝 CodePen
1
2
3
4
5
6
7var clone = function(v) {
var o = v.constructor === Array ? [] : {};
for (var i in v) {
o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
}
return o;
}闭包
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
- 应用场景 设置私有变量和方法
- 不适合场景 返回闭包的函数是个非常大的函数
- 闭包的缺点 常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
为什么会出现闭包这种东西,解决了什么问题
受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念。
交换两个变量的值,但不产生新的变量
1
2
3
4
5var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;函数防抖和函数节流
函数防抖 频繁触发的情况下,只有足够的空闲时间,才执行代码一次
1
2
3
4
5
6
7var timer = false
document.getElementById("debounce").onScroll = function() {
clearTimeout(timer)
timer = setTimeout(function(){
console.log(‘函数防抖’)
}, 300)
}函数节流 声明一个变量当标志位,记录当前代码是否在执行
1
2
3
4
5
6
7
8
9
10
11var canScroll = true;
document.getElementById('throttle').onScroll = function() {
if (!canScroll) {
return;
}
canScroll = false;
setTimeout(function(){
console.log('函数节流');
canScroll = true;
},300)
}
js继承
理解JS的6种继承方式call 和apply
详解call和applynode延迟函数执行顺序是什么?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17setTimeout(()=>{
console.log(3)
},0);
setImmediate(()=>{
console.log(2)
});
process.nextTick(()=>{
console.log(4)
})
// 4 2 3
以上代码的执行顺序为:
1. process.nextTick
2. setImmediate
3. setTimeout严格模式: “use strict”
- 数据类型: 6种,Undefined,Null,Boolean,Number,String,Object.注意数据不是哈,数组被归于object
- 使用typeof操作符,可能返回以下六种结果:undefined,boolean,string,number,object,function.
- typeof null=object
- 函数不是一种数据类型。
- 虽然null==undefined ,但null指的是一个空的对象引用。undefined 表明变量没有被赋值或者未定义。
- 永远不要测试某个特定的浮点数
- NaN是一种数值,NaN与任何数都不等,包括他本身。
- Number() 可以转换任何数据类型,parseInt()和parseFloat()只能字符串转数值
- Number(true)=1,Number(false)=0,Number(null)=0,Number(“”)=0
- 其他类型转化为字符串,.toString()方法,String(),区别在于null和undefined没有toSting()方法,必须要用String()
- 判断一个值是哪种基本类型使用typeof ,是哪种引用类型用instanceof
- 让js启动变量的回收,var a=121,a=null
JavaScript的新标准
- await
- symbol
- async
- reflect
- proxy
webpack
- webpack babel配置中的stage-0是什么意思?
- webpack 打包构建速度优化
- 缩小文件的搜索范围
- 私用DllPlugin减少基础模块的编译次数
- 使用happyPack开启多进程Loader转换
- 使用ParallelUglifyPlugin开启多进程压缩JS 文件
- webpack 开发体验优化
- 监听文件修改并自动刷新
- 开启模块热替换HMR
- 优化输出质量,减小输出代码体积
- 区分环境,减小生产环境代码体积
- 压缩JS ES CSS
- 使用Tree Shaking 踢出JS死代码
- 优化输出质量,加速网络请求
- CDN加速
- HTTP2
- 公共代码提取
- 按需加载
- 提升代码运行效率
- 使用Prepack提前求值
- 使用Scope Hoisting,作用域提升
- 使用输出分析工具
- 官方工具Webpack Analyse
- webpack-bundle-analyzer
- 其他TIPs
- use: [‘babel-loader?cacheDirectory’],缓存babel编译结果结果。
- profile:true 展示webpack构建性能信息
- cache:true 通过缓存提升构建速度
- 使用url-loader将小图片用base64加到css或者js中。
- 通过imagemin-webpack-plugin压缩图片,通过webpack-spritesmith制作雪碧图
- 开发环境下将devtool设置为cheap-module-eval-source-map,因为生成这种source map的速度最快,能加速构建。在生产环境下将devtool设置为hidden-source-map
模块化
- AMD requirejs 依赖前置
- CMD seajs 就近依赖
- commonjs node
- ES6模块化:export import
前端安全
- XSS(跨站脚本攻击)
- CSRF跨站请求伪造
伪造成合法用户发起请求。一个网站中有一个a标签href是删除用户信息的url,如果是post可以模拟表单提交。
- HTTP劫持,
- 界面操作劫持,
- 错误的内容推断(使用X-Content-Type-OptionsHTTP:nosniff)
- 保护cookies httpOnly为true,阻止js调用该cookies属性。
vue
- vue 更新机制,双向绑定。
- react 更新机制,diff算法。
- 事件机制 emit和 on实现。
React
- React高阶组件
HTML5离线存储和本地缓存
- 离线存储
- localStorage 和 sessionStorage方法
不同域下就算key相同取不到的值也不同,如localhost和127.0.0.11
2
3
4localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
css
实现图片边框和渐变边框
1
border-image:url() linear-gradient(red, yellow) 10;
多背景设置
1
2
3background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));文字省略样式:
1
2
3text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;文字波浪下划线
1
text-decoration:green wavy underline
清除浮动方法 CodePen
等高布局 CodePen
- 最完美的解决方式:等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的,所以就成功的完成了一个障眼法。
盒子模型 box-sizing
1
2content-box = width (content的宽)
border-box = width + border + padding垂直水平居中 CodePen
- 自适应居中 CodePen
- css3实现正方形
css3新特性(举几个例子)
Text-decoration:文字和边界可以填充颜色
1
2
3Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度border-radius和rgba透明度支持
Gradient 渐变效果
1
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
阴影(Shadow)和反射(Reflect)效果
- flex布局
- Transitions, Transforms 和 Animation CodenPen
- css 预编译
- less
- stylus
- post css
- css module
正则表达式
写一个简单的模板引擎(字符串和正则)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var tem="我爱你,${0},${1}"
var a="小吴"
var b="小刘"
function tempFunc(template){
var reps=template.match(/\${[\d]+}/g)
for(let i=0;i<reps.length;i++){
var ar=arguments[i+1]
if(ar){
template=template.replace(reps[i],ar)
}else{
template=template.replace(reps[i],"")
}
}
return template
}
var t=tempFunc(tem,a,b)12345678.22 转化为 12,345,678.22
1
'1234567891'.replace(/(\d+?)(?=(\d{3})+$)/g, '$1,')
12,345,678.20 转化为 12345678.20
new Number(string.replace(/[^0-9.]/g,''))
网络
- DNS
- dig www.baidu.com 可以查看DNS解析过程
- 域名总长度则不能超过253个字符
- ICANN 管理 WHOIS 数据库
- http1和http2区别
- 新的二进制格式
- 多路复用
- header压缩
- 服务端推送:server push
- https 的过程和服务器搭建
- http 的无状态
web 新技术
- Web Assembly
- PWA
- Houdini:自定义css属性
- web socket
- service work
项目经验
- 选择你最引以为傲的项目,细细聊。