今日使用了一下自己的开源系统实用工具 Pxer 来免费下载了

今日使用了一下自己的开源系统实用工具 Pxer 来免费下载了点照片，邻近年尾，简易算下，这一开源软件从 2014年6月 迄今有了 85年 历史了，也获得了超出 900 颗 Star

85年前，那就是 jQuery 和 BootStarp 盛行的年代，前面热门的编程技术也和如今大相庭径

在这个8年半间，我不断更新我开源软件 Pxer，也在逐渐的引进一些新的前面时尚的物品，可是历史包袱大伙儿懂的都懂，没有那么好完全抛弃。但是另一方面，大家还可以通过这种“历史包袱”来简单窥视一下前面持续发展的冰山一角

因此今天就来大伙儿简易读一读编码，看一下8年前思维模式，比照对比现今流行解决方法来更好的理解——为什么现在流行方案是这个样子？

• 新项目官方网站 pxer.pea3nut.org/
• Github Repo github.com/FoXZilla/Px…

简单的背景详细介绍

Pxer 是一个专用工具，会到 Pixiv.net 这个软件附加生成一个 UI 控制面板来提供一些附加作用。类似，在B站添加一个按键让你可以立即下载小视频和封面图（B站未提供的功效）

运行模式

浏览器书签

Pxer 的第一版的出台编码是这样子，要在贴吧公布的

如何？是否不明白要要怎么用？

在这里就需要提及一个浏览器非常有意思的特点了：

如果你存便签时，不仅能够存 http: 开头的便签，你们可以存 javascript: 开头的便签，点击便签，你就能够运作这一段编码了。

不信你试试存下边的代码为便签，点击便签

javascript: alert('Hello Peanut Pie')

油猴 Greasemonkey

存便签的形式你可能会觉得太费劲了，的确，还有人是这样想的，因而拥有“油猴”浏览器扩展（Greasemonkey / Tampermonkey）

油猴是一个扩展程序，你能组装JS脚本进油猴，随后油猴会依据网站域名，来自动替你运作你 JavaScript 编码

因而，如今 Pxer 安装编码应该是是这样子的：

// ==UserScript==
// @name           Pxer
// @include        https://www.pixiv.net*
// ==/UserScript==
javascript: void(function() {

window['PXER_URL'] = 'https://pxer-app.pea3nut.org/';

// add enter point script in page
document.documentElement.appendChild(
    document.createElement('script')
).src = PXER_URL   'launcher.js?'   ( new Date);

}());

（详细编码见 pxer-app.pea3nut.org/pxer.user.j…

读一读编码，你会大约猜中油猴是怎样相关工作的——当客户开启https://www.pixiv.net*的网站时，自启动上边的代码，随后 Pxer 的操作面板出现了！

现阶段油猴都是现阶段 Pxer 的推荐量安装方法，我们可以在 Pxer 的官方网站来找到详尽的流程表明

• Pxer 组装手册 pxer.pea3nut.org/install/ins…

浏览器扩展 Extension

现在也有一个更好的控制方式——浏览器扩展。这样可以得到更好的性能管理权限，可是8年前浏览器扩展有一个致命性的难题：

——每家浏览器扩展接口大相庭径（并且 Chrome 的拓展店铺发布还需要钱！）

这种情况在今日获得了减轻：Mozilla 上线了一个浏览器扩展标准——WebExtensions

现阶段 Edge、Firefox 的拓展是绝对遵循这一规范化的。与此同时，这一标准也和 Chrome 的扩展接口非常类似，因而你能根据 WebExtensions 插口来开发拓展，随后比较简单去适配所有电脑浏览器——可是这一点在8年以前根本不可能！

Pxer 并没追上这么好的情况下，而时迄今日的我就没有什么勇气去开坑，把 Pxer 从油猴的形式转移到 WebExtensions 的形式

项目打包

依靠顺序

当我们的新项目大下去，你急切的需要一个专用工具来帮助你机构依靠——那你也不愿有一个几万行JS文档吧？

核心诉求便是：资料载入的先后顺序难题。那样 Pxer 是怎样处理的呢？要记住，8年以前可没有那么实用的 Webpack 让你用。那时候 Webpack 刚公布 1.0.0 版本号没多久，消费者和汉语材料有多少个大伙儿懂的都懂

