golang的html模板中使用vue.js_前端招聘中常见岗位职责描述及回答简述

1.页面在移动端及其它主流浏览器上保持良好的兼容性

Zepto 是一个轻量级的 JS 库，从当初 2~5k 大小到正式发布，仍保持不到 10k 的体积，能减少下载和与运行时间；兼容大多数移动浏览器和主流桌面现代浏览器，支持 Detect 和

Touch 模块实现浏览器检测和触屏事件，对 PhoneGap、Firefox OS 等浏览器环境的 WebApps 支持更加友好。Zepto 借鉴了 jQuery 的语法并实现了 jQuery 的大部分功能，减少学习成本，

会 jQuery 就知道怎么用 Zepto。

2.css3动画

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

把它绑定到一个选择器，否则动画不会有任何效果。animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、

animation-direction；

3.浏览器的兼容性问题

(1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同；

(2)浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；解决方案：在这个div里面加上display:inline;

(3)浏览器兼容问题五：图片默认有间距；解决方案：使用float属性为img布局

(4)浏览器兼容问题六：标签最低高度设置min-height不兼容；解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !

important; height:200px; overflow:visible;}

(5)浏览器兼容问题七：透明度的兼容CSS设置；IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。

4.HTML5

(1)新标签：header、nav、progress、section、source、embed、video;

(2)新的控件：email、url、number、range、date、search、color；

(3)多媒体音视频；

(4)拖拽：首先，为了使元素可拖动，把 draggable 属性设置为 true

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式

进行放置 - ondrop

(5)画布：canvas 元素使用 JavaScript 在网页上绘制图像

创建 Canvas 元素

JavaScript 使用 id 来寻找 canvas 元素

然后，创建 context 对象

线条、圆形、渐变、图像

(6)svg：可伸缩矢量图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失，可伸缩的，

把 SVG 直接嵌入 HTML 页面；

(7)地理定位： Geolocation(地理定位)用于定位用户的位置。

navigator.geolocation支持性检测；

使用 getCurrentPosition() 方法来获得用户的位置，getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置，clearWatch() - 停止 watchPosition() 方法

(8)Web存储：在客户端存储数据的新方法

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

(9)应用缓存：创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本；

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性，请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web

服务器上进行配置

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

(10)web workers是运行在后台的 JavaScript，不会影响页面的性能；

在创建 web worker 之前，请检测用户的浏览器是否支持它

创建 web worker 文件

创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码

向 web worker 添加一个 "onmessage" 事件监听器，event.data 中存有来自 event.data 的数据

终止 Web Worker，terminate() 方法

8.css3

(1)边框：border-radius、box-shadow、border-image

(2)背景：background-size、background-origin

(3)文字效果：text-shadow、word-wrap允许对长的不可分割的单词进行分割并换行到下一行；

(4)字体：@font-face；

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */

}

(5)转换：对元素进行移动、缩放、转动、拉长或拉伸；translate()、rotate()、scale()、skew()

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg); /* Opera */

-moz-transform: rotate(30deg); /* Firefox */

}

(6)过渡：当元素从一种样式变换为另一种样式时为元素添加效果

div

{

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

CSS 属性改变的典型时间是鼠标指针位于元素上时

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

(7)动画：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

animation: myfirst 5s linear 2s infinite alternate;

(8)box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。

vuejs:

(1)Vue.js是JavaScript MVVM(Model-View-ViewModel)库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应

的数据绑定和组合的视图组件

(2)特点：数据驱动、组件化、轻量、模板友好(可通过npm安装)

(3)声明式渲染：HTML模板(View)+Json数据(Model)+Vue实例(ViewModel)组成。创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。

(4)双向绑定：在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化，

...

中的信息随之变化；当通过控制台中的Console，修改

exampleData.message的值，输入框中的信息也随之变化。

(5)常用指令：v-if、v-show、v-for、v-bind、v-on、

9.webpack:

(1)webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应

用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

(2)它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。

(3)webpack 创建应用程序所有依赖的关系图(dependency graph)。图的起点被称之为入口起点(entry point)。入口起点高速 webpack 从哪里开始，并根据依赖关系图确定需要打

包的内容。可以将应用程序的入口起点认为是根上下文(contextual root) 或 app 第一个启动文件。

(4)将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)

