js的点滴

                        var obj = new XMLHttpRequest();

			obj.open("POST", '/login', true);

			obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 发送信息至服务器时内容编码类型

			obj.onreadystatechange = function () {

				if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改

					//fn.call(this, obj.responseText);

					//window.open();

					//debugger;

				}

			};

			obj.send(convertData({username:'idata3d',password:'Idata3d'}));

0024:js的设计模式 http://blog.csdn.net/xianyu410725/article/details/46712921

0025：xss攻击 http://www.cnblogs.com/coding4/p/6536184.html

0026：elementUI http://www.cnblogs.com/coding4/p/6712940.html

0027:有时间研究下plantomjs爬虫；http://phantomjs.org/

一些css需要记住的链接：

sass: http://www.ruanyifeng.com/blog/2012/06/sass.html

http://www.w3cplus.com/sassguide/

less :http://www.cnblogs.com/coding4/p/6358009.html

css: http://www.cnblogs.com/coding4/p/6182809.html

重绘和回流（重排）：http://blog.csdn.net/yummy_go/article/details/50696328

一些工具的使用：http://www.cnblogs.com/coding4/p/5772575.html

new1 判断是对象还是数组

typeof null // object

typeof [] // object

typeof {} // object

方法1.

Object.prototype.toString.call({}) ===  "[object Object]"

Object.prototype.toString.call([]) ===  "[object Array]"

方法2.

let aa = []

aa.constructor === Array

let bb = {}

bb.constructor === Object

方法3.

Array.isArray()

1.函数的块级作用域和函数的自我执行是一回事。
!(function () {
function box(){alert('hello');};

})();

2.操作字符串的方法。
concat ------'yan'.concat('jinyun')
indexOf ------'yan'.indexOf('y')>-1 同lastIndexOf()
charAt ------ 'yanjinyun'.charAt('3')
match -------str.match('world')或者str.match(/\d+/g)
'1d12e34'.match(/\d+/g)
打印出来["1", "12", "34"]
replace------'yanjinyun'.replace('jin','dong');
search----"yanjin2yun".search(/\d+/g)
打印出6
toLowerCase() 同toUpperCase()
'yanjinyun'.toUpperCase()
打印"YANJINYUN"

3.split substr subString都是操作字符串的方法

split的用法：
mystring.split(",")
mystring.split(/[,_]/);对多个符号进行分割
substr的用法：
string A = ‘this is A string’;
string str = A.substr(8, 1);//A
substring 方法从开始到结尾
string A = ‘this is A string’;
string str = A.substring(8, 9)//A

splice() 方法用于插入、删除或替换数组的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
打印的结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

===================

slice操作字符串：同substring.
var obx='yanjinyun'
obx.slice(2,5)
打印"nji"

5.操作数组的方法：https://buluo.qq.com/mobile/detail.html?_bid=128&_wv=1027&bid=348745&pid=7751115-1488093599&from=share_copylink

join(',')
push, 添加元素。
pop 移除数组末尾的元素，并返回移除的元素。shift()//移除数组开头的元素，并返回移除的元素。
unshift()//数组开头添加两个元素。
数组中存在两个用来排序的方法，reverse,sort.
var box=['yan','jin','yun','shi','bob']
box.push('clock');
box//["yan", "jin", "yun", "shi", "bob", "clock"]
box.pop()
box//["yan", "jin", "yun", "shi", "bob"]
box.shift()
box//["jin", "yun", "shi", "bob"]
box.unshift('women')
box//box.unshift('women')

slice(start,end)

在ES5中，一共有9个Array方法

js数组的迭代器方法（some、every、forEach、map、filter)

http://blog.csdn.net/github_31392345/article/details/48631337

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach//和for一样
Array.prototype.map

Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

-----------------------------------------------

forEach方法（接收一个函数作为参数）
function square(num){
alert(num * num) ;
}
var nums = [1,2,3,4,5];
console.log(nums.forEach(square));

-------------------------------------------------

every方法（接收一个返回值为布尔值的函数，对数组中的每一个元素使用该函数）
function isEven (num) {
return num % 2==0;
}
var evens=[2,4,6,8,10];
var isAllEven = evens.every(isEven); //当且仅当数组中的所有的元素返回为真，every函数才会返回为真
if(isAllEven){
alert("all is even");
}else{
alert("not all is even");
}

-------------------------------------------------

