chatgpt,aigc,云计算,大数据,php,java,go,javascript,python,mysql,redis,linux技术文件分享

文章列表

Vuex的引入、应用场景及项目中的实现

前端
13424 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vuex是一个专为Vue.js应用程序开发的状态管理模式，它集中管理组件的状态，并且能够进行可预测的状态更新。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">为了在Vue.js应用程序中使用Vuex，需要安装Vuex，并在Vue.js应用程序中创建一个store对象。可以通过以下方式来引入Vuex：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Vuex<pre class="brush:as3;toolbar:false">npm install vuex --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入Vuex<pre class="brush:as3;toolbar:false">import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex);</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建store对象<pre class="brush:as3;toolbar:false">const store = new Vuex.Store({   state: {     count: 0   },   mutations: {     increment(state) {       state.count++;     }   },   actions: {     incrementAsync(context) {       setTimeout(() => {         context.commit('increment');       }, 1000);     }   },   getters: {     getCount(state) {       return state.count;     }   } }); export default store;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们创建了一个名为store的Vuex对象，并定义了state、mutations、actions和getters四个属性。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">应用场景：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vuex主要适用于以下几种场景：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">多个组件需要共享同一状态：在Vue.js应用程序中，如果多个组件需要共享同一状态，那么可以使用Vuex将该状态存储在store对象中，从而使得多个组件都可以访问该状态。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">组件之间需要进行状态传递：有时候需要将某个组件的状态传递给另一个组件，在这种情况下，可以使用Vuex来进行状态传递。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">管理异步操作的状态：在Vue.js应用程序中，如果需要管理异步操作的状态，例如网络请求、定时器等，那么可以使用Vuex来进行管理。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">项目中的实现：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js项目中使用Vuex，需要在Vue.js应用程序中引入Vuex，并创建一个store对象。然后可以在组件中使用Vuex来进行状态管理。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">例如，在Vue.js项目中，可以在main.js中引入Vuex，并创建一个store对象：<pre class="brush:as3;toolbar:false">import Vue from 'vue'; import Vuex from 'vuex'; import store from './store'; Vue.use(Vuex); new Vue({   el: '#app',   store,   render: h => h(App) });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">然后可以在组件中通过this.$store来访问store对象，并使用Vuex来进行状态管理。例如：<pre class="brush:as3;toolbar:false"><template>   <div>     <h1>{{ count }}</h1>     <button @click="increment">Increment</button>     <button @click="incrementAsync">Increment Async</button>   </div> </template> <script> export default {   computed: {     count() {       return this.$store.getters.getCount;     }   },   methods: {     increment() {       this.$store.commit('increment');     },     incrementAsync() {       this.$store.dispatch('incrementAsync');     }   } }; </script></pre><p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">在这个例子中，我们定义了一个组件，用于显示count状态，并提供两个按钮用于触发mutation和action来更新状态。

Axios网络请求及路由使用

