最后
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
-
HTML5新特性，语义化
-
浏览器的标准模式和怪异模式
-
xhtml和html的区别
-
使用data-的好处
-
meta标签
-
canvas
-
HTML废弃的标签
-
IE6 bug，和一些定位写法
-
css js放置位置和原因
-
什么是渐进式渲染
-
html模板语言
-
meta viewport原理
}
export default Home;
这样就实现了
安装 react-loadable
npm i react-loadable @type/react-loadable
使用方式，官方文档已经给出
根据例子创建LoadableComponent.tsx文件
import * as React from ‘react’;
import Loadable from ‘react-loadable’;
import {LoadingComponentProps} from ‘react-loadable’;
import {PageLoading} from ‘components/Loading’;
function Loading(props: LoadingComponentProps) {
if (props.error) {
return “Error! Component failed to load”;
} else {
return ;
}
}
const LoadableComponent = (component: any) => Loadable({
loader: component,
loading: Loading,
});
export default LoadableComponent;
其中components/Loading
// components/Loading
import { Spin } from ‘antd’;
import ‘./style.less’;
export function PageLoading() {
return
;}
//./style.less
.m-page-loading {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
现在就可以引入 router/router.js中引用
// import Root from ‘pages/App’
// import Home from ‘pages/Home’
import Test from ‘pages/Home/test’
import Detail from ‘pages/Detail’
import LoadableComponent from ‘LoadableComponent’;
const routes = [
{
path: ‘/’,
label: ‘首页’,
exact: true,
component: LoadableComponent(() => import(‘pages/App’)),
},
{
path: ‘/detail’,
label: ‘书籍’,
component: Detail
},
{
path: ‘/home’,
label: ‘书籍’,
component: LoadableComponent(() => import(‘pages/Home’)),
routes: [
{
path: ‘/home/test’,
label: ‘书籍test’,
component: Test
}
]
},
]
export default routes
我们这里Home 使用了按需加载模式，Detail没有，来试一下有没有成功
Home
import { Button } from “antd”
import { renderRoutes } from ‘react-router-config’
console.log(“home”);
function Home(props: any) {
const { routes, } = props.route
console.log(props);
return (
Home
{
renderRoutes(routes)
}
);
}
export default Home;
在Home和Detail文件加个console.log看看。
发现只打印了detail，没打印home，说明按需加载成功。
/**
-
Global Reset of all HTML Elements
-
Resetting all of our HTML Elements ensures a smoother
-
visual transition between browsers. f you don’t believe me,
-
try temporarily commenting out this block of code, then go
-
and look at Mozilla versus Safari, both good browsers with
-
a good implementation of CSS. The thing is, all browser CSS
-
defaults are different and at the end of the day if visual
-
consistency is what we’re shooting for, then we need to
-
make sure we’re resetting all spacing elements.
*/
html,
body {
border: 0;
font-family: “Helvetica-Neue”, “Helvetica”, Arial, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
border: 0;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
border: 0;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
display: block;
}
table {
border-collapse: separate;
border-spacing: 0;
caption,
th,
td {
text-align: left;
vertical-align: middle;
}
}
a img {
border: 0;
}
// project custom
- {
word-break: break-all;
}
h2 {
font-size: 28px;
margin-bottom: 35px;
}
h3 {
font-size: 24px;
margin-bottom: 20px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
h5 {
font-size: 16px;
margin-bottom: 6px;
}
/* scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
z-index: 999;
}
::-webkit-scrollbar-track {
//background: #31a0ee;
}
::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 4px;
}
#root {
height: 100vh;
min-height: 100vh;
}
在入口文件引入
import ReactDOM from ‘react-dom’;
// import ‘antd/dist/antd.css’;
import { BrowserRouter as Router } from ‘react-router-dom’;
import routes from ‘router/router.js’
import { renderRoutes } from ‘router/renderRouter’
import “./reset.less”
ReactDOM.render(
{renderRoutes(routes)}
, document.getElementById(‘root’)
);
<meta
name=“description”
content=“抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个”
/>
You need to enable JavaScript to run this app.
其中，这两个是为了优化seo
<meta
name=“description”
content=“抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个”
/>
这个是优化移动端浏览器的顶部
创建constants\serviceUrl.ts文件统一放 api的url
const SERVICE_URL = ‘http://localhost:5001/api’;
// const MOCK_URL = ‘/mockApi’;
export const BASE_URL = SERVICE_URL + ‘’;
// user
export const USER_LOGIN_URL = ${BASE_URL}/user/login;
export const USER_REGISTER_URL = ${BASE_URL}/user/signup;
创建models，专门放置需要定义好的类型
创建service文件夹统一放 封装好的api，下面的文件放置对应模块的api，例如，user.js
import {
USER_LOGIN_URL,USER_REGISTER_URL
} from ‘constants/serviceUrl’;
import {postRequest} from “utils/request”;
import {LoginParam} from “models”
export function UserLogin(params: LoginParam) {
return postRequest(USER_LOGIN_URL, params);
}
export function UserRegister(params: LoginParam) {
return postRequest(USER_REGISTER_URL, params);
}
封装基本的get和 post请求
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
V0L3dlaXhpbl80Mzk2NDE0OA==,size_16,color_FFFFFF,t_70)
创建service文件夹统一放 封装好的api，下面的文件放置对应模块的api，例如，user.js
import {
USER_LOGIN_URL,USER_REGISTER_URL
} from ‘constants/serviceUrl’;
import {postRequest} from “utils/request”;
import {LoginParam} from “models”
export function UserLogin(params: LoginParam) {
return postRequest(USER_LOGIN_URL, params);
}
export function UserRegister(params: LoginParam) {
return postRequest(USER_REGISTER_URL, params);
}
封装基本的get和 post请求
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-7XbjLwuf-1715197958904)]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