以下是 2017 年 Pxer 主 App 文件目录

（github.com/FoXZilla/Px…

啥子？你问他文档正中间数字是干嘛的？自然就是明确文档载入次序了~

简单来说，我写了个脚本制作，首先会全自动找数字最小文档，例如PxerEvent.-1.class.js便会被先载入，随后不带数字的默认设置是0，随后载入PxerFilter.class.js，然后就是PxerThread.1.class.js，依此类推

生产制造编译程序

而编译程序一部分就更简单直接了，立即按顺序Fs.readFileSync（把文档看到运行内存）后Fs.writeFileSync（把运行内存具体内容立即载入成文档）

var fileList =[];
for(let array of PxerUtility.getAllFile(Join(__dirname,'../src/app/class/'))){
    fileList.push(...array);
};
Fs.writeFileSync(
    Join(__dirname,'../dist/pxer-core.js'),
    Buffer.concat(fileList.map(path=>Fs.readFileSync(path)))
);

（github.com/FoXZilla/Px…

之后就可以将这个“形成出的大文件”扔到工作环境给用户了~

开发设计编译程序

可是这时依然有个问题，我总不能改一行代码随后先装包才可以看效果吧？也太费劲了？Webpack 也有 dev-server 呢~

Pxer 也是有！

以下是 Pxer 在设计阶段的编译程序后编码

// 要载入文件
const appClass =[
    [
        "src/app/class/PxerData.-1.js",
        "src/app/class/PxerEvent.-1.class.js"
    ],
    [
        "src/app/class/PxerFilter.class.js",
        "src/app/class/PxerHtmlParser.class.js",
        "src/app/class/PxerPrinter.class.js"
    ],
    [
        "src/app/class/PxerThread.1.class.js"
    ],
    [
        "src/app/class/PxerThreadManager.2.class.js"
    ],
    [
        "src/app/class/PxerApp.3.class.js"
    ]
];


// 全过程化加载文档
var Flow = Promise.resolve();


// 载入pxer-app

// 载入没有意义的网络资源
Flow = Flow.then(() => execPromise(linkResource, createResource));
// 载入pxer-app class
Flow = Flow.then(() => execPromise(appClass, createScript));
// 载入UI JavaScript
Flow = Flow.then(() => execPromise(viewScripts, createScript));

• 形成编译程序文件信息脚本制作 github.com/FoXZilla/Px…
• 产生的文档 github.com/FoXZilla/Px…

上边文件是一键生成的，脚本制作会：

1. 载入文件目录中的文档
2. 根据文件里的数据（PxerThreadManager .2. class.js）排列，分类
3. 拉起一个 Http Server，再将源代码（未装包以前）载入进电脑浏览器

这样一来，在我修改硬盘里的文档，不用重新编译装包，立即更新浏览器页面就可看见自己的修改了~

比照 Webpack

Pxer 项目在 build/ 文件目录有9个文档去承担各种各样装包编译程序工作，这种逻辑性统统就是我原创，可是你就会发现历史时间真的是惊人的相似——我似乎是完成了一个简化版的 Webpack

自然，Webpack 还有一个非常不错的作用——热加载 Hot Load，可以不用更新浏览器载入新文件，隐私功能 Pxer 的编译系统是不存在的

如果我早出世5年...

续篇

如今读一读8年以前自身写的东西——怪异的 Code Style、用读文件的方式去编译程序装包、用functionName.prototype['xxx'] = function () {} 来构建类。一股浓浓“屎山”味道扑面而来

但要知道，这个东西在8年以前，但是时尚得不行~！

关于作者与转截

欢迎来到【花生仁派】，一只喜爱写东西的程序猿。我常在黑夜中凝视着他的眼瞳，与自己独处，写出一段又一段的句子

如果对我有兴趣，能够找到属于自己的我：

• 个人信息网址：pea3nut.info
• 个人博客网站：pea3nut.blog
• 知乎问答：花生仁PeA
• AdminJS：花生仁PeA

文中可任意转截，转截时需要满足下列规定：

1. 要保持全文转截，不可进行任何修改
2. 转截时请告诉我下。比如说在这篇文章下评论，或发来电子邮件626954412#qq.com都可，能让我知道就ok。无需等着我回应，打过招乎之后直接转就可以了
3. 不必转截到知乎问答、AdminJS，我会自己投