some方法（只要数组中有一个元素使用方法返回为真，some函数就会返回真）
var nums = [1,2,3,5,7,9];
function isEven (num) {
return num % 2==0;
}

map：

js的点滴

indexOf的使用：arr.indexOf("orange") != -1

filter

var arr = [

{"name":"apple", "count": 2},

{"name":"orange", "count": 5},

{"name":"pear", "count": 3},

{"name":"orange", "count": 16},

];

var newArr = arr.filter(function(item){

return item.name === "orange";

});

reduce

array1.reduce(callbackfn[, initialValue，currentIndex，this])//第一个参数是回调函数，第二个参数是初始值,第三个参数是索引

最常用的两个作用，第一个是算和

第二个可以去重之类的

js的点滴

reduceRight 就是数组便利的时候从右向左便利。

*****************************

类数组转化为数组的方法。

数组排序的方法。

*****************************

我们谈一谈数组非常重要的另一个因素：

数组的浅拷贝和深拷贝

浅拷贝：

let array1 = [1,'a',true,null,undefined];

---------------

let c1 = array1.slice();

---------------

let cc1 = array1.concat();

---------------

let fc1 = Array.from(array1);

---------------

let pc1 = [];

Array.prototype.push.apply(pc1,array1);

---------------

let mc1 = array1.map(function(item){
return item;
});

深拷贝：

let jsonc = JSON.parse(JSON.stringify(array1));

这种方法可以变相的实现深拷贝,但是这种方法也有其限制：

缺点：

首先，数组中的项如果是undefined，那么转换后将变为null
如果数组的项为对象，那么对象之间不可相互引用。会造成循环引用，无法JSON序列化。

最简单的深拷贝就是自己写一个for循环。不过代码比较多。

js的正则表达式
String对象可以用正则表达式的4个方法。
macth,replace,search（返回的是对应的下标值）,split
还有test exec都是非常有用的。

.表示一个 *表示多个 +表示一个

/g..gle/ .匹配一个任意字符
/g.*gle/ 匹配0个一个或多个
/g[a-zA-Z_]*gle/ 表示任意个a-zA-Z或者下划线中字符
/[^0-9]/表示任意个非0-9的字符
[a-z][A-Z]+表示一次或多次
\w*匹配任意多个所有字母数字_
\d*匹配任意多个数字
\D{7,}匹配至少7个非数字
^从开头匹配，$从结尾开始匹配
\s可以匹配到空格
\b可以匹配到是否到了边界
google|baidu|bing 匹配三种其中一种字符串
（google){4,8}匹配分组里的字符串4-8次。
google{4,8}表示的是
var box='sfsfda213123sadfaf';
box.match(/[0-9]{6}/g)
打印出：
["213123"]

js的点滴

检查邮政编码
要求：共6位，第一位不能为0
var str='224000';
var pattern=/[1-9][0-9]{5}/;
var str='224000';
--------------------------
检查文件压缩包：
/[\w]+\.zip|rar|gz\/;
删除多余空格:
var pattern=/\s/g;
var str='111 222 333';
var result=str.replace(pattern,'');
删除收尾空格
var pattern=/^\s+/;
var str=' goo gle ';
var restule=str.replace(pattern,'');
pattern=/\s+$/;
result=result.repalce(pattern,'');
删除前后空格
var pattern = /^\s*(.+?)\s*$/; 使用了非贪婪捕获
var str=' google ';
alert('|'+pattern.exec(str)[1]+'|');

移动网页端-M站-云视频播放器（暂用作无广告）

别以为贪婪都是没有用的，其实是有用的哈。
var url="http://basketball.lesports.com/";
url.match(/^http:\/\/(.*)\..*\..*/)
打印出：
["http://basketball.lesports.com/", "basketball"]

7. 原生js遍历对象和数组

------------------------------------------------
var arryAll=['aa','sss','dd'];
arryAll.forEach(function(e){
alert(e);
})
这里我们可以看出forEach可以遍历数组，ie也是支持的，但是不可以遍历对象，遍历对象就会报错。
for (var i = 0; i < myArr.length; i++) {
console.log(i+":"+myArr[i]);
};
for(var i in man) {
if(Object.prototype.hasOwnProperty.call(man,i)) { //过滤
console.log(i,":",man[i]);
}
}

遍历数组的话：jquery的$.each更好用些。

$.each(_self.ADKEY, function(i, item) {

});

-------------------------------------------------------

