每日思考（2020/03/06）

题目概览

• 对WebGL的理解
• 用过哪些css框架？说说它们的特点
• 写一个格式化金额的方法

题目解答

对WebGL的理解

• WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用

  // Get A WebGL context
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("experimental-webgl");
   
  // setup a GLSL program
  var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
  gl.useProgram(program);
   
  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
   
  // Create a buffer and put a single clipspace rectangle in
  // it (2 triangles)
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array([
  -1.0, -1.0,
   1.0, -1.0,
  -1.0,  1.0,
  -1.0,  1.0,
   1.0, -1.0,
   1.0,  1.0]),
  gl.STATIC_DRAW);
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
   
  // draw
  gl.drawArrays(gl.TRIANGLES, 0, 6);  
  

• 教程：MDN、webGL中文网

用过哪些css框架？说说它们的特点

• Foundation：是一个真正的专业框架，提供业务支持、培训和咨询。它还提供了许多资源来帮助你更快更轻松地学习和使用该框架

  • 创作者： ZURB
  • 发行： 2011
  • 说明： “世界上最先进的响应式前端框架”
  • 核心概念/原则： RWD，移动端优先，语义。
  • 框架大小： 197.5 KB
  • 预处理器： Sass
  • 响应式布局：是
  • 模块化：是
  • 启动模板/布局：是
  • 图标集： 基础图标字体
  • 额外/附加组件：是
  • 独特的组件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • 文档资源：良好，还有许多额外资源。
  • 自定制：基本的GUI定制程序，类似于Bootstrap定制工具。

• Semantic UI：是一个语义化设计的前端开源框架。它利用自然语言原理，从而使代码更加可读和可理解

  • 创作者： Jack Lukic
  • 发行： 2013
  • 说明： “基于自然语言原则的UI组件框架”。
  • 核心概念/原则：Semantic, tag ambivalence, responsive。
  • 框架大小： 806 KB
  • 预处理器：少
  • 响应式布局：是
  • 模块化：是
  • 启动模板/布局：是，并提供了一些基本的入门模板
  • 图标集： Font Awesome
  • 额外/附加组件：否
  • 独特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
  • 文档资源：非常好，Semantic提供了一个非常有组织的文档，另外还有一个单独的网站提供入门指南、自定义和创建主题。
  • 自定义：没有GUI定制器，只有手动定制。

• Bootstrap：是目前可用框架中无可争议的领导者。其人气日益增长，你可以放心的选择这个框架，而不必担心项目会失败，因为具有广泛使用基础的框架，不太可能被抛弃

  • 创作者： Mark Otto 和 Jacob Thornton.
  • 发行： 2011
  • 说明： “Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在网络上开发响应式、移动的Web项目。
  • 核心概念/原则： RWD和移动端优先。
  • 框架大小： 154 KB
  • 预处理器： Less和Sass
  • 响应式布局：是
  • 模块化：是
  • 启动模板/布局：是
  • 图标集： Glyphicons Halflings设置
  • 附加/附件：无捆绑，许多第三方插件可用。
  • 独特组件： Jumbotron
  • 文档资源：良好
  • 自定制：基本GUI定制器。但是你需要手动输入颜色值，因为没有颜色选择器可用。

• Pure：是一种轻量级的模块化框架，采用纯CSS编写，具有可根据需要一起使用或单独使用的组件。

  • 创作者：雅虎
  • 发行： 2013
  • 说明： “一套小而灵活的CSS模块，能够在每个Web项目中使用。”
  • 核心概念/原则： SMACSS，极简主义。
  • 框架大小： 16 KB
  • 预处理：无
  • 响应式布局：是
  • 模块化：是
  • 启动模板/布局：是
  • 图标集：无。可以改用Font Awesome。
  • 额外/附加组件：无
  • 独特组件：无
  • 文档资源：很好
  • 自定义：基本GUI皮肤生成器

• UIkit：是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎，但它提供了相同的功能和质量

  • 创造者： YOOtheme
  • 发行： 2013
  • 说明： “用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。
  • 核心概念/原则： RWD，移动端优先
  • 框架大小： 326.9 KB（如果包含uikit-icons.min.js与SVG图标相关的功能，则为384.4 KB ）
  • 预处理器：少，Sass
  • 响应式布局：是
  • 模块化：是
  • 启动模板/布局：是
  • 图标集： UIkit自带SVG图标系统和类库，其中包含越来越多的大纲图标。
  • 额外/附加组件：是
  • 独特的组件：Article, Flex, Cover, HTML Editor
  • 文件：好
  • 自定义：高级GUI定制程序仅在版本2（以前的版本）中可用

写一个格式化金额的方法

Intl.NumberFormat

var number = 123456.789;
new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number)
// expected output: "US$123,456.79"