1.jQuery内部原理和实现方式浅析
2.撬开技术难点！源码实现Fetch 请求扩展超时功能！分析
3.分析、源码还原一次typecho入侵事件
4.Axios源码深度剖析 - AJAX新王者

jQuery内部原理和实现方式浅析

       这段时间在学习研究jQuery源码，分析受益于jQuery日益发展强大，源码研究jQuery的分析linpack测试源码大牛越来越多，学习的源码资料也比前两年好找了，有很多非常不错的分析资源，如高云的源码jQuery1.6.1源码分析系列。这些教程非常细致的分析分析了jQuery内部原理和实现方式，对学习和理解jQuery有非常大的源码帮助。但是分析个人认为很多教程对jQuery的整体结果把握不足，本人试图从整体来阐述一下jQuery的源码内部实现。

       大家知道，分析调用jQuery有两种方式，源码一种是高级的实现，通过传递一个参数实现DOM选择，如通过$(“h1″)选择所有的h1元素，第二种是较为低级的实现，如果通过$.ajax实现ajax的操作。那么，这两种方式到底有何不同？用typeof函数检测$(‘h1′)和$.ajax,源码编辑器的网站是什么类型分别为object和function，稍微学过jQuery的都知道或者听过过，前者返回的是一个jQuery对象，那么jQuery对象是什么，它和jQuery是什么关系呢？我们先来通过for(var

       i

       in

       $(”))

       document.write(i+”

       :::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有多个属性，通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性，jQuery对象实际上是这样一个对象:

       所以我们来推测，jQuery的实现可能是类似这样的：

       function

       jQuery(){

       this[0]="Some

       DOM

       Element";

       this[1]="Some

       DOM

       Element";

       this[2]="Some

       DOM

       Element";

       this.length=3;

       this.prevObject="Some

       Object";

       this.context="Some

       Object";

       this.selector="Some

       selector";

       }

       jQuery.prototype={

       get:function(){ },

       each:function(){ },

       ......

       }

       这些代码通过new操作符就就能创建出拥有上述属性的jQuery对象,但是实际上我们调用jQuery创建jQuery对象时并没有使用new操作符，这是如何实现的呢？来看jQuery的实现:

       var

       jQuery

       =

       function(

       selector,

       context

       )

       {

       //

       The

       jQuery

       object

       is

       actually

       just

       the

       init

       constructor

       'enhanced'

       return

       new

       jQuery.fn.init(

       selector,

       context,

       rootjQuery

       );

       }

       jQuery.fn=jQuery.prototype={

       jquery:

       core_version,

       init:function(selector,context){

       //some

       code

       return

       this;

       }

       //some

       code

       there

       //......

       }

       jQuery.fn.init.prototype=jQuery.fn;

       这里有几点做得非常巧妙的地方,第一点是通过jQuery原型属性的init方法来创建对象来达到不用new创建对象的目的，第二点是对init方法内this指向的处理。我们知道，通过调用init返回一个jQuery的实例，那么这个实例就必须要继承jQuery.prototype的属性，那么init里面这个this,

       就继承jQuery.prototype的属性。但是init里面的this，受制于作用域的限制，并不能访问jQuery.prototype其它的属性，jQuery通过一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,这样以来，init产生的jQuery对象就拥有了jQuery.fn的属性。

       到这里，一个jQuery的基本原型就浮出水面了。这里有两个对象，不漂移的副图买入指标源码一个是jQuery这个构造函数，另外一个是这个构造函数产生的对象(我们称之为jQuery对象，它和普通对象没有什么区别),

       如下关系图:

       可以看到jQuery构造函数和jQuery.prototype均有各自的属性和方法，两者的调用方法各不一样,这两个对象都有一个extend方法，都是用来扩展自身的属性和方法，在jQuery内部，extend的实现实际是靠一样的代码,

       将在后面的源码分析中做以详细的分析。

撬开技术难点！实现Fetch 请求扩展超时功能！

       你是否遇到过使用 Fetch 请求时，无法控制超时时间的尴尬情况？

       是否解决过，但解决方案过于局限，缺乏通用性和可重复性？

       别担心，本文将教你如何使用 AbortController、高阶函数等技术，将原本不具备超时功能的 Fetch 请求进行扩展，实现通用且易复用的超时功能。

       我们通过具体的实现方案和深入的技术分析，解决实际项目中可能遇到的各类问题，提升技术水平。

       要实现基本的六线全红指标公式源码超时功能，只需使用 AbortController。代码如下所示：

       请求已被取消。

       设置超时时间后，数据在毫秒返回，即使执行终止请求也无效。

       封装通用的 request 函数，处理超时问题时，却发现事情变得更加复杂，需要考虑很多其他问题。

       我们希望保持 Fetch 功能不变，封装时要谨慎，不能将其封装一遍，以免小题大做。

       分析 MockJS 库，它能拦截 Ajax 请求并返回模拟数据。其源码分析提示，这种方案虽然可行，但具有侵入性，可能影响系统中其他 fetch 函数。

       为保持非侵入性和通用性，可以利用高阶函数处理。经传软件三色资金源码附图通过测试，效果良好，超时后为拒绝的 Promise，后续处理不受影响。

       通过本文学习如何添加超时功能，保持 Fetch 原有功能和通用性，分析 MockJS 源码，提高代码质量，为将来开发提供更多启发。

分析、还原一次typecho入侵事件

       朋友的博客遭遇入侵，通过虚拟空间的日志分析，我参与了这次应急响应。日志经过去敏处理，可用于学习，密码为：bykr。分析中，我使用了grep命令，而其他Windows用户则可借助Notepad++进行搜索。我搜索了常见的恶意函数，包括Eval、assert、phpinfo()和pwd等，发现了大量的页面访问记录。通过这些信息，我得出了一句话木马地址为/1.php和/1_1.php。由于Apache日志默认不记录POST数据，这些文件的出现显得异常。通过IP反查，我找到了可疑的IP地址：...、...和...。根据访问频率和时间，最终锁定了...为攻击者IP。在3月日访问了/index.php/action/links-edit后，入侵者在3月日进入了后台。我怀疑这是一次XSS安全事件，而通过GitHub查看源码，发现源程序中并无action/links-edit这些函数方法。问题的根源在于一款名为typecho-links的插件，它是一款管理友情链接的拓展。分析源码后，发现了垂直越权（前台添加links）、XSS（links未过滤，直接入库）和CSRF（以管理员权限执行操作）的漏洞利用链。在本地进行了复现，搭建博客并添加插件后，即使未登录，也能成功添加Link。尝试插入XSS payload后，通过xss.js引入JQuery并调用Ajax方法，传递cookie，成功进入后台并触发.php页面的访问。整体分析流程虽然简单，但旨在记录下初次分析日志的经验。

Axios源码深度剖析 - AJAX新王者

       Axios 是一个基于 Promise 的 HTTP 请求库，支持浏览器和 Node.js 环境。其源码在 GitHub 上开源，欢迎 fork 使用并提出指正。以下为 Axios 的核心目录结构说明，主要关注在 /lib/ 目录下的文件。

       在使用 Axios 时，你可能会遇到多种调用方式，本文将带你深入了解这些方式及其原理。

       首先，我们来了解一下 Axios 的基本用法。你可以使用以下几种方式发起请求：

       1. `axios(option)`：提供一个配置对象进行调用。

       2. `axios(url[, option])`：传入 URL 和配置对象。

       3. 对于 GET、DELETE 等方法：`axios[method](url[, option])`。

       4. 对于 POST、PUT 等方法：`axios[method](url[, data[, option]])`。

       5. 使用默认实例：`axios.request(option)`。

       通过以上方式，你可以轻松发起 HTTP 请求。

       深入源码分析，你将发现 Axios 的强大之处。通过 `axios.js` 文件的入口，核心在于 `createInstance` 方法，该方法能生成一个指向 `Axios.prototype.request` 的 Function，从而实现多种调用方式。

       在 Axios 的核心 `Axios` 类中，`request` 方法是所有功能的中枢，无论是 GET、POST 还是其他方法，最终都通过 `request` 方法实现。

       配置项是 Axios 与用户交互的关键，它涵盖了几乎所有功能的配置。配置项从低到高优先级顺序为：默认配置对象、`defaults` 属性、`request` 方法参数。

       在使用 Axios 时，配置项是如何生效的？答案在于合并多个配置源，最终得到一个综合配置对象。

       此外，Axios 提供了拦截器系统，让你可以控制请求前后的数据处理。每个 Axios 实例都有 `interceptors` 属性，用于管理拦截器，让你实现精细的控制。

       核心的 `dispatchRequest` 方法则负责处理请求流程，包括请求适配器、发送请求、数据转换等步骤。最后，通过 Promise，你可以优雅地处理异步请求。

       数据转换器让你能轻松地在请求和响应数据之间进行转换，如将对象转换为 JSON 格式。默认情况下，Axios 自动处理 JSON 数据转换。

       在使用 Axios 时，你还能灵活地控制超时、取消请求、设置 header、携带 cookie 等功能。通过源码分析，你可以深入理解 Axios 的内部机制。

       总结，Axios 以其强大、灵活的功能和简洁的 API 设计，成为现代应用中不可或缺的 HTTP 请求工具。通过本文的深入探讨，你将对 Axios 的运作机制有更深刻的理解，从而更好地利用其功能。