第十一周总结
Java 学习第十一周总结
一、学习概述
本周聚焦前端开发的进阶技术，深入学习响应式设计与移动端优化、Web 组件开发、渐进式 Web 应用（PWA）、前端性能与安全优化，以及 CSS 和 JavaScript 的高级技巧。通过实践 Web Storage、IndexedDB 等浏览器 API，掌握 Vue.js 框架的核心特性，并完成多个实战项目，全面提升前端开发的综合能力。
二、响应式设计与移动端优化
- 响应式设计原则
视口与弹性布局
// 自定义元素实现
class HelloWorld extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = <style> p { color: blue; font-size: 1.5em; } </style> <p>Hello, World!</p> ;
}
}
customElements.define('hello-world', HelloWorld);
2. 渐进式 Web 应用（PWA）
服务工作线程（Service Workers）
// sw.js 服务工作线程
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/app.js',
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
Web 应用清单
{
"name": "我的PWA应用",
"short_name": "PWA应用",
"description": "一个渐进式Web应用示例",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#3498db",
"background_color": "#f4f4f4"
}
四、前端性能与安全优化
- 性能优化进阶
资源预加载与图片优化
Webpack 优化配置
// webpack.config.js
module.exports = {
optimization: {
usedExports: true, // 启用Tree Shaking
concatenateModules: true, // 启用Scope Hoisting
splitChunks: {
chunks: 'all',
},
},
};
2. 安全优化实践
内容安全策略（CSP）
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; img-src *; style-src 'self' 'unsafe-inline';
点击劫持防护
X-Frame-Options: DENY
五、CSS 与 JavaScript 高级技巧
- CSS 高级特性
动画与 Grid 布局
/* 过渡动画 /
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/ CSS Grid布局 */
.dashboard {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header header header"
"sidebar main content"
"footer footer footer";
gap: 20px;
}
CSS 变量（自定义属性）
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--border-radius: 4px;
}
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
}
.button.secondary {
background-color: var(--secondary-color);
}
2. JavaScript 高级编程
Promise 与异步迭代器
// Promise.all 并行请求
const fetchData = async () => {
try {
const [user, posts] = await Promise.all([
fetch('https://api/user'),
fetch('https://api/posts')
]);
return [await user.json(), await posts.json()];
} catch (error) {
console.error('请求失败:', error);
}
};
// 异步迭代器
const asyncIterable = {
async *Symbol.asyncIterator {
yield 1;
await new Promise(resolve => setTimeout(resolve, 1000));
yield 2;
}
};
装饰器与 Proxy
// 装饰器模式
function logger(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log(调用方法: ${name}, 参数: ${args});
const result = originalMethod.apply(this, args);
console.log(方法返回: ${result});
return result;
};
return descriptor;
}
@logger
class MathOperations {
add(a, b) { return a + b; }
}
// Proxy监控对象
const user = { name: '张三', age: 25 };
const proxy = new Proxy(user, {
get(target, prop) {
console.log(读取属性: ${prop});
return target[prop];
},
set(target, prop, value) {
console.log(设置属性: ${prop}=${value});
target[prop] = value;
return true;
}
});
六、浏览器 API 与 Vue.js 实践
- 浏览器存储与通信
Web Storage 与 IndexedDB
// Web Storage使用
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 25 }));
const user = JSON.parse(localStorage.getItem('user'));
// IndexedDB示例
const openDB = () => {
return new Promise((resolve, reject) => {
const request = indexedDB.open('myDB', 1);
request.onerror = reject;
request.onsuccess = () => resolve(request.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('users', { keyPath: 'id' });
};
});
};
WebSocket 实时通信
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => socket.send('连接已建立');
socket.onmessage = (event) => console.log('收到消息:', event.data);
socket.onclose = () => console.log('连接已关闭');
2. Vue.js 框架实践
基础应用与路由
{{ message }}
计数: {{ count }}
new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!',
count: 0
}
},
methods: {
increment() { this.count++ }
}
});
Vue Router 配置
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
七、本周学习总结与反思
- 学习成果
- 掌握响应式设计核心原则，能熟练使用媒体查询与弹性布局
- 理解 Web 组件原理，能开发自定义元素并使用影子 DOM
- 实现 PWA 应用的离线支持与安装功能
- 掌握前端性能优化的进阶技巧，包括资源预加载与代码优化
- 熟悉前端安全策略，能配置 CSP 与 HTTP 安全头
- 精通 CSS 动画、Grid 布局与变量管理
- 掌握 JavaScript 异步编程、装饰器模式与 Proxy 应用
- 熟练使用 Web Storage、IndexedDB 等浏览器 API
- 掌握 Vue.js 基础、路由与状态管理
- 存在问题
- Web 组件的性能优化与复杂交互处理经验不足
- PWA 的推送通知与后台同步功能实践较少
- Vue.js 的 Composition API 在复杂场景下的应用不够熟练
- 大型项目中的 CSS 架构设计缺乏经验
- 改进方向
- 深入学习 Web Components 的性能优化技巧
- 实践 PWA 的高级特性如后台同步与通知
- 通过大型项目练习 Vue.js 的 Composition API
- 学习 CSS 模块化与原子化设计理念
- 下周计划
- 学习微前端架构，使用 Qiankun 实现应用集成
- 深入研究 Vue.js 的高级特性与状态管理
- 实践 WebGL 与 Three.js 实现 3D 交互效果
- 学习 Node.js 后端开发，实现前后端全栈应用
- 阅读《Vue.js 设计与实现》相关章节，理解框架原理
浙公网安备 33010602011771号