javascript
文章平均质量分 64
彼之方
山重水复疑无路,柳暗花明又一村
展开
-
javascript创建对象
在javascript中一切都是对象。对象都是通过引用类型创建的,这个引用类型包含原生类型(Aaary、Date、RegExp、Function)。创建对象通常使用三种模式:1.工厂模式:function createPerson(name,age,job){ var o=new object(); o.name=name; o.name=age;原创 2017-06-03 20:13:47 · 178 阅读 · 0 评论 -
关于斐波那契数的JavaScript实现
递归实现优化原创 2017-11-16 16:42:06 · 317 阅读 · 0 评论 -
JavaScript函数参数的传递
js函数参数的传递方式是值传递。基本类型的值传递的是变量的值引用类型传递的是内存地址实例如下:var num = 10, name = "Addy Osmani", obj1 = { value: "first value" }, obj2 = { value: "second value" }, obj原创 2017-11-16 19:12:57 · 390 阅读 · 0 评论 -
JavaScript的作用域和变量提升
1.变量域js中只有函数作用域(local scope)和全局作用域(global scope),没有块级作用域2.变量提升对于val定义的变量和function a(){} ,存在变量提升。注意:函数表达式不存在变量提升。实例1:(function() { console.log(testc);原创 2017-11-16 22:26:18 · 289 阅读 · 0 评论 -
web开发中会话跟踪方式整理
Web服务器使用Http协议。Http是无状态协议。Http的web服务器不能保持与客户端的关联。会话(session)定义为在一段时间内,单一客户与web服务器之间的一系列的交互。在一个会话中,跟踪请求之间的数据成为会话跟踪。1. 使用隐藏域进行会话跟踪是一种最简单的方式,将字段隐藏在HTML表单中,但不在客户端显示。比如在第一张页面中输入用户名和密码登陆,服务器生成响应返回第二张页面。当第二张...转载 2018-03-04 21:01:24 · 593 阅读 · 0 评论 -
实现兼容版本的element.dataset
为了实现页面的懒加载,我们常常需要实现使用自定义的属性。详见点击打开链接为了获取自定义的属性,我们常常需要element.dataset属性。如下代码实现兼容版本的element.dataset属性。实现思路:1.对于兼容element.dataset属性,直接使用该方法。2.对于不兼容该方法的,遍历元素的所有属性,找到该属性。代码如下:function dataset(element) { v...原创 2018-03-22 17:36:26 · 646 阅读 · 0 评论 -
图片的预加载
该篇文章首发于我的个人博客:http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客,更多文章请移步至我的个人博客预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度...转载 2018-03-22 17:33:58 · 144 阅读 · 0 评论 -
懒加载提高页面性能
一、什么是懒加载? 懒加载,就是延迟加载。针对于多图片的页面,只有当该图片出现在页面视区中时,再加载该图片。。可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。二、如何实现懒加载 1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。 2.为页面中的图片设置好大小,防止引起页面的回流,影响性能...原创 2018-03-21 22:48:55 · 4145 阅读 · 1 评论 -
正则表达式的练习
今天,做了几个编程题目,深感正则表达式的强大。一、检查字符串中是否包含数字。包含则返回true,否则返回false。 function containsNumber(str) { for (var i = 0; i < str.length; i++) { if (!isNaN(pa...原创 2018-03-26 22:01:48 · 336 阅读 · 0 评论 -
使用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 · 2126 阅读 · 0 评论 -
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 · 2490 阅读 · 0 评论 -
防抖动和函数节流
针对高频度触发事件问题(例如页面 scroll ,屏幕 resize,监听用户输入等)。有两种常用的解决方法,防抖和节流。一、防抖动 防抖就是在一段时间内如果一直触发着滚动事件,则handler函数不会触发。而是等到规定的时间段内没有监听到滚动事件再触发最后的handler函数,之前的handler函数则被清除不会触发。防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,...原创 2018-06-11 22:47:08 · 569 阅读 · 0 评论 -
图片的懒加载
原理:函数的节流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 · 163 阅读 · 0 评论 -
图片的预加载
一、预加载作用: 牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。二、实现方式:1.用CSS实现预加载; 2.仅使用JavaScript实现预加载; 3.使用Ajax实现预加载。常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法...原创 2018-06-12 11:33:30 · 246 阅读 · 0 评论 -
同一浏览器多个标签页之间的通信(二)——cookie+setInterval
二、cookie (1)cookie是什么? HTTP Cookie,通常直接叫做cookie,最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-CookieHTTP头作为相应的一部分,其中包含回话信息。浏览器会存储这样的回话信息,并在这之后,通过每个请求添加CookieHTTP头将信息发回服务器。 (2)cookie怎么用? 在JavaScript中,coo...转载 2018-06-13 09:28:35 · 1044 阅读 · 0 评论 -
同一浏览器多个标签页之间的通信(一)——localStorage
一、localStorage (1)localStorage是什么? localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了globalStorage,是Storage的实例。 注意:要访问一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。相当于globalStorage[localhost.host]。 (...转载 2018-06-13 09:37:52 · 3577 阅读 · 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 · 224 阅读 · 0 评论 -
JavaScript闭包中的循环
loopcloser原创 2017-11-17 10:24:55 · 380 阅读 · 0 评论 -
JS异步实现Generator
一、Symbol数据类型 ES6中新增加了Symbol数据类型。 原生具有[Symbol.iterator]属性的数据类型:数组、类数组、map、set、 具有[Symbol.iterator]属性的对象,直接调用就可以生成一个Iterator对象 二、Iterator对象:是一个指针对象,遍历器对象 方法:next():原创 2017-10-10 20:25:16 · 641 阅读 · 0 评论 -
jaavscript对象
1.对象是属性的集合。每个对象都是基于引用类型创建的。(包括原生类型) 以对象字面量创建的对象只是创建object对象的一种简写方式。以下两段代码的效果相同。var person={name:"tian",age:13,saynName:function(){ alert(this.name);}var person=new object();pe原创 2017-06-03 22:50:52 · 513 阅读 · 0 评论 -
javascript中的instance和typeof
1. typeof操作符 typeof操作符可以用来判断变量的数据类型。 对于值类型有四种结果(undefined、string、number、boolean) 对于引用类型有两种结果(function、object) 注意:typeof null==object;2, instanceof操作符 instanceof操作符用来判断引用类型原创 2017-06-04 12:02:21 · 14787 阅读 · 0 评论 -
javascript继承
javascript支持实现继承。而继承是通过原型链实现的。继承的本质就是重写原型对象,代之以一个新类型的实例。 1.原型链, 原型链,简而言之,就是原型与实例的链条。通过让原型对象等于另一个类型的实例实现的,这样这个引用类型就 继承了另一个引用类型的属性和方法(包括实例属性和原型对象的属性和方法)。 所有的引用类型都默认继承了object。这个继承就是原创 2017-06-03 20:58:58 · 174 阅读 · 0 评论 -
javascript函数与对象
1. 对象 对象是属性的集合。表示为键值对的形式。 2.对象与函数的关系 对象是由函数创建的,而函数也是一种对象。因此也可以给函数添加属性和方法。函数也有一个_proto_属性。 函数是由Function创建的,因此_proto_属性Function.prototype。如图: 图片来源:http://www.ibm.com/develope原创 2017-06-04 12:20:54 · 210 阅读 · 0 评论 -
javascript执行环境和作用域
1.执行上下文环境 javascript在执行代码之前,会先做一些准备工作。找到所有的变量,有的直接为其赋值,有的则先声明并默认赋值为undefined。 在全局作用域中执行代码时,要准备以下三件事; a、对于变量、函数表达式。则对其进行变量声明,默认赋值为undefined。 b、对于this,直接赋值 c、对于函数声明,直接赋值 在函数体原创 2017-06-04 15:46:59 · 296 阅读 · 0 评论 -
javascript之this
函数中this对象的取值,是在函数被调用执行的时候确定的。(函数调用时会产生执行上下文环境)分为以下五种情况: 1. 函数是构造函数 this代表将要创建的对象。 注意:如果将构造函数当做函数调用,则this==window。 2. 函数作为对象的属性 如果函数作为对象的一个属性,并且作为该对象的属性被调用时。函数中的this代表该对象。原创 2017-06-04 16:50:14 · 285 阅读 · 0 评论 -
javascript之作用域链
函数也是对象,拥有一个【scope】内部属性,指向作用域链。如下代码段:function add(num1,num2){ var sum=num1+num2; return sum;}var total=add(5,10);创建作用域链的过程如下: 1. 函数创建时,它的作用域链中插入了一个对象变量。这个全局对象代表着所有在全局范围内定义的变量。原创 2017-06-27 11:49:05 · 168 阅读 · 0 评论 -
[Leetcode] problem 13之Roman to Integer
leetcode Roman to Interge原创 2017-08-07 21:22:15 · 166 阅读 · 0 评论 -
[Leetcode]problem 9之Palindrome Number
题目:判断回文数要求:空间度为1,即O(1)解析:1.回文数:前后颠倒后,数不变 2..负数不是回文数 分析:判断数的第一位和最后一位,然后去掉数的第一位和最后一位,继续判断(也可以将数转换为数组,然后判断 数组首尾元素的大小,但此时增加了新的空间) 1.判断数的符号,负数返回false 2.计算原创 2017-08-07 21:47:14 · 246 阅读 · 0 评论 -
【Leetcode problem 7】 Reverse Integer
题目:反转整数要求:整数是32位有符号的整数,反转整数溢出后返回0分析:1.将整数转化为正整数 2.取出正整数的最后一位,作为反转整数的第一位 3.取出正整数的最后一位。 4.循环执行3,4.计算反转后的数 5.判断是否溢出javascript代码如下: var revers原创 2017-08-07 23:21:09 · 216 阅读 · 0 评论 -
【Leetcode problem 20】-Valid Parentheses
思路分析:1.判断字符为左括号,则将其压入数组中。 2.若字符为右括号,则判断其与数组中的最新压入的字符是否匹配。 3.若匹配,则弹出数组中的元素。 4.否则返回false;javascript代码如下/** * @param {string} s * @retu原创 2017-08-16 22:21:08 · 175 阅读 · 0 评论 -
【Leetcode problrm 21】Merge Two Sorted Lists
思路:将l1、l2两个列表合并到新列表中 1.建立一个llistnode对象list用于表示合并后的列表,再建一个temp用于保存列表中的当前值。 2.判断l1和l2当前值的大小,然后将list。next指向较小的值。 3.循环计算。 javascript代码如下: /** * Definitio原创 2017-08-17 15:42:34 · 287 阅读 · 0 评论 -
【Leetcode Problem 26】之Remove Duplicates from Sorted Array
题目:移除数组中重复的数据,返回数组的长度。不可以开辟新的数组思路:1.设置变量j来计算数组的长度。 2.比较每个数组元素和前一个数组元素的值,是否相等。 3.若不相等,则该元素不变。数组的长度加1。 4.如此,相等的值将会被覆盖。javascript代码如下:/** * @param {number[]} nu原创 2017-08-17 16:28:34 · 236 阅读 · 0 评论 -
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 · 383 阅读 · 0 评论 -
js中的函数只有一次有效调用的三种常用方法
如何让js中的函数只被执行一次?我们有时候会有这种需求,即让一个函数只执行一次,第二次调用不会返回任何有价值的值,也不会报错。下面将通过三个小demo展示使用的方法,当做个人笔记。1.通过闭包来实现。 <script> window.onload = function () { function once(fn) { ...转载 2018-06-13 15:18:34 · 1242 阅读 · 0 评论