Jade —— 源于 Node.js 的 HTML 模板引擎

2024-08-27 21:08
文章标签 模板 js 引擎 html frontend node 源于 jade

本文主要是介绍Jade —— 源于 Node.js 的 HTML 模板引擎，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。

试玩

你可以在网上试玩 Jade。

特性

  • 客户端支持
  • 代码高可读
  • 灵活的缩进
  • 块展开
  • Mixins
  • 静态包含
  • 属性改写
  • 安全，默认代码是转义的
  • 运行时和编译时上下文错误报告
  • 命令行下编译jade模板
  • HTML5 模式 (使用 !!! 5 文档类型)
  • 在内存中缓存(可选)
  • 合并动态和静态标签类
  • 可以通过 filters 修改树
  • 模板继承
  • 原生支持 Express JS
  • 通过 each 枚举对象、数组甚至是不能枚举的对象
  • 块注释
  • 没有前缀的标签
  • AST Filters
  • 过滤器

    • :stylus 必须已经安装 stylus
    • :less 必须已经安装 less.js
    • :markdown 必须已经安装 markdown-js 或者 node-discount
    • :cdata
    • :coffeescript 必须已经安装coffee-script
  • Emacs Mode
  • Vim Syntax
  • TextMate Bundle
  • Coda/SubEtha syntax Mode
  • Screencasts
  • html2jade 转换器

其它实现

jade有其他语言的实现，可以实现前后端渲染的统一：

  • php
  • scala
  • ruby
  • python
  • java

安装

npm install jade

浏览器支持

把 Jade 编译为一个可供浏览器使用的单文件，只需要简单的执行:

make jade.js

如果你已经安装了 uglifyjs (npm install uglify-js)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。

make jade.min.js

默认情况下，为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候，你可以通过传递一个选项 { compileDebug: false } 来去掉这个。
下面的模板

p Hello #{name}

会被翻译成下面的函数：

