分类存档: Web

Monaco Editor 实战：添加代码折叠功能

作者: 日期: 9月 11, 2023 没有评论

在之前的文章《4 步为 Monaco Editor 添加自定义语言支持》中，我们已经学会了如何使用 monaco-editor 来实现一个支持自定义编程语言的编辑器，但是作为一个标准的代码编辑器，我们还需要它支持代码块折叠功能，这样在编辑内容比较多的代码文件时，可以方便的将其中一些代码块折叠起来，使得在阅读代码时更容易理解整体代码结构。

这一次我们就来看看如何给 Monaco Editor 增加代码块折叠功能。

官方示例

在 Monaco Editor Playground 的 Folding Provider Example 示例中，可以看到如何给一个自定义语言添加代码折叠支持：

monaco.languages.registerFoldingRangeProvider("foldLanguage", {
    provideFoldingRanges: function (model, context, token) {
        return [
            // comment1
            {
                start: 5,
                end: 7,
                kind: monaco.languages.FoldingRangeKind.Comment,
            },
      // ...
    ]
  }
});

可以看到，只需要在注册自定义语言后，再注册一个 foldingRangeProvider …

阅读全文 »

4 步为 Monaco Editor 添加自定义语言支持

作者: 日期: 4月 17, 2022 2 条评论

在很多需要为用户提供编写代码能力的服务中，我们需要给用户提供一下能力足够强大的编辑器，这样可以使得用户在编写代码时更顺畅，减少查询文档次数，降低出错概率，提升编码效率。

而想要提供这些能力，就需要一个足够强大的代码编辑器，并且为它添加我们自定义语言的支持，这样用户可以在语法高亮、自动完成等方面得到足够的支持。

为什么用 Monaco Editor？

Visual Studio Code 是世界一个非常流行的代码编辑器，而 Monaco Editor 是用于构建 VSCode 核心功能的代码编辑器，它提供了相当多的功能，用于实现各种代码编辑能力。并且微软为 Monaco Editor 提供了单独的项目，单独的打包脚本，因此我们可以轻易的将 Monaco Editor 集成到我们自己的 Web 应用中。

Monaco Editor 已经提供了一系列的基础设施，用于完成对自定义语言的支持，只需要通过很小的步骤，我们就可以搭建一个属于自己语言的代码编辑器。

那么，这就开始吧！

Step 1. 注册一个语言

这里将不再赘述如何将 Monaco Editor 引入 Web 应用，在 Monaco Editor 的仓库提供了使用各种方式集成 Monaco Editor 的说明。

为了让 Monaco Editor 知道我们将要添加一种自定义语言的支持，首先需要注册一个自定义语言标识，这里我们选择 mylang 作为我们自定义语言的标识符。

注册一个自定义语言对于 Monaco Editor …

阅读全文 »

使用 ukraine 建设 node.js 私有云

作者: 日期: 1月 9, 2013 2 条评论

源由

node.js 越来越流行，托管 node.js 应用的云服务也越来越多，例如 nodejitsu、heroku 等。

但是这些云服务通常有这样那样的限制，又或者是要收费的。而有些时候我通常不需要跑很大的应用，或者是很稳定的应用，只是为了跑一些小的，或者是学习用的 node.js 应用，并且我也有自己的 VPS，想把这些应用托管在自己的服务器上。

于是我需要去找一个可以在自己的 VPS 上建设一个 node.js 私有云的软件。

比较

在看了 中的 DIY Platforms 后，尝试了一下其中介绍的平台：

  • nodester: 安装比较麻烦，不支持新版本的 nodejs，安装说明还是针对 node 0.4.11 的
  • CloudFoundry: 比较庞大，而且是以 vm 方式安装，不适合 VPS
  • OpenShift: 同 CloudFoundry，不只支持 node.js，安装复杂，不适合 VPS
  • Nodejitsu: Nodejitsu 开源了他们所用的 node.js 应用管理项目 haibu，haibu
…

阅读全文 »

推开窗户看世界 — Objective-C之外

作者: 日期: 12月 12, 2011 没有评论
Besides Objective-C
View more presentations from Jiwei Xu

引子

App Store 如今正风靡世界，许多人都想尝试去自己开发一个 iOS App，不过苹果官方推荐使用的是 Objective-C 这个语言。而 Objective-C 与 C、Java 之类的语言风格差异有些大，短时间并不容易掌握，又或者许多人只是想尝试开发一个可以运行在 iOS 上的程序而已，不想再去额外去学一门新的语言，那这个时候就可以考虑另外的一些技术来开发 iOS App。

