【前端面试】同窗，你会手写代码吗？
若是您发现错误，请必定要告诉我，拯救一个辣鸡（但很帅）的少年就靠您了！javascript
CSS 部分
两栏布局
要求：垂直两栏，左边固定右边自适应。css
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .outer { height: 100px; margin-bottom: 10px; } .left { background: tomato; height: 100px; } .right { background: gold; height: 100px; } /* 浮动 */ .outer1 .left { width: 200px; float: left; } .outer1 .right { width: auto; margin-left: 200px; } /* flex */ .outer2 { display: flex; } .outer2 .left { flex-grow: 0; flex-shrink: 0; flex-basis: 200px; } .outer2 .right { flex: auto; /* 1 1 auto */ } /* position */ .outer3 { position: relative; } .outer3 .left { position: absolute; width: 200px; } .outer3 .right { margin-left: 200px; } /* position again */ .outer4 { position: relative; } .outer4 .left { width: 200px; } .outer4 .right { position: absolute; top: 0; left: 200px; right: 0; } </style>
</head>
<!-- 左右两栏，左边固定，右边自适应 -->
<body>
<div class="outer outer1">
<div class="left">1-left</div>
<div class="right">1-right</div>
</div>
<div class="outer outer2">
<div class="left">2-left</div>
<div class="right">2-right</div>
</div>
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
</div>
<div class="outer outer4">
<div class="left">4-left</div>
<div class="right">4-right</div>
</div>
</body>
</html>
复制代码
三栏布局
要求：垂直三栏布局，左右两栏宽度固定，中间自适应html
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .outer, .left, .middle, .right { height: 100px; margin-bottom: 5px; } .left { background: tomato; } .middle { background: lightgreen; } .right { background: gold; } /* 左右分别设置绝对定位 中间设置外边距 */ .outer1 { position: relative; } .outer1 .left { position: absolute; width: 100px; } .outer1 .middle { margin: 0 200px 0 100px; } .outer1 .right { position: absolute; width: 200px; top: 0; right: 0; } /* flex 布局 */ .outer2 { display: flex; } .outer2 .left { flex: 0 0 100px; } .outer2 .middle { flex: auto; } .outer2 .right { flex: 0 0 200px; } /* 浮动布局 可是 html 中 middle要放到最后 */ .outer3 .left { float: left; width: 100px; } .outer3 .right { float: right; width: 200px; } .outer3 .middle { margin: 0 200px 0 100px; } </style>
</head>
<!-- 三栏布局 左右固定 中间自适应 -->
<body>
<div class="outer outer1">
<div class="left">1-left</div>
<div class="middle">1-middle</div>
<div class="right">1-right</div>
</div>
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
<div class="middle">3-middle</div>
</div>
</body>
</html>
复制代码
圣杯布局 和 双飞翼布局
和三栏布局要求相同，不过中间列要写在前面保证优先渲染。前端
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .outer, .left, .middle, .right { height: 100px; margin-bottom: 5px; } .left { background: tomato; } .middle { background: lightgreen; } .right { background: gold; } /* 圣杯布局 经过浮动和负边距实现 */ .outer1 { padding: 0 200px 0 100px; } .outer1 .middle { width: 100%; float: left; } .outer1 .left { width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; } .outer1 .right { width: 200px; float: left; margin-left: -200px; position: relative; left: 200px; } /* 双飞翼布局 */ .outer2 .middle-wrapper { width: 100%; float: left; } .outer2 .middle { margin: 0 200px 0 100px; } .outer2 .left { width: 100px; float: left; margin-left: -100%; } .outer2 .right { width: 200px; float: left; margin-left: -200px; } </style>
</head>
<!-- 三栏布局 左右固定 中间自适应 -->
<body>
<!-- 圣杯布局 middle 最早 -->
<div class="outer outer1">
<div class="middle">圣杯-middle</div>
<div class="left">圣杯-left</div>
<div class="right">圣杯-right</div>
</div>
<!-- 双飞翼布局 middle 最早 多一层 div -->
<div class="outer outer2">
<div class="middle-wrapper">
<div class="middle">双飞翼布局-middle</div>
</div>
<div class="left">双飞翼布局-left</div>
<div class="right">双飞翼布局-right</div>
</div>
</body>
</html>
复制代码
三角形
实现一个三角形java
常见题目，经过 border 实现es6
查看代码
<!DOCTYPE html>
<html>
<head>
<title>三角形</title>
<style type="text/css"> .box1, .box2, .box3, .box4 { height: 0px; width: 0px; float: left; border-style: solid; margin: 10px; } .box1 { /* 等腰直角 */ border-width: 100px; border-color: tomato transparent transparent transparent; } .box2 { /* 等边 */ border-width: 100px 173px; border-color: transparent tomato transparent transparent; } .box3 { /* 等腰 */ border-width: 100px 80px; border-color: transparent transparent tomato transparent; } .box4 { /* 其余 */ border-width: 100px 90px 80px 70px; border-color: transparent transparent transparent tomato; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
复制代码
正方形
使用 css 实现一个宽高自适应的正方形web
查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style> /* 都是像对于屏幕宽度的比例 */ .square1 { width: 10%; height: 10vw; background: red; } /* margin/padding 百分比是相对父元素 width 的 */ .square2 { width: 20%; height: 0; padding-top: 20%; background: orange; } /* 经过子元素 margin */ .square3 { width: 30%; overflow: hidden; /* 触发 BFC */ background: yellow; } .square3::after { content: ''; display: block; margin-top: 100%; /* 高度相对于 square3 的 width */ } </style>
</head>
<!-- 画一个正方形 -->
<body>
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
</body>
</html>
复制代码
扇形
实现一个 1/4 圆、任意弧度的扇形ajax
有多种实现方法，这里选几种简单方法（我看得懂的）实现。json
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> /* 经过 border 和 border-radius 实现 1/4 圆 */ .sector1 { height: 0; width: 0; border: 100px solid; border-radius: 50%; border-color: turquoise tomato tan thistle; } /* 相似三角形的作法加上父元素 overflow: hidden; 也能够实现任意弧度圆 */ .sector2 { height: 100px; width: 200px; border-radius: 100px 100px 0 0; overflow: hidden; } .sector2::after { content: ''; display: block; height: 0; width: 0; border-style: solid; border-width: 100px 58px 0; border-color: tomato transparent; transform: translate(42px,0); } /* 经过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */ .sector3 { height: 100px; width: 100px; border-top-right-radius: 100px; overflow: hidden; /* background: gold; */ } .sector3::after { content: ''; display: block; height: 100px; width: 100px; background: tomato; transform: rotateZ(-30deg); transform-origin: left bottom; } /* 经过 skewY 实现一个60°的扇形 */ .sector4 { height: 100px; width: 100px; border-top-right-radius: 100px; overflow: hidden; } .sector4::after { content: ''; display: block; height: 100px; width: 100px; background: tomato; transform: skewY(-30deg); transform-origin: left bottom; } /* 经过渐变设置60°扇形 */ .sector5 { height: 200px; width: 200px; background: tomato; border-radius: 50%; background-image: linear-gradient(150deg, transparent 50%, #fff 50%), linear-gradient(90deg, #fff 50%, transparent 50%); } </style>
</head>
<body>
<div style="display: flex; justify-content: space-around;">
<div class="sector1"></div>
<div class="sector2"></div>
<div class="sector3"></div>
<div class="sector4"></div>
<div class="sector5"></div>
</div>
</body>
</html>
复制代码
水平垂直居中
实现子元素的水平垂直居中跨域
查看代码
<!DOCTYPE html>
<html>
<head>
<title>水平垂直居中</title>
<style type="text/css"> .outer { height: 200px; width: 200px; background: tomato; margin: 10px; float: left; position: relative; } .inner { height: 100px; width: 100px; background: black; } /* * 经过 position 和 margin 居中 * 缺点：须要知道 inner 的长宽 */ .inner1 { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } /* * 经过 position 和 margin 居中 (2 */ .inner2 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } /* * 经过 flex 进行居中 */ .outer3 { display: flex; justify-content: center; align-items: center; } /** * 经过 position 和 transform 居中 */ .inner4 { top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; } </style>
</head>
<body>
<div class="outer outer1">
<div class="inner inner1"></div>
</div>
<div class="outer outer2">
<div class="inner inner2"></div>
</div>
<div class="outer outer3">
<div class="inner inner3"></div>
</div>
<div class="outer outer4">
<div class="inner inner4"></div>
</div>
</body>
</html>
复制代码
清除浮动
要求：清除浮动
能够经过 clear:both 或 BFC 实现
查看代码
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style type="text/css"> .outer { width: 200px; background: tomato; margin: 10px; position: relative; } .inner { height: 100px; width: 100px; background: pink; margin: 10px; float: left; } /* 伪元素 */ .outer1::after { content: ''; display: block; clear: both; } /* 建立 BFC */ .outer2 { overflow: hidden; } </style>
</head>
<body>
<div class="outer outer1">
<div class="inner"></div>
</div>
<div class="outer outer2">
<div class="inner"></div>
</div>
</body>
</html>
复制代码
弹出框
使用 CSS 写一个弹出框效果
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .bg { height: 666px; width: 100%; font-size: 60px; text-align: center; } .dialog { z-index: 999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } .dialog .content { min-height: 300px; width: 600px; background: #fff; border-radius: 5px; border: 1px solid #ebeef5; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
</head>
<body>
<div class="bg">
页面内容
</div>
<div class="dialog">
<div class="content">
弹出框
</div>
</div>
</body>
</html>
复制代码
导航栏
要求：一个
div内部放不少水平div，并能够横向滚动。
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> body,html { margin: 0; padding: 0; } /* flex 实现 */ /* .nav { display: flex; height: 30px; border: 1px solid #000; padding: 3px; overflow-x: auto; } .nav::-webkit-scrollbar { display: none; } .item { flex: 0 0 200px; height: 30px; margin-right: 5px; background: gray; } */ /* inline-block 和 white-space: nowrap; 实现 */ .nav { height: 30px; padding: 3px; border: 1px solid #000; overflow-x: auto; white-space: nowrap; } .nav::-webkit-scrollbar { display: none; } .item { display: inline-block; width: 200px; height: 30px; margin-right: 5px; background: gray; } </style>
</head>
<!-- 水平滚动导航栏 -->
<body>
<div class="nav">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</body>
</html>
复制代码
CSS 部分完，总结，Flex 无敌。
JavaScript 部分
手写 bind、call 和 apply
Function.prototype.bind = function(context, ...bindArgs) {
// func 为调用 bind 的原函数
const func = this;
context = context || window;
if (typeof func !== 'function') {
throw new TypeError('Bind must be called on a function');
}
// bind 返回一个绑定 this 的函数
return function(...callArgs) {
let args = bindArgs.concat(callArgs);
if (this instanceof func) {
// 意味着是经过 new 调用的 而 new 的优先级高于 bind
return new func(...args);
}
return func.call(context, ...args);
}
}
// 经过隐式绑定实现
Function.prototype.call = function(context, ...args) {
context = context || window;
context.func = this;
if (typeof context.func !== 'function') {
throw new TypeError('call must be called on a function');
}
let res = context.func(...args);
delete context.func;
return res;
}
Function.prototype.apply = function(context, args) {
context = context || window;
context.func = this;
if (typeof context.func !== 'function') {
throw new TypeError('apply must be called on a function');
}
let res = context.func(...args);
delete context.func;
return res;
}
复制代码
实现一个继承
// 参考 You Dont Know JavaScript 上卷
// 基类
function Base() {
}
// 派生类
function Derived() {
Base.call(this);
}
// 将派生类的原型的原型链挂在基类的原型上
Object.setPrototypeOf(Derived.prototype, Base.prototype);
复制代码
实现一个 new
// 手动实现一个 new 关键字的功能的函数 _new(fun, args) --> new fun(args)
function _new(fun, ...args) {
if (typeof fun !== 'function') {
return new Error('参数必须是一个函数');
}
let obj = Object.create(fun.prototype);
let res = fun.call(obj, ...args);
if (res !== null && (typeof res === 'object' || typeof res === 'function')) {
return res;
}
return obj;
}
复制代码
实现一个 instanceof
// a instanceof b
function _instanceof(a, b) {
while (a) {
if (a.__proto__ === b.prototype) return true;
a = a.__proto__;
}
return false;
}
复制代码
手写 jsonp 的实现
// foo 函数将会被调用 传入后台返回的数据
function foo(data) {
console.log('经过jsonp获取后台数据:', data);
document.getElementById('data').innerHTML = data;
}
/** * 经过手动建立一个 script 标签发送一个 get 请求 * 并利用浏览器对 <script> 不进行跨域限制的特性绕过跨域问题 */
(function jsonp() {
let head = document.getElementsByTagName('head')[0]; // 获取head元素 把js放里面
let js = document.createElement('script');
js.src = 'http://domain:port/testJSONP?a=1&b=2&callback=foo'; // 设置请求地址
head.appendChild(js); // 这一步会发送请求
})();
// 后台代码
// 由于是经过 script 标签调用的 后台返回的至关于一个 js 文件
// 根据前端传入的 callback 的函数名直接调用该函数
// 返回的是 'foo(3)'
function testJSONP(callback, a, b) {
return `${callback}(${a + b})`;
}
复制代码
ajax 的实现
感受这个有点无聊了……
查看代码
// Asynchronous Javascript And XML
function ajax(options) {
// 选项
var method = options.method || 'GET',
params = options.params,
data = options.data,
url = options.url + (params ? '?' + Object.keys(params).map(key => key + '=' + params[key]).join('&') : ''),
async = options.async === false ? false : true,
success = options.success,
headers = options.headers;
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.onreadystatechange = function() {
/** readyState: 0: 请求未初始化 1: 服务器链接已创建 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status: HTTP 状态码 **/
if (request.readyState === 4 && request.status === 200) {
success && success(request.responseText);
}
}
request.open(method, url, async);
if (headers) {
Object.keys(headers).forEach(key => request.setRequestHeader(key, headers[key]));
}
method === 'GET' ? request.send() : request.send(data);
}
// e.g.
ajax({
method: 'GET',
url: '...',
success: function(res) {
console.log('success', res);
},
async: true,
params: {
p: 'test',
t: 666
},
headers: {
'Content-Type': 'application/json'
}
})
复制代码
reduce 的实现
function reduce(arr, callback, initial) {
let i = 0;
let acc = initial === undefined ? arr[i++] : initial;
for (; i < arr.length; i++) {
acc = callback(acc, arr[i], i, arr);
}
return acc;
}
复制代码
实现 generator 的自动执行器
要求是 yield 后面只能是 Promise 或 Thunk 函数，详见 es6.ruanyifeng.com/#docs/gener…
function run(gen) {
let g = gen();
function next(data) {
let result = g.next(data);
if (result.done) return result.value;
if (result.value instanceof Promise) {
result.value.then(data => next(data));
} else {
result.value(next);
}
}
return next();
}
// ======== e.g. ==========
function func(data, cb) {
console.log(data);
cb();
}
function *gen() {
let a = yield Promise.resolve(1);
console.log(a);
let b = yield Promise.resolve(2);
console.log(b);
yield func.bind(null, a + b);
}
run(gen);
/** output: 1 2 3 **/
复制代码
节流
老生常谈了，感受不必写太复杂
/** * 节流函数 限制函数在指定时间段只能被调用一次 * 用法 好比防止用户连续执行一个耗时操做 对操做按钮点击函数进行节流处理 */
function throttle(func, wait) {
let timer = null;
return function(...args) {
if (!timer) {
func(...args);
timer = setTimeout(() => {
timer = null;
}, wait);
}
}
}
复制代码
防抖
/** * 函数调用后不会被当即执行 以后连续 wait 时间段没有调用才会执行 * 用法 如处理用户输入 */
function debounce(func, wait) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer); // 若是在定时器未执行期间又被调用 该定时器将被清除 并从新等待 wait 秒
timer = setTimeout(() => {
func(...args);
}, wait);
}
}
复制代码
手写 Promise
简单实现，基本功能都有了。
const PENDING = 1;
const FULFILLED = 2;
const REJECTED = 3;
function MyPromise(executor) {
let self = this;
this.resolveQueue = [];
this.rejectQueue = [];
this.state = PENDING;
this.val = undefined;
function resolve(val) {
if (self.state === PENDING) {
setTimeout(() => {
self.state = FULFILLED;
self.val = val;
self.resolveQueue.forEach(cb => cb(val));
});
}
}
function reject(err) {
if (self.state === PENDING) {
setTimeout(() => {
self.state = REJECTED;
self.val = err;
self.rejectQueue.forEach(cb => cb(err));
});
}
}
try {
// 回调是异步执行 函数是同步执行
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
MyPromise.prototype.then = function(onResolve, onReject) {
let self = this;
// 不传值的话默认是一个返回原值的函数
onResolve = typeof onResolve === 'function' ? onResolve : (v => v);
onReject = typeof onReject === 'function' ? onReject : (e => { throw e });
if (self.state === FULFILLED) {
return new MyPromise(function(resolve, reject) {
setTimeout(() => {
try {
let x = onResolve(self.val);
if (x instanceof MyPromise) {
x.then(resolve);
} else {
resolve(x);
}
} catch(e) {
reject(e);
}
});
});
}
if (self.state === REJECTED) {
return new MyPromise(function(resolve, reject) {
setTimeout(() => {
try {
let x = onReject(self.val);
if (x instanceof MyPromise) {
x.then(resolve);
} else {
resolve(x);
}
} catch(e) {
reject(e);
}
});
});
}
if (self.state === PENDING) {
return new MyPromise(function(resolve, reject) {
self.resolveQueue.push((val) => {
try {
let x = onResolve(val);
if (x instanceof MyPromise) {
x.then(resolve);
} else {
resolve(x);
}
} catch(e) {
reject(e);
}
});
self.rejectQueue.push((val) => {
try {
let x = onReject(val);
if (x instanceof MyPromise) {
x.then(resolve);
} else {
resolve(x);
}
} catch(e) {
reject(e);
}
});
});
}
}
MyPromise.prototype.catch = function(onReject) {
return this.then(null, onReject);
}
MyPromise.all = function(promises) {
return new MyPromise(function(resolve, reject) {
let cnt = 0;
let result = [];
for (let i = 0; i < promises.length; i++) {
promises[i].then(res => {
result[i] = res;
if (++cnt === promises.length) resolve(result);
}, err => {
reject(err);
})
}
});
}
MyPromise.race = function(promises) {
return new MyPromise(function(resolve, reject) {
for (let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject);
}
});
}
MyPromise.resolve = function(val) {
return new MyPromise(function(resolve, reject) {
resolve(val);
});
}
MyPromise.reject = function(err) {
return new MyPromise(function(resolve, reject) {
reject(err);
})
}
复制代码
实现一个路由 - Hash
实现原理就是监听 url 的哈希值变化了
<!DOCTYPE html>
<html>
<head>
<title>hash 路由</title>
</head>
<body>
<header>
<a href="#home">首页</a>
<a href="#center">我的中心页</a>
<a href="#help">帮助页</a>
</header>
<section id="content"></section>
<script> window.addEventListener('hashchange', (e) => { let content = document.getElementById('content'); content.innerText = location.hash; }) </script>
</body>
</html>
复制代码
路由实现 - history
<!DOCTYPE html>
<html>
<head>
<title>history 路由</title>
</head>
<body>
<header>
<a onclick="changeRoute(this)" data-path="home">首页</a>
<a onclick="changeRoute(this)" data-path="center">我的中心页</a>
<a onclick="changeRoute(this)" data-path="help">帮助页</a>
</header>
<section id="content"></section>
<script> function changeRoute(route) { let path = route.dataset.path; /** * window.history.pushState(state, title, url) * state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。 * 也就是说，浏览器会将这个对象序列化之后保留在本地，从新载入这个页面的时候，能够拿到这个对象。 * 若是不须要这个对象，此处能够填 null。 * title：新页面的标题。可是，如今全部浏览器都忽视这个参数，因此这里能够填空字符串。 * url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。 */ changePage(path); history.pushState({ content: path }, null, path); } /** * 调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 * 点击后退、前进按钮、或者在 js 中调用 history.back()、history.forward()、history.go() 方法会触发 */ window.addEventListener('popstate', (e) => { let content = e.state && e.state.content; changePage(content); }); function changePage(pageContent) { let content = document.getElementById('content'); content.innerText = pageContent; } </script>
</body>
</html>
复制代码
还有一些稍复杂的能够写，有时间再补。
相关文章
- 1. 前端面试之手写代码
- 2. 前端面试手写代码
- 3. 面试前端岗，你被要求手写源码了吗？
- 4. 6个前端挑战性代码，你会编写吗？
- 5. 前端笔试之手写代码
- 6. 前端笔试之手写代码(一)
- 7. 前端面试手写篇
- 8. 前端面试-手撕代码篇
- 9. 手撕前端面试代码题
- 10. JS面试手写代码
- 更多相关文章...
- • Markdown 代码 - Markdown 教程
- • Eclipse 代码模板 - Eclipse 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • IntelliJ IDEA代码格式化设置
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端面试之手写代码
- 2. 前端面试手写代码
- 3. 面试前端岗，你被要求手写源码了吗？
- 4. 6个前端挑战性代码，你会编写吗？
- 5. 前端笔试之手写代码
- 6. 前端笔试之手写代码(一)
- 7. 前端面试手写篇
- 8. 前端面试-手撕代码篇
- 9. 手撕前端面试代码题
- 10. JS面试手写代码