8.获取屏幕和文档的高度，这里请不要用原生了，有好的框架为什么不用呢，性能影响这么小，而且容易记忆。

获取浏览器显示区域的高度： $(window).height();
获取浏览器显示区域的宽度：$(window).width();
获取页面的文档高度：$(document).height();
获取页面的文档宽度：$(document).width();

获取滚动条到顶部的垂直高度：$(document).scrollTop();
获取滚动条到左边的垂直宽度：$(document).scrollLeft();
这里的Jquery的方法还有
offset().top offset.left()
position().top position().left
jquery获取鼠标的事件。
jquery对象.mousemove(function(e){
var x=e.clientX;
var y=e.clientY;
var li_x=$(this).offset().left;;
var li_y=4(this).offset().top;
});
js获取鼠标的事件：
var e=event || window.event;
x=e.clientX;
y=e.clientY;
parentDom.offsetLeft;
parentDom.offsetTop;

记住这个：
var parentDom=thisDom.parentNode;
parentDom.style.left=newLeft+'px';

9. replace与repalceAll

明确的一点是js没有提供replaceAll的方法，所以全部替换用replace的正则方式。

"hello worlld".replace('ll',"kk");//"hekko worlld"
replace这个时候只替代了一个。

全部替换方式1：

var str = "男的女的老的少的";

alert(str.replace(new RegExp(/(的)/g),''));

全部替换方式2：

var replaceStr = "的";

alert(str.replace(new RegExp(replaceStr,'gm'),''));

全部替换方式3：

var replaceStr = "的";

alert(str.split(replaceStr).join(''));

10. []==![]

这里我们有时间在学习。

js的点滴

11.[1,2,3,4]用递归输出1，4，9，16

js的点滴

12.证明一个数据类型是数组。

typeof([])//object

Object.prototype.toString.call([]);// "[object Array]"

13.js的内置的函数不判定类型直接操作，字符串可以调用数组的方法，普通对象可以调用数组的内置方法。

var ss = {};

Array.prototype.push.call(ss,"aa","bb");

console.log(ss);// {0: "aa", 1: "bb", length: 2}

14.为什么说bind的是延迟执行的，而call是立即执行的。

var obj ={

b:"aa_b"

}

var box ={

a:this.a,

b:"cc",

c:function(){

console.log(this.b);

}

用call方法；

box.c.call(obj);

用bind方法。

var fun = box.c.bind(obj);

fun();

15.如何重写一个alert和confirm

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

<input id="add" type="button" value="添加" />

    <input id="delete" type="button" value="删除" />

    <input id="update" type="button" value="修改" />

    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>

    <script type="text/javascript">

        $("#add").bind("click", function () {

            $.MsgBox.Alert("消息", "哈哈，添加成功！");

        });

        //回调函数可以直接写方法function(){}

        $("#delete").bind("click", function () {

            $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });

        });

        function test() {

            alert("你点击了确定,进行了修改");

        }

        //也可以传方法名 test

        $("#update").bind("click", function () {

            $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);

        });

        //当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层

　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });

    (function () {

    $.MsgBox = {

        Alert: function (title, msg) {

            GenerateHtml("alert", title, msg);

            btnOk();  //alert只是弹出消息，因此没必要用到回调函数callback

            btnNo();

        },

        Confirm: function (title, msg, callback) {

            GenerateHtml("confirm", title, msg);

            btnOk(callback);

            btnNo();

        }

    }

    //生成Html

    var GenerateHtml = function (type, title, msg) {

        var _html = "";

        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';

        _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';

        if (type == "alert") {

            _html += '<input id="mb_btn_ok" type="button" value="确定" />';

        }

        if (type == "confirm") {

            _html += '<input id="mb_btn_ok" type="button" value="确定" />';

            _html += '<input id="mb_btn_no" type="button" value="取消" />';

        }

        _html += '</div></div>';

        //必须先将_html添加到body，再设置Css样式

        $("body").append(_html); GenerateCss();

    }

    //生成Css

    var GenerateCss = function () {

        $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',

            filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'

        });

        $("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',

            backgroundColor: 'White', borderRadius: '15px'

        });

        $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',

            backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',

            borderBottom: '3px solid #009BFE', fontWeight: 'bold'

        });

        $("#mb_msg").css({ padding: '20px', lineHeight: '20px',

            borderBottom: '1px dashed #DDD', fontSize: '13px'

        });

        $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',

            border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',

            lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'

        });

        $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });

        $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });

        $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });

        $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });

        //右上角关闭按钮hover样式

        $("#mb_ico").hover(function () {

            $(this).css({ backgroundColor: 'Red', color: 'White' });

        }, function () {

            $(this).css({ backgroundColor: '#DDD', color: 'black' });

        });

        var _widht = document.documentElement.clientWidth;  //屏幕宽

        var _height = document.documentElement.clientHeight; //屏幕高

        var boxWidth = $("#mb_con").width();

        var boxHeight = $("#mb_con").height();

        //让提示框居中

        $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });

    }

    //确定按钮事件

    var btnOk = function (callback) {

        $("#mb_btn_ok").click(function () {

            $("#mb_box,#mb_con").remove();

            if (typeof (callback) == 'function') {

                callback();

            }

        });

    }

    //取消按钮事件

    var btnNo = function () {

        $("#mb_btn_no,#mb_ico").click(function () {

            $("#mb_box,#mb_con").remove();

        });

    }

})();

    </script>

