金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 获取跨域json数据工具,数组方法对比

获取跨域json数据工具,数组方法对比

发布时间:2019-11-03 11:52编辑:web前端浏览(135)

    JavaScript 数组方法对比

    2017/02/15 · JavaScript · 数组

    本文由 伯乐在线 - 涂鸦码龙 翻译。未经许可,禁止转载!
    英文出处:Loren Stewart。欢迎加入翻译组。

    JavaScript 提供了多种新增,移除,替换数组元素的方法,但是有些会影响原来的数组;有些则不会,它是新建了一个数组。

    注意:区分以下两个方法的不同点:

    1. array.splice() 影响原来的数组
    2. array.slice() 不影响原来的数组

    JSONProxy – 获取跨域json数据工具

    2015/07/10 · JavaScript · JSON, JSONProxy

    原文出处: 韩子迟   

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”。当你苦于无法跨域获取json数据时,不妨一试,说不定能事半功倍。

    比如这位朋友,想通过ajax获取必应的每日一图的url(是否可以通过ajax获取“Bing每日一图”?)很显然,这个ajax是跨域的,直接获取会因为跨域报错;服务端也肯定不会有对你本地localhost的“Access-Control-Allow-Origin”的设置,所以CORS策略也是不行的;因为是个json数据,没有方法名包裹,所以jsonp也是不行。楼主暂时还没接触过其他的跨域方法,如果要我去获取url,只能通过服务端的代码,服务端去获取json数据,然后index页面去ajax请求服务端获取的json数据(此时index页面和服务端同源),代码量增加,而要做的仅仅只是获取一个json数据啊!这时JSONProxy就帮你做好了服务端的工作,是不是很爽!

    你会用setTimeout吗

    2016/03/22 · JavaScript · 1 评论 · settimeout

    本文作者: 伯乐在线 - 唐光尧 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    教科书里面的setTimeout

    定义很简单
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    广泛应用场景
    定时器,轮播图,动画效果,自动滚动等等

    上面一些应该是setTimeout在大家心中的样子,因为我们平常使用也不是很多。

    但是setTimeout真的有那么简单吗?

    测试题

    一个题目,如果你在一段代码中发现下面内容

    var startTime = new Date(); setTimeout(function () { console.log(new Date() - startTime); }, 100)

    1
    2
    3
    4
    var startTime = new Date();
    setTimeout(function () {
        console.log(new Date() - startTime);
    }, 100)

    请问最后打印的是多少?
    我觉得正确答案是,取决于后面同步执行的js需要占用多少时间。
    MAX(同步执行的时间, 100)

    再加一个题目,只有下面代码

    setTimeout(function () { func1(); }, 0) func2();

    1
    2
    3
    4
    setTimeout(function () {
        func1();
    }, 0)
    func2();

    func1和func2谁会先执行?

    这个答案应该比较简单,func2先执行,func1后面执行。

    再来一题

    setTimeout(function () { func1() }, 0)

    1
    2
    3
    setTimeout(function () {
        func1()
    }, 0)

    setTimeout(function () { func1() })

    1
    2
    3
    setTimeout(function () {
        func1()
    })

    有什么差别?

    0秒延迟,此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的,但中间穿插着有关DOM渲染,事件回应等异步代码,他们将组成一个队列,零秒延迟将会实现插队操作。
    不写第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。

    上面答案来自《javascript框架设计》

    好了,看了上面几个题目是不是感觉setTimeout不是想象中那样了。

    I. 新增:影响原数组

    使用 array.push()array.ushift() 新增元素会影响原来的数组。

    JavaScript

    let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

    1
    2
    3
    let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
    mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
    mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

    Easy: JSONP

    原生的JavaScript:

    XHTML

    <script> function myCallback(data){ console.log(data); } </script> <script src=";

    1
    2
    3
    4
    5
    6
    <script>
      function myCallback(data){
        console.log(data);
      }
    </script>
    <script src="https://jsonp.afeld.me/?callback=myCallback&url=http://jsonview.com/example.json"></script>

    myCallback函数里的data就是返回的json数据了。很显然,服务器会帮你去请求你需要的json数据,然后包裹在你设置的回调函数名中,这时要注意的代码中的红色两处要保持一致,url后跟的就是需要的json数据地址。

    当然JQuery封装好的方法更加简单:

    XHTML

    <script> $.getJSON('', function(data){ console.log(data); }); </script>

    1
    2
    3
    4
    5
    <script>
      $.getJSON('https://jsonp.afeld.me/?callback=?&url=http://jsonview.com/example.json', function(data){
        console.log(data);
      });
    </script>

    setTimeout和单线程

    下面是我自己的一些理解
    首先需要注意javascript是单线程的,特点就是容易出现阻塞。如果一段程序处理时间很长,很容易导致整个页面hold住。什么交互都处理不了怎么办?

    简化复杂度?复杂逻辑后端处理?html5的多线程?

    上面都是ok的做法,但是setTimeout也是处理这种问题的一把好手。

    setTimeout一个很关键的用法就是分片,如果一段程序过大,我们可以拆分成若干细小的块。
    例如上面的情况,我们将那一段复杂的逻辑拆分处理,分片塞入队列。这样即使在复杂程序没有处理完时,我们操作页面,也是能得到即使响应的。其实就是将交互插入到了复杂程序中执行。

    换一种思路,上面就是利用setTimeout实现一种伪多线程的概念。

    有个函数库Concurrent.Thread.js 就是实现js的多线程的。

    一个简单使用的例子,引入Concurrent.Thread.js

    Concurrent.Thread.create(function(){ for (var i = 0;i<1000000;i++) { console.log(i); }; }); $('#test').click(function () { alert(1); });

    1
    2
    3
    4
    5
    6
    7
    8
    Concurrent.Thread.create(function(){
        for (var i = 0;i<1000000;i++) {
            console.log(i);
        };
    });
    $('#test').click(function  () {
        alert(1);
    });

    虽然有个巨大的循环,但是这时不妨碍你去触发alert();

    是不是很厉害~

    还有一种场景,当我们需要渲染一个很复杂的DOM时,例如table组件,复杂的构图等等,假如整个过程需要3s,我们是等待完全处理完成在呈现,还是使用一个setTimeout分片,将内容一片一片的断续呈现。

    其实setTimeout给了我们很多优化交互的空间。

    II. 新增:不影响原数组

    两种方式新增元素不会影响原数组,第一种是 array.concat()

    JavaScript

    const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] (注:原文有误,我做了修改 “.” ---> “,”) console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

    1
    2
    3
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  (注:原文有误,我做了修改 “.” ---> “,”)
    console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

    第二种方法是使用 JavaScript 的展开(spread)操作符,展开操作符是三个点(…)

    JavaScript

    const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f'] const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

    1
    2
    3
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
    const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

    展开操作符会复制原来的数组,从原数组取出所有元素,然后存入新的环境。

    Easier: Cross-domain AJAX (CORS)

    比jsonp更简单的方法是CORS(好吧,也没简单到哪去啊…)

    XHTML

    <script> $.get('', function(data){ console.log(data); }); </script>

    1
    2
    3
    4
    5
    <script>
      $.get('https://jsonp.afeld.me/?url=http://jsonview.com/example.json', function(data){
        console.log(data);
      });
    </script>

    这回是真正地发送了ajax请求了,为什么跨域了还能请求?因为服务端设置好了。

    图片 1

    而请求的json数据也是服务端帮你获取的。也就是说,客户端发送请求,服务端解析请求的url,然后服务器作为代理发送http请求去请求json数据(这时不存在客户端跨域),再返回给客户端作为回调的参数。

    如何使用

    setTimeout这么厉害,那么我们是需要在在项目中大量使用吗?
    我这边的观点是非常不建议,在我们业务中,基本上是禁止在业务逻辑中使用setTimeout的,因为我所看到的很多使用方式都是一些问题不好解决,setTimeout作为一个hack的方式。
    例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个setTimeout,确保实例先初始化。
    为什么错误?这里其实就是使用hack的手段
    第一是埋下了坑,打乱模块的生命周期
    第二是出现问题时,setTimeout其实是很难调试的。

    我认为正确的使用方式是,看看生命周期(可参考《关于软件的生命周期 》),把实例化提到使用前执行。

    综上,setTimeout其实想用好还是很困难的, 他更多的出现是在框架和类库中,例如一些实现Promis的框架,就用上了setTimeout去实现异步。
    所以假如你想去阅读一些源码,想去造一些轮子,setTimeout还是必不可少的工具。

     

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    本文由金沙国际官网发布于web前端,转载请注明出处:获取跨域json数据工具,数组方法对比

    关键词:

上一篇:没有了

下一篇:没有了