propoet-优快云博客

原创异步

什么是单线程，和异步有什么关系单线程，只有一个线程，只能做一件事原因，避免DOM渲染的冲突，浏览器需要渲染DOM,js可以修改DOM,js执行的时候，浏览器DOM渲染会暂停解决方案，异步什么是event-loop 事件轮询，js实现异步的具体解决方案同步代码，直接执行。异步函数先放在异步队列中待同步函数执行完毕，轮询执行异步队列的函数 jquery deferre...

2018-12-21 10:19:20 207

原创原型应用

原型的实际应用 zepto中原型的使用 (function(window){ //空对象 var zepto = {} //构造函数 function Z (dom, selector) { var i, len = dom ? dom.length : 0 for (i = 0; i < len; i++){this...

2018-12-20 15:52:59 278

原创 es6知识点

开发环境 babel 电脑有node环境，运行 npm init npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest 创建.babelrc文件{ "presets": ["es2015","latest"], "plugins": [] } npm install --global bab...

2018-12-10 23:36:17 191

原创闭包

1.什么是闭包函数嵌套函数，内部函数可以使用外部函数的参数和变量，外部函数的参数和白变量不会被垃圾回收机制收回 function fnWrap(arg) { var a =1 function fnInner() { console.log(a) console.log(arg) } ret...

2018-12-07 23:10:37 140

原创 js面向对象方式实现拖拽

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &

2018-12-07 22:16:43 322

原创 js简单继承

function Person(name, sex) { this.name = name this.sex = sex } Person.prototype.showName = function () { console.log(this.name) } Person.prototype.showSex = fun...

2018-12-07 22:02:37 172

原创 chrome 监听touch类事件报错

document.addEventListener('touchstart',function (e) { //阻止默认事件 e.preventDefault() },{ passive: false }) document.addEventListener('touchstart', function(event) { // 判断...

2018-12-07 14:59:58 341

原创前端错误监控

前端错误的分类即时运行错误：代码错误资源加载错误错误的捕获方式即时运行错误：try catch window.onerror 资源加载错误： Object.onerror， performance.getEntryies()， Error:事件捕获跨域的js运行错误捕获：1.在script标签添加crossorgin属性 2.设置js资源响应头，Access-Control-Al...

2018-09-07 11:10:01 166

原创原型链和面向对象

1.创建对象有几种方法 // 对象字面量 var o1 = {name:'o1'} var o11 = new Object({name:'011'}) // 构造函数 var M = new Function(){this.name=m} var m =new M() // 用对象的原型创建 var P={name:'o3'} var o3 = Object.create(P) 2.原型...

2018-09-06 23:28:52 148

原创前端http协议知识点

1.特点简单快速：每个uri 是固定的灵活：通过一个http类型，可以完成不同数据类型的传递无连接：连接一次会断掉，不会保持连接无状态：没有记录状态，无法区分两次连接的身份 2.http报文的组成部分请求报文: 请求行：http方法，页面地址，http协议版本请求头：key value 空行：请求体：数据部分响应报文状态行响应头空行响应体 3.h...

2018-09-06 17:50:08 1129

原创 DOM事件

DOM事件级别 DOM0:ele.onclick=function(){} DOM2:ele.addEventListener("click",function(){},false) DOM3:ele.addEventListener("keyup",function(){},false)// 增加事件类型 DOM事件模型冒泡：从事件元素向上捕获：从上到...

2018-09-06 16:09:25 150

原创页面布局和css盒模型

1.页面布局练习高度已知，写出三栏布局，其中左栏、右栏宽度各为300px 中间自适应浮动缺点：需要处理清除浮动绝对定位缺点：布局脱离文档流 flex 缺点：兼容性表格布局缺点：一栏超出高度，其他跟着超出网格布局：兼容性高度未知的情况下，只有flex和表格布局试用 2.css盒模型基本概念标准模型+IE模型区别：宽高计算不同， padding bord...

2018-09-06 10:43:53 193

原创性能优化基本策略

原则多使用内存缓存和其他方法减少cpu计算，减少网络请求入手加载页面和静态资源静态资源的合并和压缩静态资源缓存使用cdn，让资源加载更快使用ssr后端渲染，数据直接输出到html 页面渲染 css放前面，js放后面懒加载减少DOM查询，对DOM查询缓存减少DOM操作，多个操作尽量合并在一起时间节流尽早执行操作（DOMContentedLoaded） ...

2018-09-06 00:23:37 286

原创输入url 到页面渲染完成

1.输入url到html返回浏览器根据DNS服务器获取ip地址向这个ip地址发送http请求服务器收到、处理并返回http请求浏览器得到返回内容 2.页面渲染完成根据html结构生成DOM Tree 根据css生成cssom 将DOM Tree 和cssom 结合，生成renderTree 根据renderTree开始渲染和展示遇到script标签会执行并阻塞渲染 ...

2018-09-06 00:02:33 212

原创练习题

1.获取2018-10-26格式日期 function formatDate(dt){ if(!dt){ dt=new Date() } var year = dt.getFullYear() var month = dt.getMonth()+1 var date = dt.getDate(...

2018-09-05 15:47:41 126

原创异步和单线程

1.异步和同步的区别异步不会阻塞程序运行同步阻塞程序运行何时需要异步：1.可能发生等待的情况 2.在等待的过程中不能阻塞程序的运行 console.log(100) setTimeout(function(){ console.log(200) },1000) console.log(300) 2.前端使用异步的场景定时任务 setTimeout setInterv...

2018-09-05 14:39:06 270

原创作用域和闭包

1. 执行上下文范围：一段script 或者一个函数全局：变量定义，函数声明 (一段script) 函数：变量定义，函数声明，this，arguments (函数) console.log(a) // undefined var a=100; fn('zs')//zs,name function fn(name){ age =20; console.log(name...

2018-09-05 12:38:58 145

原创原型链继承的例子和new 一个对象的过程

1.原型链继承 function Elem(id){ this.elem = document.getElementById(id) } Elem.prototype.html=function(val){ var elem = this.elem; if(val){ elem.innerHTML=val; return this// 链式...

2018-09-05 00:30:21 491 1

原创原型的五个规则

1.所有引用类型（数组，对象，函数），都具有对象特性，即可自由扩展属性 var obj = {} obj.a=100; var arr =[] arr.a =100; function fn(){} fn.a=100; 2. 所有的引用类型，都有一个proto属性，属性值是一个普通对象 console.log(obj.__proto__); ```ruby console.log...

2018-09-04 23:46:10 782

原创正则表达式

1.正则表达式的匹配规则在Pattern类中有正则表达式的的规则定义，正则表达式中明确区分大小写字母. 表达式的语法规则：字符：x 含义：代表的是字符x 例如：匹配规则为 "a"，那么需要匹配的字符串内容就是 ”a” 字符：\\ 含义：代表的是反斜线字符'\' 例如：匹配规则为"\\" ，那么需要匹配的字符串内容就是 ”\” 字符：\t 含义：制表符例如：匹...

2018-07-29 16:25:54 132

原创弹性盒模型中子元素中文本的溢出隐藏

弹性盒模型中，子元素文本的溢出隐藏（以省略号结尾）会出现问题，并不能正常的截断文本，并以省略号结尾。经过查阅资料解决上述问题可以在 flex:1 的元素上加上 width:0 或者min-width:0 ....

2018-06-29 12:51:48 2740 1

原创 js数组中的迭代方法

ECMAScript5 为数组定义5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和运行改函数的作用域对象-影响this的值。传入这些方法中的函数会接收三个参数：数组项的值（item）、该项在数组中的位置(index)和数组对象本身(array)。以下方法都不会修改数组中包含的值every() 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。 var

2017-10-20 17:18:42 310

原创 js中数组的操作方法

1.concat 不会修改原数组，（连接）这个方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新创建的数组。没有给concat()方法传递参数，它只是复制当前数组并返回副本。传递的参数是一个或者多个数组，会将这些数组中的每一项都添加到结果数组中传递的参数不是数组，这些值就会被简单的添加到数组结果的末尾 var colors=["red","green","b

2017-10-20 10:46:59 275

原创 js中数组的栈方法和队列方法

1.栈方法ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。具体来说，数组可以表现的就像栈一样（栈是一种可以限制插入和删除的数据结构）。栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构。栈中项的插入和移除只发生再一个位置，就是栈的顶部。ECMAScript为数组专门提供了push()和pop()方法，实现类似栈的行为。push()向数组末尾添加项，

2017-10-20 09:44:12 576

u013482875的博客