</body>

</html>

核心代码：

js的点滴

16.

delete

js的点滴

17.void 0

18.>>>

19.>>0 字符串转为数字

js的点滴

20.[] == ![]

21.querySelector与querySelectorAll的区别。querySelector只选取第一个，而 querySelectorAll选取全部的。

22.字符串和数组的相互转化：

字符串变数组3种方法。

方法1.通过该split

方法2.通过数组的map方法

"use strict";
var a = "23456";
var b = Array.prototype.map.call(a,function(a){return a;}).reverse().join();
console.log(b);

map方法还可以通过：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

方法3：

var string="afasfasf";

var obj="string".replace(/(.)(?=[^$])/g,"$1,").split(","); //字符串转化为数组

==================================================================

数组转字符串

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

我们来看点高级点的应用：

例如怎么把一个字符串每两个之间都插入一个空格，最简单的办法。

字符串变为数组

方法1：正则表达式：

var string='abcdedef';
var obj=string.replace(/(.)(?=[^$])/g,"$1,").split(","); //字符串转化为数组
alert(obj);

方法2：

var string='abcdedef';

var obj2 = string.split("");

23.mouseover mouseout 不论鼠标指针穿过被选元素或其子元素

mouseenter mouseleave 只有在鼠标指针离开被选元素(不包含子元素)

24.知道有一天，我看到这样一段代码，我才发现，还有一个空间等着我了。

js的点滴

25.

26.如果实现点击a标签下载的功能，我发现如果写一个隐藏的a标签，然后直接用a.click()直接触发，是没有什么触发的，如果在a标签的里边在给一个标签然后冒泡的点击触发就是可以的。

27.js典型的作用于的一道题

var aa = "11";
function aa(){alert(123)}
console.log(aa);//11

记住就行了。

var ss = function(){return "11"};

function ss(){return "22"};

ss()//11

var ss = function(){return "11"};

var ss = function(){return "33"};

function ss(){return "22"};

ss()//33

//这就是我们的未来

js的点滴

28.

js的点滴

29.

setTimeout延迟3秒打印12345

function a(){
for(var i = 0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i);
},3000);
})(i)

}
}
a();

30.

//setTimeout写出10秒倒计时

js的点滴

还有一种使用Es的let

for(let i = 10;i>=0;i--){
setTimeout(function(){
console.log(i);
},(10-i)*1000);
}

另外还有一种

for(var i = 10;i>=0;i--){
(function(i){
setTimeout(function(){
console.log(i);
},(10-i)*1000);
})(i)
}

31.apply和call传参的区别：

js的点滴

32.自己总结的简单的5种继承。 http://www.cnblogs.com/coding4/p/5446028.html

//1.组合

        function par(param){this.name="haha";}

        par.prototype.run = function(){}

        function son(){}

        son.prototype = new par();

        //2call方法

        function par(){}

        function son(){

            par.call(this);

        }

        //3.另一种call方法

        function par(){

            this.name="aaa";

            this.run = function(){

                alert(this.name);

            }

        }

        function son(){

        }

        var obj = new son();

        par.call(obj);

        obj.run();

        //4.利用一个对象作为原型链

        var obj = {

            name:"yy",

            age:20

        }

        function create(obj){

            function F(){}

            F.prototype = new obj();

            return new F();

        }

        //5.一个构造函数作为另一个构造函数的一个属性

        function par(){

            this.name="jj";

        }

        function son(){

            this.parent  = par;

            this.parent();

            delete this.parent;

            this.run = function(){

                aelrt(this.name)

            }

        }

        son();

