沉迷JS无法自拔

直接盗用了 @cyanogen 大佬的文章封面（侵删

我觉得有必要从 Cyan 的通知中心全家桶说起。所谓“全家桶”指的是包含 Pin, TodayMind, 小历 这三个 APP 的应用套装，不记得 Pin 和小历是限免还是冰点的时候入的了，其中 Pin 使用得最多，因为剪贴板和键盘结合真的很好用，由于换手机的关系大约有半年时间没有装回 Pin，后来因为某手机发布会上介绍的功能有原创性争议才重新想起了 Pin，于是在某鱼低价抛售了某品牌手机后重新装回了 Pin 和小历，然后以18软妹币的价格购买了“全家桶”把 TodayMind 也收入囊中，当时还在想已经买过其他两个了为毛还是原价来着，现在估计是因为当初是限免下载的？

后来好像是 Pin 更新到3.0版本加入了“xTeko 实验室”，因为那段时间比较忙，所以没怎么注意这个功能，再到这次 Cyan 大佬发布 JSBox 的时候才后知后觉这玩意儿有多牛×，于是第一时间转发了抽奖微博并订阅了兑换码放码通知，然而身为非洲菇并没有抢到和被抽到兑换码，于是在“实验室”玩了一整天后香菇果断下手“升级到 JSBox 套装”(扣费时硕大的“30元”字样跃入眼帘，心中不禁大骂 AppStore 计费系统有毛病，说好的优惠呢/(ㄒoㄒ)/~~)，不过瞬间恢复心情，毕竟30块钱买个“IDE”还是很超值的23333，用 Cyan 大佬的原话来讲就是“JSBox 是个创造工具的工具”，其正真的价值在于使我的通知中心有了无限可能，身为前程序猿的菇有一定的代码功底，“退休”后不时的写点前端，理解起 js 来也没什么问题，虽然 JSBox Wiki 还在不断完善中，但结合丰富的 API 和 UI 示例来写自己的小工具还是没问题的——我可能真的能玩这个玩好几年2333

这两天通过 JSBox “移植”了1个以前写的莫名其妙的“随机取色器”到手机端，演示及代码如下：

$ui.render({
  props: {
    bgcolor: $color("#167EFA")
  },
  views: [{
    type: "button",
    props: {
      id: "bgView",
      font: $font("bold", 46),
      textColor: $color("white")
    },
    layout: function(make) {
      make.edges.inset(10)
    },
    events: {
      tapped: function(sender) {
        randColor()
      }
    }
  }]
})

var getColor = function() {
  var colorElements = "0,1,2,3,5,6,7,8,9,A,B,C,D,E,F"
  var colorArray = colorElements.split(",")
  var color = "#"
  for (var i = 0; i < 6; i++) {
    color += colorArray[Math.floor(Math.random() * 15)]
  }
  return color
}
var setColor = function(obj, color) {
  obj.title = color
  obj.bgcolor = $color(color)
}
var randColor = function() {
  setColor($("bgView"), getColor())
}

randColor()

测试 http 写了个一言 API 的简单调用，演示及代码如下：

$ui.render({
  views: [{
    type: "text",
    props: {
      id: "text",
      editable: false
    },
    layout: function(make) {
      make.edges.inset(10)
    }
  }, {
    type: "button",
    props: {
      icon: $icon("162", $color("gray"), $size(18, 18)),
      bgcolor: $color("#eee")
    },
    layout: function(make) {
      make.right.bottom.inset(10)
      make.size.equalTo($size(40, 32))
    },
    events: {
      tapped: function(sender) {
        setHitokoto()
      }
    }
  }, {
    type: "button",
    props: {
      icon: $icon("019", $color("gray"), $size(18, 18)),
      bgcolor: $color("#eee")
    },
    layout: function(make) {
      make.right.inset(60)
      make.bottom.inset(10)
      make.size.equalTo($size(40, 32))
    },
    events: {
      tapped: function(sender) {
        $clipboard.text = $("text").text
        $ui.toast("已复制到剪贴板")
      }
    }
  }]
})

