JS 冷知识,运行机制
数组取最小、最大值
var a=[1,2,3,5]; alert(Math.max.apply(null, a));//最大值 alert(Math.min.apply(null, a));//最小值
获取鼠标坐标 ：
event.clientX; event.clientY;
鼠标右击事件 ：
document.oncontextmenu=function(){};
图片上传 ：
<input type="file"><img src=""/> 上传完可以把图片定义在img标签显示
$("input").on('change',functon(){ var a =$(this).files[0] ; //获取第一个上传的图片 a.type.indexof("image") ; //验证文件的type属性 var reader = new FileReader(); //创建file接口 reader.readAsBinaryString(reader) //将文件转为二进制 无返回值 reader.onload=function(){ //上传完成事件 reader.result //通过,result 访问上传的文件 } reader。AsDataURL(reader) //将文件转为DataURL 64编码格式 })
注意： 1. 用for-in遍历时，原型链上的属性也会被遍历到，而且是无序遍历。 2. 属性删除用delete, 对象的prototype属性不可被删除； 可以通过var a = Object.getOwnPropertyDescriptor(Object,'prototype')； 来获取Object 对象的 prototype属性， 可以打印出a.configurable： 为 false 是否可配置； 3 in操作符会向原型链向上查找的 if('age' in object)， hasOwnProperty() 是否自有属性，而非来自继承 object.hasOwnProperty('age')（用在for in判断过滤原型上的属性） propertyIsEnumerable()判断属性是否可枚举； （经验证，不同的内核实现方式不同，在chrome下不可被delete掉，返回false，但在firefox和IE10下可以被delete掉，返回true，对于函数也是相同的结果） 函数表达式 var fe = function(){}、(function(){})() //直接调用（函数）（）
拖拽->鼠标跟随
1、绑定鼠标点击事件
2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性)
3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)
4、将拖拽元素设置成绝对定位
5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)
6、设置left、top限定，禁止元素拖出窗口
7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth
8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果 注意可以把left、top 理解成x轴、y轴
Student.prototype = Object.create(Person.prototype); Object.create()方法是创建一个空函数，并把它的参数当作它的原型
1. var arr = [1, 2, 3]; arr.join(); //将数组转为字符串 -> "1,2,3" 而new Array(n+1).join(str)的原理是,创建一个n+1大小的数组，若用join()方法会 产生含n个“,”的字符串，而str正代 替这些“,”以造成重复n次str参数的字符串。 2. arr.reverse(); //将数组逆序，原数组会被修改 -> [3, 2, 1] 3. arr.sort(); //排序，默认按照字母顺序排序（会把数字转化为字符串排序）原数组会被修改 而如果是数字，则会 取第一位数 的字符顺序进行排序，改完以后原数组会被修改。如果想用sort进行数字上的排序，则应写 入函数参数 function(a,b){return a-b;}，这是升序排列，反之降序是b-a。 4. arr.concat(4,5,6); arr.concat(4, [5,6]); //数组合并，原数组未被修改 [1, 2, 3, 4, 5, 6]
5. arr.slice(1, 2); //截取 返回两个index之间部分数组，左闭右开区间,原数组未被修改
6. var fruits = ["Banana", "Orange", "Apple", "Mango"];
splice() 方法用于插入、删除或替换数组的元素。 注意：这种方法会改变原始数组！
fruits.splice(2,0,"Lemon","Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango
fruits.splice(2,1,"Lemon","Kiwi") // Banana,Orange,Lemon,Kiwi,Mango
fruits.splice(2,2); //Banana,Orange
7 split : 根据特定的字符切割字符串并且返回生成的数组。
例如 ： str = “s-aaa-sss-eee-www”;
targetArr = str.slite(“-”); //[‘s’,’aaa’,’sss’,’eee’,’www’]
7.加载状态 配合加载小图标使用 :
document.onreadystatechange = function(){ //页面加载状态改变时的时间 document.readyState =="complete"; //文档加载完后 }
8.图片加载显示配合7：
var img = $("img"); var num = 0; img.each(function(i){ var oImg = new Image(); //图片对象 oImg.onload = function(){ //图片加载完成后 oImg.onload=null; //防止gif格式图片缓存 num++ ; var len=img.length; $(".loading b").html(parseInt(num/len*100)+"%"); //从百分之0到百分之100加载转动的小图标 if(num >= i){ $(".loading").fadeOut();} } } oImg.src = img[i].src;
window.onresize = function(){}窗口或框架被调整大小事件
js 闭包：
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
上一节代码中的f2函数，就是闭包。
闭包就是能够读取其他函数内部变量的函数。
因此可以把闭包简单理解成"定义在一个函数内部的函数"。
闭包就是将函数内部和函数外部连接起来的一座桥梁。
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存 泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）1.保护函数内的变量安全,加强了封装性 2.在内存中维持一个变量(用的太多就变成了缺点，占内存)
闭包之所以会占用资源是当函数a执行结束后, 变量i不会因为函数a的结束而销毁, 因为b的执行需要依赖a中的变量。
浏览器渲染原理，
1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。
2.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载
3.这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。
4.此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。
5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务 器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。
6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染 一次这部分
7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：<script type="text/javascript" src="js/js.js"></script>
8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。
9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。
10.最后到浏览器发现了</html>为止。
从上述简单的说了下浏览器加载HTML页面原理后，会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度，重新渲染局部的次数量也会影响到页面打开的速度，当然这只是有时候页面打开速度慢一部分原因。
对于这种来回渲染，内行叫为reflow，reflow几乎是无法避免的，我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。另外还有一次词叫repaint，叫重绘，repaint如果只是改变如背景颜色或者文字的颜色，repaint的速度要比reflow的速度明显快的多。
前端优化：
1、请减少HTTP请求基本原理：
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接， 然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对 这些数据解释执行。而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接 ，这必定会造成资源 的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
解决办法：
1合并图片（css sprites）雪碧图，
2合并CSS和JS文件；
3图片较多的页面也可以使用 lazyLoad（懒加载） 等技术进行优化。
2、请正确使用 Repaint 和 Reflow
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性
解决办法 ：
1 style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式
2 有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局
3、请减少对DOM的操作
4、使用JSON格式来进行数据交换
JSON是一种轻量级的数据交换格式，独立于语言的文本格式JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小
vue基础
vue生命周期简介
1 创建前状态 ?beforeCreate 全 undefined
2 创建完毕状态 created el 为undefined //初始化状态
3 挂载前状态 beforeMount
4 挂载结束状态 mounted 全有值 挂载Dom→渲染
5 更新前状态 beforeUpdate
6 更新完成状态 Update 更新→渲染
7 销毁前状态 beforeDestroy
8 销毁完成状态 Destroy
swiperjs 滑动插件 Zepto.js H5触摸事件
http://www.swiper.com.cn/api/Effects/2015/0308/195.html