33.Object的属性和方法。http://www.jb51.net/article/80177.htm

三个*，

js的点滴

我感觉不能说Object.prototype.__proto__是终点，从属性上看Object.prototype是终点。

Object.

js的点滴

不需要说的apply,arguments,bind,call,caller,constructor,

create方法：这个的方法的出现为了简化创建对象的时候必须用函数的构造器。

js的点滴

assign方法

js的点滴

defineProperties defineProperty

js的点滴

keys values entries

js的点滴

Object.getOwnPropertyDescriptor
ES5中还提供了一个读取特性值的方法，该方法接收对象及其属性名作为两个参数，返回一个对象，根据属性类型的不同，返回对象会包含不同的值。

var person = {

  _age: 10,

  type: "小孩"

}

Object.defineProperty(person, "age", {

  get: function () {

    return this._age;

  },

  set: function (newValue) {

    this._age = newValue;

    this.type = newValue > 17 ? "成人" : "小孩";

  }

})

console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}

console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}

js的点滴

不需要说的，toString valueOf，toLocaleString

hasOwnproperty

js的点滴

isPrototypeOf

js的点滴

name 这个是比较特殊的，

请参考这篇博客的详解：http://www.cnblogs.com/coding4/p/6096441.html

可以操作阮一峰的es6 http://es6.ruanyifeng.com/#docs/object

js的点滴

我们需要明白，Object本身就是方法，所有Object.prototype == Function.prototype.__proto__;

这里有一个es6的比较特殊的Object的用法。

js的点滴

34.对于function属性改造的可以变为数组属性。defineProperty赋值一个length属性就行。

函数对象本来就有函数属性，也有对象属性，我们怎么让他具有数组的属性呢，defineProperty这个属性就可以帮我们实现。但是直接赋值.length不行的。

js的点滴

35.前端性能优化的方式

(1).减少dom操作

(2).部署前，图片压缩，代码压缩

(3).优化js代码结构，减少冗余代码

(4).减少http请求，合理设置 HTTP缓存

(5).使用内容分发cdn加速

(6).静态资源缓存

(7).图片延迟加载

36. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

10.浏览器发送异步请求

37.请大概描述下页面访问cookie的限制条件

(1)跨域问题

(2)设置了HttpOnly

38.js跨域请求的方式，能写几种是几种

1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）

5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。

6、nginx反向代理这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

39.对前端工程化的理解

开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具

40.js深度复制的方式

1.使用jq的$.extend(true, target, obj)

2.newobj = Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

41.js设计模式

总体来说设计模式分为三大类：

创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

42.图片预览

43.扁平化多维数组也就是多维数组变为一维数组。

1、老方法

var result = []

function unfold(arr){

for(var i=0;i< arr.length;i++){

if(typeof arr[i]=="object" && arr[i].length>1) {

unfold(arr[i]);

} else {

result.push(arr[i]);

}

}

}

var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

var b = c.toString().split(',')

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

var result = flatten(arr)

44.iframe有那些缺点？

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

45. 这个有时间看看。

. js的点滴

46.

js的点滴

有人这样子和我说，构造器不是父子关系，我的属性可以指向我，也可以指向其他人，这不是父子关系。

很多时候我们需要明白，那只是一个指针，对象是一个指向型的数据类型。

47. toString()与valueOf()的最基本的区别。如果不调用valueOf()或者toString()的话，obj默认调用toString()

js的点滴

48.

js的点滴

49.今天遇到这样一个问题关于冒泡的。

我在body上写了一个点击事件。隐藏div#list1

左left右right两个div。

左边left>#list1上上点击的时候，我不能隐藏#list1，我给了一阻止冒泡事件。

然后右侧的right点击的时候， 需要隐藏list1。

但是我在左侧点击list1的时候，需要在函数里触发右侧right的子元素。

有人说，那你在右侧的子元素中写一个阻止冒泡就行。

关键是，我触发的是一个下拉插件，我自己虽然写了一个stop，但是插件中可能也写了一个触发，而且可能插件还触发了这个插件的父div做了一些操作，这样子就导致了，我不知道的代码触发了body所以，这个时候，我只能写一个开关，也算是一个原子变量吧。当list1触发的时候设置一个变量true，结束的时候改为false，在这个当中发生的一切触发body的操作，我都屏蔽调了。