var setHitokoto = function() {
  $("text").text = "Loading..."
  $http.get({
    url: "https://sslapi.hitokoto.cn/",
    handler: function(resp) {
      var text = resp.data.hitokoto + "\nFrom: " + resp.data.from
      $("text").text = text
    }
  })
}

setHitokoto()

记得很久很久以前的远古时期跟蘑菇说过要写个小工具来解决“今天吃什么”这个千古难题，演示及代码如下：

var menu = "米饭,炒米饭,黄焖鸡米饭,锅巴饭,烤肉饭,鸡蛋面,香菇面,炒面,拉面,小面,蘸水面,干拌面,包子,饺子,凉皮,米皮,擀面皮,肉夹馍,煎饼,炸鸡,汉堡,披萨,面包,薯条,蛋糕,寿司,热狗,虾,火锅,苹果,梨子,橘子,葡萄,椰子,菠萝,桃子,玉米,草莓,西瓜,哈密瓜,奶茶,咖啡️"

var foods = menu.split(",")
var timer
var btstart = "~ BIU ~"
var btstop = "- STOP -"
var labdefault = "略略略"


$ui.render({
  views: [{
    type: "button",
    props: {
      id: "button",
      title: btstart,
      font: $font(32),
      bgcolor: $color("#167EFA")
    },
    layout: function(make, view) {
      make.height.equalTo(48)
      make.centerX.equalTo(view.super)
      make.bottom.left.right.inset(10)
    },
    events: {
      tapped: function(sender) {
        var btn = $("button")
        if (btn.title == btstart) {
          btn.title = btstop
          var i = 0
          timer = $timer.schedule({
            interval: 0.05,
            handler: function() {
              var food = foods[Math.floor(Math.random() * foods.length)]
              $("label").text = food
              if (i++ > 100) {
                timer.invalidate()
                $("button").title = btstart
              }
            }
          })
        } else {
          btn.title = btstart
          timer.invalidate()
        }
      }
    }
  }, {
    type: "label",
    props: {
      id: "label",
      text: labdefault,
      font: $font(52),
      align: $align.center
    },
    layout: function(make, view) {
      make.left.right.inset(10)
      make.top.inset(48)
      make.centerX.equalTo(view.super)
    }
  }]
})

两个 APP 这方面的“能力”实际上是一致的，不知是否是“先入为主”，菇感觉在 xTeko 中撸代码更舒服，但 JSBox 提供了更专一更纯粹的功能，UI 也更整齐统一，这一点我还是很喜欢的。

▲ Pin xTeko 的列表、编辑器和 DEBUG

▲ JSBox 的列表、编辑器和 DEBUG

下边是引用作者的原话，这才是“情怀”吧~

关于为什么要做这么一款应用，我其实还有一个私心。
我始终都记得童年时代用电子词典玩各种程序的日子，那段时光很美好，也在一定程度上培养了我们的兴趣。
当时的电子词典上也有各种各样的编程平台，例如
GVBASIC/LAVA/BBASIC，尽管童年一去不复，这些名字也已经被人所遗忘，但是对于编程的热情却不会停止，指引我们在这件事上做出更有趣的东西。
我始终相信，这些驱动我们去不断折腾的精神，是让世界变得更美好的原因之一。所以我们为真正的极客，做了这个应用。
Via. https://sspai.com/post/42361

Ps. 这是一篇疑似推广软文，不收广告费的那种。
Pss. 说起来你可能不信，博客数据库编码貌似不能保存 emoji 所以“今天吃什么”代码中的 emoji 字符都去掉啦，嗯！手机端写代码直接输入使用 emoji 还是很骚气的嘛2333
Psss. 有兴趣的小伙伴去支持一下国产呗
Pssss. 目前仅限 iOS AppStore 有售