前端技巧与最佳实践-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

2017.08.28
1.给js静态文件加随机数，清除缓存。

2017.8.29
1.在网页中应该用奇数还是偶数的字体，为什么？
偶数字体相对来说更容易和web设计的其他部分构成比例关系。
在有些浏览器下如IE6会将13px的字体渲染成14px。
使用奇数字会出现文本段落无法对齐。
比如微软雅黑，奇数字加粗后文字大小会出现不一样。

最主要的还是习惯问题，没有其他的原因，除特殊情况，用偶数字体较多。

2.margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距，padding是用来隔开元素与内容的间距。

2017.8.30
1.多行文字中多余文字隐藏的css写法？
p{
width: 100%;
color: #4D4D4B;
font-size: 14px;
padding: 5px 0;
box-sizing: content-box;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //可以修改为3代表显示3行
-webkit-box-orient: vertical;
}

2017.9.01
1.如何修改chrome记住密码后自动填充表单的黄色背景？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}

2.让页面里的字体变清晰，变细用CSS怎么做？
--webkit-font-smoothing:antialiased;

3.介绍js的基本数据类型？
有 undefined,null,number,string,boolean.

4.介绍js有哪些内置对象？
object是javascript中所有对象的父对象
数据封装类对象：object,array,boolean,number,string
其他对象：function,math,date,error,regexp

5.写几条javascript的基本规范？
不要在同一行声明多个变量。
请使用= = =或！= =来比较true/false或数值。
使用对象字面量替代new array这种形式。
尽量少使用全局函数。
switch语句必须带有default分支。
函数不应该有时候有返回值，有时候没有返回值。
for循环必须使用大括号。
if语句必须使用大括号。
for-in循环中的变量，应该使用var关键字明确限定作用域，从而避免作用域污染。

6.javascript有几种类型的值？
栈：原始数据类型（undefined,null,boolean,number,string）
堆：引用数据类型（对象/数组和函数）
两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小，大小固定，属于被频繁使用数据，所以放入栈中存储数据。
引用数据类型存储在堆（heap）中的对象，占据空间大，大小不固定，如果存储在栈中，将会影响程序运行的性能，引用数据类型在栈中存储了指针，
该指针指向堆中改实体的起始地址，当解释器寻找引用值时，会首先检索其在栈中的地址，起的地址后从堆中获得实体。

7.javascript如何实现继承？
构造继承
原型继承
实例继承
拷贝继承

8.javascript作用链域？
全局函数无法查看局部函数累不细节，但局部函数可以查看其上层函数细节，直至全局细节，当需要从局部函数查找某一属性或方法时，
如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用链域。

9.谈谈对this对象的理解。
this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象；
在事件中，this，指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向的全局对象的window。

10.什么是window对象？什么是document对象？
window对象是指浏览器打开的窗口。
document对象是document 对象（html文档对象）的一个只读引用，window对象的一个属性。

11.null,undefined的区别？
null表示一个对象是‘没有值’的值，也就是值为‘空’；
undefined不是一个有效的json，而null是。
undefined的类型（typeof）是undefined;
null的类型（typeof）是object。
javascript将未赋值的变量默认值设为undefined。

12.什么是闭包？为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包最常见的方式就是在一个函数内创建另一个函数，
通过另一个函数访问这个函数的局部变量。
利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：
1.函数内再嵌套函数。
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
//li节点的onclick事件都能正确的弹出当前被点击的li索引
<ul id="testUL">
<li> index = 0</li>
<li> index = 1</li>
<li> index = 2</li>
<li> index = 3</li>
</ul>
<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
nodes[i].onclick = (function(i){
return function() {
console.log(i);
} //不用闭包的话，值每次都是4
})(i);
}
</script>

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
这是对闭包作用的非常直白的描述

function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}

var sayAlert = say667();
sayAlert()//执行结果应该弹出的667

13.new操作符具体是做什么的？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加入到this引用的对象中。
3.新创建的对象有this所引用，并且最后隐式的返回this。

14.Ajax是什么？如何创建一个ajax?
ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
创建一个XMLHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求方法，URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取一步调用返回的数据
使用javascript和dom实现局部刷新

15.同步和异步的区别？
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发送请求，等请求完，页面刷新，新内容出现，用户看到新内容，进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不断刷新，新内容也会出现，用户看到新内容。

16.如何解决跨域问题？
使用jsonp
使用固定的url地址
使用iframe

17.decument.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

var a=[1,2,3];
a.splice(1,1,2,3,4);
console.log(a);

