JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
export default {
table: {//假如用于翻译表格
date: "Date",
name: "Name",
address: "Address"
},
menu: {},//假如项目中日后还有菜单
tabs: {}//tab切换等
}
zh.js
export default {
table: {
date: "日期",
name: "姓名",
address: "地址"
},
menu: {},
tabs: {}
}
2.3、配置i18n文件夹下的index.js文件
目前我们已经对两个js文件进行了配置,接下来,我们来配置下/src/i18n/index.js
文件,我们在开发过程中都知道,如果一个路由或者api有很多内容都写在一个文件,容易造成维护灾难,继续秉承高内聚低耦合的思路,我们和对项目中的路由或者api进行model划分,本文中的两个语言配置en
和zh
也是划分模块,但是如果我们有20几个国家
的语言需要翻译,我们在index中一个一个的import
显然对开发效率来书是中灾难,我们的代码可能这样
import en from './config/en'
import id from './config/id'
import ja from './config/ja'
import ae from './config/ae'
import am from './config/am'
import ca from './config/ca'
import al from './config/al'
.....
为了解决这个问题,本文采用了webpack
中的require.context
方法来解决这个问题
2.4、使用require.context()
require.context
是webpack提供的方法,用这个方法我们可以批量引入我们想要的文件,require.context
可以返回一个具有 resolve, keys, id 三个属性的方法
resolve()
它返回请求被解析后得到的模块 idkeys()
它返回一个数组,由所有符合上下文模块处理的请求组成- id 是上下文模块里面所包含的模块 id. 它可能在你使用
module.hot.accept
的时候被用到
这个方法接受3个参数
dir
传入一个目录进行搜索child
是否要搜索子目录regExp
传入正则表达式来匹配哪些文件需要引入
let langFiles = require.context("./config", false, /\.js$/);
当我们调用kes()
方法的时候可以得到如下属性
let langFiles = require.context("./config", false, /\.js$/);
console.log(langFiles.keys())//["./cn.js","./zh.js"]
以上便是require.context
的简单使用,如果想要知道更详细的用法,那我后续会再开一期关于require.context
的专题,敬请期待
2.5、继续配置/src/i18n/index.js
下面的代码中我使用了一个正则表达式
let reg = /^\.\/([^\.]+)\.([^\.]+)$/ //正则用于匹配文件名
用这个正则的目的是为了,我们需要将数据处理成这样
{
zh:{...},
en:{...}
}
处理成这种i18n
中message
属性对应的数据模式,我们通过forEach
获取下来的key
是这种类型的./zh.js
使用正则的目的就是截取其中的zh
两个字符,然后生成复合message
属性的数据模型
import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件
//require.context(path,deep,regExp)
//有3个方法 分别是keys()
let langFileds = require.context('./config', false, /\.js$/)
let regExp = /\.\/([^\.\/]+)\.([^\.]+)$/ //正则用于匹配 ./en.js中的'en'
// regExp.exec('./en.js')
let messages = {} //声明一个数据模型,对应i18n中的message属性
langFileds.keys().forEach(key => {
let prop = regExp.exec(key)[1] //正则匹配en|zh这样的值
//messages[prop]相当于 messages['en'] = {table:{...}}
messages[prop] = langFileds(key).default
})
console.log(messages);
console.log(langFileds('./en.js'));
let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取
export default new VueI18n({
locale,//指定语言字段
messages//定义语言字段
})
2.6、修改main.js
下面我们将i18n挂载在main的Vue实例,本案例中也引入了element-ui,如果想要使用element-ui,需要先安装
yarn add element-ui
接下来根据自己的需求编写代码
import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui" //element-ui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)
import i18n from "./i18n" //
new Vue({
render: h => h(App),
i18n //挂载
}).$mount('#app')
2.7、 App.vue视图展示(navigator.language
)
从2.5
的代码中我们可以看到,我将locale
的属性设置为从localStorage
中获取,是为了达到快速的演示效果,但是如果我们在开发中的话要通过计算机的语言来判断,并且进行切换,正确的方法是我们通过navigator.language
来获取计算机的语言
<template>
<div id="app">
<template>
<el-table :data="tableData"
style="width: 100%">
<el-table-column prop="date"
:label="$t('table.date')"
width="180">
</el-table-column>
<el-table-column prop="name"
:label="$t('table.name')"
width="180">
</el-table-column>
<el-table-column prop="address"
:label="$t('table.address')">
</el-table-column>
</el-table>
</template>
<el-button type="primary"
@click="change('zh')">点击切换中文</el-button>
<el-button type="primary"
@click="change('en')">点击切换英文</el-button>
<el-button type="primary"
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$i18n.t('table.date'));
},
methods: {
change(lang) { //切换方法
localStorage.setItem('lang', lang)
window.location.reload() //localSotrage是不响应的,为了演示效果所以直接调用刷新
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
### 总结
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)