js代码网站 js代码在线 收藏 0

可以用一行JS代码将PC网站移动化的“云适配”开源跨屏前端开发框架，将推出Amaze UI

我们之前报道过的“云适配”是一家可以用一行JS代码将PC网站移动化的技术公司。在他们用一行代码做适配的过程中，积累了一套跨屏的前端常用网页组件，而最近，他们想把这套组件开源出来，让前端开发者都可以免费使用。

云适配将这套组件命名为“Amaze UI”，简单来说他是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架，通过拆分、封装了一些常用的网页组件，比如轮播图框、文字框等等组件，让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中，而不需要自己在开发的过程中重写一遍。

云适配创始人 Ben 和我说，以往的网站开发是先有 PC 版，然后得去为 PC 版适配一个移动版网页，而现在大家则渐渐趋向采用更聪明的做法，即先设计好简单的移动端，然后通过自适应的方式把 PC 端顺带做出来。所以在这样的趋势下，Amaze UI 可以帮前端开发者节省很多开发的时间。

不过，作为一个商业公司，云适配将前端开发工具开源出来会影响其营收吗？Ben 说开源一部分是因为他自己对开源的信仰，希望国内的创业公司也能渐渐一起来做这样的事，另一方面来说开源也是很好的商业模式，可以集聚大量的开发者，使之其中一部分转向云适配 PaaS 的付费用户——主要是抓住其中有在云端托管网站、想使用图片压缩等其他增值服务的群体，很大一部分会是建站公司。

国内其他的一些开源框架有腾讯的 JX、网易的 NEJ 等，国外最类似的框架则是Bootstrap，以及 Foundation 和 Semantic UI，不过相比之下 Amaze UI 封装了更多的组件，也加入了本土化的元素，比如可以适配 UC 浏览器、QQ 浏览器等。

目前 Amaze UI 正在内测中，感兴趣的开发者可以进入内测申请。

[36氪原创文章，作者: 苑伶]

AD: Windows Phone 开发者交流沙龙 北京站启动 立即报名

Highlight.js – 前端的代码语法高亮库

千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。

Highlight.js

Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。

highlight.js语法高亮库

Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。

而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。

Highlight.js 在浏览器中可以简单的引用 CDN 来使用：

Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行

Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码

并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：

该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：

使用Highlight.js渲染C++代码

可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：

使用Highlight.js渲染Javascript代码

我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。

在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：

Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。

Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。

最好的JavaScript在线教程

在互联网发展的早期，JavaScript就已经成为支持网页内容交互体验的基础技术。随着时间推移，JavaScript业已升级成为互联网的核心技术。

长期以来，我都在学习JavaScript。学习JS一时爽，一直学习一直爽。

在学习过程中，接触很多学习资料，图书、视频等不一而足。

今天给大家介绍两个线上教程，都是广受好评的，相信你一定也看过。

1 Mozilla 开发者社区 JavaScript 教程

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

教程内容：

• 对于完全初学者
• JavaScript 第一步
• JavaScript 基本结构
• 介绍JavaScript 对象
• JavaScript 指南
• 中级内容
• 客户端 Web API
• 重新介绍 JavaScript（JS 教程）
• JavaScript 数据结构
• 如何使用比较操作符
• 闭包
• 高级内容
• 继承和原型链
• 严格模式
• JavaScript 类型数组
• 内存管理
• 并发模型以及事件循环

2 现代 JavaScript 教程

https://zh.javascript.info/

教程内容：

第 一 部分 JavaScript 编程语言

在这儿我们将从头开始学习 JavaScript，也会学习 OOP 等相关高级概念。

第 二 部分 浏览器：文档，事件，接口

学习如何管理浏览器页面：添加元素，操纵元素的大小和位置，动态创建接口并与访问者互动。

第 三 部分 其他文章

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构，你可以按你需要的顺序阅读文章。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com