1.jQuery内部原理和实现方式浅析
2.撬开技术难点！源码实现Fetch 请求扩展超时功能！分析
3.分析、源码还原一次typecho入侵事件
4.Axios源码深度剖析 - AJAX新王者
jQuery内部原理和实现方式浅析
这段时间在学习研究jQuery源码，分析受益于jQuery日益发展强大，源码研究jQuery的分析羊城杯2023源码大牛越来越多，学习的源码资料也比前两年好找了，有很多非常不错的分析资源，如高云的源码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 请求进行扩展，实现通用且易复用的超时功能。
我们通过具体的实现方案和深入的技术分析，解决实际项目中可能遇到的各类问题，提升技术水平。
要实现基本的h5免公众号注册登录源码超时功能，只需使用 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 的运作机制有更深刻的理解，从而更好地利用其功能。