前端
12701 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它的特点包括支持Promise API、拦截请求和响应、转换请求和响应数据等，可以轻松地与现代的前端框架集成，如React、Vue等。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">下面介绍如何在Vue.js中使用Axios来进行网络请求：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Axios<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以通过npm命令来安装Axios：<pre class="brush:as3;toolbar:false">npm install axios --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入Axios<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在需要使用Axios的文件中引入：<pre class="brush:as3;toolbar:false">import axios from 'axios';</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">发送网络请求<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以通过Axios发送网络请求，例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">axios.get('/api/data')   .then(response => {     console.log(response.data);   })   .catch(error => {     console.log(error);   });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们发送了一个GET请求到/api/data接口，并在成功和失败的情况下分别打印了结果。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">添加拦截器<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以使用Axios的拦截器来在请求和响应过程中添加一些通用的处理逻辑，例如添加请求头、统一处理错误等。例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">axios.interceptors.request.use(config => {   // 添加请求头   config.headers.Authorization = 'Bearer ' + token;   return config; }, error => {   return Promise.reject(error); }); axios.interceptors.response.use(response => {   // 统一处理响应数据   if (response.data.code !== 200) {     return Promise.reject(response.data.msg);   }   return response.data; }, error => {   return Promise.reject(error); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们分别添加了请求拦截器和响应拦截器，用于在请求和响应过程中添加一些通用的处理逻辑。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用路由<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js中，可以使用Vue Router来进行路由管理。可以通过以下方式来使用Vue Router：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Vue Router：<pre class="brush:as3;toolbar:false">npm install vue-router --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建路由实例：<pre class="brush:as3;toolbar:false">javascript Copy code import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(VueRouter); const routes = [   { path: '/', component: Home },   { path: '/about', component: About } ]; const router = new VueRouter({   mode: 'history',   routes }); export default router;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们创建了两个组件Home和About，并定义了路由表，包括根路由和/about路由。然后创建了一个路由实例，并将路由表传递给路由实例。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用路由：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js的模板中可以通过<router-link>和<router-view>来使用路由。例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false"><template>   <div>     <router-link to="/">Home</router-link>     <router-link to="/about">About</router-link>     <router-view></router-view>   </div> </template></pre>

详细介绍微信小程序注册流程/注册方式/注册主体

前端
12465 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序注册流程：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">准备工作：首先需要有一个微信公众号账号，如果没有可以先去注册一个。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册小程序账号：登录微信公众平台，进入“小程序”菜单，在“开发”->“开发设置”中进行开发者注册。注册需要提供企业营业执照或个人身份证等资料，审核通过后即可注册为小程序开发者。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建小程序：注册开发者账号后，可以在微信公众平台中创建小程序。创建小程序需要填写小程序的基本信息，包括小程序名称、AppID、类目、logo等。创建完成后，可以进行小程序的开发和发布。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册方式：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序可以注册个人账号和企业账号两种方式。个人账号需要提供个人身份证信息，企业账号需要提供企业营业执照等相关资料。同时，个人账号只能创建5个小程序，企业账号没有限制。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册主体：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序的注册主体可以是个人或企业。个人可以使用个人账号进行注册，企业需要使用企业账号进行注册。注册主体需要提供相应的资料进行认证，审核通过后即可注册成功。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">

前端性能优化之html,css,javascript

前端
12350 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">下面是从HTML、CSS、JavaScript三方面优化性能的一些方法：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">HTML方面：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">减少HTTP请求次数：合并CSS和JavaScript文件、使用CSS Sprites、压缩图片等方法可以减少HTTP请求次数。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用语义化的HTML：使用合适的HTML标签可以让页面更易于阅读和理解，同时也可以提高搜索引擎优化（SEO）的效果。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">减少标签数量：减少不必要的HTML标签可以减少页面的大小和渲染时间，提高页面的加载速度。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在head中异步加载JavaScript：将JavaScript放在页面底部加载可以减少页面的首次加载时间，但是会对用户体验产生影响，可以在head中使用defer或async属性异步加载JavaScript。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">避免在HTML中使用样式：尽量避免在HTML中使用样式，可以提高页面的可维护性。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">CSS方面：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">避免使用@import：@import会阻塞页面的渲染，建议使用link标签来引入CSS文件。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">压缩CSS文件：压缩CSS文件可以减少文件大小，提高页面的加载速度。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用CSS Sprites：将多张小图片合并成一张大图片可以减少HTTP请求次数。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">避免使用CSS表达式：CSS表达式会影响页面的性能，应尽量避免使用。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">JavaScript方面：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">减少全局变量：过多的全局变量会增加页面的内存占用和运行时间，应尽量减少全局变量的使用。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">避免使用eval：eval会降低JavaScript的性能，同时也会存在安全风险，应尽量避免使用。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">避免重复计算：将一些需要多次计算的值缓存起来可以减少计算时间。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用事件委托：使用事件委托可以减少事件处理程序的数量，提高页面的性能。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">压缩JavaScript文件：压缩JavaScript文件可以减少文件大小，提高页面的加载速度。<p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">优化性能是一个综合性的工作，需要从不同方面进行优化，才能达到最佳效果。同时，还需要根据具体的情况进行调整和优化。

