你好! 这是我第一次使用 CSDN 来发表文章。如果您阅读满意,不妨/关注/收藏/分享/评论/,你追我,如果你,追到我,我就让你嘿嘿嘿…
基础知识点
1.水平垂直居中
1.子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50%;margin-left:-50%;
2.子绝父相,子盒子设置绝对定位,设置 left & top & right & bottom为0;margin: auto;
3.伸缩盒子,父元素设置flex;justify-content: center;align-items: center;
4.利用transform属性,需要设置子绝父相,设置top:50%;left:50%;transform:translate(-50%, -50%);
2.圣杯布局
1.中间盒子设置宽度100%,左右margin,留出左右盒子的位置
2.左右盒子在通过定位至左右
3.兼容性问题
1.标签样式在不同的浏览器各自的margin 和padding差异较大, 解决方案:css里 *{margin:0;padding:0;}
2.当在a标签中嵌套img标签时,在某些浏览器中img会有蓝色边框;解决方案:给img添加border:0;或者是border:none;
3.图片默认有间;隙解决方案:1)给img标签添加左浮动float:left;2)给img标签添加display:block。
4.清除浮动的方法?(重点)
1.父级div定义height
2.结尾处家空div标签clear:both
3.父级div定义 伪类:after和zoom
4.父级div定义 overflow:hidden
5.前端优化技巧
1.压缩css,js,图片
2.减少http请求次数,合并css,js 合并图片(雪碧图)
3.使用CDN
4.减少dom元素数量
5.图片懒加载
6.静态资源另外用无cookie得域名
7.减少dom的访问(缓存dom)
8.巧用事件委托
9.样式表置顶,脚本置低
6.this指向问题
一般来说,谁调用,this就指向谁,特殊情况除外,普通函数调用,此时 this 指向 window,定时器函数, 此时 this 指向 window
更改this指向的三个方法
1.call( )方法调用一个函数,其具有一个指定的this值
fn.call(改变其this指向, [指定的参数] ) 如果指定了null或者undefired,则内部this指向window
应用场景:①借用构造函数
②借用其他对象的方法
2.apply( )方法调用一个函数,其具有一个指定的this值,作为一个数组提供的参数
fn.apply(var1, var2) 应用:把数组展开
应用场景:把数组展开,传递给调用的方法
3.bind 不会调用函数,会返回一个新的函数
应用场景:①改变定时器内部的this,②改变事件处理函数的this
7、json字符串转化方法
JSON.parse(str); //由JSON字符串转换为JSON对象
JSON.stringify(obj); //将JSON对象转化为JSON字符
进阶知识点
1、设置千分符
function farmat(mun) {
if (mun === null) return;
var m = parseInt(mun).toString();
var len = m.length;
if (len <= 3) return m;
var n = len % 3;
if (n > 0) {
return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",")
} else {
return m.slice(n,len).match(/\d{3}/g).join(",")
}
}
var a =farmat(1000000)
console.log(a);
2、只能输入数字和小数点
function clearNoNum(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
obj.value= parseFloat(obj.value);
}
}
3、统计每一个字符串出现的次数
字符串
//字符串
var strs = "asdasdadd";
function getmaxstr(str){
if(str.length == 1){return str;}
var newarr = [];
for(var i = 0 ; ss= str.length, i<ss; i++ ){
if(!newarr[str.charAt(i)]){
newarr[str.charAt(i)] = 1;
}else{
newarr[str.charAt(i)] +=1;
}
}
console.log(newarr);
var maxkey='';
var maxvalue=1;//设定一个值
for(var k in newarr){
if(newarr[k]> maxvalue){//根据这个值做判读 将数组中的每个元素 与这个值做比较! 如果大于他,那么将住宿
maxvalue = newarr[k];//出现的次数
maxkey = k;//次数最多的 字母
}
}
console.log(maxkey);
return maxkey;
}
getmaxstr(strs);
数组
//数组
var arr =["a","b","c","c","c","d"];
Array.prototype.diaohuan=function(arr){
var newarr=[];
for(var i = 0; i<this.length; i++){
if(!newarr[this[i]] ){
newarr[this[i]] = 1;
}else{
newarr[this[i]] +=1;
}
}
console.log(newarr);
var maxkey = 1;
var maxvalue ="";
for (var k in newarr){
if(newarr[k] > 1){
maxvalue =newarr[k];
maxkey = k;
}
}
return maxkey;
console.log(maxvalue);
}
alert(arr.diaohuan());
高难度知识点
怎样引入一个第三方的包?require与import的区别:
遵循规范:
require 是 AMD规范引入方式
import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法
调用时间:
require是运行时调用,所以require理论上可以运用在代码的任何地方
import是编译时调用,所以必须放在文件开头
本质:
require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的
结果赋值给某个变量
import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持
ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
在那调用第三方支付接口?为什么?
前端调接口和后端调接口各有什么区别,优势与特点
一般支付接口都是由后端和支付单位联系调取的,前端调接口容易被劫持,不安全.