
JavaScript
文章平均质量分 57
Dear_Mr
尽自己的努力,做好该做的事情
展开
-
JS中BOM部分基础知识总结
1. BOM(Browser Object Document)浏览器对象模型JS由三部分构成,ECMAScript,DOM和BOM, BOM,BOM主要是用来处理浏览器窗口和框架 DOM 是 W3C 的标准; (公共标准) BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现; (有差异) window 是 BOM 对象,而非JS对象; 2. BOM的窗口(1)可视窗口原创 2017-03-11 17:44:47 · 642 阅读 · 0 评论 -
JavaScript中的宽度和高度
JavaScript中的宽度和高度关于winow和document的关系:window是一个顶层对象,即浏览器的窗口document表示当前的HTML文档,也是一个对象,而document对象也是window对象的一部分注意:以下测试均在Firefoxwindow相关的宽度和高度innerHeight与outerHeight通过Firebug的测试,我得到以下特点:window.outerHeig原创 2017-06-20 16:49:53 · 546 阅读 · 0 评论 -
闭包与循环的尝试
闭包与循环的尝试for(var i =0; i <= 5; i++) { var old = new Date().getTime(); setTimeout(function timer() { let newT = new Date().getTime(); console.log("time", newT - old); console.log(i); },原创 2017-07-13 21:49:39 · 431 阅读 · 0 评论 -
图解原型原型链
图解原型原型链原型 ?在“类”中(也就是函数中)的prototype就指向一个原型对象,在实例中,__proto__就指向的是一个构造它的那个“类”(函数)的原型,通过protoype与__proto__就会形成一个原型链,对于一个实例来说,就是谁构造的我,我的__proto__就指向谁的原型,直到最顶层的Object,对于“类”(函数)来说,我的prototype指向的是我自己的原型,我里面也有_原创 2017-07-14 09:57:23 · 864 阅读 · 0 评论 -
手写JavaScript模板引擎
在上一篇博客中,写了简单的模板引擎的例子,是存在一定的局限性的,所以打算再看看这个模板引擎查找要替换的部分这次的模板是类似下面这样的var str = "今天是{{day}},天气{{weather}}, 我今天的计划是, {{plan}}";var reg = /{{\w+}}/g;console.log(str.match(reg)); [“{{day}}”, “{{weather}}”原创 2017-07-30 16:21:02 · 1283 阅读 · 0 评论 -
Fetch
Fetch之前所写的Ajax都是利用XMLHttpRequest实现的,可是也不难发现XMLHttpRequest并不是专为Ajax实现的,并且它也没有关注分离的原则,配置和调用方式比较混乱,不太友好,而基于Promise的Fetch就比较友好相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch简单介绍fetc原创 2017-07-09 21:18:23 · 1049 阅读 · 0 评论 -
跨域问题以及解决办法
跨域问题以及解决办法什么是跨域问题?跨域这个问题是由于浏览器的同源策略引起的,请求的URL地址,必须与浏览器的URL是相同协议、相同域名、相同端口的,否则是不允许访问的 浏览器URL 要访问的URL 结果 http://www.123.com/index http://www.123.com/server 成功 http://www.123.com/index http原创 2017-07-10 11:13:35 · 837 阅读 · 0 评论 -
面试题总结
这三道题,是我在面试中碰到的,希望对你有用题目一 比较两个参数是否相等 function diff() { …. } diff(1, 1); //true diff(1, ‘1’); //false diff({name: ‘123’}, {name : ‘123’}) //true diff({name: ‘123’}, {name : ‘678’}原创 2017-08-18 14:34:07 · 718 阅读 · 0 评论 -
前端解决跨域问题的八种方案
原文链接同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www转载 2017-07-27 14:53:31 · 506 阅读 · 0 评论 -
值得思考的JavaScript代码
关于Javascript很经典的闭包问题与异步问题,希望你能仔细阅读相关内容问题一 请说明其输出结果for(var i = 0; i < 5; i++) { setTimeout(function() { console.log("inner", new Date().getTime(), i); }, 1000);}console.log("outer", new Date原创 2017-08-05 21:52:29 · 569 阅读 · 0 评论 -
JavaScript—易犯错的题目
var arr = [];arr[0] = 0;arr[1] = 1;arr.foo = 'c';console.log(arr.length)运行结果为2,当时我想会报错,结果错了,数组的实例本身也是一个对象,可不要忘记typeof ary的结果可是object的,arr.length可以认为是arr的属性,那么同理,arr.foo也可以认为是给arr添加了一个属性foo,这个属性的值原创 2017-08-19 15:59:59 · 896 阅读 · 0 评论 -
笔试题积累
判断给定的一个字符串是否是合法IP 思路:对于给定的字符串,按照“.”进行分割,然后判断长度是否等于4,然后依次判断每一项是否在[0, 255]之间function judgMent(ip) { if(!ip) { throw Error('IP 不能为空'); } ip = ip.toString(); var ary = ip.split('.'); if(ary.len原创 2017-08-24 18:22:38 · 536 阅读 · 0 评论 -
JavaScript如何监听两个组合键
给文档添加事件onkeydown表示某个键盘按键被按下document.onkeydown = function(event) { //处理}在这里需要注意document, document 是一个文档对象,使用 document 对象可以对 HTML 文档进行检查、修改或添加内容,并处理该文档内部的事件,event对象(window.event);另一个就是Event对象,代表着事件的状态原创 2017-09-10 23:03:26 · 2238 阅读 · 0 评论 -
Ajax的原生实现关于MIME类型的使用
问题描述下面的例子是一个Ajax的post请求的代码,这段代码在测试运行的时候,发现返回的状态码为400,服务器不能理解的请求,后来经过查看和修改,发现只需要将下面的代码稍微改造一下就好了原代码var send = function (url, params, fn) { var me = this; var xhr = null; var data = ''; fn原创 2017-11-20 16:57:36 · 2336 阅读 · 0 评论 -
JavaScript逻辑运算符
从项目中看逻辑运算符“||”和“&&”今天,在项目开发中遇到一个问题,就这个问题本身而言,并不是很难,但觉得它的意义重大(哈哈,当然是对我而言),还是决定记录一番问题描述及初步解决简单描述下要求:就是上边有两个checkbox的选择框(上面的图是简易版),要实现的功能就是二者至少选择一个,而且交互性良好先说下我的思路,也是我get到的,这个时候是实现二者至少选其一的功能的,当时我也说不来自己是怎样鬼原创 2017-12-05 21:21:56 · 554 阅读 · 0 评论 -
数组排序与对象排序
数组排序在使用JavaScript的时候,我们都发现了sort这个函数其实是按照字典顺序进行排序的,比如下面的这个例子:var ary = [2, 98, 34, 45, 78, 7, 10, 100, 99];ary.sort();console.log(ary);控制台输出结果:Array [ 10, 100, 2, 34, 45, 7, 78, 98, 99 ]这个也很显然验证了我之前所写原创 2017-05-21 16:35:04 · 729 阅读 · 0 评论 -
初识虚拟DOM
在学习Vue的过程中,碰到了“虚拟DOM”这个词汇,觉得比较有意思,觉得下面的文章写的很好,分享给大家原文链接最近一两年前端最火的技术莫过于ReactJS,即便你没用过也该听过,ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱,不仅要理解其原理,而且要实现一个基本可用的虚拟DOM。1.为什么需要转载 2017-05-19 22:54:25 · 686 阅读 · 0 评论 -
虚拟DOM分析学习篇
昨天分享了一篇关于“虚拟DOM”的文章,但是今天感觉自己还是放不下它,决定细细探究一下整体结构分析创建的目录结构如下:首先初始化package.json文件: npm init然后全局安装Browserify :npm install -g browserify最后使用browserify编译:browserify main.js > compiled.js各个文件之间的关系: 各个文件的作用的分原创 2017-05-20 17:21:10 · 612 阅读 · 0 评论 -
事件冒泡删除Table的一行
onclick事件冒泡在实际应用中,特别是写系统的后台管理的时候table的相关操作就显得格外重要。不合理的事件添加会影响效率。 具体的代码见下面:html>head> meta charset="utf-8"> title>title> script type="text/javascript"> window.onload = functi原创 2016-12-15 14:51:04 · 881 阅读 · 0 评论 -
闭包—闭包与变量
在闭包与变量这一块中我觉得有个例子很典型,当时自己在看这段代码时,还是有些难理解,在学习ES6的时候,看到类似的东西,有种豁然开朗的感觉。例子如下:function createFunctions(){ var result = new Array(); for(var i = 0; i < 10; i++){ result[i] = function(){原创 2016-11-18 12:19:07 · 699 阅读 · 0 评论 -
JS中在html中加载的顺序
这里写链接内容 以下的两段内容来自于上面的链接: 浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。 因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载j原创 2016-10-31 00:34:48 · 1692 阅读 · 0 评论 -
JS中的“this”
1. this的使用关于this,懂点Java就应该知道,this有以下用法: 1、在类的方法定义中使用的this关键字代表调用该方法对象的引用。 2、当必须指出当前使用方法的对象是谁时,要使用关键字this。 3、有时使用this可以处理方法中成员变量和参数重名的情况。 4、this可以看做是一个变量,它的值是当前对象的引用。 简而言之,就是谁调用的含有this的原创 2016-10-30 14:24:07 · 623 阅读 · 0 评论 -
JS中事件的添加
在JS中,事件的添加主要有三种方式: 1. 直接在html标签上添加 <div onclick="代码段或者是函数">div</div>这种方法也可以通过JS的obj.setAttribute("onclick", function(){........}完成2. 使用JS的DOM的方法添加 document.getElementById('div').onclick = function原创 2016-10-30 01:36:07 · 4250 阅读 · 0 评论 -
JS面向对象(三)— 接口
在JS中接口是面向对象最有用的工具之一,它可以提供一种说明一个对象应该具有哪些方法的手段。但是在JS中并没有接口的说明关键字interface,也没有用以实现接口的implements ,这个同前面的继承相似,只能通过模仿来描述接口。1. 注解描述法这种方式是通过注释的方式给出接口的描述,特点如下: 优点:对于开发的人可以有个参考 缺点:这个是属于文档的形式的,太过于松散,并没有检查接口的方法是原创 2016-10-29 00:50:53 · 1174 阅读 · 0 评论 -
JS面向对象(二)—继承
在面向对象的语言中,如Java,它的继承是单继承的,利用的是extends关键字实现的,而在JavaScript中同样是没有这个关键字的,但是通过以下的方式,我们还是可以模仿出继承来的。原型对象 当然在说这个继承之前,必须要明确的就是原型对象是什么?当我们在创建了一个新函数的时候,该函数就会拥有一个prototyp属性,这个属性是指向函数的原型对象的。在原型对象中,会自动拥有一个construct原创 2016-10-26 22:17:44 · 803 阅读 · 0 评论 -
JS面向对象(一)
JS面向对象(一)面向对象的语言的特点之一就是具有类的概念,而在JS并没有像Java中用来说明类的关键字class,而通过类可以创建多个具有相同属性和方法的对象,但是我们可以利用JS的特点,去模仿着实现类的作用。工厂模式构造函数模式对象模式工厂模式我们可以通过工厂模式(主要借助了关键字new)抽象具体创建一个对象的过程,在使用时只需关注结果,而不需要关注具体的实现细节 例如:function原创 2016-10-26 20:47:46 · 529 阅读 · 0 评论 -
JS中XML的解析
1. 解析XML字符串function XMLResolve(xmlStr) { var parseXML = ""; if(typeof DOMParser == "function") { parseXML = function(xmlStr) { return (new DOMParser()).parseFromString(xmlStr原创 2017-03-12 22:45:11 · 3714 阅读 · 0 评论 -
本地数据正反查询的实现例子
本地数据正反查询的实现例子通过本地数据的查询可以减少与服务器交互的次数,提高效率,使得交互更优这里是用市县级为例的,主要的思想就是需要需要交互的数据不是通过后台查询数据库进行交互,而是通过本地的数据与用户进行交互,当用户选择完县级的时候,会将县级的ID号添加到URL上,而对于带有cityID的URL会进行一定的处理,根据ID查找对应的县和市并且显示在界面上,这种情况之下,就算用户重新刷新了,也会呈现原创 2017-04-08 01:39:54 · 1937 阅读 · 0 评论 -
懒加载(延迟加载)
1、什么是懒加载?当访问一个页面的时候,先把img元素或是其他元素的背景图片路径(src属性)替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片或者其他元素出现在浏览器的可视区域内时,才设置图片正真的路径,让图片加载出来2 、懒加载的特点?一方面可以减轻服务器的压力,另一方面让页面更快地呈现在用户面前3、懒加载的实现?我们在写标签的时候,img的src中可以是一个占位图,真的路径原创 2017-03-17 01:03:47 · 952 阅读 · 0 评论 -
利用事件委托写一个简易扫雷游戏
1. 事件代理(委托)可以解决的问题:如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能 基本原理:事件委托是利用事件的冒泡原理来实现的,何为事件冒泡(事件从最深的节点开始,然后逐步向上传播事件) 事件代理的适用场景:应用频繁触发事件时 || 当列表频繁创建删除时2. 一个简易的扫雷游戏我是从下面几步来完成的:原创 2017-03-24 01:17:19 · 717 阅读 · 0 评论 -
JavaScript笔记(一)
函数作用域函数作用域的嵌套关系是定义时决定的,而不是调用时决定的,也就是说,JavaScript 的作用域是静态作用域,又叫词法作用域,这是因为作用域的嵌套关系可 以在语法分析时确定,而不必等到运行时确定全局对象在 JavaScript 中有一种特殊的对象称为全局对象。这个对象在Node.js 对应的是 global 对象,在浏览器中对应的是 window 对象。由于全局对象的所有属性在任何地方都原创 2017-04-10 22:48:48 · 513 阅读 · 0 评论 -
A-star寻路算法
A*寻路算法什么是A*寻路算法?(A-Star)算法是一种静态路网中求解最短路最有效的直接搜索方法A*寻路算法的分析首先,就点的种类来说,就是三种,开始节点,结束节点,障碍节点从开始节点开始,每次找到九宫格中的其他节点(非开始的节点),并保存其 F = G + H的值,之后对F的值按照从小到大进行排序取得排序之后的第一个元素,按照上面的方法进行,直到该元素是结束元素为止具体的代码(1) 根据给原创 2017-04-06 20:06:45 · 803 阅读 · 0 评论 -
JavaScript中的Object.defineProperty 函数
JavaScript中的Object.defineProperty 函数Object.defineProperty的语法介绍语法:Object.defineProperty(object, propertyname, descriptor)参数:object: 必需。 要在其上添加或修改属性的对象。 这可能是 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象。pro原创 2017-05-15 21:05:03 · 736 阅读 · 0 评论 -
常用的正则
常用的正则 以下为项目中使用过的,后面会不断的添加,也欢迎补充 将数字类型转化为货币的形式let val = '233443432314';let reg = /\d{1,3}(?=(\d{3})+$)/g;val = val.replace(/^(-?)(\d+)((\.\d+)?)$/, function (s, s1, s2, s3) { return s1原创 2018-01-12 18:20:15 · 390 阅读 · 0 评论