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

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

您的位置:金沙国际官网 > web前端 > 的运行机制及爬坑指南金沙国际官网,浅谈跨域

的运行机制及爬坑指南金沙国际官网,浅谈跨域

发布时间:2019-11-01 21:31编辑:web前端浏览(183)

    JavaScript 中 this 的运行机制及爬坑指南

    2018/03/14 · JavaScript · this

    原文出处: [Dr. Axel

    浅谈跨域以WebService对跨域的支持

    2015/04/03 · HTML5, JavaScript · WebService, 跨域

    原文出处: 寒江独钓   

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。

    在以前,前端和后端混杂在一起, 比如JavaScript直接调用同系统里面的一个Httphandler,就不存在跨域的问题,但是随着现代的这种多种客户端的流行,比如一个应用通常会有Web端,App端,以及WebApp端,各种客户端通常会使用同一套的后台处理逻辑,即API, 前后端分离的开发策略流行起来,前端只关注展现,通常使用JavaScript,后端处理逻辑和数据通常使用WebService来提供json数据。一般的前端页面和后端的WebService API通常部署在不同的服务器或者域名上。这样,通过ajax请求WebService的时候,就会出现同源策略的问题。

    需要说明的是,同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是说,如果开发Native应用,是不存在这个问题的,但是如果开发Web或者Html5如WebApp,通常使用JavaScript ajax对WebService发起请求然后解析返回的值,这样就可能存在跨域的问题。

    一般的,很容易想到,将外部的资源搬到同一个域上就能解决同源策略的限制的。即在Web网站上同时开发一个Http服务端页面,所有JavaScript的请求都发到这个页面上来,这个页面在内部使用其他语言去调用外部的WebService。即添加一个代理层。这种方式可以解决问题,但是不够直接和高效。

    目前,比较常见的跨域解决方案包括JSONP (JSON with padding)和CORS (Cross-origin resource sharing )。一些解决方案需要客户端和服务端配合如JSOP,一些则只需要服务端配合处理比如CORS。下面分别介绍这两种跨域方案,以及服务端WebService如何支持这两种跨域方案。

    Angular 和 Vue 按需加载的项目实践优化方案

    2016/07/12 · JavaScript · 前端框架

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

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等

    最近有心想针对 ionic项目 和 vue项目,做一个比较大的优化,做成按需加载(也就是无请求不加载),此刻我内心是无比激动的。

    推荐看的按需加载的文章:

    angular 按需加载 相关文章:

    1:  

    2:  

    vue 按需加载  相关文章:

    1: http://cn.vuejs.org/guide/components.html#异步组件

    2: 

    -----------------------------------------------------------

    今天就针对,按需加载(也就是无请求不加载),分别给出一些实际项目经验的方案:

    angular 按需加载方案:$ocLazyLoad

    vue 按需加载方案:require([异步加载的组件], resolve)

     

    Rauschmayer]()   译文出处:[众成翻译

    woolll]()   

    金沙国际官网 1

    在 JavaScript 中,this 这个特殊的变量是相对比较复杂的,因为 this 不仅仅用在面向对象环境中,在其他任何地方也是可用的。 本篇博文中会解释 this 是如何工作的以及使用中可能导致问题的地方,最后奉上最佳实践。

    为了更好理解 this,将 this 使用的场景分成三类:

    • 在函数内部 this 一个额外的,通常是隐含的参数。
    • 在函数外部(顶级作用域中): 这指的是浏览器中的全局对象或者 Node.js 中一个模块的输出。
    • 在传递给eval()的字符串中: eval() 或者获取 this 当前值值,或者将其设置为全局对象,取决于 this 是直接调用还是间接调用。

    我们来看看每个类别。

    JSONP以及WebService的支持

    同源策略下,某个服务器是无法获取到服务器以外的数据,但是html里面的img,iframe和script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。

    当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装,客户端就可以处理。

    举个例子,服务端和客户端约定要传一个名为callback的参数来使用JSONP功能。比如请求的参数如下:

    JavaScript

    1
    http://www.example.net/sample.aspx?callback=mycallback

    如果没有后面的callback参数,即不使用JSONP的模式,该服务的返回结果可能是一个单纯的json字符串,比如:

    JavaScript

    { foo : 'bar' }

    1
    { foo : 'bar' }

    如果和服务端约定jsonp格式,那么服务端就会处理callback的参数,将返回结果进行一下处理,比如处理成:

    JavaScript

    mycallback({ foo : 'bar' })

    1
    mycallback({ foo : 'bar' })

    可以看到,这其实是一个函数调用,比如可以实现在页面定义一个名为mycallback的回调函数:

    JavaScript

    mycallback = function(data) { alert(data.foo); };

    1
    2
    3
    4
    mycallback = function(data)
             {
                alert(data.foo);
             };

    现在,请求的返回值回去触发回调函数,这样就完了了跨域请求。

    如果使用ServiceStack创建WebService的话,支持Jsonp方式的调用很简单,只需要在AppHost的Configure函数里面注册一下对响应结果进行过滤处理即可。

    JavaScript

    /// <summary> /// Application specific configuration /// This method should initialize any IoC resources utilized by your web service classes. /// </summary> /// <param name="container"></param> public override void Configure(Container container) { ResponseFilters.Add((req, res, dto) => { var func = req.QueryString.Get("callback"); if (!func.isNullOrEmpty()) { res.AddHeader("Content-Type", ContentType.Html); res.Write("<script type='text/javascript'>{0}({1});</script>" .FormatWith(func, dto.ToJson())); res.Close(); } }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /// &lt;summary&gt;
            /// Application specific configuration
            /// This method should initialize any IoC resources utilized by your web service classes.
            /// &lt;/summary&gt;
            /// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
            public override void Configure(Container container)
            {
                ResponseFilters.Add((req, res, dto) =&gt;
                {
                    var func = req.QueryString.Get(&quot;callback&quot;);
                    if (!func.isNullOrEmpty())
                    {
                        res.AddHeader(&quot;Content-Type&quot;, ContentType.Html);
                        res.Write(&quot;&lt;script type=&#039;text/javascript&#039;&gt;{0}({1});&lt;/script&gt;&quot;
                            .FormatWith(func, dto.ToJson()));
                        res.Close();
                    }
                });
            }

    JSONP跨域方式比较方便,也支持各种较老的浏览器,但是缺点很明显,他只支持GET的方式提交,不支持其他Post的提交,Get方式对请求的参数长度有限制,在有些情况下可能不满足要求。所以下面就介绍一下CORS的跨域解决方案。

     angular按需加载:$ocLazyLoad

    需要3个步骤,就可以实现按需加载的方案。

    第1步:bower install oclazyload

    第2步:$ocLazyLoad封装:

    金沙国际官网 2

    第3步:ui-router 路由配置:

    金沙国际官网 3

    此方案做到了,template 和 controller 的文件按需加载。此时去访问页面就可以看到效果了。

     

    效果Gif演示:

    金沙国际官网 4

     

    this 在函数中

    这是最常用的 this 使用方式,函数通过扮演三种不同的角色来表示 JavaScript 中的所有可调用结构体:

    • 普通函数(this 在非严格模式下为全局对象,在严格模式下为undefined)
    • 构造函数(this 指向新创建的实例)
    • 方法(this 是指方法调用的接收者)

    在函数中,this 通常被认为是一个额外的,隐含的参数。

    CORS跨域及WebService的支持

    先来看一个例子,我们新建一个基本的html页面,在里面编写一个简单的是否支持跨域的小脚本,如下:

    XHTML

    <html xmlns="; <head> <title>AJAX跨域请求测试</title> </head> <body> <input type='button' value='开始测试' onclick='crossDomainRequest()' /> <div id="content"></div> <script type="text/javascript"> //<![CDATA[ var xhr = new XMLHttpRequest(); var url = ''; function crossDomainRequest() { document.getElementById("content").innerHTML = "开始……"; if (xhr) { xhr.open('POST', url, true); xhr.onreadystatechange = handler; xhr.send(); } else { document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest"; } } function handler(evtXHR) { if (xhr.readyState == 4) { if (xhr.status == 200) { var response = xhr.responseText; document.getElementById("content").innerHTML = "结果:" + response; } else { document.getElementById("content").innerHTML = "不允许跨域请求。"; } } else { document.getElementById("content").innerHTML += "<br/>执行状态 readyState:" + xhr.readyState; } } //]]> </script> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>AJAX跨域请求测试</title>
    </head>
    <body>
      <input type='button' value='开始测试' onclick='crossDomainRequest()' />
      <div id="content"></div>
     
      <script type="text/javascript">
        //<![CDATA[
        var xhr = new XMLHttpRequest();
        var url = 'http://localhost:8078/json/ShopUserLogin';
        function crossDomainRequest() {
          document.getElementById("content").innerHTML = "开始……";
          if (xhr) {
            xhr.open('POST', url, true);
            xhr.onreadystatechange = handler;
            xhr.send();
          } else {
            document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest";
          }
        }
     
        function handler(evtXHR) {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var response = xhr.responseText;
              document.getElementById("content").innerHTML = "结果:" + response;
            } else {
              document.getElementById("content").innerHTML = "不允许跨域请求。";
            }
          }
          else {
            document.getElementById("content").innerHTML += "<br/>执行状态 readyState:" + xhr.readyState;
          }
        }
        //]]>
      </script>
     
    </body>
    </html>

    然后保存为本地html文件,可以看到,这个脚本中,对本地的服务 发起了一个请求, 如果使用chrome 直接打开,会看到输出的结果,不允许跨域请求。 在javascript控制台程序中同样可以看到错误提示:

    金沙国际官网 5

    那么如果在返回响应头header中注入Access-Control-Allow-Origin,这样浏览器检测到header中的Access-Control-Allow-Origin,则就可以跨域操作了。

    同样,如果使用ServcieStack,在很多地方可以支持CORS的跨域方式。最简单的还是在AppHost的Configure函数里面直接写入:

    JavaScript

    /// <summary> /// Application specific configuration /// This method should initialize any IoC resources utilized by your web service classes. /// </summary> /// <param name="container"></param> public override void Configure(Container container) { this.AddPlugin(new CorsFeature()); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /// &lt;summary&gt;
    /// Application specific configuration
    /// This method should initialize any IoC resources utilized by your web service classes.
    /// &lt;/summary&gt;
    /// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
    public override void Configure(Container container)
    {
        this.AddPlugin(new CorsFeature());
    }

    这样就可以了,相当于使用默认的CORS配置:

    JavaScript

    CorsFeature(allowedOrigins:"*", allowedMethods:"GET, POST, PUT, DELETE, OPTIONS", allowedHeaders:"Content-Type", allowCredentials:false);

    1
    2
    3
    4
    CorsFeature(allowedOrigins:&quot;*&quot;,
    allowedMethods:&quot;GET, POST, PUT, DELETE, OPTIONS&quot;,
    allowedHeaders:&quot;Content-Type&quot;,
    allowCredentials:false);

    如果仅仅允许GET和POST的请求支持CORS,则只需要改为:

    JavaScript

    Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));

    1
    Plugins.Add(new CorsFeature(allowedMethods: &quot;GET, POST&quot;));

    当然也可以在AppHost的Config里面设置全局的CORS,如下:

    JavaScript

    /// <summary> /// Application specific configuration /// This method should initialize any IoC resources utilized by your web service classes. /// </summary> /// <param name="container"></param> public override void Configure(Container container) { base.SetConfig(new EndpointHostConfig { GlobalResponseHeaders = { { "Access-Control-Allow-Origin", "*" }, { "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" }, { "Access-Control-Allow-Headers", "Content-Type" }, }, }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /// &lt;summary&gt;
    /// Application specific configuration
    /// This method should initialize any IoC resources utilized by your web service classes.
    /// &lt;/summary&gt;
    /// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
    public override void Configure(Container container)
    {
     
        base.SetConfig(new EndpointHostConfig
        {
            GlobalResponseHeaders = {
                { &quot;Access-Control-Allow-Origin&quot;, &quot;*&quot; },
                { &quot;Access-Control-Allow-Methods&quot;, &quot;GET, POST, PUT, DELETE, OPTIONS&quot; },
                { &quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type&quot; },
                    },
        });
    }

    现在运行WebService,使用postman或者Chrome调用这个请求,可以看到返回的值头文件中,已经加上了响应头,并且可以正常显示返回结果了:

    金沙国际官网 6

    CORS使用起来简单,不需要客户端的额外处理,而且支持Post的方式提交请求,但是CORS的唯一一个缺点是对客户端的浏览器版本有要求,支持CORS的浏览器机器版本如下:

    金沙国际官网 7

     

    vue 按需加载方案:require([异步加载的组件], resolve)

    需要2个步骤,就可以完成按需加载

    第一步,针对webpack.js 做配置的更改,如图:

    金沙国际官网 8

     

    第二步:针对 router 路由,进行更改,主要是component的更改,如图。

    金沙国际官网 9

    第三步:执行 npm run build 打包命令,就可以看到chunks文件夹生成了很多chunk的小文件,就是vue组件页面,如图:

    金沙国际官网 10

    1 赞 1 收藏 评论

    this 在普通函数中

    在普通函数中,this 的值取决于模式:

    • 非严格模式: this 是指向全局对象 (在浏览器中为window对象)。
    function sloppyFunc() { console.log(this === window); // true }
    sloppyFunc();
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bfd7bd4d414140440-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd4d414140440-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bfd7bd4d414140440-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd4d414140440-4">
    4
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bfd7bd4d414140440-1" class="crayon-line">
    function sloppyFunc() {
    </div>
    <div id="crayon-5b8f6bfd7bd4d414140440-2" class="crayon-line crayon-striped-line">
        console.log(this === window); // true
    </div>
    <div id="crayon-5b8f6bfd7bd4d414140440-3" class="crayon-line">
      }
    </div>
    <div id="crayon-5b8f6bfd7bd4d414140440-4" class="crayon-line crayon-striped-line">
    sloppyFunc();
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    • 严格模式: this 的值为 undefined。
    function strictFunc() { 'use strict'; console.log(this ===
    undefined); // true } strictFunc();
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd58954780524-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd58954780524-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bfd7bd58954780524-1" class="crayon-line">
    function strictFunc() {
    </div>
    <div id="crayon-5b8f6bfd7bd58954780524-2" class="crayon-line crayon-striped-line">
       'use strict';
    </div>
    <div id="crayon-5b8f6bfd7bd58954780524-3" class="crayon-line">
       console.log(this === undefined); // true
    </div>
    <div id="crayon-5b8f6bfd7bd58954780524-4" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6bfd7bd58954780524-5" class="crayon-line">
    strictFunc();
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    也就是说,this 是一个设定了默认值(window或undefined)的隐式参数。 但是,可以通过 call() 或 apply() 进行函数调用,并明确指定this的值:``

    function func(arg1, arg2) { console.log(this); // a console.log(arg1); // b console.log(arg2); // c } func.call('a', 'b', 'c'); // (this, arg1, arg2) func.apply('a', ['b', 'c']); // (this, arrayWithArgs)

    1
    2
    3
    4
    5
    6
    7
    function func(arg1, arg2) {
            console.log(this); // a
            console.log(arg1); // b
            console.log(arg2); // c
        }
    func.call('a', 'b', 'c'); // (this, arg1, arg2)
    func.apply('a', ['b', 'c']); // (this, arrayWithArgs)

    总结

    本文介绍了JavaScript中的跨域基本概念和产生的原因,以及如何解决跨域的两种方法,一种是JSONP 一种是 CORS,在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持。JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏览器, 缺点是仅支持Get的方式对服务端请求。另一种主流的跨域方案是CORS,他仅需要服务端在返回数据的时候在相应头中加入标识信息。这种方式非常简便。唯一的缺点是需要浏览器的支持,一些较老的浏览器可能不支持CORS特性。

    跨域支持是创建WebService时应该考虑的一个功能点,希望本文对您在这边面有所帮助,文中是使用ServiceStack来演示跨域支持的,如果您用的WCF的话,知道跨域原理的前提下,实现跨域应该不难。

     

    关于作者:新空气

    金沙国际官网 11

    简介还没来得及写 :) 个人主页 · 我的文章 · 3

    金沙国际官网 12

    this 在构造函数中

    如果通过new运算符调用函数,则函数将成为构造函数。 该运算符创建一个新的对象,并通过它通过this传递给构造函数:``

    var savedThis; function Constr() { savedThis = this; } var inst = new Constr(); console.log(savedThis === inst); // true

    1
    2
    3
    4
    5
    6
    var savedThis;
    function Constr() {
       savedThis = this;
    }
    var inst = new Constr();
    console.log(savedThis === inst); // true

    在JavaScript中实现,new运算符大致如下所示(更精确的实现稍微复杂一点):

    function newOperator(Constr, arrayWithArgs) { var thisValue = Object.create(Constr.prototype); Constr.apply(thisValue, arrayWithArgs); return thisValue; }

    1
    2
    3
    4
    5
    function newOperator(Constr, arrayWithArgs) {
       var thisValue = Object.create(Constr.prototype);
       Constr.apply(thisValue, arrayWithArgs);
       return thisValue;
    }

    参考资料:

    赞 收藏 评论

    金沙国际官网 13

    本文由金沙国际官网发布于web前端,转载请注明出处:的运行机制及爬坑指南金沙国际官网,浅谈跨域

    关键词: