Awfice-小型办公套件应用程序的集合

我们都熟悉传统的办公套件--文字处理器、电子表格、演示文稿程序，可能还有图表或笔记应用程序。我们已经在Microsoft Office和Google Docs中看到了这一切。它们真的很强大而且很大。但是，构建办公套件所需的最少代码量是多少呢？

显然，我们的办公套件不会是桌面GUI应用程序--它们需要大量的代码和精力来构建。同样的情况也适用于本地移动应用程序。我们可能会考虑构建一个控制台(基于终端的)应用程序，实际上已经有了小得离谱的文本编辑器或电子表格，但是如果我们以浏览器为目标，事情会容易得多。

浏览器已经提供了一个不错的富文本编辑器(可内容编辑)，并且对于数学表达式来说是非常好的(虽然不安全)求值器。

是的，就是这样。此外，你可以把它变成一个独立的URL，当我需要一个便签簿来做快速笔记时，我就是这样用它的：

尝试将其粘贴到您的地址栏中。如果您的浏览器很适合您，您应该能够使用Ctrl+B或Ctrl+I来使文本显示为粗体或斜体。

我们可以通过添加一些样式来进一步增强它(是的，我相信一些小的排版改进很重要)：

我已经将其添加到书签中，现在我的零权重文本编辑器离我只有一个按键的距离。您还可以将其用作粘贴文本甚至图片的临时剪贴板。

当然，这可以进一步扩展以支持各种标题样式、列表或缩进。

稍微压缩上面的代码并将其转换为数据URL将产生以下大约600字节长的富幻灯片编辑器：

通过将幻灯片打印到文件中，可以将幻灯片导出为PDF，然后可以在任何计算机上显示幻灯片。

不久前，我构建了https://onthesamepage.online，以便与其他人协作快速草拟想法，但尽管它很简单，但它仍然比我们这里所做的要大。

至少，我们只能在画布上画线条。我们需要一个<；canvas>；元素、几个鼠标/触摸处理程序和一个标志，以指示在按下鼠标时鼠标移动实际上正在绘制。

这里值得一提的是，具有id的元素可以作为window[id]或window.id进行访问。很长一段时间没有标准化的东西，一直是IE的黑客，现在已经成为标准了。

另外，我将光标位置处理移动到单独的短函数，以便在MouseDown和Mousemove处理程序中重用它们。最后，我重置了Body元素的边距以使画布全屏显示。

精简后的代码大约为400字节，允许您用鼠标绘图，不多也不少：

<；Canvas id="；v"；>；<；脚本>；d=文档，//文档d的快捷方式。身体。风格。边距=0，//重置样式f=0，//鼠标按下标志c=v。GetContext("；2d"；)，//canvas context v.。Width=innerWidth，//使画布元素全屏v。Height=innerHeight，c.。Line Width=2，//将线条加宽x=e=>；e。客户端X||e。触及[0]。ClientX，//从鼠标获取X位置/触摸y=e=>；e。客户端Y||e。触及[0]。ClientY，//从鼠标获取Y位置/触摸d。Onousedown=d。Ontouch start=e=>；{f=1，e.。Prevention entDefault()，c.。Moveto(x(E)，y(E))，c.。EginPath()}，d。Onouse semove=d.。Ontouch chmobile=e=>；{f&；&；(c.。Line to(x(E)，y(E))，c.。笔划())}，d。OnMouseUp=d。Ontouch chend=e=>；f=0<；/script>；

这可能是最复杂也是最大的一个，但我们将尽量保持在每个应用程序1KB的限制以下。

布局会很简单。HTML附带表格，我们为什么不使用它们呢？由于电子表格单元格通常可以通过“字母”+“数字”寻址，因此让我们将表格限制为26x100个单元格。在循环中动态创建行和单元格是有意义的。一些基本的样式会让我们的电子表格看起来更漂亮：

<；表ID="；t"；>；t。风格。BorderColrapse="；折叠"；；//删除(设i=0；i<；101；i++){const row=t.。Insert tRow(-1)；for(let j=0；j<；27；j++){//将列索引j转换为字母("；A"；的字符代码为65)常量Letter=String。FromCharCode(65+j-1)；//1=A，2=B，3=C等常量单元格=ROW。插入单元格(-1)；单元格。风格。BORDER="；1px纯银"；；//制作薄灰色边框单元格。风格。TextAlign="；right"；；//右对齐，如excel if(i>；0&；&；j>；0){//添加可识别的输入字段，这里是公式输入常量字段=文档。CreateElement('；input'；)；字段。ID=Letter+i；//即，"；B3"；单元格。AppendChild(Field)；}Else If(i>；0){//行号单元格。InnerHTML=i；}Else if(j>；0){//列字母单元格。InnerHTML=Letter；}。

现在我们有一个由行和列组成的大型单元格网格。添加表达式计算器的时间到了。我们可以使用3个数组来实现一个复杂但主要有效的求值器-所有输入字段的数组(以获取其实际输入的值、数字或公式)，具有智能getter的数组，如果请求变量并且它链接到带有公式的输入字段，则调用eval()，以及每个字段最后输入的值的缓存：

Input=[]；//假设我们为上述循环中的每个字段输入了puts.ush(Field)data={}；//智能数据访问objectcache={}；//cache//重新计算所有fieldsconst calc=()=>；{inputs.map(field=>；{try{field.value=D[field.id]；}catch(E){/*Ignore*/}})；}；//我们还需要自定义字段初始化代码：field.onocus=()=>；{//当元素被聚焦时-将其计算值替换为其公式字段。value=cache[field.id]||"；"；；}；field.onblur=()=>；{//当元素失去焦点时-将公式放入缓存中，并重新计算所有内容cache[field.id]=field.value；calc()；}；//字段的Smart getter如果需要dconst get=()=>；{letvalue=cache[field.id]||"；"；；If(value.chat At(0)=="；="；){//使用"；with"；hack：with(Data)return eval(value.substring(1))；}Else{//原样返回值，如果可能，转换为数字：return isNaN(parseFloat(Value))？Value：parseFloat(Value)；}}；//将智能getter添加到大小写变量的数据数组中：Object.fineProperty(data，field.id，{get})，Object.fineProperty(data，field.id.toLowerCase()，{get})。

现在电子表格应该可以工作了，例如，如果您将“42”放入A1，将“=A1+3”放入A2-当您将焦点从A2移开时，您应该会看到“45”。

嗯，它绝对不能取代真正的办公套间。但它很好地展示了极简主义和微小的代码。所有这些应用程序都是昙花一现的，如果你刷新页面，它们就会失去它们的状态，而且看起来数据URL没有办法保持它们的状态。但是，如果你不需要打开繁重的“真正的”办公应用程序来计算几个比特或起草一些快速便条，它们作为快速书签可能会很有帮助。作为额外的好处，所有这些小应用最终都尊重你的隐私，不会分享你的数据(也不要存储数据)。

因此，是的，与其说这是一个严肃的应用程序，不如说是一个玩笑，但我还是为这些小应用程序创建了一个repo，以防任何人想要使用它们或根据自己的需求进一步定制：http://github.com/zserge/awfice.。欢迎使用PRS和进一步改进！