标签存档: JavaScript

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 …

阅读全文 »

推开窗户看世界 — 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 属性会导致缓存失效。…

阅读全文 »

使用 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();
};
}

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

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

    阅读全文 »

    YUI学习笔记（4）

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

    YUI学习笔记（4）

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。

    1. YAHOO.util.Subscriber (event.js)

    这 应该算是设计模式中的观察者模式了，Subscriber 订阅一个事件，在 Publisher 触发那个事件后，会逐个通知 Subscriber。

    对 于一般开发者来说，并不需要去关心 Subscriber 的实现，因为 Subscriber 主要是 CustomEvent 用来分发动作以及删 除 Subscriber 的。

    Subscriber 类只定义了 3 个属性：fn、obj 以及 override，3 个方 法：getScope、contains、toString，其中 fn 为订阅者的回调函数，obj 为要传递给回调函数的一个额外参 数，override 如果是布尔型的 true 值，那么表示使用 obj 属性为回调函数执行时的上下文，或者直接使用一个对象来作为回调函数执行的 上下文。

    Subscriber 的 3 …

    阅读全文 »

    YUI学习笔记（3）

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

    YUI学习笔记（3）

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.lang.later，YAHOO.lang.trim，YAHOO.lang.isXXX 以及 YAHOO.lang.hasOwnProperty。

    1. YAHOO.lang.later(yahoo/yahoo.js)

    later 方法用来延迟执行方法，是对 setInterval 和 setTimeout 的封装，并且可以传递参数到延迟执行的函数或者使用参数数组批量执行指定的函数。

    later 方法的签名为：

    later: function(when, o, fn, data, periodic)

    when 是用来指定在多长时间后执行指定的函数，以毫秒计算；

    o 是上下文对象，即在要执行的函数里使用 this 是会引用这个 o 对象；

    fn 就是要延迟执行的函数了，可以传递一个函数引用，也可以传递一个字符串，later 方法会在 o 对象中查找对应名称的属性来做为要执行的方法；

    data 就是传递给延迟执行的函数的参数了，可以为一个参数，或者是一个参数数组，那么如果我们要传递的参数本身就是一个数组的话，就要自己先把这个参数数组包装成一个数组；

    peridoic 参数是一个布尔值，用来表示延迟执行的函数是否需要周期执行而不是只执行一次。

    later 方法执行后会返回一个对象，包含了一个名 interval 的属性用来表示函数是以 setInterval 来执行的还是以 setTimeout 来执行的，以及一个方法 

    …

    阅读全文 »

    YUI学习笔记（2）

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

    YUI学习笔记（2）

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.lang.dump 与 YAHOO.lang.substitute。

    1. YAHOO.lang.dump（yahoo.js）

    dump 方法用来将一个对象转储为一个字符串，并且可以指定转储的深度。

    在 dump 过程中，对于基础类型例如 Number、String、Boolean，是直接返回字符串的，对 HTMLElement 对象是返回 HTMLElement 本身，也就是不做处理，对于函数 Function 则是返回字符串“f(){...}”。

    对于数组，dump 返回的格式就如我们定义时一样“[item1, item2 item3, ...]”，对于对象 Object，则是使用键值对的形式“key => value”，与 PHP 里面的数组定义方式相似。

    例如一个对象定义如下：

    var obj = {
    num: 1,
    str: "string",
    bool: true,
    date: new Date(),
    obj: {
    obj_num: 
    …

    阅读全文 »

    YUI学习笔记（1）

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

    YUI学习笔记（1）

    by xujiwei (http://www.xujiwei.com/)

    今天开始学习 YUI，加强一下对 JavaScript 的理解。

    1. 命名空间 YAHOO.namespace（yahoo.js）

    YUI 中使用了命名空间的概念，在 JS 中使用命名空间是为了模块以及代码组织清晰的需要，通过使用命名空间可以将功能相似或同一模块中的函数、变量等放到同一个命名空间下。

    其实 JS 中的命名空间就是一个嵌套的对象而已，即子命名空间相当于父命名空间中的一个属性，它本身也是一个对象，这样子命名空间也可以有自己的子命名空间。

    在 YUI 中，命名空间的格式与 C# 中类似，是以点号分隔的字符串，可以使用 YAHOO 对象的静态方法 namespace 来创建命名空间，需要注意的是，以 namespace 方法创建命名空间时，所有的对象都是附加在 YAHOO 这个对象上的，如果调用 namespace 方法创建一个“com.xujiwei.ajax”这样的命名空间，其中 ajax 的完整路径将是 YAHOO.com.xujiwei.ajax，而不是 com.xujiwei.ajax，也就是说 namespace 不会产生新的顶层对象，一切以 YAHOO 对象为基础。

    namespace 方法接受一个或多个字符串来生成命名空间，但是它只返回最后一个参数所代表的命名空间的最后一个域的对象，例如使用 namespace("com.xujiwei.js", "com.xujiwei.ajax") 时它的返回值是代表 js 

    …

    阅读全文 »