算法刷题
大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
写在最后
最后,对所以做Java的朋友提几点建议,也是我的个人心得:
-
疯狂编程
-
学习效果可视化
-
写博客
-
阅读优秀代码
-
心态调整
<template>
<div style="width: 100%; height: 98%">
<div style="width: 100%; margin-bottom: 10px" class="t\_right">
<el-button type="primary" @click="back">Back</el-button>
</div>
<codemirror
ref="mycode"
:value="curCode"
:options="cmOptions"
class="code"
style="height: 100%"
@changes="changes"
></codemirror>
</div>
</template>
<script>
import ProcessorService from '@/service/processorService';
import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/ambiance.css'; // 这里引入的是主题样式,根据设置的theme的主题引入,一定要引入!!
require('codemirror/mode/javascript/javascript'); // 这里引入模式的js,根据设置的mode引入,一定要引入!!
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
export default {
components: { codemirror },
data() {
return {
curCode: '',
cmOptions: {
value: '',
mode: 'text/javascript',
theme: 'ambiance',
readOnly: true
}
};
},
methods: {
back() {
this.$router.go(-1);
}
},
mounted() {
const { path } = this.$route.query;
console.log('path---', path);
ProcessorService.loadScript(path).then(res => {
console.log('script---', res);
this.curCode = res;
});
}
};
</script>
三、options 配置项说明
注:vue-codemirror
中options
配置项和codemirror
一样!
value: string|CodeMirror.Doc
编辑器的起始值。可以是字符串,也可以是文档对象。mode: string|object
使用的模式。如果没有给出,默认为加载第一个模式。它可以是一个字符串,可以简单地命名模式,也可以是与模式关联的MIME
类型。或者,它可以是包含模式配置选项的对象,具有name
命名模式的属性(例如{name: “javascript”, json: true}
)。每种模式的演示页面都包含有关模式支持的配置参数的信息。可以通过检查CodeMirror.modes
和CodeMirror.mimeModes
对象来询问CodeMirror
已定义了哪些模式和MIME
类型。第一个将模式名称映射到它们的构造函数,第二个将MIME
类型映射到模式规范。lineSeparator: string|null
显式设置编辑器的行分隔符。默认情况下(值null
),文档将在CRLF
以及单独的CR
和LF
上拆分,并且单个LF
将在所有输出中用作行分隔符(例如getValue
)。给定特定字符串时,只会在该字符串上拆分行,默认情况下,输出将使用相同的分隔符。theme: string
编辑器设计样式的主题。必须确保.cm-s-[name]
已加载定义相应样式的CSS
文件(请参阅theme
分发中的目录)。默认值为"default
",包含的颜色codemirror.css
。它可以使用多个主题化,例如"foo bar
"将同时分配cm-s-foo
和cm-s-bar
类编辑器。indentUnit: integer
一个块(编辑语言中的含义)应缩进多少个空格。默认值为2
。smartIndent: boolean
是否使用模式提供的上下文相关缩进(或者只是缩进与之前的行相同)。默认为true
。tabSize: integer
制表符的宽度。默认为4
。indentWithTabs: boolean
在缩进时,是否tabSize
应该用N
个制表符替换前N *
个空格。默认值为false
。electricChars: boolean
配置编辑器在键入可能更改其正确缩进的字符时,是否应重新缩进当前行(仅在模式支持缩进时才有效)。默认为true
。specialChars: RegExp
用于确定哪些字符应由特殊占位符替换的正则表达式。非常适用于非打印特殊字符。默认是/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/
。specialCharPlaceholder: function(char) → Element
给定由specialChars
选项标识的特殊字符的函数,生成用于表示字符的DOM
节点。默认情况下,会显示一个红点(•
),并带有标题工具提示以指示字符代码。direction: “ltr” | "rtl"
翻转整体布局并选择基本段落方向为从左到右或从右到左。默认为“ltr
”。CodeMirror
将Unicode
双向算法应用于每一行,但不自动检测基本方向 - 它设置为所有行的编辑器方向。当基本方向与用户意图不匹配时,生成的顺序有时会出错(例如,前导和尾随标点跳转到行的错误一侧)。因此,允许用户切换此选项对多语言输入很有帮助。rtlMoveVisually: boolean
确定通过从右到左(阿拉伯语,希伯来语)文本的水平光标移动是否是可视的(按向左箭头向左移动光标)或逻辑(按向左箭头移动到字符串中的下一个较低索引,这在视觉上是正确的从右到左的文字)。默认设置false
在Windows
上,true
在其他平台上。keyMap: string
配置要使用的键映射。默认值是"default
",这是唯一定义的键映射codemirror.js
。key map
目录中可以找到额外的键映射。有关详细信息,请参阅关键映射部分。extraKeys: object
可用于为编辑器指定额外的键绑定,以及由其定义的绑定keyMap
。应为null
或有效的键映射值。configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object
允许您配置鼠标选择和拖动的行为。按下鼠标左键时调用该函数。返回的对象可能具有以下属性:unit: “char” | “word” | “line” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos}
选择的单位。对于自定义单元,可以是内置单元之一,也可以是一个位置并返回其范围的函数。默认设置是返回"word
“双击,”line
“三次点击,“rectangle
”alt-clicks
(或Chrome
操作系统,元移位点击)等"single
” 。extend: bool
是否扩展现有选择范围或开始新选择范围。默认情况下,单击班次时会启用此功能。addNew: bool
启用后,这会为现有选择添加新范围,而不是替换它。默认行为是在Mac OS
上为命令单击启用此功能,并在其他平台上按住Control
键单击。moveOnDrag: bool
当鼠标甚至拖动编辑器内部的内容时,它控制是复制(false
)还是移动(true
)。默认情况下,通过在Mac OS
上单击鼠标右键并在其他位置按住Ctrl
键单击来启用此功能。lineWrapping: boolean
CodeMirror
是否应滚动或换行以排长行。默认为false
(滚动)。lineNumbers: boolean
是否在编辑器左侧显示行号。firstLineNumber: integer
在哪个数字开始计数行。默认值为1。lineNumberFormatter: function(line: integer) → string
用于格式化行号的函数。该函数传递给行号,并应返回将在装订线中显示的字符串。gutters: array < string>
可用于添加额外的排水沟(超出或代替行号排水沟)。应该是一个CSS
类名称数组,每个类名称定义一个width
(和可选的背景),并将用于绘制排水沟的背景。可以包括CodeMirror-linenumbers
类,以便明确设置行号装订线的位置(它将默认为所有其他装订线的右侧)。这些类名是传递给的键setGutterMarker
。fixedGutter: boolean
确定装订线是否水平滚动内容(false
)或在水平滚动期间是否保持固定(true
,默认值)。scrollbarStyle: string
选择滚动条实现。默认为"native
",显示本机滚动条。核心库还提供了"null
"完全隐藏滚动条的样式。插件可以实现其他滚动条模型。coverGutterNextToScrollbar: boolean
当fixedGutter
打开时,并且存在水平滚动条,默认情况下,此滚动条左侧将显示装订线。如果此选项设置为true
,则它将由具有类的元素覆盖CodeMirror-gutter-filler
。inputStyle: string
选择CodeMirror
处理输入和焦点的方式。核心库定义"textarea
" 和"contenteditable
“输入模式。在移动浏览器上,默认为”contenteditable
"。在桌面浏览器上,默认为"textarea
"。在"contenteditable
"模型中支持IME
和屏幕阅读器更好。目的是使其成为未来现代桌面浏览器的默认设置。readOnly: boolean|string
这会禁止用户编辑编辑器内容。如果"nocursor
"给出特殊值(而不是简单true
),则不允许对编辑器进行聚焦。showCursorWhenSelecting: boolean
选择是否处于活动状态时是否应绘制光标。默认为false
。lineWiseCopyCut: boolean
启用时(默认情况下),在没有选择时执行复制或剪切将复制或剪切其上有游标的整行。pasteLinesPerSelection: boolean
当从外部源(而不是编辑器本身)粘贴某些内容时,如果行数与选择的数量相匹配,则CodeMirror
将默认为每个选择插入一行。可以将其设置false
为禁用该行为。selectionsMayTouch: boolean
确定多个选择是在触摸时(默认值)还是仅在它们重叠时(true
)连接。undoDepth: integer
编辑器存储的最大撤消级别数。请注意,这包括选择更改事件。默认为200
。historyEventDelay: integer
键入或删除时将导致新历史事件开始的不活动时间(以毫秒为单位)。默认为1250
。tabindex: integer
要分配给编辑器的选项卡索引。如果没有给出,则不会分配选项卡索引。autofocus: boolean
文末
js前端的重头戏,值得花大部分时间学习。
推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。
面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。
这是288页的前端面试题