题目概览
- 对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);-
用过哪些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（以前的版本）中可用
写一个格式化金额的方法
var number = 123456.789;
new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number)
// expected output: "US$123,456.79"