2017.09.04
18.document的理解
文档子节点：
document.documentElement始终指向HTML页面中的<html>元素
document.body始终指向<body>元素
document.title包含着<title>元素中的文本
文档信息：
document.url取得地址栏中显示的url
document.domain只包含页面的域名
document.referrer三个属性中，只有domain可以设置值。url与domain是相互关联的，但是由于安全限制，只能设置为url中包含的域。

19.特殊集合
document.images 包含所有<img> 元素
document.links 包含所有带href特性的a元素
document.anchors 包含了所有带name特性的a元素
document.forms包含所有的<form>元素

20.文档写入
document.write();
writeln() 与write()相同，多了一个换行符
open(); 打开网页输出流
close(); 关闭网页输出流

2017.11.13
1.获取年月日

var oldTime = 1500; //得到毫秒数
var date = new Date(oldTime)
var Y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
m = m < 10 ? '0' + m : m
d = d < 10 ? '0' + d : d
var t = Y + '-' + m + '-' + d;
console.log(t)

let H = date.getHours()
let i = date.getMinutes()
let s = date.getSeconds()

// 获取时间格式 yyyy-mm-dd
Vue.filter('time', function (value) {
let date = new Date(value)
// console.log('date = ' + date)
let Y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
m = m < 10 ? '0' + m : m
d = d < 10 ? '0' + d : d
var t = Y + '-' + m + '-' + d;
return t;
})

2017.11.22
1.让div 水平垂直居中
<div class="wrap">
<div class="center"></div>
</div>
/**css**/
.wrap {
width: 200px;
height: 200px;
background: yellow;
position: relative;
}
.wrap .center {
width: 100px;
height: 100px;
background: green;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
---------------------------------------------------------------------------

2019-03-23 补充

1. 使用!!将变量转换成布尔类型
有时我们需要检查一些变量是否存在，或者他是否具有有效值，从而将他们的值视为true。对于做这样的检查，你可以使用!!（双重否定运算符），他能自动的将任何类型的数据转换为布尔值，只有这样变量才会返回false：0，null,”“,undefined或NaN，其他的值都返回true。

if(!!isPrice) {
console.log('没有存价格')
}

2. 使用+将变量换成数字
这个装换超级简单，但她只适用于数字字符串，不然就会返回NaN(不是数字)。看看这个例子：
function toNumber(val) {
return +val;
}
console.log(“1234”);//1234
console.log(“ABCD”);//NaN

这个装换超级简单，但她只适用于数字字符串，不然就会返回NaN(不是数字)。看看这个例子：
function toNumber(strNumber){
return +strNumber;
}
console.log(“1234”);//1234
console.log(“ABCD”);//NaN

这个装换操作也可以作用于date，在这钟情况下，它将返回时间戳：
console.log(+ new Date());//1462548741

3.在循环中缓存array.length
var length = array.length;
for(var i = 0; i < length; i++){
console.log(array[i]);
}
4.为了更简洁，可以这么写
for(var i = 0,length = array.length; i < length; i++){
console.log(array[i]);
}

5.获取数组的最后一个元素
Array.prototype.slice(begin,end)可以用来裁剪数组。但是如果没有设置结束参数的话，该函数会自动将end设置为数组长度值。如果你将begin设置为一个负数的话，你就能从数组中获取到倒数的元素。
var array = [1,2,3,4,5];
console.log(array.slice(-1));//[5]
console.log(array.slice(-2));//[4,5]
console.log(array.slice(-3));//[3,4,5]
6.数组截断
这个技术可以锁定数组的大小，这对于删除数组中固定数量的元素是非常有用的。例如：一个数组的包含10个元素，但是你只想取出前五个值，则可以通过设置array.length = 5 来截断数组。例子：
var array = [1,2,3,4,5,6];
console.log(array.length);//6
array.length = 3;
console.log(array.length);//3
console.log(array);//[1,2,3]
7.全部替换
var str = “abacc”;
console.log(str.replace(/a/”1”));//1bacc
console.log(str.replace(/a/g/,”1”));//1b1cc
8.合并数组
如果你需要合并两个数组，可以这样做：
var arr1 = [1.2];
var arr2 = [3,4];
console.log(arr1.push.apply(arr1,arr2));//[1,2,3,4]
9.把NodeList转换成数组
只需用这个函数：[].slice.call(elements);
10.对数组元素进行洗牌
var list = [1,2,3];
console.log(list.sort(function(){
return Math.random - 0.5
}));//[2,1,3]
---------------------
转载自：https://blog.youkuaiyun.com/duyiwuerluozhixiang/article/details/71954957