- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 移动端适配(转载)
移动端适配的重新思考1 移动端适配就是用rem或vw?并不是所有场景都适合用*rem或vw*进行适配。vw和rem适配的本质是等比例缩放，让页面在不同屏幕尺寸下有类似于矢量图片缩放的效果，保证了页面元素之间的尺寸缩放比例和位置。这两种适配方案适合视觉组件种类比较多，视觉设计对元素位置的相对关系依赖较强的移动端页面，基本上大部分页面都可以用着两种方案进行适配。但对于文本内容较多，我们希望引导用户沉浸在更多的内容而不是更大的内容的，这种等比例缩放的方案并不能满足要求，我推荐直接使用px结合
2021-11-22 00:14:38
899
原创 typescript
编译TS安装tsc指令：npm install typescript -g 安装完成，查看版本号：tsc -v在开发目录中，执行"tsc 文件名"指令，即可编译ts文件监听并发布 1 通过tsc -init创建tsconfig,json配置文件 outDir定义js文件发布位置 2 执行tsc -w监听并发布文件注：后面会使用工程化工具来自动化的编译ES6与TS(webpack)数据类型数据类型 在ts中所有的数据都要指明类型 在js中食物数据类型，ts中都支持，并且还扩展了:a
2021-03-31 23:03:31
162
1
原创 前端面试题
开放题目必考：你遇到最难的问题是怎样的？你在团队的突出贡献是什么？最近在关注什么新技术有没有看什么源码，看了后有什么记忆深刻的地方，有什么收获刁钻题目代码代码(a ==1 && a== 2 && a==3) 可能为 true 吗？超纲题JS 垃圾回收机制链接链接Eventloop 说一下链接个性化题目PWAecharts.js / d3.jsthree.jsflutterSSR...
2021-02-24 16:37:01
137
原创 webpack面试题
必考：有哪些常见 loader 和 plugin，你用过哪些？英语题：loader 和 plugin 的区别是什么？必考：如何按需加载代码？必考：如何提高构建速度？转义出的文件过大怎么办？上面五题请看这个不错的参考：https://zhuanlan.zhihu.com/p/44438844链接...
2021-02-24 16:28:27
81
原创 vue面试题
必考：watch 和 computed 和 methods 区别是什么？链接必考：Vue 有哪些生命周期钩子函数？分别有什么用？链接必考：Vue 如何实现组件间通信？链接必考：Vue 数据响应式怎么做到的？链接必考：Vue.set 是做什么用的？链接链接Vuex 你怎么用的？链接链接链接VueRouter 你怎么用的？链接路由守卫是什么？链接...
2021-02-24 16:07:13
67
原创 vueRouter
前端路由的实现由于hash的改变不会向服务器发送新的请求，因此我们可以监听hash的变化（通过hashchange事件），根据不同的hash渲染不同的页面（通过location.hash获取当前的hash值） 这种不向服务器端发送请求，而实现切换页面的功能，就是单页面应用程序(SPA:single page application) 单页面应用程序就是基于前端的hash路由实现的，特点是快Vue路由vue提供了路由模块：vue-router使用路由分成六步 第一步 安装路由：Vue.use方
2021-02-24 16:05:34
100
原创 vuex的
Vuexvuex是一个解决组件之间通信，实现组件之间共享数据的框架参考了flux思想实现的框架，也实现了单一数据源，数据单向流动等特征 单一数据源：一个应用程序中，只能有一个store对象（用来存储数据） 数据单向流动：数据始终朝着一个方向传递（形成环路）优势：应用中可能有很多环，但是彼此之间没有联系，所以在一个环中添加一个成员或者删除一个成员，只影响当前的环，因此我们可以将系统中的所有环抽象成一个环vuex由三部分组成： action 消息对象 state 用来存储数据的 views 组
2021-02-24 16:01:28
100
原创 http面试题
必考：HTTP 状态码知道哪些？分别什么意思？http大公司必考：HTTP 缓存有哪几种？HTTP缓存缓存：暂时存储的意思浏览器的缓存机制 当用户访问一个页面的时候，浏览器会将一部分信息保存在本地，之后再次发送同样请求的时候，则直接使用本地中的资源，这样做的好处是避免了带宽的浪费，提高了页面加载的速度缓存分为两种： 强制缓存：如果命中强制缓存，则不会发送新的请求到服务器，直接使用本地中的资源 协商缓存：一旦命中协商缓存，会照样发送请求到服务器，询问“服务器有没有数据更新”，如果..
2021-02-24 15:33:32
61
原创 js面试题
必考：ES 6 语法知道哪些，分别怎么用？举例（let const class 展开运算等等）ES5ES6必考 Promise、Promise.all、Promise.race 分别怎么用？Promise必考：手写函数防抖和函数节流防抖和节流必考：手写AJAXajax必考：这段代码里的 this 是什么？1 fn()` this => window/global2 obj.fn() this => obj3 fn.call(xx) this =..
2021-02-23 23:12:37
165
原创 ajax
ajax使用表单提交数据的时候，会刷新页面（跳转页面），为了避免跳转页面，Ajax就出现了特点：使用Ajax不仅可以与服务器中进行数据交互，还可以在不跳转页面的情况下实现局部页面更新全称：Asynchronous JavaScript And XML 异步的JS与XMLXML：可扩展标记语言，以前也是进行前后端数据交互的特点：只要具备文档声明，所有的标签都是自定义的。但是使用XML传递数据的时候，前端解析起来比较麻烦，后端生成文件也是比较麻烦，所以逐渐被json数据代替使用Ajax在IE8
2021-02-23 23:06:48
102
原创 css面试题
1 必考：两种盒模型分别说一下。1 标准盒模型：box-sizing: content-box width = content-width height = content-height2 怪异盒模型：box-sizing: border-box width = content-width + padding-width + border-width height = content-height + padding-height + border-height 优势：无论如何改动border
2021-02-13 21:21:59
100
原创 html面试题目
1 必考：你是如何理解 HTML 语义化的？用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。2 meta viewport 是做什么用的，怎么写？1 这句话的意思是让页面的布局视口的宽度等于视觉视口的宽度，此时页面元素会以设备逻辑像素宽度做为
2021-02-13 20:40:43
70
转载 vue组件name属性
转载自https://www.jb51.net/article/140702.htm我们在写vue项目的时候会遇到给组件命名这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的export default { name: 'xxx'}用处一：当项目使用keep-alive时，可搭配组件name进行缓存过滤举个例子：我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载export default { name:'Detail'
2021-01-26 10:09:08
862
原创 echarts的简单使用
1 引入官网：https://echarts.apache.org/zh/index.html可以直接下载，也可以使用npm下载下载js文件之后引入2 使用<body> <!-- 准备一个容器div放置图表，会按照容器的大小绘图 --> <div id="demo1" style="width: 600px;height:400px;"></div> <!-- 使用javascript绘制图表 -->
2021-01-24 20:43:38
71
原创 iconfont 图标 使用
1 可以使用在线连接，也可以下载到本地2 在线连接在assets下的font文件夹下新建iconfont.css文件夹，引入在线链继在main.js文件中引入iconfont.css文件3 下载文件下载到本地后，把压缩包里的css文件拖到assets下的font文件夹下，然后在main.js中引入4使用<i class="iconfont icon-shouqi"></i>写上图标对应的类名就可以使用了注意：每次更新图标的时候都要更换在线连接或者重新下
2021-01-24 19:31:23
282
原创 前端权限控制
1 前端权限控制思路1.1菜单的控制 在登录请求中，会得到权限数据。前端根据权限数据，展示对应的菜单，点击菜单，才能查看相关的界面1.2界面的控制 如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面 如果用户已经登录，可是手动敲入非权限内的地址，则需要跳转到404界面1.3按钮的控制 在某个菜单的界面中，还得根据权限数据，展示出可进行操作的按钮，比如删除，修改，增加1.4请求和响应控制 如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成开启状态
2021-01-22 22:52:26
6163
转载 vuex存储和本地存储(localstorage、sessionstorage)的区别
转载自：https://www.cnblogs.com/jiajialove/p/12606695.html转载自：https://www.cnblogs.com/leijee/p/7506301.html区别及适用场景：1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供
2021-01-22 20:49:16
2591
原创 flex布局
1 弹性盒模型Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。》弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列；》弹性布局包括两个方面：弹性盒与弹性项（弹性子元素）采用Flex布局的元素，称为弹性容器（flex container），简称“弹性盒”它的所有子元素自动成为容器成员，成为弹性项目（flex item），简称“弹性项”将一个盒子设置为弹性盒：》 display:flex;》 或者display:inline-flex;
2021-01-21 16:36:48
97
原创 vue路径
1 ~ resolve: { extensions: ['.js', '.vue'], alias: { 'vue': 'vue/dist/vue.esm.js', 'components': resolve('src/components'), 'common': resolve('src/common'), 'config': resolve('src/config'),
2021-01-21 12:52:38
271
原创 css背景属性 css background
1 背景属性background-color背景颜色在标准盒模型中，背景色会应用给整个内容区域（会应用到边框上）：width+padding2+border2background-image背景图片，设置的图片是从padding开始渲染的，并且从border开始平铺渲染背景色从border开始渲染背景图片从padding开始渲染，并且从border开始平铺渲染。background-repeat设置背景平铺，x水平方向，y垂直方向：》 no-repeat不重复平铺》 repeat重复平铺
2021-01-21 11:36:09
149
转载 mutation-type.js文件
原回答链接：https://www.zhihu.com/question/58164683/answer/285394955使用mutation-types.js的话是为了方便管理,想一下，一大堆的功能模块混合在一起，那得是多糟糕啊。方便管理的demo如下:// mutation-types.jsexport const INCREASE = 'INCREASE'// mutations.jsimport { INCREASE } from './mutation-types'export d
2021-01-20 22:29:55
976
原创 vue mock.js mock数据
使用mockjs模拟数据1 下载npm install mockjs2 使用1 在api文件夹下新建mock.js文件import Mock from 'mockjs';// 为了模拟真实，设置请求延迟Mock.setup({ // 1s之后返回 timeout: 1000})// 匹配路径返回数据// 除了可以使用字符串匹配路径，还可以使用正则匹配路径// Mock.mock('/api/user', {// username: 'xiaomi
2021-01-20 21:45:07
133
原创 vue-新建项目1
使用vue create新建项目之后，要封装一下axios和请求响应劫持1 新建config文件夹，然后新建index.js文件，写配置config / index.jsexport default { title: 'demo', baseUrl: { dev: 'http://localhost:3000', // 开发的时候后台接口的地址 pro: '' // 上线产品发布之后，后台接口的地址 }}2 然后新建api文件夹，然后
2021-01-20 21:04:24
83
原创 promise async await
首先定义一个函数let func1 = () => new Promise((resolve, reject) => setTimeout(() => resolve(12345), 1000))函数func1执行的时候，会返回一个promise对象let func1 = () => new Promise((resolve, reject) => setTimeout(() => resolve(12345), 1000))let result = fun.
2021-01-20 16:57:42
151
转载 npm install
转载自(https://www.cnblogs.com/yetiezhu/p/12813532.html)转载自(https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html)这里是引用1 npm install 安装某个指定的版本在npm中安装固定的版本号package，只需要在其后加 ‘@版本号’npm install --save [email protected] npm更新指定的组件1、例如：react-ro
2021-01-19 19:50:35
642
原创 ssr服务器端渲染
1 SSR全称：server side render（服务器端渲染），让我们可以在服务器端渲染应用程序前端渲染问题：1 白屏时间长，影响用户体验2 不利于搜索引擎优化（SEO）所以我们要在服务器端渲染应用程序服务器端渲染：vue为服务器端渲染提供了模板–vue-server-render该模块提供了createRenderer方法，来创建渲染器渲染器提供了renderToString方法，渲染应用程序组件渲染器实现了promise规范，因此可以通过then方法监听成功，可以通过cache
2021-01-19 18:47:01
358
原创 事件委托
事件委托对于每一个元素我们都要绑定一个事件，这样对于资源开销很大，对于每一个类元素都要for循环遍历一次，开发成本高，所以可以用事件委托来解决上面的问题事件委托：将所有元素的事件绑定委托给同一个父元素，根据事件冒泡捕获机制，可以在父元素绑定事件中获取的触发事件的这个元素，根据这个元素具有的某类特征（例如元素名称，元素id，元素类，元素属性等待）做不同的处理，实现事件从父元素到被委托的元素传递，其特点：减少事件数量预言未来元素：新增的元素也可以绑定事件避免内存外泄：通常创建一个对象需要占用一些内存
2021-01-19 12:20:14
1062
原创 观察者模式，发布订阅者模式
1 观察者模式定义：观察者模式，又叫发布订阅者模式，又叫消息系统，又叫消息机制，又叫自定义事件，解决主体与观察者之间的耦合问题。观察者模式是一个行为型设计模式特点：1 解决的是耦合问题（类与类之间，对象之间，类与对象之间，模块之间）2 对于任何一个观察者来说，其它观察者的改变不会影响自身3 对于任何一个对象来说，既可以是观察者，也可以是被观察者如：jQuery中的观察者模式。$.CallBack()方法执行的结果得到一个观察者对象，观察者对象有一个方法叫add，用来订阅消息的。观察对象有一个
2021-01-19 11:29:39
126
原创 单例模式
1 单例模式定义：是能被实例化一次的类或者对象（只能存在一个）特点：只允许实例化一次的对象类对于十分复杂的对象类，往往可以节省资源占用通常也被用来管理命名空间作用：管理命名空间，管理数据，方法的存储应用：一些代码库中命名空间就是通过单例模式实现的管理数据的存储，例如模拟静态变量 <script> // 定义，只能实例化一次 // 有时候不允许外界访问 // 放在闭包中 var single = (fun
2021-01-19 11:20:11
72
1
原创 vue组件通信
1 父组件向子组件通信父组件向子组件通信就是将父组件的数据，方法传递给子组件需要两步：第一步 在父组件模板中，为子组件元素传递数据 属性值默认是字符串，想传递变量或者方法，要使用v-bind指令动态传递 命名规范：字母小写，横线分割单词 第二步 在子组件中，接收数据或者方法 在props属性中接收，有两种接收方式 第一种 属性值是数组，每一个成员代表一个接收的属性名称 第二种 属性值是对象 key表示接收的属性名称 value有三种形式： 可以是类型的构造函
2021-01-19 10:57:24
82
转载 详解Object.create(null)（转载自https://juejin.cn/post/6844903589815517192）
**（转载自https://juejin.cn/post/6844903589815517192）**Object.create()、{…}的区别先看看我们经常使用的{}创建的对象是什么样子的：var o = {a：1};console.log(o)在chrome控制台打印如下：从上图可以看到，新创建的对象继承了Object自身的方法，如hasOwnProperty、toString等，在新对象上可以直接使用。再看看使用Object.create()创建对象：var o = Obje
2021-01-19 10:39:04
581
原创 自定义事件$on, $emit, $off ,订阅消息，发布消息，注销消息
1 自定义事件vue也实现了观察者模式，提供了订阅消息，发布消息，注销消息等方法 $on(type, fn) 订阅消息方法 type:消息名称， fn:消息回调函数，参数是由$emit方法传递的 $emit(type, ...args) 发布消息方法 type:消息名称 ...args:从第二个参数开始，表示传递的数据 $off(type, fn) 注销消息方法 type:消息名称 fn:消息回调函数 组件是一个完整独立的个体，因此彼此之间数据不会共享，所以发布消息与订阅消息必
2021-01-19 10:25:46
538
原创 节流和防抖函数，函数的节流和防抖
1 基于操作的节流，防抖定义函数，绑定滚动事件var num = 0;function demo(){ console.log(++num);}// 基于操作的节流，防抖// 定义定时器句柄var timebar// 高频事件window.onscroll = function(){ // 基于操作的，在高频事件中，执行最后一次 // 将函数放在定时器中，每次触发事件，取消执行，直到最后一次，滚动事件停止的时候执行一次 clearTimeout(ti
2021-01-18 22:05:08
195
原创 jquery实现轮播图
html <div class="list"> <div class="content"> <img src="./image/1.jpg" alt=""> <img src="./image/2.jpg" alt=""> <img src="./image/3.jpg" alt=""> <img src="./image/
2021-01-18 17:52:44
83
原创 原生js实现选项卡
1 html <div id="app" class="app"> <div class="header"> <span class="choose">精选</span> <span>社会</span> <span>娱乐</span> <span>体育</span>
2021-01-18 15:33:15
241
原创 正则表达式
正则表达式正则表达式(regular expression-RegExp):是被用来匹配字符串中的字符组合的模式，是最简单的数据（字符串）验证方法，常用表单的验证 创建方法：使用正则字面量，/表达式/正则数据类型：引用数据类型，因此也提供了一些方法正则方法 exec() 用来将首次匹配到的字符串以数组方式输出，没有全局匹配 没有返回条件的将返回null test() 用于检测字符串中是否含有正则表达式匹配的字符串 返回值：含有返回true,不含返回false <
2021-01-18 09:18:50
78
原创 mysql
1 mysql命令# mysqld install 安装mysql服务 mysql服务就被注册到操作系统中# net start mysql 启动mysql服务# net stop mysql# 命令行\c取消执行# 启动客户端连接server# mysql -uroot -p# mysql -uroot -p123 -h192.168.14.12 #123是密码 192.168.。。。。是连接哪台设备上的数据库# mysql>select user();
2021-01-16 09:38:51
87
龙贝格算法,龙贝格求积公式
2018-01-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人