在移动开发领域，得益于现在手机的性能越来越好，浏览器的功能越来越强大，JavaScript 也成为一门很流行的程序开发语言，而对应到 iOS 平台上，也有多种使用 JavaScript 来开发 iOS App 的技术。这次要介绍的三种技术之中，就有两种使用了 JavaScript。

另外，许多开发跨平台移动应用开发的解决方案，首选要支持的就是 iOS，因此在 iOS 这个平台上可以看到很多种不使用 Objective-C 去开发 iOS App 的技术，而且其中技术所编写出来的程序，除了可以在 iOS 上运行之外，还可以运行在 Android 以及其他系统平台上。能少写一份代码，何乐而不为呢～

不使用 Objective-C

这次要介绍的是三个不使用 …

阅读全文 »

使用 node.js + nginx 建设网站

作者: 日期: 12月 11, 2011 6 条评论

昨天搞定了一个小网站的搭建，用了 node.js，另外为了能在一个 VPS 上搭建多个网站，用了 nginx 作为反向代理。

软件介绍

嗯，从维基上复制了一下～

node.js

Node.js是一个事件驱动I/O伺服端JavaScript环境，基于V8。目的是为了提供撰写可扩充网络程式，如web服务。第一个版本由Ryan Dahl于2009年释出，后来，Joyent雇用了Dahl，并协助发展Node.js。

nginx

nginx（发音同engine x）是一款由俄罗斯程序员Igor Sysoev所开发轻量级的网页服务器、反向代理服务器以及电子邮件（IMAP/POP3）代理服务器。

cluster

在 node.js 0.6.0 之前，有一个第三方的 node.js 模块 cluster，用来进行多核服务器上运行 node.js，以及提供扩展的支持。但是在 node.js 0.6.0 之后，node.js 本身就提供了 cluster 的支持，另外，第三方的 cluster 也与 node.js 0.6 有兼容性问题。目前 node.js 的稳定版本是 0.6.5，因此需要使用原生的 cluster 来代替第三方的 cluster。

幸好内置的 cluster 也足够简单，如果只是为了多核负载均衡，以及支持即时服务重启的话，只需要写一点的代码就可以完成这些功能了。

server.js

var path = require('path');
var
…

阅读全文 »

慎用 script 节点的 src 属性来传递参数

作者: 日期: 11月 13, 2009 没有评论

在有些使用 javascript 来渲染数据的时候，为了能动态获取不同的数据，并且保持 javascript 代码的可扩展性，会将 javascript 代码中获取数据的部分需要的参数提取出来，做为参数放在 script 节点的外部。

一般来说，传递参数到 javascript 文件内部的方法有两种，一种是将参数写在一个 script 节点中，写成全局变量的方式的传递给紧接着这个 script 节点的外部 javascript 中，Google Analytics 就是使用这样的方式：

<script type="text/javascript">
var p1 = "v1", p2 = "v2";
</script>
<script type="text/javascript" src="foo.js"></script>

另外一种是将参数直接写在 script 节点的 src 属性中，相当于一个页面的查询字符串一样：

<script type="text/javascript" src="foo.js?p1=v1&p2=v2"></script>

不过，使用 script 节点的 src 属性来传递参数需要注意一个很重要的问题，那就是动态变化的 src 属性会导致缓存失效。…

阅读全文 »

在 AIR 中突破同源策略访问 iframe 中的内容

作者: 日期: 10月 26, 2009 没有评论

本篇所讲关于 AIR 的内容是基本 HTML+JS，而不是 Flex 或其他。

在 AIR 中，如果当前页面有一个 iframe，并且我们需要获取这个 iframe 的内容，但是如果 iframe 里包含的是远程页面，在默认情况下，浏览器策略并不允许这种情况，这就是同源策略的限制。

在 Titanium 这个类似于 AIR 的平台中，默认情况下是可以直接从应用的页面中去读取 iframe 中的内容而没有任何限制，但是在 AIR 中不可以。在网上搜索了一番，再看了好几遍 AIR 的文档之后，终于找到解决问题的方法了。

在 AIR 中，iframe 标签拥有额外的几个属性：sandboxRoot、documentRoot、allowCrossDomainXHR 及 ondominitialize。这里为了解决读取 iframe 内容所用到的属性就是 sandboxRoot 及 documentRoot。

