qq_26702033-CSDN博客

原创 sublime text3 安装less

1、安装Sublime 插件（1）安装LESS插件：因为Sublime不支持Less语法高亮，所以，先安装这个插件，方法： ctrl+shift+p>install Package>输入less按Enter （2）安装LESS2CSS插件：这个插件的作用是当保存less文件的时候自动生成同名的css文件；当保存less文件的时候提示编译错误信息；批量编译项目目录下...

2018-04-17 11:09:44 461

原创 js排序算法

/*冒泡排序*/function bubbleSort(arr){ var len = arr.length; for(var i = 0;i<len-1;i++){ for(var j = i+1;j<len-i-1;j++){ if(arr[j]>arr[j+1]){ var temp ...

2018-04-09 13:33:19 210

原创错误的捕获

如何保证产品上线品质？前端错误的分类：及时运行错误：代码错误；资源加载错误；及时运行错误的捕获方式： - try-catch - window.onerror,注册window.onerror事件。window.onerror = function(){}资源加载错误： -object.onerror,不能在冒泡阶段实现。 - performance.getEn...

2018-04-09 11:17:40 414

原创 HTTP协议

POST和GET的区别GET在浏览器回退时是无害的，而POST会再次提交请求；GET产生的URL地址可以被收藏，而POST不可以；GET请求会被浏览器主动缓存，而POST不会，除非手动设置；GET请求只能进行URL编码，而POST支持多种编码方式；GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留；（防止crs攻击）GET请求在URL中传送是有长度限制的，而...

2018-04-09 10:41:02 238

原创浏览器渲染机制

浏览器的渲染机制1.什么是DOCTYPE及作用？ 2.浏览器渲染过程？ 3.重排？reflow 4.重绘？repaint 5.布局layout？什么是DOCTYPE及作用？用于声明文档类型和DTD类型，用于验证文件的合法性。浏览器根据DTD来判断文档类型，并决定用何种协议来解析。常见的DOCTYPE？ HTML5的DOCTYPE?<!DOCTYPE html&g...

2018-04-09 10:37:47 236

原创通信类

同源策略及限制源：协议、域名、端口cookie、localStorage和IndexDB无法读取； DOM无法获得； AJAX请求不能发送。前后端如何通信 Ajax websocket CORS ：支持跨域通信也支持同源通信如何创建ajax XMLHTTPRequest对象的工作流程兼容性处理事件的触发条件事件的触发顺序跨域通信的几中方式 JSONP...

2018-04-09 09:49:51 256

原创页面性能类

题目：提升页面性能的方式有哪些？1.资源压缩合并，减少HTTP请求； 2.非核心代码异步加载–异步加载的方式—异步加载的区别 3.利用浏览器缓存–缓存的分类–缓存的原理 4.使用CDN 5.预解析DNS<meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch"...

2018-04-08 10:52:07 149

原创 DOM事件

DOM事件类基本概念：DOM事件的级别 DOM事件流描述DOM事件捕获的具体流程Event对象的常见应用自定义事件DOM事件类DOM0 element.onclick = function(){}DOM2 element.addEventListener('click',function(){},false)DOM3 element.addE...

2018-04-08 10:48:52 221

原创变量类型和计算

JS中适用typeof能得到的哪些类型何时使用===何时使用==JS中有哪些内置函数JS变量按照存储方式区分为哪些类型，并描述其特点如何理解JSON变量类型值类型vs引用类型typeof 运算符详解//值类型var a = 100;var b = a;a = 200;console.log(b)//100//引用类型var a = {age:20};...

2018-04-08 10:19:43 174

原创 js中的同步和异步

同步和异步的区别是什么？分别举一个同步和异步的例子一个关于setTimeout的笔试题前端使用异步的场景有哪些知识点：什么是异步（对比同步）前端使用异步的场景异步和单线程同步和异步的区别？是否发生了阻塞，例子ajax的同步和异步请求。使用场景？是否需要等待执行。定时任务：setTimeout，setInverval 网络请求：ajax请求，动态img加...

2018-04-08 10:16:56 1630

原创 webpack--处理项目中的资源文件

loader1.按一下文件目录新建文件： 2. 按照之前教程安装好webpack，html-webpack-plugin； HTML代码：<div class="layer"> <div>this is a layer</div></div>app.js代码：(入口文件)import layer from '...

2018-04-04 16:43:26 1331

原创 webpack-自动化生成HTML

1.安装webpack插件；npm install html-webpack-plugin --save-dev2.在webpack.config.js中引入这个插件；var htmlWebpackPlugin = require('html-webpack-plugin');3.在参数内配置插件：不传参直接使用插件会报错：HtmlWebpackPlugin is no...

2018-03-30 16:50:35 827

原创 webpack配置entry和output

CLI配置webpack.config.js，可以直接通过命令行工具来设置。 1.可以在package.json文件的的scripts下添加对应的参数，然后配合npm的命令行则可以实现webpack的一些相关命令。 2.然后运行npm run webpack。{ "name": "wpt", "version": "1.0.0", "main": "index.js&qu

2018-03-29 10:16:26 651

原创 html5 filereader对象读取本地文件、图像

在html5之前在本地上传图片后预览的方法是，以前我们通常的做法是将选择的图片文件通过ajax上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader...

2018-03-21 18:53:26 6850

原创 JavaScript表单上传（包含文件上传）三个方法

参考地址： form表单上传附件的几种方法 form上传文件2种方式1.使用form表单提交form使用属性enctype="multipart/form-data";<form action="请求地址" method="请求类型" enctype="multipart/form-data"> <input type="file" nam

2018-03-21 12:57:42 10360

原创 js原型和原型链

如何准确判断一个变量是数组类型写一个原型链继承的例子描述new一个对象的过程zepto或其他框架源码中如何使用原型链知识点构造函数构造函数-扩展原型规则和实例原型链function fn(name,age){ this.name = name; this.age = age; this.class = 'class-1'; //ret...

2018-03-17 11:34:15 843

原创面向对象

创建对象的几种方式1.通过Object构造函数或者对象字面量创建单个对象；这种方式的明显缺点：使用同一个接口创建多个对象，会产生大量重复代码。为了解决这个问题就出现了工厂模式。2.工厂模式实现起来就是在一个函数内创建好对象，然后把对象返回。代码如下：function createPerson(name,age,job){ var o=new Object...

2018-03-13 17:21:17 134

原创 BFC

1.什么叫BFCbox、Formatting Context的概念box：css布局的对象和基本单位，直观来说，就是一个页面是由多个box组成的。元素的类型和display属性，决定了这个box的类型。不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此box内的元素会以不同的方式渲染。block-level box：display...

2018-03-12 10:25:45 184

原创 CSS盒模型

CSS盒模型1.基本概念：标准模型—+IE模型 2.标准模型和IE模型的区别1.宽度和高度的计算标准模型的宽度：content.width 标准模型的高度：content.height IE模型的宽度：content.width+padding-left+padding-right+border-left+border-right IE模型的高度：conte...

2018-03-12 10:21:01 144

原创页面布局--三栏布局左右固定中间自适应

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应：解决方案： 1.浮动布局； 2.绝对定位； 3.flexbox布局； 4.表格布局 tablecell属性； 5.grid网格布局；样式<style media="screen"> html *{ padding: 0; margi...

2018-03-12 09:06:18 445

转载页面布局--左边固定右边自适应两栏布局

[转载]原文链接总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。基础代码： HTML<div class="wrapper wrapper-inline-block" id="wrapper"> <div class...

2018-03-07 17:15:13 1247

原创页面布局--上下固定中间自适应出现滚动条布局

上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。1.position:fixed+overflow:scroll+js动态设置中间高度html代码：//html结构<nav></nav><div class="container" id="container"><div class="inner"&am

2018-03-07 14:27:50 7178 1

原创建立项目的webpack配置文件

1.安装之前步骤新建好项目文件，新增加dist 文件夹用来放置打包后的文件，style文件夹用来放置css，js，less等文件。2.新建一个webpack.config.js文件用来写webpack配置文件。配置代码：//webpack 1.0 语法/*module.exports = { entry:'./src/script/main.js', ou...

2018-02-10 16:44:15 547

原创 webpack的安装和命令行

1.按住 shift ，testwp文件单击右键，在此处打开命令窗口,打开命令窗口。2.初始化npmnpm init3.安装webpacknpm install webpack --save-devnpm init //一路回车,这里要注意name最好不要取什么webpack，grunt，glup之类的，不然可能会爆refusing to install xxx...

2018-02-10 09:02:32 2024

原创 websocket

websockethtml html5 websocket httpwebsocket 是一种网络通信协议。一.为什么需要websocket？因为HTTP协议有一个缺陷：通信只能由客户端发起。这种单项请求的特点，注定如果服务器有连续的状态变化，客户端要获知就非常麻烦，我们只能使用“轮询”，每隔一段时间，就要发出一个询问，了解服务器有没有更新

2018-02-08 10:38:50 174

qq_26702033的博客