css响应式布局基础知识点

前端
16402 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">CSS响应式布局是指通过CSS的技术手段，使得网页在不同设备上（如电脑、平板、手机等）能够自适应地进行布局，以适应不同屏幕尺寸的设备。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是一些基础知识点：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">媒体查询（Media Query）：是CSS3的一个模块，用于根据不同的设备或浏览器属性来应用不同的CSS样式。通过媒体查询，可以根据屏幕尺寸、设备像素比、设备方向等属性，应用不同的CSS规则。媒体查询通常写在CSS文件的末尾，以@media规则的形式出现。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">视口（Viewport）：指用户正在浏览的那个区域，不同设备的视口大小不同。在响应式设计中，通过meta标签的viewport属性来控制网页的缩放和显示区域大小。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">弹性布局（Flexbox）：是一种新的布局方式，它提供了灵活的排列方式，可以轻松地实现不同屏幕尺寸下的自适应布局。通过flex容器和flex项的定义，可以控制网页的水平和垂直方向上的布局方式。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">栅格系统（Grid System）：是一种基于栅格布局的设计方式，通过将网页划分为等宽的列和行，使得网页可以自适应地适应不同屏幕尺寸。栅格系统通常由一个容器和若干个栅格组成，栅格的大小和位置可以通过CSS来控制。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">图片和媒体查询：在响应式设计中，图片通常是一个比较大的问题。通过CSS的媒体查询，可以根据不同设备的屏幕大小来应用不同尺寸的图片。此外，还可以通过CSS3的新属性object-fit来控制图片的缩放方式，以适应不同屏幕尺寸。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以上是一些基础知识点，响应式布局还有很多细节需要注意。在实际开发中，需要结合具体的设计需求和技术实现来进行布局。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">

css中的使用Grid网格布局介绍

前端
13367 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Grid布局是一种二维网格布局系统，可以让开发者更加方便地对网页布局进行控制，实现各种复杂的布局效果。Grid布局的基本思想是将网页分成一个个网格，然后在每个网格中放置内容。通过对网格的定义和布局，开发者可以轻松地实现各种复杂的布局需求。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Grid布局的核心是定义网格，通过定义行和列的数量和宽度，可以将网页划分成多个网格，然后在网格中放置内容。在定义网格时，可以使用各种单位，包括像素、百分比、fr等。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Grid布局还提供了强大的对齐和布局控制功能。通过定义网格的大小和位置，以及网格内部元素的对齐方式，可以轻松地实现各种布局效果。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是一个简单的Grid布局示例，其中包含一个4列3行的网格，每个网格中放置了一个图片和一个标题：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false"><div class="grid-container">   <div class="item"><img src="image1.jpg"><h2>Title 1</h2></div>   <div class="item"><img src="image2.jpg"><h2>Title 2</h2></div>   <div class="item"><img src="image3.jpg"><h2>Title 3</h2></div>   <div class="item"><img src="image4.jpg"><h2>Title 4</h2></div>   <div class="item"><img src="image5.jpg"><h2>Title 5</h2></div>   <div class="item"><img src="image6.jpg"><h2>Title 6</h2></div> </div> .grid-container {   display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: auto auto auto;   grid-gap: 10px; } .item {   border: 1px solid #ccc;   padding: 10px;   text-align: center; } .item img {   width: 100%;   height: auto;   display: block; }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上述示例中，通过设置.grid-container元素的display属性为grid，将其变成一个网格容器。通过设置grid-template-columns和grid-template-rows属性，定义了网格的列数、行数和宽度，通过grid-gap属性定义了网格之间的间距。在.item元素中，通过设置边框、内边距、文字对齐等样式，来控制网格中内容的布局和样式。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">需要注意的是，Grid布局是一项比较新的CSS特性，支持度还不够普及，因此在使用Grid布局时需要注意兼容性问题。同时，由于Grid布局的强大功能和灵活性，学习成本相对较高，需要花费一定的时间和精力去掌握。