通过 sandboxRoot 及 documentRoot，可以将本地的页面映射为远程页面，并在沙盒中运行，另外，在沙盒中运行的页面就会拥有映射域名的域。例如，我们可以将本地的 proxy.html 映射为 http://example.com/local/proxy.html，这样，在实际运行时，proxy.html 中如果用 document.domain 获取页面所在的域，就会得到 example.com，这个时候如果在 proxy.html 

…

阅读全文 »

使用 arguments.caller 实现自动回调

作者: 日期: 10月 25, 2009 没有评论

这是一篇介绍类似于 js hack 的文章，只是说明了一种可行的途径，并且可能会增加代码复杂程度，具体项目中是否可以使用还请自辨：）

在前端开发过程中，有许多业务流程可能是需要用户进行登录的，并且登录过程是放在弹出层中，这样就可以不用刷新页面，增强用户体验。在登录时，用户的操作就会被打断，为了进一步增强用户体验，我们可能需要在登录完成后自动继续进行用户在登录前想进行的操作。

假设有这样一个场景，用户需要发表一个留言，但是发表留言是需要登录的，而发表留言的输入框是一直显示的，这也就要求在用户点击了发表按钮时对用户登录状态进行验证，传统的做法是将在用户登录状态检查封装在一个函数之中，这个函数接收一个回调参数，如果登录验证通过，则执行回调函数。这样的逻辑可以用以下代码表示：

程序代码：[ 复制代码到剪贴板 ]
function doAction() {
checkLogin(function() {
// 处理业务逻辑
});
}
function checkLogin(callback) {
if (isLogin) {
callback();
} else {
showLogin(callback);
}
}
function showLogin(callback) {
document.getElementById("login-btn").onclick = function() {
isLogin = true;
callback();
};
}

    总觉得这样的方式会将业务逻辑放到一个匿名函数中，而不是放在了按钮的事件响应函数中，感觉上不是那么好。这对整个事件响应函数的改动比较大，主要的业务逻辑都放在了登录验证函数的回调中。而希望可以是下面这样：

    程序代码：[ 复制代码到剪贴板 ]
    …

    阅读全文 »

    HTML5 Canvas 起步(3) – 颜色与渐变

    作者: 日期: 6月 7, 2009 没有评论

    上一篇介绍了 HTML5 中 Canvas 的路径，这篇将要介绍一下 Canvas 中的颜色及渐变。

    Canvas 中的基本颜色系统

    在 Canvas 中，颜色主要用途就是在绘制路径时，用来指定填充颜色和边框颜色。

    Canvas 中的颜色参数值有两种格式：

    1. 如果透明度为 1.0，也就是不透明，颜色值的格式就与一般使用一样，为：#AABBCC，其中 AA、BB、CC 分别为 Red、Green、Blue 分量。

    2. 如果透明度不为 1.0，也就是带透明，颜色值格式可以使用 rgba(r, g, b, a)，其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。

    3. 颜色值还可以为已知的颜色名称，例如 red、blue、green 等。

    总的说来，Canvas 中颜色值的格式与 CSS 中一致，因此颜色值没有特别需要注意的地方。

    图片附件

    <canvas id="canvas" width="600" height="500"></canvas>
<script 
    …

    阅读全文 »

    HTML5 Canvas 起步(2) – 路径

    作者: 日期: 5月 5, 2009 没有评论

    上一篇介绍了 HTML5 中 Canvas 的基本概念，这篇将要介绍一下 Canvas 中的基本图形。

    图形的基础 - 路径

    在 Canvas 中，所有基本图形都是以路径为基础的，也就是说，我们在调用 2dContext 的 lineTo、rect 等方法时，其实就是往已经的 context 路径集合中再添加一些路径点，在最后使用 fill 或 stroke 方法进行绘制时，都是依据这些路径点来进行填充或画线。

    在每次开始绘制路径前，都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用 context.closePath() 方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么 Context 会自动调用 closePath 方法将路径关闭。

    基本路径方法

    1. beginPath, closePath

    这两个方法在前面已经介绍过，分别用来通知 Context 开始一个新的路径和关闭当前的路径。

    在 Canvas 中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径前都要调用一次 beginPath 方法，否则画出来的效果难看不说，还会严重影响性能。

    在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次 …

    阅读全文 »