50.css中用nth-of-type(2)渲染同类元素的第二个比如ul li:nth-of-type(1) 第二个Li渲染，如果Li前边有其他的子元素就不管。

p:nth-child(2)渲染的是第二个子元素，不论是div,span或者p之类的只要是第二个子元素就行。

51.

52.for in便利对象的时候，不可以使用.属性，只能用[]

js的点滴

53.vuex的学习和使用。

http://vuex.vuejs.org/zh-cn/modules.html

http://www.shouce.ren/api/view/a/11734

54.jquery的data方法。

$dom.data("attaid");

这种方法取

这个有缓存的情况，所有我们多用attr。

55.chrome浏览器中:hover可以捕获到js的enter之类的mouseenter之类的事件么。

js的onmouseenter之类方法添加的dom和css，在hover：里肯定没有。

56.绑定多个事件。

js的点滴

57.jquery的each方法,$.each(arr,function(index.value){})

而原生的forEach方法，则是item在前,index在后。arr.forEach(function(item,index){})

58.sesstionStorage居然不能共享。这个我解释不了。

http://test.idata3d.com:8080/#/

http://test.idata3d.com:8080/public/datagame/html/activity_cont.html

可能是因为一个根目录在root下面，另一个在/public下，

59.不要被network的这个时间所欺骗。

（1）第一个时间14.20还是可以相信的，但是第二个时间。16.69就不能相信了。

因为第一个时间14.20获取到数据之后就会去渲染数据，这个时候即使第二个请求到来了也不会去执行。

（2）所以netword的反应时间不一定是服务器给浏览器反应的时间。

（3）优化的一个手段，可以把渲染dom的ajax请求放到不渲染dom的ajax请求后边

js的点滴

60.window.open被浏览器阻止的解决方法

http://www.cnblogs.com/lenther2002/p/6053850.html

61.a标签的默认事件和点击事件，如果这样写，只能触发点击事件，不能触发默认事件的。如果在子元素上点击就可以了。命名记得先执行点击事件，然后执行默认事件。

js的点滴

62. mystring.split(/[,_]/) 用多个符号分割,split

63.

js计算出数组中最大的值的索引

list.indexOf(Math.max.apply(Math, list))

64.数组一边遍历一边删除

js的点滴

65.

js的点滴

这样子确实是可以的。

66.js数组一边forEach一边splice还是有问题，最好用filter。

js的点滴

但是我测的下边的没有问题

js的点滴

67.

◎Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
◎Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
◎Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。

Math.pow() 方法可返回 x 的 y 次幂的值

Math.sqrt() 函数返回一个数的平方根

68.原生获取window的宽度和高度。

window.innerWidth

window.innerHeight

原生获取body的宽和高度

document.body.offsetWidth;

document.body.offsetHeight;

69.随机生成颜色。

color:'rgba('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+',1)',

70.我第一次见别人这样写。star.alpha一直从从0到1循环,步伐一直是star.ra的大小,star.ra可能正可能负。

js的点滴

71.第一次别人这样写去生成可能正可能负的情况。

js的点滴

72.

a、offsetTop,offsetLeft,offsetWidth,offsetHeight

b、scrollTop,scrollLeft,scrollWidth,scrollHeight

c、clientTop,clientLeft,clientWidth,clientHeight

d、getComputeStyle()||currentStyle(IE)

因为offsetHeight属性需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值（即使队列中改变的样式属性和想要获取的属性值并没有什么关系）。

73.filter函数中return;和return item;这两种结果不同。

74.可以在一个对象的方法中直接用这个对象名字

js的点滴

75.1点击的时候，可以出发2，但是不能触发3.

js的点滴 76.document.querySelectorAll(".j_modal") 这个返回的是类数组。

类数组怎么使用map方法。

77.map方法的高级的地方就是map方法可以直接使用this,不需要传item

78.以下两种，第一种.this只的是一个dom对象,另一个指的是window.说明map方法中的this并不能指向，但是$做了封装就可以用了。

79.bind解决了穿参的问题,有时候你发现没办法给你调用的方法传参，这个时候绑一个bind就行了。[].slice.call(arguments)这样子可以把arguments转化为数组。

js的点滴

80 数组拷贝

this.list = this.list.slice(0)

相关文章