js代码

JSON和JSONP详解

徘徊边缘 提交于 2020-02-01 02:58:38
什么是JSON   JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。 JSON的优点:   1、基于纯文本,跨平台传递极其简单;   2、Javascript原生支持,后台语言几乎全部支持;   3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;   4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;   5、容易编写和解析,当然前提是你要知道数据结构;   JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。 JSON的格式或者叫规则:   JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。   1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。   2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。   3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。   4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号”",以便于不同语言的解析。   5、JSON内部常用数据类型无非就是字符串、数字、布尔

JSON和JSONP (含jQuery实例)(share)

夙愿已清 提交于 2020-02-01 02:53:59
来源: http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿: JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。 什么是JSON 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式。 JSON的优点: 1、基于纯文本,跨平台传递极其简单; 2、Javascript原生支持,后台语言几乎全部支持; 3、轻量级数据格式,占用字符数量极少,特别适合互联网传递; 4、可读性较强

json和jsonp的使用格式

一个人想着一个人 提交于 2020-02-01 02:52:07
最近一直在看关于json和jsonp的区别和各自的用法、优缺点! 下面是我看到过解释最清楚的一片文章 说到AJAX就会不可避免的面临两个问题, 第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决? 这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是 用JSON来传数据,靠JSONP来跨域 。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。 JSON的优点: 1、基于纯文本,跨平台传递极其简单; 2、Javascript原生支持,后台语言几乎全部支持; 3、轻量级数据格式,占用字符数量极少,特别适合互联网传递; 4、可读性较强,虽然比不上XML那么一目了然

每天刷Web面试题(前10天汇总)

时间秒杀一切 提交于 2020-02-01 02:46:24
一、算法题部分 1. 如何获取浏览器URL中查询字符串中的参数? function getParamsWithUrl(url) { var args = url.split('?'); if (args[0] === url) { return ""; } var arr = args[1].split('&'); var obj = {}; for ( var i = 0; i < arr.length; i++) { var arg = arr[i].split('='); obj[arg[0]] = arg[1]; } return obj; } var href = getParamsWithUrl('http://www.itlike.com?id=1022&name=撩课&age=1'); console.log(href['name']); // 撩课 2. 写一个深度克隆方法(es5)? /** * 深拷贝 * @param {object}fromObj 拷贝的对象 * @param {object}toObj 目标对象 */function deepCopyObj2NewObj(fromObj, toObj) { for(var key in fromObj){ // 1. 取出键值对 var fromValue = fromObj[key]; // 2.

这些面试题你会怎么答? (系列一)

大城市里の小女人 提交于 2020-02-01 02:44:47
这些面试题你会怎么答? (系列一) Vue中文社区 8月16日 前言 最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题: 主要考察前端技基础是否扎实,是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累,是否有自己的思考,思考问题的方式,这类问题没有标准答案。 基础题 题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。 怎么去设计一个组件封装 组件封装的目的是为了重用,提高开发效率和代码质量 低耦合,单一职责,可复用性,可维护性 前端组件化设计思路 js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺序 加载 es6模块的时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中) css 动画和 js 动画的差异 代码复杂度,js 动画代码相对复杂一些 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件

这些面试题你会怎么答?

对着背影说爱祢 提交于 2020-02-01 02:42:21
前言 最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题: 主要考察前端技基础是否扎实,是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累,是否有自己的思考,思考问题的方式,这类问题没有标准答案。 基础题 题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。 怎么去设计一个组件封装 组件封装的目的是为了重用,提高开发效率和代码质量 低耦合,单一职责,可复用性,可维护性 前端组件化设计思路 js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺序 加载 es6模块的时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中) css 动画和 js 动画的差异 代码复杂度,js 动画代码相对复杂一些 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件 动画性能看,js 动画多了一个js 解析的过程,性能不如 css

JS浏览器事件循环机制

帅比萌擦擦* 提交于 2020-02-01 01:50:27
先来明白些概念性内容。 进程、线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的。 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的。 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。 浏览器内核有多种线程在工作。 GUI 渲染线程: 负责渲染页面,解析 HTML,CSS 构成 DOM 树等,当页面重绘或者由于某种操作引起回流都会调起该线程。 和 JS 引擎线程是互斥的,当 JS 引擎线程在工作的时候,GUI 渲染线程会被挂起,GUI 更新被放入在 JS 任务队列中,等待 JS 引擎线程空闲的时候继续执行。 JS 引擎线程: 单线程工作,负责解析运行 JavaScript 脚本。 和 GUI 渲染线程互斥,JS 运行耗时过长就会导致页面阻塞。 事件触发线程: 当事件符合触发条件被触发时,该线程会把对应的事件回调函数添加到任务队列的队尾,等待 JS 引擎处理。 定时器触发线程: 浏览器定时计数器并不是由 JS 引擎计数的,阻塞会导致计时不准确。 开启定时器触发线程来计时并触发计时,计时完成后会被添加到任务队列中,等待 JS 引擎处理。 http 请求线程:

Echarts——旭日图

流过昼夜 提交于 2020-02-01 00:27:13
旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。 引入相关文件 旭日图是 ECharts 4.0 新增的图表类型,需要引入完整版的 echarts.min.js 最简单的旭日图 创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列,并且以树形结构声明其 data: <!DOCTYPE HTML> < html > < head > < meta http-equiv = " Content-Type " content = " text/html; charset=UTF-8 " > < title > 最简单的旭日图 </ title > < script type = " text/javascript " src = " ../js/jquery-3.4.1.min.js " > </ script > < script type = " text/javascript " src = " ../js/echarts.min.js " > </ script > </ head > < body > < div id = " main " style =" width : 400px ; height : 300px ; " > </

JS中对象与字符串的互相转换

冷暖自知 提交于 2020-01-31 23:08:41
在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常。 即:JSON.parse(text, reviver),This method parses a JSON text to produce an object or array. t can throw a SyntaxError exception. 所以,在这里在此总结一下 JS 中对象与字符串的互相转换,因为这涉及到浏览器兼容问题。 1:jQuery插件支持的转换方式 代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 反过来,使用 serialize 系列方法:如:var fields = $("select, :radio").serializeArray(); 2:浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器 代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify

JS 优雅指南 2

天涯浪子 提交于 2020-01-31 22:46:15
1. 富有准确性的命名 事实上,你完全可以使用 doSomeThing 代替所有的函数,毕竟它们真的只是提供某些微不足道的功能,但当你有了多个甚至是成百上千的函数时,这是一个灾难。这是一个浅显易懂的道理,即便是毫无经验的开发人员也会意识到命名爆炸的问题,他们隐约明白了什么是好的编程风格,但最后,甚至是大多数都止步于 doSomeThing 到 “优美” 的某一站上。 例 1, 命名只需要有必要的词,除非有必要,否则不要堆砌 // bad const theBook = {} const _b = {} const bookObj = {} const newBook = {} // good const book = {} 例 2,可读的条件判断 // bad if (username && username.includes('prefix-')) {} // bad const prefix = username && username.includes('prefix-') // bad const availableName = username && username.includes('prefix-') // good const hasPrefixName = username && username.includes('prefix-') 例 3,可读的函数