2018年12月_winne雪

原创浅谈JavaScript中的this

this在定义的时候是无法确认指的是哪个对象的，只有在执行的时候才能确认。简单的理解：谁调用了this所在的函数，那么this指向就是那个对象。var a = { name:"winne", fn1:function(){ console.log(this); }}a.fn1(); // 这里的 this === a 对象a.fn1.call({...

2018-12-13 14:08:28 335

原创 JavaScript的作用域以及预解析

一、我们先来看下ES5的作用域：1、全局作用域一个script标签就是一个全局作用域，如果一个页面有多个script标签则会从上到下执行，先把上面的script标签内部代码执行完了，才会执行下面的script标签内的代码。2、函数作用域（局部作用域）一个函数内就是局部作用域。二、JavaScript的预解析执行每遇到一个作用域（全局作用域）就会进行两步骤：1、（找出一些关键字初始赋值，...

2018-12-13 11:47:20 289

原创前端页面性能优化详解——资源合并、异步加载、缓存、cdn、预解析dns、渲染优化

一、资源压缩合并，减少http请求在开发阶段可能会分为几个样式文件或者js脚本文件引入，但是在上线阶段应该把多个文件压缩为一个文件再引入，从而达到减少http请求。但是也不能全部压缩为一个太大的文件引入，这样加载过慢的话也会影响用户体验。需要合理分析。如：&amp;amp;amp;amp;amp;lt;link rel=&amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;quot; type=&

2018-12-12 17:26:49 1512

原创 JavaScript异步和单线程

1、异步：不会卡顿在异步代码那里直接向下执行代码，等待同步代码执行完成后自动触发异步代码的执行。（比如ajax、定时器）console.log(100);setTimeout(function(){ console.log(200);},1000);console.log(300);输出结果解析：立刻打印出100，然后300，等待一秒后打印2002、同步：代码按顺序执行，执行...

2018-12-11 15:52:39 191

原创 XSS——HTMLParser对html标签进行正确拼接和校正不配对的标签

HTMLParser的api地址：https://github.com/blowsie/Pure-JavaScript-HTML5-ParserHTMLParser相关js地址：（需要引入js才能使用）https://github.com/blowsie/Pure-JavaScript-HTML5-Parser/blob/master/htmlparser.jsHTMLParser(str...

2018-12-11 13:45:50 858 2

转载 JS对HTML代码的转义（转码）和反转义（解码）

封装为一个工具类。下面有举例说明！<script>var HtmlUtil = { /*1.用浏览器内部转换器实现html转码*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元素，如DIV var temp = document.createElement ...

2018-12-11 10:38:17 8172

转载 web的安全性（XSS、XSRF/CSRF的攻击和防范）

一、XSS跨站脚本攻击（也称为XSS（cross-site scripting 的缩写））指利用网站漏洞从用户那里恶意盗取信息。XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本js。1、攻击方式举例：在文章中发表评论的时候偷偷插入一段&amp;lt; script&amp;gt;…&amp;lt; /scr...

2018-12-10 15:55:57 891

原创实用js/jq的ajax详解

我们都知道在jquery中使用ajax很方便，因为他帮我们封装好了。jquery使用ajax：$.ajax({ url : '请求的接口地址url', data : '需要传回后台的参数', type : 'POST', //默认是get dataType:&quot;json&quot;, // 预期服务器返回的数据类型,默认为json success : function(data){ /...

2018-12-06 13:40:44 891

原创 ES5中的类与实例、类的继承（构造函数继承、原型式继承、组合式继承）

一、类与实例1、类的声明// ES5的类的声明（没有类的概念，但是我们可以把构造函数看成是类。）function Animal(){ this.name = &quot;winne&quot;;}//ES6中class声明类class Animal2{ constructor(){ this.name = &quot;winne&quot;; }}2、生成实例对象通过new关键字

2018-12-05 16:51:40 560

原创理解JavaScript中的原型、原型链、五条原型规则

1、原型的定义“每个JavaScript对象都有一个原型对象（简称原型），这个原型是由该对象的构造函数所定义的（JavaScript自动创建），并且对象继承原型的所有属性和方法。”原型，准确叫法是“原型对象”，也就说说“原型本身也是一个对象”来的；我们创建的每个构造函数都有一个prototype属性，这个属性是一个指针，这个指针指向“原型对象”。也就是说“obj.prototype”是一个对...

2018-12-05 10:09:27 252

原创 JavaScript的构造函数

在JavaScript中，构造函数的特点就是函数的首字母大写，其实也就是为了和JavaScript内置的构造函数的表现一致。构造函数的调用一般都是配合new关键字来调用的。1、JavaScript中的内置构造函数（9种）Number()、String()、Boolean()、Object()、Array()、Function()、Date()、RegExp()、Error()是不是觉得很熟...

2018-12-04 16:22:00 596

原创实用对比cookie、sessionStorage、localStorage

一、cookiecookie是可以用来存储少量数据在本地的，默认情况下关闭浏览器后cookie数据就会被自动清除，仅关闭当前标签页并不会删除cookie。cookie是可读可写的。cookie的注意事项：1、不同的浏览器存放的cookie位置是不一样的，也不能通用2、cookie的存储是以域名形式进行区分的。3、cookie的数据可以设置它的名字，类似于json4、一个域名下存放的co...

2018-12-04 13:38:46 283

winne雪