function anonymous(locals, attrs, escape, rethrow) {var buf = [];with (locals || {}) {var interp;buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');}return buf.join("");
}

通过使用 Jade 的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 runtime.js 里的工具函数, 它们会放在 jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape.

function anonymous(locals, attrs, escape, rethrow) {var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;var buf = [];with (locals || {}) {var interp;buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');}return buf.join("");
}

API

var jade = require('jade');// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);

选项

  • self 使用 self 命名空间来持有本地变量. (默认为 false)
  • locals 本地变量对象
  • filename 异常发生时使用，includes 时必需
  • debug 输出 token 和翻译后的函数体
  • compiler 替换掉 jade 默认的编译器
  • compileDebug false的时候调试的结构不会被输出
  • pretty 为输出加上了漂亮的空格缩进 (默认为 false)

标签

标签就是一个简单的单词:

html

它会被转换为 <html></html>

标签也是可以有 id 的:

div#container

它会被转换为 <div id="Container"></div>

怎么加 class 呢？

div.user-details

转换为 <div class="user-details"></div>

多个 class 和 id? 也是可以搞定的:

div#foo.bar.baz

转换为 <div id="foo" class="bar baz"></div>

不停的 div div div 很讨厌啊 , 可以这样:

#foo
.bar

这个算是我们的语法糖，它已经被很好的支持了，上面的会输出：

<div id="foo"></div><div class="bar"></div>

标签文本

只需要简单的把内容放在标签之后：

p wahoo!

它会被渲染为 <p>wahoo!</p>.

很帅吧，但是大段的文本怎么办呢：

p| foo bar baz| rawr rawr| super cool| go jade go

渲染为 <p>foo bar baz rawr.....</p>

怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把 { name: 'tj', email: 'tj@vision-media.ca' } 传给编译函数，下面是模板上的写法:

#user #{name} &lt;#{email}&gt;

它会被渲染为 <div id="user">tj &lt;tj@vision-media.ca&gt;</div>

当就是要输出 #{} 的时候怎么办? 转义一下!

p \#{something}

它会输出 <p>#{something}</p>

同样可以使用非转义的变量 !{html}, 下面的模板将直接输出一个 <script> 标签:

- var html = "<script></script>"
| !{html}

内联标签同样可以使用文本块来包含文本：

label| Username:input(name='user[name]')

或者直接使用标签文本:

label Username:input(name='user[name]')

只 包含文本的标签，比如 <script>, <style>, 和 <textarea> 不需要前缀 | 字符, 比如:

htmlheadtitle Examplescriptif (foo) {bar();} else {baz();}

这里还有一种选择，可以使用 . 来开始一段文本块，比如：

p.foo asdfasdfasdfasdfafasdfasd.

会被渲染为:

<p>foo asdf
asdfasdfasdfafasdf
asd
.
</p>

这和带一个空格的 . 是不一样的, 带空格的会被 Jade 的解析器忽略，当作一个普通的文字:

p .

渲染为:

<p>.</p>

需要注意的是文本块需要两次转义。比如想要输出下面的文本：

</p>foo\bar</p>

使用:

p.foo\\bar

注释

单行注释和 JavaScript 里是一样的，通过 // 来开始，并且必须单独一行：

// just some paragraphs
p foo
p bar

渲染为：

<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>

Jade 同样支持不输出的注释，加一个短横线就行了：

//- will not output within markup
p foo
p bar

渲染为：

<p>foo</p>
<p>bar</p>

块注释

块注释也是支持的：

body//#contenth1 Example

渲染为：

<body><!--<div id="content"><h1>Example</h1></div>-->
</body>

Jade 同样很好的支持了条件注释：

body//if IEa(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

渲染为：

<body><!--[if IE]><a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a><![endif]-->
</body>

内联

Jade 支持以自然的方式定义标签嵌套:

ulli.firsta(href='#') foolia(href='#') barli.lasta(href='#') baz

块展开

块展开可以帮助你在一行内创建嵌套的标签，下面的例子和上面的是一样的：

ulli.first: a(href='#') fooli: a(href='#') barli.last: a(href='#') baz

Case

case 表达式按下面这样的形式写:

htmlbodyfriends = 10case friendswhen 0p you have no friendswhen 1p you have a frienddefaultp you have #{friends} friends

块展开在这里也可以使用:

friends = 5htmlbodycase friendswhen 0: p you have no friendswhen 1: p you have a frienddefault: p you have #{friends} friends

属性

Jade 现在支持使用 ( 和 ) 作为属性分隔符

a(href='/login', title='View login page') Login

当一个值是 undefined 或者 null 属性 不 会被加上,
所以呢，它不会编译出 'something="null"'.

div(something=null)

Boolean 属性也是支持的:

input(type="checkbox", checked)

使用代码的 Boolean 属性只有当属性为 true 时才会输出：

input(type="checkbox", checked=someValue)

多行同样也是可用的：

input(type='checkbox',name='agreement',checked)

多行的时候可以不加逗号：

input(type='checkbox'name='agreement'checked)

加点空格，格式好看一点？同样支持

input(type='checkbox'name='agreement'checked)

冒号也是支持的:

rss(xmlns:atom="atom")

假如我有一个 user 对象 { id: 12, name: 'tobi' }
我们希望创建一个指向 /user/12 的链接 href, 我们可以使用普通的 JavaScript 字符串连接，如下:

a(href='/user/' + user.id)= user.name

或者我们使用 Jade 的修改方式, 这个我想很多使用 Ruby 或者 CoffeeScript 的人会看起来像普通的 JS..:

a(href='/user/#{user.id}')= user.name

class 属性是一个特殊的属性，你可以直接传递一个数组，比如 bodyClasses = ['user', 'authenticated'] :

body(class=bodyClasses)

HTML

内联的 HTML 是可以的，我们可以使用管道定义一段文本 :

htmlbody| <h1>Title</h1>| <p>foo bar baz</p>

或者我们可以使用 . 来告诉 Jade 我们需要一段文本：

htmlbody.<h1>Title</h1><p>foo bar baz</p>

上面的两个例子都会渲染成相同的结果：

<html><body><h1>Title</h1>
<p>foo bar baz</p>
</body></html>

这条规则适应于在 Jade 里的任何文本：

htmlbodyh1 User <em>#{name}</em>

Doctypes

添加文档类型只需要简单的使用 !!!, 或者 doctype 跟上下面的可选项:

!!!

会渲染出 transitional 文档类型, 或者:

!!! 5

或

!!! html

或

doctype html

Doctype 是大小写不敏感的, 所以下面两个是一样的:

doctype Basic
doctype basic

当然也是可以直接传递一段文档类型的文本：

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

渲染后:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

会输出 HTML5 文档类型. 下面的默认的文档类型，可以很简单的扩展：

var doctypes = exports.doctypes = {'5': '<!DOCTYPE html>','xml': '<?xml version="1.0" encoding="utf-8" ?>','default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">','transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">','strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">','frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">','1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">','basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">','mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

通过下面的代码可以很简单的改变默认的文档类型：

    jade.doctypes.default = 'whatever you want';

过滤器

过滤器前缀 :, 比如 :markdown 会把下面块里的文本交给专门的函数进行处理。查看顶部 特性 里有哪些可用的过滤器。

body:markdownWoah! jade _and_ markdown, very **cool**we can even link to [stuff](http://google.com)

渲染为:

<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://google.com">stuff</a></p></body>

代码

Jade 目前支持三种类型的可执行代码。第一种是前缀 -， 这是不会被输出的：

- var foo = 'bar';

这可以用在条件语句或者循环中：

- for (var key in obj)p= obj[key]

由于 Jade 的缓存技术，下面的代码也是可以的：

- if (foo)ulli yayli fooli worked
- elsep oh no! didnt work

哈哈，甚至是很长的循环也是可以的：

- if (items.length)ul- items.forEach(function(item){li= item- })

所以你想要的！

下一步我们要 转义 输出的代码，比如我们返回一个值，只要前缀一个 =：

- var foo = 'bar'
= foo
h1= foo

它会渲染为 bar<h1>bar</h1>. 为了安全起见，使用 = 输出的代码默认是转义的,如果想直接输出不转义的值可以使用!=：

p!= aVarContainingMoreHTML

Jade 同样是设计师友好的，它可以使 JavaScript 更直接更富表现力。比如下面的赋值语句是相等的，同时表达式还是通常的 JavaScript：

- var foo = 'foo ' + 'bar'
foo = 'foo ' + 'bar'

Jade 会把 if, else if, else, until, while, unless 同别的优先对待, 但是你得记住它们还是普通的 JavaScript：

if foo == 'bar'ulli yayli fooli worked
elsep oh no! didnt work

循环

尽管已经支持 JavaScript 原生代码，Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是each, 这种形式：

each VAL[, KEY] in OBJ

一个遍历数组的例子 ：

- var items = ["one", "two", "three"]
each item in itemsli= item

渲染为:

<li>one</li>
<li>two</li>
<li>three</li>

遍历一个数组同时带上索引：

items = ["one", "two", "three"]
each item, i in itemsli #{item}: #{i}

渲染为:

<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>

遍历一个数组的键值：

obj = { foo: 'bar' }
each val, key in objli #{key}: #{val}

将会渲染为：<li>foo: bar</li>

Jade 在内部会把这些语句转换成原生的 JavaScript 语句，就像使用 users.forEach(function(user){, 词法作用域和嵌套会像在普通的 JavaScript 中一样：

each user in userseach role in user.rolesli= role

如果你喜欢，也可以使用 for ：

for user in usersfor role in user.rolesli= role

条件语句

Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号，这样会看上去对设计师更友好一点，
同时要在心里记住这个表达式渲染出的是 常规 JavaScript：

for user in usersif user.role == 'admin'p #{user.name} is an adminelsep= user.name

和下面的使用了常规 JavaScript 的代码是相等的：

for user in users- if (user.role == 'admin')p #{user.name} is an admin- elsep= user.name

Jade 同时支持 unless, 这和 if (!(expr)) 是等价的：

for user in usersunless user.isAnonymousp| Click to viewa(href='/users/' + user.id)= user.name

模板继承

Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。

Jade 块如果没有内容，Jade 会添加默认内容，下面的代码默认会输出 block scripts, block content, 和 block foot.

htmlheadh1 My Site - #{title}block scriptsscript(src='/jquery.js')bodyblock contentblock foot#footerp some footer content

现在我们来继承这个布局，简单创建一个新文件，像下面那样直接使用 extends，给定路径（可以选择带 .jade 扩展名或者不带）. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot 块 没有 定义，所以它还会输出父级的 "some footer content"。

extends extend-layoutblock scriptsscript(src='/jquery.js')script(src='/pets.js')block contenth1= titleeach pet in petsinclude pet

同样可以在一个子块里添加块，就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary，或者子模板直接实现 content。

extends regular-layoutblock content.sidebarblock sidebarp nothing.primaryblock primaryp nothing

前置、追加代码块

Jade允许你 替换 （默认）、 前置 和 追加 blocks. 比如，假设你希望在 所有 页面的头部都加上默认的脚本，你可以这么做：

htmlheadblock headscript(src='/vendor/jquery.js')script(src='/vendor/caustic.js')bodyblock content

现在假设你有一个Javascript游戏的页面，你希望在默认的脚本之外添加一些游戏相关的脚本，你可以直接append上代码块：

extends layoutblock append headscript(src='/vendor/three.js')script(src='/game.js')

使用 block append 或 block prepend 时 block 是可选的:

extends layoutappend headscript(src='/vendor/three.js')script(src='/game.js')

包含

Includes 允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹：

./layout.jade
./includes/./head.jade./tail.jade

下面是 layout.jade 的内容:

htmlinclude includes/head  bodyh1 My Sitep Welcome to my super amazing site.include includes/foot

这两个包含 includes/head 和 includes/foot 都会读取相对于给 layout.jade 参数filename 的路径的文件, 这是一个绝对路径，不用担心Express帮你搞定这些了。Include 会解析这些文件，并且插入到已经生成的语法树中，然后渲染为你期待的内容：

<html><head><title>My Site</title><script src="/javascripts/jquery.js"></script><script src="/javascripts/app.js"></script></head><body><h1>My Site</h1><p>Welcome to my super lame site.</p><div id="footer"><p>Copyright>(c) foobar</p></div></body>
</html>

前面已经提到，include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后，Jade 不会把这个文件当作一个 Jade 源代码，并且会把它当作一个普通文本包含进来：

htmlhead//- css and js have simple filters that wrap them in<style> and <script> tags, respectivelyinclude stylesheet.cssinclude script.jsbody//- "markdown" files will use the "markdown" filterto convert Markdown to HTMLinclude introduction.markdown//- html files have no filter and are included verbatiminclude content.html

Include 也可以接受块内容，给定的块将会附加到包含文件 最后 的块里。 举个例子，head.jade 包含下面的内容：

headscript(src='/jquery.js')

我们可以像下面给include head添加内容, 这里是添加两个脚本.

htmlinclude headscript(src='/foo.js')script(src='/bar.js')bodyh1 test

在被包含的模板中，你也可以使用yield语句。yield语句允许你明确地标明include的代码块的放置位置。比如，假设你希望把代码块放在scripts之前，而不是附加在scripts之后：

headyieldscript(src='/jquery.js')script(src='/jquery.ui.js')

由于被包含的Jade会按字面解析并合并到AST中，词法范围的变量的效果和直接写在同一个文件中的相同。这就意味着include可以用作partial的替代，例如，假设我们有一个引用了user变量的user.jade`文件：

h1= user.name
p= user.occupation

接着，当我们迭代users的时候，只需简单地加上include user。因为在循环中user变量已经被定义了，被包含的模板可以访问它。

users = [{ name: 'Tobi', occupation: 'Ferret' }]each user in users.userinclude user

以上代码会生成：

<div class="user"><h1>Tobi</h1><p>Ferret</p>
</div>

user.jade引用了user变量，如果我们希望使用一个不同的变量user，那么我们可以直接定义一个新变量user = person，如下所示：

each person in users.useruser = personinclude user

Mixins

Mixins 在编译的模板里会被 Jade 转换为普通的 JavaScript 函数。 Mixins 可以带参数，但不是必需的：

mixin listulli fooli barli baz

使用不带参数的 mixin 看上去非常简单，在一个块外：

h2 Groceries
mixin list

Mixins 也可以带一个或者多个参数，参数就是普通的 JavaScript 表达式，比如下面的例子：

mixin pets(pets)ul.pets- each pet in petsli= petmixin profile(user).userh2= user.namemixin pets(user.pets)

会输出像下面的 HTML:

<div class="user"><h2>tj</h2><ul class="pets"><li>tobi</li><li>loki</li><li>jane</li><li>manny</li></ul>
</div>

产生输出

假设我们有下面的 Jade 源码：

- var title = 'yay'
h1.title #{title}
p Just an example

当 compileDebug 选项不是 false, Jade 会编译时会把函数里加上 __.lineno = n;, 这个参数会在编译出错时传递给rethrow(), 而这个函数会在 Jade 初始输出时给出一个有用的错误信息。

function anonymous(locals) {var __ = { lineno: 1, input: "- var title = 'yay'\nh1.title #{title}\np Just an example", filename: "testing/test.js" };var rethrow = jade.rethrow;try {var attrs = jade.attrs, escape = jade.escape;var buf = [];with (locals || {}) {var interp;__.lineno = 1;var title = 'yay'__.lineno = 2;buf.push('<h1');buf.push(attrs({ "class": ('title') }));buf.push('>');buf.push('' + escape((interp = title) == null ? '' : interp) + '');buf.push('</h1>');__.lineno = 3;buf.push('<p>');buf.push('Just an example');buf.push('</p>');}return buf.join("");} catch (err) {rethrow(err, __.input, __.filename, __.lineno);}
}

当 compileDebug 参数是 false, 这个参数会被去掉，这样对于轻量级的浏览器端模板是非常有用的。结合 Jade 的参数和当前源码库里的 ./runtime.js 文件，你可以通过 toString() 来编译模板而不需要在浏览器端运行整个 Jade 库，这样可以提高性能，也可以减少载入的 JavaScript 数量。

function anonymous(locals) {var attrs = jade.attrs, escape = jade.escape;var buf = [];with (locals || {}) {var interp;var title = 'yay'buf.push('<h1');buf.push(attrs({ "class": ('title') }));buf.push('>');buf.push('' + escape((interp = title) == null ? '' : interp) + '');buf.push('</h1>');buf.push('<p>');buf.push('Just an example');buf.push('</p>');}return buf.join("");
}

Makefile 的一个例子

通过执行 make， 下面的 Makefile 例子可以把 pages/*.jade 编译为 pages/*.html 。

JADE = $(shell find pages/*.jade)
HTML = $(JADE:.jade=.html)all: $(HTML)%.html: %.jadejade < $< --path $< > $@clean:rm -f $(HTML).PHONY: clean

这个可以和 watch(1) 命令起来产生像下面的行为：

$ watch make

命令行的 Jade


使用: jade [options] [dir|file ...]选项:-h, --help         输出帮助信息-v, --version      输出版本号-o, --out <dir>    输出编译后的 HTML 到 <dir>-O, --obj <str>    JavaScript 选项-p, --path <path>  在处理 stdio 时，查找包含文件时的查找路径-P, --pretty       格式化 HTML 输出-c, --client       编译浏览器端可用的 runtime.js-D, --no-debug     关闭编译的调试选项(函数会更小)-w, --watch        监视文件改变自动刷新编译结果Examples:# 编译整个目录$ jade templates# 生成 {foo,bar}.html$ jade {foo,bar}.jade# 在标准IO下使用jade $ jade < my.jade > my.html# 在标准IO下使用jade, 同时指定用于查找包含的文件$ jade < my.jade -p my.jade > my.html# 在标准IO下使用jade $ echo "h1 Jade!" | jade# foo, bar 目录渲染到 /tmp$ jade foo bar --out /tmp

注意: 从 v0.31.0 的 -o 选项已经指向 --out, -O 相应做了交换

From: http://segmentfault.com/a/1190000000357534

这篇关于Jade —— 源于 Node.js 的 HTML 模板引擎的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1112781。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
poj3468(线段树成段更新模板题)

poj3468(线段树成段更新模板题)

题意：包括两个操作：1、将[a.b]上的数字加上v；2、查询区间[a,b]上的和 下面的介绍是下解题思路： 首先介绍  lazy－tag思想：用一个变量记录每一个线段树节点的变化值，当这部分线段的一致性被破坏我们就将这个变化值传递给子区间，大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作，那么就从根节点[1,n]开始调用update函数进行操作，如果刚好执行到一个子节点，
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
poj 1258 Agri-Net（最小生成树模板代码）

poj 1258 Agri-Net（最小生成树模板代码）

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码：效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n
阅读更多...
uva 1342 欧拉定理（计算几何模板）

uva 1342 欧拉定理（计算几何模板）

题意： 给几个点，把这几个点用直线连起来，求这些直线把平面分成了几个。 解析： 欧拉定理： 顶点数 + 面数 - 边数= 2。 代码： #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2