(5)webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理

在更高层面，在 webpack 的配置中 loader 有两个目标。

识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件。(test 属性)

转换这些文件，从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use 属性)

(6)然而由于 loader 仅在每个文件的基础上执行转换，而 插件(plugins) 更常用于(但不限于)在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能

；

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用

同一个插件，这时需要通过使用 new 来创建它的一个实例。

10.ES6：

(1)在使用时仍然需要经过babel编译。

(2)一、新的变量声明方式 let/const；使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也可以称之为常量。

(3)二、 箭头函数的使用

// es5

var fn = function(a, b) {

return a + b;

}

// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号

const fn = (a, b) => a + b;

箭头函数可以替换函数表达式，但是不能替换函数声明

箭头函数中，没有this。如果你在箭头函数中使用了this，那么该this一定就是外层的this。

也正是因为箭头函数中没有this，因此我们也就无从谈起用call/apply/bind来改变this指向。

(4)模板字符串是为了解决使用+号拼接字符串的不便利而出现的。

// es6

const a = 20;

const b = 30;

const string = `${a}+${b}=${a+b}`;

// es5

var a = 20;

var b = 30;

var string = a + "+" + b + "=" + (a + b);

使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式

(5)解析结构：

数组与序列号一一对应，这是一个有序的对应关系。

而对象根据属性名一一对应，这是一个无序的对应关系。

根据这个特性，使用解析结构从对象中获取属性值更加具有可用性。

(6)函数默认参数：

function add(x = 20, y = 30) { return x + y; } console.log(add());

(7)展开运算符：

(8)对象字面量 与 class

当属性与值的变量同名时

const name = 'Jane'; const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };

在一个模块对外提供接口时

(9)Promise

const getName = () => person.name; const getAge = () => person.age;// commonJS的方式module.exports = { getName, getAge } // ES6 modules的方式 export default { getName, getAge } ES6为我们创建对象提供了新的语法糖，这就是Class语法。 // ES5 // 构造函数function Person(name, age) { this.name = name; this.age = age;}// 原型方法 Person.prototype.getName = function() { return this.name}// ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name }}

11.组件和模块划分：组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块；

12.性能优化：(1)html结构语义化；(2)css，js文件数量及大小的优化；(3)背景图片数量及大小的优化；(4)把样式表置于顶部，把脚本置于页面底部，避免使用 CSS 表达式(Expression)，使用外部 JavaScript 和 CSS，削减 JavaScript 和 CSS，用 代替 @import，避免使用滤镜，剔除重复脚本，减少DOM访问；

13.表现和数据分离：表现和数据分离就是javascript中的MVC，将数据的获取与数据的显示分离，表现和数据分离就是javascript控制数据填充，html负责表现；

14.web语义化：Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让任何搜索引擎都容易理解。

15.面相对性编程思想： 采用封装、继承、抽象等设计方法，用this给对象添加属性，prototype添加方法；

16.浏览器的渲染机制：

(1、浏览器请求到HTML代码后，在生成DOM的最开始阶段并行发起css、图片、js的请求，无论他们是否在HEAD里。

2、CSS文件下载完成，开始构建CSSOM

3、所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。

4、下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。

5、就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

Layout 和 Painting 也会被重复执行，除了DOM、CSSOM更新的原因外，图片下载完成后也需要调用Layout 和 Painting来更新网页。)

17、微信小程序开发

(1)最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件

(2)app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

(3)app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

(4)app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

18.微信小程序框架

(1)框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统

(2)响应的数据绑定：框架的核心是一个响应的数据绑定系统。

整个系统分为两块视图层(View)和逻辑层(App Service)。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新

(3)页面管理：框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给予页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进 框架 中，其他的一切复杂的操作都交由 框架 处理。

(4)基础组件：一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

(5)丰富的API：提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

19.微信小程序文件结构

(1)小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

(2)一个小程序主体部分由三个文件组成，必须放在项目的根目录，是 app.js、app.json、app.wxss 这三个；

(3)一个小程序页面由四个文件组成js、wxml、wxss、josn(页面配置)；(注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。)

20.微信小程序配置

(1)使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

(2)pages：接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。