解释 css 各类定位,absolute 相对于谁定位;
-> position: relative/absolute/fixed/static/inherit/initial/unset/sticky
-> 相对于最近一层position非static的父元素
-> relative不会脱离文档流javascript
iframe 中的 fixed 定位和什么有关,怎么固定浏览器窗口
-> iframe窗口非浏览器窗口,经过postmessage通讯将top页面的scrolltop传递给iframe,iframe内部经过监听通信事件动态设置元素的定css
transfrom 的主要用法
-> transform用来向元素应用各类2D和3D转换,该属性容许咱们对元素进行旋转、缩放、移动或倾斜等操做,有translate, scale, rotate, skew,html
flex 盒子布局
flex 布局详解前端
// 1. padding 补偿 .parent { width: 100%; overflow: hidden; } .left, right { float: left; padding-bottom:9999px; margin-bottom:-9999px; } // 2. flex 布局 .parent{ display: flex; }
css 盒模型;
-> 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin -> box-sizing:content-box;
-> 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin -> box-sizing:border-box;;vue
重绘和回流的区别
-> 重绘(repaint):当render tree中的一些元素须要更新属性,单这些属性只会影响元素的外观,风格,而不会影响到元素的布局,此类的页面渲染叫做页面重绘。
-> 回流(reflow):当render tree中的一部分(或所有)由于元素的规模尺寸,布局,隐藏等改变而引发的页面从新渲染。
-> 回流必将引发重绘,而重绘不必定会引发回流java
如何解决外边距重合问题;
-> 外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一块儿而造成一个单一边界
外层元素添加padding;
外层元素 overflow:hidden;
外层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute;
内层元素 加float:left;或display:inline-block;node
清除浮动
一、父级div定义 overflow: auto;
;
二、.clearfixreact
// 1. float+margin(一侧定宽,一侧自动) // 2. position+margin(一侧定宽,一侧自动) // 3. float+负margin(一侧定宽,一侧自动) .right { float:left; width: 100%; } .right .cont { margin-left:200px; } .left { float: left; width: 200px; margin-left: -100%; }
// 1. float+margin(两侧定宽,中间自适应) // 2. position+margin(两侧定宽,中间自适应) // 3. float+负margin(两侧定宽,中间自适应) .m-box { float:left; width: 100%; } .m-box .center { margin:0 200px; } .left,.right { float: left; width: 200px; margin-left: -100%; } .right { margin-left: -200px; }
// 一、绝对定位+margin:auto .box { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } // 二、绝对定位+transform反向偏移 .box { margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // 三、display: flex-box .box { display: flex; align-items: center; justify-content: center; }
.box { width: 100%; height: 0; padding-top: 75%; }
.ig{ -webkit-animation:circle 1.5s infinite linear; } @-webkit-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
.triangle{ width: 0; height:0; border: 10px solid transparent; border-top-color: red; }
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
(1) 在js脚本中把对应的方法名,参数等写成一个符合协议的uri,而且经过window.prompt方法发送给java层。jquery
(2) 在java层的onJsPrompt方法中接受到对应的message以后,经过JsCallJava类进行具体的解析。webpack
(3) 在JsCallJava类中,咱们解析获得对应的方法名,参数等信息,而且在map中查找出对应的类的方法。
// 时间复杂度(nlogn), 空间复杂度O(n) var quickSort = function(arr) { if(arr.length<=1) return arr; var left = [], right = [], point = Math.floor(arr.length/2); var middle = arr.splice(point, 1)[0]; for(var i = 0; i < arr.length; i++){ arr[i] < middle ? left.push(arr[i]) : right.push(arr[i]) ; } return quickSort(left).concat([middle], quickSort(right)); }
a.forEach(function(value, index){ b.indexOf(value) === -1 && b.push(value); }) a.map(function(value, index){ b.indexOf(value) === -1 && b.push(value); }) var c; c = a.filter(function(value, index, array){ return index === array.indexOf(value); }) function unique(arr) { var ret = []; var tmp = {}; for(var i = 0, len = arr.length; i < len; i++){ if(!tmp[typeof arr[i] + arr[i]]) { tmp[typeof arr[i] + arr[i]] = true; ret.push(arr[i]); } } return ret; }
一、 var myNewArray = [].concat.apply([], myArray); 二、 var myNewArray4 = [].concat(...myArray); 三、 var myNewArray = myArray.reduce(function(prev, curr) { return prev.concat(curr); });
// 参照 vue 源码实现 var EventEmiter = function (){ this._events = {}; }; EventEmiter.prototype.on = function (event, cb){ if (Array.isArray(event)){ for (let i = 0, l = event.length; i < l; i++){ this.on(event[i], cb); } } else { (this._events[event] || (this._events[event] = [])).push(cb); } return this; }; EventEmiter.prototype.once = function (event, cb){ function on () { this.off(event, cb); cb.apply(this, arguments); } on.fn = cb; this.on(event, on); return this; }; EventEmiter.prototype.off = function (event, cb){ if (!arguments.length){ this._events = Object.create(null); return this; } if (Array.isArray(event)){ for (let i = 0, l = event.length; i < l; i++){ this.off(event[i],cb); } return this; } if (!cb){ this._events[event] = null; return this; } if (cb){ let cbs = this._events[event]; let i = cbs.length; while(i--){ if (cb === cbs[i] || cb === cbs[i].fn){ cbs.splice(i, 1); break; } } return this; } }; EventEmiter.prototype.emit = function (event){ let cbs = this._events[event]; let args = Array.prototype.slice.call(arguments, 1); if (cbs){ for (let i = 0, l = cbs.length; i < l; i++){ cbs[i].apply(this,args); } } };
function parseUrl(url){ var result = []; var query = url.split("?")[1]; var queryArr = query.split("&"); queryArr.forEach(function(item){ var obj = {}; var value = item.split("=")[1]; var key = item.split("=")[0]; obj[key] = value; result.push(obj); }); return result; }
// 使用的是选择排序 const versionSort = version => { const temp = version.map(v => v.split('.')); for (let i = 0; i < temp.length; i++) { let minIndex = i; for (let j = i; j < temp.length; j++) { for (let k = 0; k < temp[j].length; k++) { const current = +temp[j][k], min = +temp[minIndex][k]; if (current < min) { minIndex = j; } // 只要不等,就马上结束最内层遍历! if (current !== min) { break } } } [temp[i], temp[minIndex]] = [temp[minIndex], temp[i]]; } return temp.map(v = > v.join('.')) };
随意给定一个无序的、不重复的数组arr,任意抽取n个数,相加和为sum,也可能无解,请写出该函数。
function debounce(fn, interval, immediate) { let timer; return function() { const context = this; const args = arguments; timer && clearTimeout(timer); if(immediate) { var callNow = !timer; timer = setTimeout(function() { timer = null; }, interval); callNow && fn.apply(context, args); } else { timer = setTimeout(function() { fn.apply(context, args); }, interval); } } }
Function.prototype.bind = function(ctx) { var self = this; var args = Array.prototype.slice.call(arguments, 1); var F = function() {}; var fBind = function() { var argsBind = Array.prototype.slice.call(arguments); return self.apply(this instanceof F ? this : ctx, args.concat(argsBind)); } F.prototype = this.prototype; fBind.prototype = new F(); return fBind; }
promise封装;
简单的 Promise
function parseInt(s, radix = 10) { if (typeof s !== 'string') { return NaN; } if (typeof radix !== 'number' || radix < 2 || radix > 36) { return NaN; } let result = 0; for (let i = 0; i < s.length; i += 1) { let c = s.charCodeAt(i); // 小写大写字母转换为数字 if (c >= 97) { c -= 87; // - 'a' + 10 } else if (c >= 65) { c -= 55; // - 'A' + 10 } else { c -= 48; // - '0' } // 若是字母转化后的值大于进制数,则跳出循环返回以前的结果 if (c >= radix) { if (i === 0) { return NaN; } break; } // 结果累加,和进制相关 result = (result * radix) + c; } return result; }
function comma(num) { var source = String(num).split("."); source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,"); return source.join("."); }
请使用数组的reduce方法实现数组的map方法;
function sumStrings(a,b) { while(a.length < b.length){ a = "0" + a; } while(b.length < a.length){ b = "0" + b; } var addOne = 0; var result = []; for(var i=a.length-1;i>=0;i--){ var c1 = a.charAt(i) - 0; var c2 = b.charAt(i) - 0; var sum = c1 + c2 + addOne; if(sum > 9){ result.unshift(sum - 10); addOne = 1; } else{ result.unshift(sum); addOne = 0; } } if(addOne){ result.unshift(addOne); } if(!result[0]){ result.splice(0,1); } return result.join(""); }
a instanceof Array; a.constructor === Array; a.__proto__ === Array.prototype; Array.prototype.isPrototypeOf(a); // isProtoTypeOf() Object.getPrototypeOf(a) === Array.prototype; // Object.getPrototypeOf() Object.prototype.toString.call(a) === '[object Array]'; // 首推 -> 前几种继承会扰乱, iframe 下 instance 失效 Array.isArray() // polyfill 就是调用字符串判断法 var argsArray = Array.prototype.slice.call(arguments);
xss和csrf攻击;
-> xss 跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变页面的显示,或则窃取网站 cookie,预防方法:不相信用户的全部操做,对用户输入进行一个转义,不容许 js 对 cookie 的读写
-> csrf 跨站请求伪造,以你的名义,发送恶意请求,经过 cookie 加参数等形式过滤
咱们无法完全杜绝攻击,只能提升攻击门槛
cookie的有哪些安全的设置;