年度最佳 JavaScript 和 CSS 开源库推荐!

2018/02/22 · CSS,
JavaScript · 1
评论 ·
开源库

原文出处: Georgi
Georgiev   译文出处:开源中国   

Tutorialzine
每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了
2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。

图片 1

JavaScript
本地存储库 localForage

图片 2

localForage 是一个 JavaScript
库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似
localStorage 的 API,允许开发者存储多种类型数据。

CSS3 驱动的动画滚动库 AOS

图片 3

AOS(Animate on
scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3
驱动,效果类似于 WOWJS。

响应式邮件标识语言 MJML

图片 4

MJML
是一个标识语言,用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将
MJML 标识语言转成 HTML。

基于浏览器的代码编辑器 Monaco-Editor

图片 5

Monaco Editor 是微软开源的基于 VS Code
的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。

Web 虚拟现实框架 A-Frame

图片 6

A-Frame 是 Mozilla 开源的网页虚拟现实体验( WebVR
)框架,可用于桌面、iPhone(即将支持安卓)以及 Oculus Rift。A-Frame
可以让创建 WebVR 体验变得更简单。

Web 前端 UI 框架 Bootstrap 4

图片 7

Bootstrap 4 带来了许多变化和新特性,包括基于 flexbox
的网格系统,新的和重新定义的组件,以及更快的 ES6 JavaScript 插件。
另一个很酷的新功能是自动布局模式。
它允许开发人员忽略列的大小,可自动分配该行中的空间。

前端代码格式化工具 Prettier

图片 8

Prettier 是一个自发性的 JavaScript 格式化程序,受到来自 ES2017,JSX 和
Flow 的语言功能的高级支持的启发。 它删除所有原始格式,并确保所有输出的
JavaScript 符合一致的风格。

GPU 加速的 JavaScript GPU.js

图片 9

用于在 GPU 中运行浏览器 JavaScript 代码的库。 使用
GPU.js,您可以通过将专门编写的 JS 编译成可通过 WebGL 在 GPU
上运行的着色器语言来更快速地执行复杂的计算。 如果 WebGL
不可用,则函数将回退到常规 JavaScript。

HTTP 客户端 R2

图片 10

这是一个更轻量级的 HTTP 客户端解决方案,它建立在浏览器原生的 Fetch API
的基础之上,并为 Node.js 提供优化。

控制 headless Chrome 的 Node.js
API:Puppeteer

图片 11

Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js
库,通过 DevTools
协议提供了一个高级的
API 来控制 headless Chrome。它还可以配置为使用完整的(非
headless)Chrome。

跨浏览器的桌面通知插件 Push.js

图片 12

Push.js,是一款跨浏览器的Javascript桌面通知插件。这个通知API允许在当下流行的浏览器上使用,像Chrome,
Safari, Firefox,和IE
9+。可以推送一个通知到用户桌面。如果用户的浏览器不支持这个新的API,会回滚到使用旧的实现方式。

模块化拖放库 Draggable

图片 13

Draggable 是一个简单易用的模块化拖放库。 它提供了出色的拖放功能,快速的
DOM 重新排序,干净的 API 和可访问的标记。 Draggable
附带额外的模块,可以添加更多的功能,如排序,交换和其他实用程序。

小型 vanilla JS 项目 Card

图片 14

Card 是一个小型的 vanilla JS 项目(带有一个 jQuery
版本),让信用卡表格更加有趣。

模块绑定器 Webpack

图片 15

Webpack 是一个模块绑定器,主要目的是在浏览器上绑定 JavaScript 文件。

机器学习 JavaScript
库 DeepLearn.js

图片 16

DeepLearn.js 是 Google
推出的一个可用于机器智能并加速 WebGL 的开源 JavaScript 库,完全在浏览器中运行,不需要安装,不需要后端处理。

Node.js CMS 和 Web
应用程序平台 KeystoneJS

图片 17

KeystoneJS,以 Express 和 MongoDB 为基础搭建的 Node.js CMS 和 Web
应用程序平台。

在 Web 应用中创建
Poppers:Popper.js

图片 18

Popper.js 是用来在web应用中创建Poppers的库。

JavaScript GraphQL 客户端 Apollo
Client

图片 19

Apollo Client
是一个全功能的 GraphQL 客户端,用于
React 、Angular 的交互。允许你轻松通过 GraphQL 获取数据并构建 UI 组件。

跨浏览器的 css3
动画库 Animate.css

图片 20

Animate.css 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3
动画,兼容性好使用方便。

2 赞 6 收藏 1
评论

图片 21

JavaScript 开发人员需要知道的简写技巧

2017/10/25 · CSS · 1
评论

原文出处: Michael
Wanyoike   译文出处:葡萄城控件   

图片 22本文来源于多年的
JavaScript 编码技术经验,适合所有正在使用 JavaScript
编程的开发人员阅读。

本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。

文章将分成初级篇和高级篇两部分,分别进行介绍。

CSS 框架 Bulma 教程

2017/10/26 · CSS ·
Bulma

原文出处:
阮一峰   

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS
框架,但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它,即使完全不懂
CSS,也可以轻而易举做出美观的网页。

图片 23

我要感谢
100offer
对我提供赞助。100offer
是国内第一流的人力资源网站,本文结尾有他们的简介,最近想换工作的朋友可以看一下。

初级篇

一、简介

Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML
元素指定class,样式立刻生效。

JavaScript

<a class=”button is-primary is-large”>Login</a>

1
<a class="button is-primary is-large">Login</a>

上面代码中,a
元素只需加上几个class,就会出现一个主色调(is-primary)的大(is-large)按钮。

图片 24

Bulma
是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。

  • mobile:小于等于768px
  • tablet:大于等于769px
  • desktop:大于等于1024px
  • widescreen:大于等于1216px
  • fullhd:大于等于1408px

图片 25

它提供二十多种常用组件,比如表单
、表格、图标、面包屑、菜单、导航、Modal
窗口等等。简单的网站,可以不用写任何
CSS 代码。

1、三目运算符

下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。

const x = 20; let answer; if (x > 10) { answer = ‘greater than 10’; }
else { answer = ‘less than 10’; }

1
2
3
4
5
6
7
const x = 20;
let answer;
if (x > 10) {
    answer = ‘greater than 10’;
} else {
    answer = ‘less than 10’;
}

简写为:

const answer = x > 10 ? ‘greater than 10’ : ‘less than 10’;

1
const answer = x > 10 ? ‘greater than 10’ : ‘less than 10’;

二、基本用法

Bulma
的安装只需一步,把样式表插入网页即可。

JavaScript

<link rel=”stylesheet” href=”css/bulma.min.css”/>

1
<link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单,就是为 HTML 元素加上class

JavaScript

<a class=”button”>Button</a>

1
<a class="button">Button</a>

上面的代码为 a 元素加上button类,这个链接就会被渲染成按钮。

图片 26

Bulma
提供大量的修饰类,用来改变基类的样式。它们都是以is-has-开头。比如,要改变
Button 的大小,就可以使用下面的修饰类。

JavaScript

a class=”button is-small”>Small</a> <a
class=”button”>Normal</a> <a class=”button
is-medium”>Medium</a> <a class=”button
is-large”>Large</a>

1
2
3
4
a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

图片 27

Bulma 默认提供6种颜色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

图片 28

按钮状态的修饰类如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修饰类清单请看官方文档。

2、循环语句

当使用纯 JavaScript(不依赖外部库,如 jQuery 或
lodash)时,下面的简写会非常有用。

for (let i = 0; i< allImgs.length; i++)

1
for (let i = 0; i< allImgs.length; i++)

简写为:

for (let index of allImgs)

1
for (let index of allImgs)

下面是遍历数组 forEach 的简写示例:

function logArrayElements(element, index, array) { console.log(“a[” +
index + “] = ” + element); } [2, 5, 9].forEach(logArrayElements); //
logs: // a[0] = 2 // a[1] = 5 // a[2] = 9

1
2
3
4
5
6
7
8
function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

三、网格体系

Bulma 的网格体系基于 Flex
布局,写起来非常容易。最简单的用法就是使用columns指定容器,使用column指定项目。

图片 29

JavaScript

<div class=”columns”> <div class=”column”>First
column</div> <div class=”column”>Second column</div>
<div class=”column”>Third column</div> <div
class=”column”>Fourth</div> </div>

1
2
3
4
5
6
<div class="columns">
      <div class="column">First column</div>
      <div class="column">Second column</div>
      <div class="column">Third column</div>
      <div class="column">Fourth</div>
</div>

屏幕宽度大于 768px 时,所有项目平铺,平分容器的宽度;宽度小于等于 768px
时,所有项目变成垂直堆叠。

图片 30

以下的修饰类用来指定项目的宽度。

  • 四分之三:is-three-quarters
  • 四分之一: is-one-quarter
  • 三分之二:is-two-thirds
  • 三分之一:is-one-third
  • 二分之一:is-half
  • 五分之四:is-four-fifths
  • 五分之三:is-three-fifths
  • 五分之二:is-two-fifths
  • 五分之一:is-one-fifth

图片 31

此外,还有一些修饰类也非常有用。

  • is-narrow:网格的宽度由内容的宽度决定
  • is-centered:网格内容居中对齐
  • is-gapless:网格之间没有间距

Bulma 也支持12网格体系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

图片 32

如果要指定某个网格偏移,可以用is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

3、声明变量

在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时:

let x; let y; let z = 3;

1
2
3
let x;
let y;
let z = 3;

可以简写为:

let x, y, z=3;

1
let x, y, z=3;

四、响应式布局

前面说过,Bulma 有五个宽度断点,分别是
mobile(手机)、tablet(平板)、desktop(桌面)、widescreen(宽屏)、fullHD(高清)。

columns布局默认是在手机上垂直堆叠,其他宽度都是平铺。如果希望手机也保持平铺,可以加上is-mobile修饰类。

JavaScript

<div class=”columns is-mobile”> <div
class=”column”>1</div> <div class=”column”>2</div>
<div class=”column”>3</div> <div
class=”column”>4</div> </div>

1
2
3
4
5
6
    <div class="columns is-mobile">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望手机和平板是垂直堆叠,其他宽度平铺,可以使用is-desktop修饰类。

JavaScript

<div class=”columns is-desktop”> <div
class=”column”>1</div> <div class=”column”>2</div>
<div class=”column”>3</div> <div
class=”column”>4</div> </div>

1
2
3
4
5
6
    <div class="columns is-desktop">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望在不同设备,网格占据不同的宽度,可以像下面这样写。

JavaScript

<div class=” column is-half-mobile is-one-third-tablet
is-one-quarter-desktop “> </div

1
2
3
4
5
6
7
<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div

上面代码中,这个网格在手机上占据二分之一宽度,平板三分之一宽度,桌面四分之一宽度,宽屏和高清则是平铺。

Bulma 允许为不同设备指定不同的布局。

JavaScript

<div class=” column is-flex-mobile is-inline-tablet is-block-desktop
“> </div>

1
2
3
4
5
6
<div class="
      column
      is-flex-mobile
      is-inline-tablet
      is-block-desktop
    ">  </div>

上面代码中,手机是 flex 布局,平板是 inline 布局,其他宽度是 block
布局。

下面是隐藏某个项目的修饰类。

  • is-hidden-mobile:只在手机隐藏
  • is-hidden-tablet-only:只在平板隐藏
  • is-hidden-desktop-only :只在桌面隐藏
  • is-hidden-touch:手机和平板隐藏,其他宽度显示

完整的清单请看官方文档。

4、if 语句

在使用 if 进行基本判断时,可以省略赋值运算符。

if (likeJavaScript === true)

1
if (likeJavaScript === true)

简写为:

if (likeJavaScript)

1
if (likeJavaScript)

五、文字

Bulma 提供7个修饰指定文字大小。

  • is-size-1: 3rem
  • is-size-2: 2.5rem
  • is-size-3: 2rem
  • is-size-4: 1.5rem
  • is-size-5: 1.25rem
  • is-size-6: 1rem
  • is-size-7: 0.75rem

可以为不同设备指定不同的文字大小。

  • is-size-1-mobile:手机是 size-1
  • is-size-1-tablet:平板是 size-1
  • is-size-1-touch:手机和平板是 size-1
  • is-size-1-desktop:桌面、宽屏和高清是 size-1
  • is-size-1-widescreen:宽屏和高清是 size-1
  • is-size-1-fullhd:高清是 size-1

此外,还有字体颜色、对齐、轻重的修饰类。

5、十进制数

可以使用科学计数法来代替较大的数据,如可以将 10000000 简写为 1e7。

for (let i = 0; i<10000;i++){}

1
for (let i = 0; i<10000;i++){}

简写为:

for (let i = 0; i<1e7; i++) { }

1
for (let i = 0; i<1e7; i++) { }

六、定制

最后这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma
采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用
SASS。

首先,克隆或下载源码。

JavaScript

$ git clone

1
$ git clone https://github.com/jgthms/bulma.git

然后,安装依赖。

JavaScript

$ cd bulma $ npm install

1
2
$ cd bulma
$ npm install

接着,在源码的根目录里面,新建一个app.sass文件,定制的代码都写在这个文件。在它里面,先引入
Bulma
基础变量。如果需要的话,可以改掉。

JavaScript

@import “./sass/utilities/initial-variables” $blue: #72d0eb $pink:
#ffb3b3 $family-serif: “Merriweather”, “Georgia”, serif

1
2
3
4
5
@import "./sass/utilities/initial-variables"
 
$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面代码中,预设的bluepinkfamily-serif变量被改掉。

有一些 Bulma 变量是从基础变量衍生的,需要的话也可以改掉。

JavaScript

$primary: $pink

1
$primary: $pink

上面代码中,主色调改成了pink变量。

接着,在这个文件里面加载 Bulma
的入口脚本。

JavaScript

@import “./bulma”

1
@import "./bulma"

这一行的下面,你就可以写自己的样式了,比如为所有标题加一个下划线。

JavaScript

.title { text-decoration: underline; }

1
2
3
    .title {
      text-decoration: underline;
    }

最后,打开package.json,找到下面这一行。

JavaScript

“build-sass”: “node-sass –output-style expanded –source-map true
bulma.sass css/bulma.css

1
"build-sass": "node-sass –output-style expanded –source-map true bulma.sass css/bulma.css

把里面的bulma.sass改成app.sass

JavaScript

“build-sass”: “node-sass –output-style expanded –source-map true
app.sass css/bulma.css”,

1
    "build-sass": "node-sass –output-style expanded –source-map true app.sass css/bulma.css",

以后每次修改完样式,运行一下npm run build,就会生成自己的样式表css/bulma.css了。

(全文完)

1 赞 5 收藏
评论

图片 21

6、多行字符串

如果需要在代码中编写多行字符串,就像下面这样:

const lorem = ‘Lorem ipsum dolor sit amet, consectetur\n\t’ +
‘adipisicing elit, sed do eiusmod tempor incididunt\n\t’ + ‘ut labore
et dolore magna aliqua. Ut enim ad minim\n\t’ + ‘veniam, quis nostrud
exercitation ullamco laboris\n\t’ + ‘nisi ut aliquip ex ea commodo
consequat. Duis aute\n\t’ + ‘irure dolor in reprehenderit in voluptate
velit esse.\n\t’

1
2
3
4
5
6
const lorem = ‘Lorem ipsum dolor sit amet, consectetur\n\t’
    + ‘adipisicing elit, sed do eiusmod tempor incididunt\n\t’
    + ‘ut labore et dolore magna aliqua. Ut enim ad minim\n\t’
    + ‘veniam, quis nostrud exercitation ullamco laboris\n\t’
    + ‘nisi ut aliquip ex ea commodo consequat. Duis aute\n\t’
    + ‘irure dolor in reprehenderit in voluptate velit esse.\n\t’

但是还有一个更简单的方法,只使用引号:

const lorem = `Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse.`

1
2
3
4
5
6
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

发表评论

电子邮件地址不会被公开。 必填项已用*标注