javascript移动端常用的touch事件

前端
15359 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在移动端开发中，touch事件是非常常用的一种事件类型，可以用来处理用户在移动设备上的触摸行为，包括手指触摸、滑动、拖拽等。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是几个常用的touch事件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchstart：当手指触摸屏幕时触发，通常用于记录触摸的起始位置。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchmove：当手指在屏幕上滑动时触发，通常用于实现拖拽、滑动等操作。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchend：当手指从屏幕上离开时触发，通常用于记录触摸的结束位置并进行相应的处理。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">touchcancel：当触摸事件被系统取消时触发，例如在触摸过程中突然来了一个电话，触摸事件就会被取消。 <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">除了上述几个基本的touch事件，还有一些特殊的事件，例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchenter：当手指移动到某个元素上时触发。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchleave：当手指移出某个元素时触发。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">touchcancel：当触摸事件被系统取消时触发，例如在触摸过程中突然来了一个电话，触摸事件就会被取消。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在处理touch事件时，通常需要使用touch对象来获取相关信息，例如触摸点的坐标、触摸点所在的元素等。另外，还需要注意移动设备上的触摸事件与鼠标事件存在一些差异，例如不能使用鼠标事件中的clientX、clientY属性来获取触摸点的坐标，而需要使用touch事件中的clientX、clientY属性来获取。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">示例代码：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">// 绑定touchstart事件 element.addEventListener('touchstart', function(event) {   // 获取第一个触摸点的坐标   var touch = event.touches[0];   var x = touch.clientX;   var y = touch.clientY; }, false); // 绑定touchmove事件 element.addEventListener('touchmove', function(event) {   // 阻止默认事件   event.preventDefault();   // 获取第一个触摸点的坐标   var touch = event.touches[0];   var x = touch.clientX;   var y = touch.clientY; }, false); // 绑定touchend事件 element.addEventListener('touchend', function(event) {   // 获取最后一个触摸点的坐标   var touch = event.changedTouches[event.changedTouches.length - 1];   var x = touch.clientX;   var y = touch.clientY; }, false);</pre>

移动端常用的rem和vw适配方案

前端
12664 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在移动端，由于不同的设备具有不同的屏幕尺寸和像素密度，为了保证页面的适配性，通常使用rem和vw适配方案。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">rem适配方案<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">rem是相对于根元素（即html元素）字体大小的单位。通过设置根元素的字体大小，可以实现页面中其他元素的适配。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用rem适配方案的步骤如下：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">1）在html元素中设置字体大小，一般为基准字体大小16px；<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">2）将设计稿中的像素值转换为rem值，并设置给相应的元素。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">例如，设计稿中一个按钮的宽度为100px，可以通过下面的计算方式得到对应的rem值：<pre class="brush:as3;toolbar:false">100px / 16 = 6.25rem</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">然后将该值设置给按钮的宽度即可。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">vw适配方案<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">vw是相对于视口宽度的单位，1vw等于视口宽度的1%。通过设置元素的宽度、高度、边距等属性为vw单位，可以实现页面中元素的适配。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用vw适配方案的步骤如下：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">1）计算出设计稿中元素的宽度所占视口宽度的比例；<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">2）将比例转换为vw值，并设置给相应的元素。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">例如，设计稿中一个按钮的宽度为100px，视口宽度为375px，可以通过下面的计算方式得到对应的vw值：<pre class="brush:as3;toolbar:false">100px / 375px * 100% = 26.67vw</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">然后将该值设置给按钮的宽度即可。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">需要注意的是，vw适配方案不适用于某些元素的高度计算，例如表格的行高。此外，vw适配方案在iOS8及以下版本的系统上可能会出现一些兼容性问题，需要进行兼容性处理。

javascriptFlex布局介绍

前端
12488 阅读

