【问题标题】:Codemirror autocomplete - suggestions sourcesCodemirror 自动完成 - 建议来源
【发布时间】:2013-07-25 05:52:49
【问题描述】:

我正在使用 codemirror 自动完成演示。它显示了一些 javascript 关键字,例如应用程序缓存、defaultStatus 和 framenet 以及更多建议。我希望它显示我的关键字作为建议。但我无法找到这些 javascript 关键字的来源。请帮我解决这个问题..

【问题讨论】:

    标签: javascript codemirror


    【解决方案1】:

    Javascript 模式很难理解。所以我采用了 python 模式,更改 python-hint.js 非常容易,我得到了我想要的输出。谢谢 Eliran..

    【讨论】:

    • 当然,简化流程的好主意,主动出击。
    【解决方案2】:

    查看javascript-hint.js,其中包含一些关键字,可以在源代码中看到。例如javascript 关键字(第 96 行):

    var javascriptKeywords = 
        ("break case catch continue debugger default delete do else false finally for function " +
         "if in instanceof new null return switch throw true try typeof var void while with")
        .split(" ");
    

    这应该让您开始编写自己的 *-hint.js 文件。

    【讨论】:

    • 其实这些只是其中的几个关键词,很多其他的关键词在这个文件中是没有的。
    • 好吧,我确实说过这应该让你开始......。这只是通过演示代码的问题。 使用源代码,卢克!
    【解决方案3】:

    当我遇到这个问题时,我实际上是在查看旧的 CodeMirror 自动完成问题,然后再提出自己的问题。

    Javascript 完成来自多个来源,您可以在源代码中看到这一点,正如 Eliran 指出的 javascript-hint.js

    这是此时的相关函数:

        function getCompletions(token, context, keywords, options) {
        var found = [], start = token.string, global = options && options.globalScope || window;
        function maybeAdd(str) {
          if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
        }
        function gatherCompletions(obj) {
          if (typeof obj == "string") forEach(stringProps, maybeAdd);
          else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
          else if (obj instanceof Function) forEach(funcProps, maybeAdd);
          for (var name in obj) maybeAdd(name);
        }
    
        if (context && context.length) {
          // If this is a property, see if it belongs to some object we can
          // find in the current environment.
          var obj = context.pop(), base;
          if (obj.type && obj.type.indexOf("variable") === 0) {
            if (options && options.additionalContext)
              base = options.additionalContext[obj.string];
            if (!options || options.useGlobalScope !== false)
              base = base || global[obj.string];
          } else if (obj.type == "string") {
            base = "";
          } else if (obj.type == "atom") {
            base = 1;
          } else if (obj.type == "function") {
            if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
                (typeof global.jQuery == 'function'))
              base = global.jQuery();
            else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
              base = global._();
          }
          while (base != null && context.length)
            base = base[context.pop().string];
          if (base != null) gatherCompletions(base);
        } else {
          // If not, just look in the global object and any local scope
          // (reading into JS mode internals to get at the local and global variables)
          for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
          for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
          if (!options || options.useGlobalScope !== false)
            gatherCompletions(global);
          forEach(keywords, maybeAdd);
        }
        return found;
      }
    

    在这里您可以看到一些来源。 keywords 是调用函数(未显示)提供的参数,在本例中是 Eliran 提到的拆分字符串:

     var javascriptKeywords = ("break case catch continue debugger default delete do else false finally for function " +
                  "if in instanceof new null return switch throw true try typeof var void while with").split(" ");
    

    那么这里的逻辑有一个分支:if (context && context.length) {

    在真实情况下,它使用调用者传递的上下文对象(在这种情况下是属性链)。它可以使用可选的 additionalContext 对象,或者如果 useGlobalScope 没有在选项中明确禁用,它可以使用 global 对象作为基础来启动查找(字符串、原子和函数类型有特殊的处理逻辑)。然后它使用一个while循环来解析上下文链并调用gatherCompletions。根据传递给gatherCompletions 的对象类型,它可以尝试添加拆分字符串提供的其他硬编码列表:

      var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
                         "toUpperCase toLowerCase split concat match replace search").split(" ");
      var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
                        "lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
      var funcProps = "prototype apply call bind".split(" ");
    

    或者通过迭代javascript对象本身的属性。

    最后在其他情况下token.state.localVarstoken.state.globalVars,如果没有明确禁用,global 对象将用作gatherCompletions 函数的对象。在这里,您还将注意到上面提到的关键字。请注意,global 要么在 options.globalScope 中提供,要么采用 window 的值。

    总结

    只是为了在此处快速显示所有来源:

    1. javascriptKeywords
    2. funcProps
    3. arrayProps
    4. 字符串属性
    5. 全局对象
    6. options.additionalContext
    7. token.state.localVars
    8. token.state.globalVars
    9. 上下文属性链

    【讨论】:

    • options 到底是什么?
    • 我不认为它们都有记录,但你可以看看here。在这种情况下,上面的代码中隐含了“additionalContext”:base = options.additionalContext[obj.string];。我不记得 obj.string 的值是什么,但你可以设置一个中断并检查它。
    • 就是这样,我无法检查它,因为整个函数中没有任何选项。我什至在 python-hint.js 和 show-hint.js 中都找不到这个词
    • 您必须手动指定选项。您应该将它们视为showHint 的参数(上一个链接中当前版本的第三个参数)。 manual 还提供了更多信息。许多可用的选项没有记录,因此您必须在代码中寻找隐含的值。
    猜你喜欢
    • 2012-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-31
    • 2011-06-08
    相关资源
    最近更新 更多