- 博客(64)
- 收藏
- 关注
RSS订阅原创 全屏滚动
全屏滚动实现：类似于轮播图，整体的元素一直排列下去。每个需要全屏展示的页面的高度设置为显示高度。实现：HTML结构：<div id="wrap"> <div id="main"> <div id="page1" class="page">第1屏</div> <div id=&
2018-07-23 19:44:59
548
转载 js中的函数只有一次有效调用的三种常用方法
如何让js中的函数只被执行一次？我们有时候会有这种需求，即让一个函数只执行一次，第二次调用不会返回任何有价值的值，也不会报错。下面将通过三个小demo展示使用的方法，当做个人笔记。1.通过闭包来实现。 <script> window.onload = function () { function once(fn) { ...
2018-06-13 15:18:34
1265
转载 同一浏览器多个标签页之间的通信（一）——localStorage
一、localStorage （1）localStorage是什么？ localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了globalStorage，是Storage的实例。 注意：要访问一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。相当于globalStorage[localhost.host]。 （...
2018-06-13 09:37:52
3605
1
转载 同一浏览器多个标签页之间的通信（二）——cookie+setInterval
二、cookie （1）cookie是什么？ HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-CookieHTTP头作为相应的一部分，其中包含回话信息。浏览器会存储这样的回话信息，并在这之后，通过每个请求添加CookieHTTP头将信息发回服务器。 （2）cookie怎么用？ 在JavaScript中，coo...
2018-06-13 09:28:35
1061
原创 图片的预加载
一、预加载作用： 牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。二、实现方式：1.用CSS实现预加载； 2.仅使用JavaScript实现预加载； 3.使用Ajax实现预加载。常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法...
2018-06-12 11:33:30
261
转载 图片的懒加载
原理：函数的节流html结构代码： <ul id="picUl"> <li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-ori.
2018-06-12 10:40:56
173
原创 防抖动和函数节流
针对高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等）。有两种常用的解决方法，防抖和节流。一、防抖动 防抖就是在一段时间内如果一直触发着滚动事件，则handler函数不会触发。而是等到规定的时间段内没有监听到滚动事件再触发最后的handler函数，之前的handler函数则被清除不会触发。防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，...
2018-06-11 22:47:08
579
原创 web标签页之间的通信
标签页之间的通信，遵循同源策略。1.localStroage 当对localStroage进行添加、删除、更改操作时，会触发stroage事件。所以通过监听stroage事件，获取到localStroage的信息。test.html<input id="name" type="text"> <input type="button" id="btn" value="提交&qu
2018-05-25 17:43:10
360
原创 setTimeout用法详解
一、语法规则 setTimeout(code, millisec) code: millisec后调用的函数或计算表达式。 millisec：millisec后开始加入队列二、示例 1. 500ms后执行alert（“123”） setTimeout("alert('123')", 500);2. var n...
2018-05-23 08:55:35
2509
原创 关于webpack打包文件中有vue-router所引发的问题
问题一：.webpack打包后页面无法显示解决方案：将路由配置中的mode参数改为默认值“hash”，才可以解决该问题。因为当mode值为history时，需要后端的支持。问题二：运行webpack-dev-server后，对于动态路由，当从其他页面转到动态路由页面时，可以正常显示。而在地址栏输入动态路由的地址时，页面不能正常加载解决方案：将路由配置中的mode参数改为默认值“hash”，可以解决...
2018-05-14 22:14:33
1691
原创 webpack.config.js中mudule的配置
mudule是对于不同的模块的处理规则。module的rules属性代表不同的处理规则。rules是一个对象。对象的属性有test、use、exclude、include。use属性是对象数组。数组的话，是从后往前解析。对象的参数为loader/options。1是2的简写形式。3是4的简写形式。1.module:{ rules:[ { test:/\.css$/, u...
2018-05-10 18:31:50
1476
原创 webpack 处理 vue单文件
1.安装 2.webpack.config.js注意还需要引入插件vue-loaderconst { VueLoaderPlugin } = require('vue-loader');const ExtractTextPlugin=require("extract-text-webpack-plugin");const webpack = require ("webpack"); c...
2018-05-10 18:16:33
1049
原创 webpack 打包css文件
在webpack中，每个文件都是一个模块（css、js、html、jpg、less）。对于不同的模块使用不同的加载器.文章中使用的版本：node：4.6.0，webpack 4.6.0文章中的配置：安装 webpack-dev-server一、直接打包css1.、安装加载器npm install css-loader --save-devnpm install style-loader --sa...
2018-05-10 17:42:55
7147
原创 npm 安装时 --save --dev 和 --save 区别
一、模式运行webpack命令时，一定要指定模式。webpack --mode developmentwebpack --mode production二、--save -dev--save：将保存配置信息到pacjage.json。默认为dependencies节点中。--dev：将保存配置信息devDependencies节点中。因此：--save：将保存配置信息到pacjage.json的...
2018-05-10 17:39:53
44638
1
原创 node 的path模块中 path.resolve()和path.join()的区别
一、path模块的引入。直接引用。node中自带的模块const path = require('path');二、path.join(path1，path2，path3.......) 作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。const path = require('path');let myPath =...
2018-05-10 17:29:29
67684
9
原创 webpack 踩坑之对于打包的图片路径错误
一、什么是webpack？ webpack是模块打包工具二、webpack安装 版本：4.6.0npm install webpack --save-devnpm install webpack-cli --save-dev三、配置文件webpack.config.jspubliPath的默认地址为当前目录。module.exports = { entry:{ ...
2018-05-10 16:59:16
4550
原创 web-dev-server 配置基础总结
一、什么是web-dev-server二、如何安装 安装webpack -dev-server。三、参数配置在wbpack.config.js中配置如下： devServer:{ contentBase: "./", //本地服务器的搭建目录，默认为当前目录 historyApiFallback:true, //...
2018-05-09 22:39:36
4879
原创 javascript 之 回调函数（普通函数和箭头函数）中的this
函数中this对象的取值，是在函数被调用执行的时候确定的。此时会创建执行上下文环境。对于箭头函数，它没有自己的this，不能用作构造函数。箭头函数中的this对象是定义时所在的对象，不是调用时所在的对象。对于回调函数中的this对象。以下是两个小例子。1.对于 setTimeout函数普通函数： 100ms后执行时，this指向window对象。function foo() { setTimeo...
2018-05-07 15:16:04
5975
原创 webpack+vue 创建项目
本文使用webpack+vue创建项目。本文基于wenpack4.6.0、vue2.x 、node.js 8.11.0.由于代码中会使用es6的语法，因此需要babel转码器。1.创建项目。npm init2.本地安装如下插件。安装完后package.json如下所示：{ "name": "single-project", "version": "1.0.0", "descriptio...
2018-04-26 17:54:33
440
原创 webpack-dev-server 实现实时热更新
这几天，使用weebpack尝试实时热更新，一直出错，终于改对了。以下为具体的过程，（基于webpack4.6.0，node.js的8.11）搭建本地服务器，还可以进行监听和打包文件。并且能够进行实时重新加载。当打包文件改变时，不需要重新打包编译，浏览器会实现实时更新。一、建立项目。初始化项目：输入npm init二、本地安装webpack、webpack-cli三、本地安装webpack-dev...
2018-04-26 15:38:29
4543
原创 webpack 之打包图片
我们可以使用webpack打包图片。打包的具体步骤如下：1.打包图片时我们需要file-loader。安装flie-loader。npm install --save-dev file-loader2.配置webpack.fig.js module:{ rules:[ { test:/\.(png|svg|jpg|gif)$/, use:["file-loa...
2018-04-17 17:15:42
1571
原创 使用webpack打包工具实现浏览器支持es6模块
浏览器目前对于es6的支持有限。我们通常会使用babel转码器经es6转为es5实现浏览器的支持。但是babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。而且像i...
2018-04-04 10:29:54
2143
原创 正则表达式的练习
今天，做了几个编程题目，深感正则表达式的强大。一、检查字符串中是否包含数字。包含则返回true，否则返回false。 function containsNumber(str) { for (var i = 0; i < str.length; i++) { if (!isNaN(pa...
2018-03-26 22:01:48
348
原创 实习生笔试
这几天参加过几场笔试。让我对笔试有了新的认识。无论是前端，还是后端，最开始的笔试都只是一个简单的测试，测试你的逻辑思维能力，算法能力。单项选择题基本上是一些计算机的基础题目，包括网络协议（http、Tcp/Ip)、内存、寄存器。程序的设计。而编程题目是一些简单的算法题目，不会太难，但是反映的是你的基础能力和思维能力。以下是我这几天搜集的题目：1.给定一个数组，和一个差值k。判断该数组内差值为k的数...
2018-03-25 20:57:00
909
原创 实现兼容版本的element.dataset
为了实现页面的懒加载，我们常常需要实现使用自定义的属性。详见点击打开链接为了获取自定义的属性，我们常常需要element.dataset属性。如下代码实现兼容版本的element.dataset属性。实现思路：1.对于兼容element.dataset属性，直接使用该方法。2.对于不兼容该方法的，遍历元素的所有属性，找到该属性。代码如下：function dataset(element) { v...
2018-03-22 17:36:26
656
转载 图片的预加载
该篇文章首发于我的个人博客：http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客，更多文章请移步至我的个人博客预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度...
2018-03-22 17:33:58
155
原创 懒加载提高页面性能
一、什么是懒加载？ 懒加载，就是延迟加载。针对于多图片的页面，只有当该图片出现在页面视区中时，再加载该图片。。可以防止页面一次性加载完所有的图片，用户等待时间较长，影响用户体验。二、如何实现懒加载 1. 将页面中的图片的src属性设置为空，并将src属性真正的值存放在自定义属性data-originnal（自定义属性以data-开头）。 2.为页面中的图片设置好大小，防止引起页面的回流，影响性能...
2018-03-21 22:48:55
4158
1
原创 javascript实现堆排序
堆排序堆是具有以下性质的完全二叉树：每个结点的值都大于或等于其左右孩子结点的值，称为大顶堆；或者每个结点的值都小于或等于其左右孩子结点的值，称为小顶堆。如下图： function heapSort(arr) { for(var i=Math.floor(arr.length/2)-1;i>=0;i--){ //从上而下生成大顶堆 heapA...
2018-03-13 17:26:32
628
原创 javascript高级排序算法-希尔排序、归并排序、快速排序
一、希尔排序重点：间隔值的选取 function shellsort(arr,gap) { for(var g=0;g<gap.length;g++){ for (var i = gap[g]; i < arr.length; i++) { var temp=arr[i]; for(var j=i;j>=gap[g...
2018-03-13 15:39:31
202
原创 js实现基础的排序-冒泡排序、选择排序、插入排序
一、冒泡排序：function bubbleSort(arr) { var len=arr.length; for(var outer=0;outer<len-1;outer++) for(var inner=0;inner<len-outer+1;inner++){ if(arr[inner]>arr[inner+1]){ //比较相邻元素 l...
2018-03-13 10:55:09
173
转载 web开发中会话跟踪方式整理
Web服务器使用Http协议。Http是无状态协议。Http的web服务器不能保持与客户端的关联。会话(session)定义为在一段时间内，单一客户与web服务器之间的一系列的交互。在一个会话中，跟踪请求之间的数据成为会话跟踪。1. 使用隐藏域进行会话跟踪是一种最简单的方式，将字段隐藏在HTML表单中，但不在客户端显示。比如在第一张页面中输入用户名和密码登陆，服务器生成响应返回第二张页面。当第二张...
2018-03-04 21:01:24
599
原创 闭包中变量值的改变
1.对于闭包中的变量是怎么回事？function makeCounter() { var i = 0; console.log(i); return function(){ console.log(++i); console.log(i); }; }//记住：`counter`和`counter2`都有他们自己的变量
2017-12-07 21:38:31
1470
原创 button元素与input元素的区别
一、button元素 1.type属性为button、reset、submit。 2.button元素在浏览器中的默认值不同，一定要明确指定button类型（IE中为button，其他浏览器为submit） 3. 表单中使用button元素时，不同的额浏览器提交的值不一样(IE提交的是button元素之间的值，其他浏览器提交的是 button元素的v
2017-11-20 17:46:40
2443
1
原创 JavaScript闭包中的循环（二）
1.实例一：var nodes = document.getElementsByTagName('button');for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i);
2017-11-17 11:34:35
233
原创 JavaScript的作用域和变量提升
1.变量域js中只有函数作用域（local scope)和全局作用域（global scope），没有块级作用域2.变量提升对于val定义的变量和function a(){} ，存在变量提升。注意：函数表达式不存在变量提升。实例1：(function() { console.log(testc);
2017-11-16 22:26:18
298
原创 JavaScript函数参数的传递
js函数参数的传递方式是值传递。基本类型的值传递的是变量的值引用类型传递的是内存地址实例如下：var num = 10, name = "Addy Osmani", obj1 = { value: "first value" }, obj2 = { value: "second value" }, obj
2017-11-16 19:12:57
402
原创 JS异步实现Generator
一、Symbol数据类型 ES6中新增加了Symbol数据类型。 原生具有[Symbol.iterator]属性的数据类型:数组、类数组、map、set、 具有[Symbol.iterator]属性的对象，直接调用就可以生成一个Iterator对象 二、Iterator对象：是一个指针对象，遍历器对象 方法：next（）：
2017-10-10 20:25:16
653
原创 js的promise应用
1.异步加载图片function loadImageAsync(url){ return new Promise(function (resolve,reject){ var img=new Image(); img.onload=function() { resolve(img); }; img.onerror=fu
2017-10-10 15:23:30
393
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人