分类： 前端

React 相比于 Vue 的好处是你可以相对轻松的将一个组件抽离出来，这使得开发者可以根据自己的需要进行抽象。

但手动抽象组件还是相对较麻烦，于是我便搜索有没有一些方便的插件，可以帮助我更好快的完成组件的抽象。于是乎便找到了 Wix 出的 glean 插件。

glean 插件可以将任意层级的组件抽出为一个全新的函数，并在之前的位置引用你的函数，因此，你可以先非常快的构建出一个完整的 UI 界面，再基于这个界面，进行不同层次的抽象。或者是在开发界面时，随时根据需要来完成界面的抽象。

在实际使用过程中，你可以将 glean 插件提供的命令设置为快捷方式，从而实现更快的抽象组件，或者是点击组件前的黄色小灯泡💡来完成组件的抽象。

在油猴脚本中，有些时候，我们需要在界面当中添加一个新的按钮。这个时候我们可以使用 document.getElementById("id").innerHTML=xxx 来指定某个元素中的内容是特定的 HTML，从而实现添加一个新的按钮。

但在这个按钮上绑定事件则不是通过简单的指定 button 的 onclick 来完成的。核心原因是默认情况下，你在油猴脚本中所写的函数只运行在油猴脚本中的 Scope ，而 button 则是运行在 Document 的 Scope 下。直接绑定事件在触发时会无法找到对应的函数。

一个好的办法是为你新增的 Button 带上 ID，并通过 ID 找到对应的 Element 并添加事件绑定来实现。

参考代码如下:

// ==UserScript==
// @name         示例代码
// @namespace    https://www.ixiqin.com
// @version      0.0.1
// @description  示例代码
// @author       bestony
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  window.addEventListener('load', function () {
    function viewAuthor() {
      // button click event
    }

    var targetElement =document.getElementById("xxx")

    targetElement[0].innerHTML = targetElement[0].innerHTML + ` &nbsp;<a id="view-author">查看作者</a>`

    var link = document.getElementById("view-author");
    if (link) {
      link.addEventListener("click", viewAuthor, false);
    }
  }, false);
})();

最近在写一个油猴脚本时，因为懒得写 DOM 处理函数，我试图在油猴脚本当中引入 Zepto.js， 用于实现 DOM 操作。

但在引入 Zepto 之后，发现即使是空白的脚本文件，在网页加载时依然会报错。经过排查发现，是我引入的 Zepto 文件导致的，进一步研究后发现，之所以有这个问题，是目前油猴脚本仍不支持 Modules ，因此，我引入 Zepto 就会报错。

想要解决这个问题倒是也简单，将 Zepto 替换为 JQuery 即可。本来想着用 Zepto 会轻量一点， 最后发现还是要上 JQuery。好在是目前 JQuery 提供了不含 Ajax 和 Effect 的 Slim 版本，倒是也不用担心引入的依赖文件特别的大。

在 Hexo 的 Github 组织下，有一个不明显，但却很有用的仓库 —— warehouse。

warehouse 是一个 JSON 数据库，基于 JSON 实现了各种类似于 SQL 的查询，可以帮助我们基于一个 JSON 文件来进行查询。在 Hexo 的静态生成过程中，warehouse 帮了大忙。

用官方的话来说，warehouse 就是 A JSON database with Models, Schemas, and a flexible querying interface.

在实际使用上，warehouse 确实如他所说的那边方便（虽然某些方法没有，但依然不影响他的使用很方便）。

Example

比如，如下代码就定义了 一个 Post 模型和对应的表。并实现了在这个表中插入一个新的数据。

var Database = require('warehouse');
var db = new Database();

var Post = db.model('posts', {
  title: String,
  created: {type: Date, default: Date.now}
});

Post.insert({
  title: 'Hello world'
}).then(function(post){
  console.log(post);
});

如果你需要将这些数据保存为一个单独的文件，只需要修改初始化的参数，并执行 save 方法，就可以将 JSON 导出到指定的文件中

var db = new Database({
  path: "./test.json", // 将数据存储在 test.json 当中
});
db.save();

类似的，如果数据已经构建好了，也只需要执行 load 方法，就可以加载数据。

var db = new Database({
  path: "./test.json", // 将数据存储在 test.json 当中
});
db.load();

场景

如果你希望在内存当中对于 JSON 有一个更好的操作方式，那么 warehouse 是个不错的选择，不需要另外单独安装数据库，就可以实现类似于数据库的查询方式，体验还是非常好的。

如果你想了解更多，可以查看

• warehouse的文档：https://hexojs.github.io/warehouse/index.html
• hexo 当中的模型定义：https://github.com/hexojs/hexo/tree/master/lib/models
• warehouse 的测试用例：https://github.com/hexojs/warehouse/tree/master/test/scripts

最近在看一个前端项目，里面出现了一些令人血压暴涨的骚操作。虽然可以用，但对我来说，确实是让我看到血压飙升。

1. 尽可能使用常规的指标

项目的诉求是实现页面的自适应化，在不同尺寸的屏幕上尽可能保持一致的显示。

为了实现这个诉求，我给他们的建议是使用 Bootstrap 之类的框架，在不同的屏幕上尽可能保持一致。使用 Bootstrap 之类的框架来完成。

最后研发团队选择采用了一个有用，但我看起来非常头疼的方法 —— 根据屏幕宽度计算 rem。通过这样的方式，实现了在不同的屏幕宽度下，都可以和设计稿的尺寸一比一。

但这样带来的问题是，rem 计算出的结果也是一个非常的大的值（当然也可以非常小），但依然不是一个常规的结果，需要你常常使用诸如 0.03 这样的数值来指定宽度和高度。

我觉得，这样的写法并不是说不行，只是这样的写法其实会降低整个项目的可维护性。

2. 文件放置符合规范

其次，这个项目中还出现了一个问题是 —— 文件到处乱丢。在一些项目中，大家往往会有一些明确的文件路径的规范，比如样式文件应该放在哪里。在这个项目中，就出现了样式乱丢的情况。

这样的混乱的写法则会导致在实际开发的时候，如果想要调整样式，可能会出现调试失效，修改起来较为混乱的问题。

3. 一个项目中混用多个不同的尺寸单位

刚刚有用 rem 的单位，另外就有一个文件采用的是 px 为单位，我非常担心在不同尺寸屏幕下出现的错位问题。

4. 放弃 Bootstrap 的样式类，转而改用手动撰写每一行样式

总结

这个项目从我目前的视角来看，依然还有很大的改进空间。且留下了不少的坑。在我看来，长期来看，这些代码将会留下不可维护的问题。希望他们后续慢慢修改和调整吧。唉。