Flex 布局是一种 CSS3 弹性盒子布局模型，可以实现在容器中快速、灵活地对子元素进行布局和定位，特别适用于移动端和响应式设计。它的主要思想是：将容器（父元素）设置为一个弹性盒子（flex container），将子元素（flex item）设置为弹性项目（flex item），通过调整弹性项目的属性来实现灵活的布局。 Flex 布局有两个关键概念：主轴和交叉轴。主轴是弹性盒子的主要方向，可以是水平方向（row）或垂直方向（column），默认为水平方向。交叉轴则是与主轴垂直的方向，其方向由主轴方向决定。 以下是一些常用的 Flex 属性和属性值： display: flex; 设置容器为弹性盒子。 flex-direction: row/column; 设置主轴方向为水平或垂直。 flex-wrap: nowrap/wrap/wrap-reverse; 设置是否换行，nowrap 表示不换行，wrap 表示换行，wrap-reverse 表示反向换行。 justify-content: flex-start/flex-end/center/space-between/space-around; 设置主轴上的对齐方式，flex-start 表示靠近主轴起点对齐，flex-end 表示靠近主轴终点对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示均匀分布对齐。 align-items: flex-start/flex-end/center/baseline/stretch; 设置交叉轴上的对齐方式，flex-start 表示靠近交叉轴起点对齐，flex-end 表示靠近交叉轴终点对齐，center 表示居中对齐，baseline 表示基线对齐，stretch 表示拉伸对齐。 align-content: flex-start/flex-end/center/space-between/space-around/stretch; 设置多行项目在交叉轴上的对齐方式，flex-start 表示靠近交叉轴起点对齐，flex-end 表示靠近交叉轴终点对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示均匀分布对齐，stretch 表示拉伸对齐。 flex-grow: 0/1; 设置弹性项目的放大比例，默认为 0，表示不放大，1 表示放大。 flex-shrink: 0/1; 设置弹性项目的缩小比例，默认为 1，表示可以缩小。

javascript使用原生Ajax请求流程与细节

前端
18348 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">原生的 Ajax（Asynchronous JavaScript and XML）请求是一种通过 JavaScript 进行异步数据交互的技术，能够实现在不刷新整个页面的情况下更新部分数据，提高用户体验。下面是一个基本的原生 Ajax 请求流程：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建 XMLHttpRequest 对象<pre class="brush:as3;toolbar:false">var xhr = new XMLHttpRequest();</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">设置请求的方法、URL、是否异步等参数<pre class="brush:as3;toolbar:false">xhr.open('GET', 'http://example.com/api/data', true); 设置请求头</pre><pre class="brush:as3;toolbar:false">xhr.setRequestHeader('Content-Type', 'application/json');</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">设置请求成功和失败的回调函数<pre class="brush:as3;toolbar:false">xhr.onload = function() {   if (xhr.status === 200) {     console.log(xhr.response);   } else {     console.error('Error: ' + xhr.status);   } }; xhr.onerror = function() {   console.error('Error: Network request failed'); };</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">发送请求<pre class="brush:as3;toolbar:false">xhr.send();</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在发送请求时，可以传入一个参数，例如：<pre class="brush:as3;toolbar:false">xhr.send(JSON.stringify(data));</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">其中，data 是一个 JavaScript 对象，通过 JSON.stringify() 方法将其转换为 JSON 格式的字符串。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在实际使用中，还需要注意以下几点细节：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">如果使用的是 POST 方法，需要在 xhr.send() 方法中传入请求体数据。</li><li><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">如果需要设置超时时间，可以使用 xhr.timeout 属性。</li><li><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">如果需要取消请求，可以使用 xhr.abort() 方法。</li><li><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">如果需要发送带有认证信息的请求，需要使用 xhr.withCredentials = true 属性。</li></ul><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以上是基本的原生 Ajax 请求流程和一些细节，可以根据实际需求进行相应的修改和扩展。现在大部分前端框架都提供了自己封装的 Ajax 请求方法，使用起来更加方便快捷。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">