- 博客(64)
- 收藏
- 关注
RSS订阅原创 前端基础面试题
大家好呀，马上要找工作了，复习了几天学过的知识点，今天来整理一下刷过的面试题，顺便分享给大家，希望能对你们有所帮助。好了，话不多说，直接开始吧！目录1.cookie sessionStorage localStorage 区别2.同源策略3.JS数据类型有哪些4.闭包5.js变量、函数声明的提升6.== 和 ===的区别7.跨域是什么？如何解决跨域问题？8.BFC9.清除浮动的方式10.JavaScript有几种方法判断变量的类型11.样式优先级的规则12.JS实现异步的方法13.数组去重14.null
2022-05-29 17:21:25
207
原创 vue组件中数据共享——vuex
目录vuex是什么？使用vuex统一管理状态的好处什么样的数据适合存储到vuex中安装vuex使用vuexvuex是什么？vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间的数据共享。上图中所示的分别为传统组件之间传值和使用vuex传值的不同（图画的有点丑，将就点看吧（#￣▽￣#））使用vuex统一管理状态的好处（1）能够在vuex中集中管理共享的数据，易于开法和后期的维护（2）能够高效的实现组件之间的数据共享，提高开发的效率（3）存储在vuex中的数据都是响应式的，能够实时保
2022-05-08 20:15:43
1509
原创 vue导航栏点击变色（刷新不变色）
效果图导航栏代码：<template> <div> <div class="nav"> <div class="nav_cen" ref="navs"> <span @click="Navigation(item.name)" :class="jobs == item.name ? 'nav_text' : ''" v-for="(item,i) in navigation"><router-li
2021-12-24 10:38:55
874
原创 vue中使用swiper
首先，下载安装swipernpm i swiper@5.4.5为什么用5.4.5呢，我也不知道，听同事说有几个版本有bug，这个他们用的还可以，所以我也用了 > . <main.js中引入// swiperimport VueAwesomeSwiper from "vue-awesome-swiper";import "swiper/css/swiper.css";Vue.use(VueAwesomeSwiper /* { default options with global
2021-12-23 15:58:09
7970
7
原创 vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Ori
每天一个报错，个各不相同。看见下面的这行报错是不是感觉跟熟悉？没错，vue的跨域问题，记录一下我的解决方法并分享给大家 ~ . ~Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.那就直接上代码？module.exports = { devServer: {
2021-12-23 15:41:15
10329
1
原创 vue(二)指令、过滤器
指令指令在vue中，都是以v-开头的，指令写在标签的属性中，可以写不同的指令完成不同的功能。代码如下：<div id = "app"> //1.v-pre 跳过该元素的渲染过程，显示最初的{{}} <div v-pre> {{ name }} </div> //2.v-cloak 没具体含义，但可以用来操作内部过程 <div v-cloak> {{ name }} </div> //3.v-once 只会被渲染一次 <
2020-06-23 19:11:53
223
原创 vue（一）渐进式javascript框架、库和框架的区别
渐进式、库和框架的区别什么是渐进式？什么是库和框架？首先，我们来看看什么是库。库：相当于对方法的重新定义，简化写法，一系列插件的集合。框架：可以完成大型的（完整的）项目的时候，从前台的ui到后面数据的渲染。既然聊到库和框架了，那再来说说插件，什么是插件呢？插件：就是一个非常小的功能或者模块。mvvm和mvcvue（mvvm框架），其中开发模式（mvc）中modle为数据，view为视图，con为控制器（充当数据和视图的桥梁）mvvm中，也有modle，view和view-model。主
2020-06-22 17:13:42
313
原创 react（三）组件、事件
组件的状态组件都可以自行的维护自己的数据，尽量在内组件中使用状态：本质上就是类组件的一个属性，就是一个对象状态的初始化
2020-06-18 14:42:21
204
原创 react（二）起步及组件
什么是jsx？1.FAcebook起草的js扩展语法2.本质上就是一个js对象，会被babel编译，最终全部会被转换成React.createElement3.每个jsx的表达式，有且只有一个根节点4.jsx遵循xml规范，xml规范必须有结束（闭合标签）首先，我们先来看一段代码：import React from 'react';import ReactDOM from 'react-dom';const a = 1;const b = 2;const div = (<div
2020-06-16 20:08:07
126
原创 react（一）
React 特点1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码
2020-06-11 19:32:28
150
原创 webpack css文件处理
常见的loader1.file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件2.url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去3.source-map-loader：加载额外的 Source Map 文件，以方便断点调试4.image-loader：加载并且压缩图片文件5.babel-loader：把 ES6 转换成 ES56.css-loader：加载 CSS，支持模块化、压
2020-06-02 21:02:44
234
原创 ssr服务端渲染
为什么要使用服务端渲染？使用服务端渲染的目的是为了能够更加方便的让小蜘蛛去爬，爬到的关键字越多，网站就会越靠前。为啥关键字越多，网站越靠前呢？这个就要说到SEO了，SEO（Search Engine Optimization）又被称为搜索引擎优化，是一种利用搜索引擎的规则来提高网站在搜索引擎中的自然排名。使用服务端渲染的好处是前后端可以共享代码，前后端路由可以统一处理。当然，你如果给百度钱来提升排名，那就当我没说 ￣▽￣安装首先，安装express，用于配置服务端npm install expres
2020-06-02 21:00:38
343
原创 webpack一些其他配置
context基本目录，一个绝对路径，用于从配置中解析入口点和加载器。默认情况下，使用当前目录，但是建议在配置中传递一个值。这使您的配置独立于CWD（当前工作目录）。context : path.resolve(__dirname,"src")outputoutput : { library : "aaa", libraryTarget : "this" },library :打包的结果，会将立即执行函数的执行结果赋值给aaalibraryTarget :配合library更加精
2020-05-28 20:48:13
244
原创 webpack（三）loader
loaderloader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！loader相当于一个模块转换器，用于将模块的原内容按照需求转换成新
2020-05-28 19:48:10
154
原创 webpack（二）入口和出口
mode模式mode模式有两个值，分别是production、development。production是生产模式，development是开发模式，默认为production。development 模式下，将侧重于功能调试和优化开发体验，包含如下内容：1.浏览器调试工具2.开发阶段的详细错误日志和提示3.快速和优化的增量构建机制production 模式下，将侧重于模块体积优化和线上部署：1.开启所有的优化代码2.更小的 bundle 大小3.去除掉只在开发阶段运行的代码4.Sco
2020-05-28 19:19:56
205
原创 webpack（一）安装和使用
webpack的安装和使用1.webpack是什么webpack是一个基于模块化的打包工具，把一切都视为模块。它是通过开发时态的一个入口模块为起点，分析出里面的依赖关系，然后通过打包和压缩最终形成一个运行时态的文件。2.webpack的特点（1）为前端工程化而生（2）简单易用（3）生态圈强大（4）基于模块化和node.js3.webpack的安装webpack：核心包 包含webpack构建过程中所有需要用到的apinpm install webpack --save-devwebp
2020-05-28 17:27:44
246
原创 node
http模块var http = require("http");引入http模块var fs = require("fs");引入fs文件模块var server = http.createServer();创建http服务server.on("request",(req,res)=>{//监听请求 if(req.url == "/index.html"){ //当地址为index。html时 fs.readFile('index.html',(err,data)=&
2020-05-25 09:46:18
355
原创 es6（二）
字符串的解构赋值const[q,w,e,r,d,f] = "abcdef";如上，就是字符串的解构赋值，因为字符串被解构成为一个类似数组的对象。变量的解构赋值（1）交换变量的值let x = 1;let y = 2;[x,y] = [y,x];console.log(y); //x = 2,y = 1;（2）从函数返回多个值/ 返回一个数组 function exa...
2020-03-27 16:39:29
128
原创 es6（一）
es6简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript和javascript的关系前者是后者的规格，后者是前者的一种实现。好了，简单的介绍了一下es6，至于其中的历史关系，请自行查阅，在这里就不多做赘述了。接下来我们来进入正题。...
2020-03-27 15:07:43
163
原创 ajax
ajaxAjax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，从而创建快速动态网页的技术。ajax的优缺点(1).AJAX的优点<1>.无刷新更新数据。<2>.异步与服务器通信。<3>.前端和后端负载平衡。<...
2020-03-15 14:41:48
177
原创 js时间线
时间线javascript 单线程，解释型，弱类型时间线的步骤1.创建document对象，开始解析web页面、html元素以及文本内容，之后添加Element对象和Text节点到文档中。Document.readyState = “loading”。2.（1）遇到外部css，创建线程加载，并继续解析文档。（2）遇到script外部js，（没有设置async ， defer ）等待j...
2020-03-10 16:59:27
827
转载 jquery常用选择器
一、基本选择器id选择器，如选择id为btn的元素$("#btn")2.class选择器，如选择class为light的元素$(".class")3.标签选择器，如选择名字为input的所有元素$(“input”)5.选择所有元素$("*")6.其他选择器，如选择标签名为span和id为one的所有元素$(“span,#one”)二、层次选择器1.选择body中所有的d...
2020-01-15 09:30:42
802
1
原创 bootstrap（一）
响应式 Web 设计工作原理Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。移动设备优...
2020-01-14 20:01:15
117
原创 响应式布局
网页布局网页布局有很多种方式，一般分为以下几个部分、头部区域、菜单导航区域、内容区域、底部区域。如下图：头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的logo。菜单导航区域包含了一些超链接，可以引导用户点击浏览其它页面。内容区域分为三种形式：1、1列：一般用于移动端；2、2列：一般用于平板设备；3、3列：一般用于pc端。底部区域在网页的最下方，一般是包含版权信息和联系...
2020-01-14 19:20:17
184
原创 css之3D效果（二）
1、平移平移有三个方法，分别为：translateX();translateY();translateZ();它平移的距离是相对于自身平移的，还可以将这三个方法写在一起reanslate3D(x,y,z,px);用一个方法来代替，效果是一样的，好了，我们先来看代码：<!DOCTYPE html><html lang="en"><head> &l...
2020-01-13 21:01:10
152
原创 css3之3D效果
1、旋转3D旋转和2D不同的是2D只是平面上的旋转，3D看起来会更加立体些，这里介绍几个方法：1、rotateX（deg）2、rotateY（deg）3、rotateZ（deg）这三个方法的意思分别为围绕x轴旋转、围绕y轴旋转、围绕z轴旋转，在3D旋转中，会连通坐标轴一起旋转，旋转的顺序不一样时，角度相同也会有很大的差别。这三个方法还可以写成一个，totate3D（x，y，z，deg），...
2020-01-13 19:57:05
304
原创 css3弹性盒子
弹性盒子弹性盒子是css3中的一种新的布局模式，用来适应不同屏幕大小以及设备类型是确保元素拥有恰当的行为的布局方式。引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器和弹性子元素组成，弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。包含了一个或者多个子元素。以下为弹性盒子中的属性...
2020-01-12 20:58:39
157
原创 css3过渡及动画
过渡在css3中，我们为了添加某种效果可以从一种样式转变到另一种的时候，不需要再和以前一样，为该属性写js，只需要在css中添加属性就可以实现。过渡的意识就是让一个元素从一种样式转逐渐变到另一种样式，可以看见元素转变的过程，让人不会感觉到那么突兀。想要实现这一点，必须规定两项类容：1、指定要添加效果的css属性2、指定效果的持续时间请看如下例子：<!DOCTYPE html>...
2020-01-11 18:57:32
134
原创 拖放
拖放拖放是一种常见的功能，在很多网站上都有应用，比如验证码，就可以使用拖放来完成，相必很多人都见过，今天我们就来看看拖放到底是怎么完成的。在HTML5中，拖放是标准的一部分，任何元素都能拖放，想要实现拖放，我们至少要了解这几个属性：1、ondragstartondragstart这个属性表示拖动元素时，会发生什么；2、ondragoverondragover这个属性表示在何处放置被拖动...
2020-01-09 20:56:17
162
原创 音频
连接到上一篇博客“视屏”音频在上一篇博客我们谈到了视屏这个元素，没看的可以点击上面链接。其实视频和音频相差不多，基本上没有太大的区别，只要掌握了一种，另一种学起来会更简单，好了。话不多说，我们先来看第一种音频元素embed使用embed元素时需要注意的是它在HTML4中是无效的，，因为页面无法通过验证embed 标签定义了一个容器，用来嵌套外部应用或者互动程序，它的属性有：height...
2020-01-08 20:45:52
262
原创 视屏
视屏Web站点上的视屏一直到现在为止，任然不存在一项只在网页上显示视屏的标准，大多数视屏是通过插件来显示的。但是，并不是所有浏览器都拥有同样的插件。HTML5规定了一种通过video来包含视屏的标准方法。video元素提供了播放、暂停、音量控件来控制视频，它支持三种视屏格式，分别是MP4、WebM、Oggvideo视频中的属性autoplay 视频在就绪后马上播放。controls ...
2020-01-08 19:39:38
331
原创 canvas编写飞机大战
整体分析1、定义游戏状态（1）游戏欢迎状态 START（2）游戏加载状态 LOADING（3）游戏运行状态 RUNNING（4）游戏暂停状态 PAUSE（5）游戏结束状态 GAMEOVER2、定义游戏得分 score = 03、定义我方飞机生命值 life = 34、定义游戏开关 State = 0代码实现首先，我们先来编写背景，背景采用的思维方法是和和轮播图差不多的，就相...
2019-12-21 14:04:00
668
原创 BOM 封装网址以及检查插件
封装网址、检查插件在写封装网址的代码之前，我们应该对BOM有一些基本的了解。学习BOM，我们应该知道1、document DOM2、event 事件对象3、history 浏览器的历史记录4、locatian 窗口的url 地址栏信息5、screen 地址栏信息6、navigator 浏览器的配置信息其中，history是封装当前窗口浏览过的历史记录栈，...
2019-12-05 19:55:46
416
1
原创 js实现全选、div的移动
全选全选这个功能在很多地方都可以看见，几乎已经是表格所必备的功能之一了，那么今天我们就一起来看看，如何只用js来实现全选功能吧。首先，我们先来创建一个HTML的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</...
2019-12-02 15:52:24
561
原创 javascript实现增删改查
增删改查增删改查对于学前端的来说，可以说是必修课，在很多的网站中都会遇见这种功能，那么今天，我们就来看看如何使用js来实现正删改查。首先，我们先模拟一个后台数据，如下：var data = [ { "0":"李白", "1":"男", "2":"12", "3":"123456", "4":"我是李白" }, { "0":"小乔", "1":"女", "...
2019-11-30 17:22:04
1897
4
原创 DOM
在介绍DOM之前，我们首先来看一下下面的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM第一次体验</title></head><body> <div></div...
2019-11-23 10:13:32
114
原创 javascript实现2048小游戏
2048这种小游戏我相信大多数人都应该玩过，是一款非常经典的益智类小游戏。那么接下来，我们就来看看这款游戏是怎么实现的，如何才能写出这样的游戏。1、分析界面构成观察2048游戏的界面可以看出，整体是一个大盒子包裹着，在其中有4x4的小方格，每个方格还有间距，随着移动，还会出现不同的小方格，不同的数字对应的方格背景颜色也不同。当游戏结束时还会弹出一个遮罩层，阻止用户继续游戏。基本上界面上的就这...
2019-11-20 20:42:54
1353
原创 闭包
1、什么是闭包？闭包有何作用？大家在运行完函数后，通常情况下函数所产生的作用域AO都会随着函数运行的结束而被垃圾回收器所回收，避免占用内存，但垃圾回收器回收的标准是改作用域已没有和它相连接其它作用域，如果还存在着其它的链接，那么垃圾回收器就不会将改作用域回收。然而正是因为这一原因，导致某些特殊的函数在运行完后依然会存有作用域，这种情况就称之为闭包。当出现闭包时，你后面的程序在运行时就可能出现各种...
2019-11-12 19:53:23
108
原创 函数中的预编译及作用域
1、预编译是什么?每个函数在运行之前都会将函数进行预编译，目的是用来进行初始化相关操作。简单来说，就是讲var声明的变量提前，function声明的函数提前，都放入一个作用域中，我们称之为Activation Object（简称AO）。既然函数体内的变量及函数可以提前进行预编译，那么，函数体外面的呢？答案是肯定的。在函数体外面将提前的变量及函数同样也放入一个作用域中，我们将它称之为Global ...
2019-11-11 20:23:27
248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人