项目经验
关注
分享
扫一扫
文章平均质量分 76
总结项目经验
南山小舍
这个作者很懒，什么都没留下…
展开
-
echarts 3D环状饼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-19 23:11:15 · 3842 阅读 · 8 评论 -
CSS动画和JS动画对比
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下本文主要讲以下这些内容1、浏览器渲染流程2、回流和重绘3、CSS 动画4、JS 动画两者对比???? 1. 浏览器的渲染流程渲染流程主要有4个步骤解析 HTML 生成DOM 树解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree布局 Render Tree 对每个节点进原创 2021-08-31 10:35:27 · 2234 阅读 · 1 评论 -
vue实现简单移动端电商项目
在这里简单介绍下自己做的简单版电商项目技术选型vue2.x,vue-router,axios,vuex,脚手架：vue-cli 3.0UI选型：cube-ui项目简介该项目是简易的前端移动端电商项目，涵盖了首页，商品列表页，搜索页面，购物车页面，个人中心页面。当前项目采用mock数据实现简单效果显示项目搭建使用的vue-cli3.0进行搭建项目，所需框架可按照上述的需求进行安装依赖附上项目的package.json{ "name": "jdshop", "version":原创 2021-08-25 14:16:14 · 1826 阅读 · 2 评论 -
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能，其中需求是需要全屏展示，正好HTML 5中的full screen满足需求，在此记录下。HTML 5中的full screen，目前可以在除IE和opera外的浏览器中使用 ，有的时候用来做全屏API，游戏呀，等都很有用。先看常见的API element.requestFullScreen()作用：请求某个元素element全屏Document.getElementById(“myCanvas”).requestFullScreen()这里是将其中的元素ID去请求ful转载 2021-07-08 10:06:02 · 5992 阅读 · 1 评论 -
代码优化：CSS变量使用
问题背景：因业务需求，需要维护应用多种皮肤，多个业务模块下复用了很多样式，造成了代码重复率较高，老旧项目并未对样式层面进行维护，导致项目后期维护成本高，开发人员工作量大，但是效率较低。原因分析：提示：早期项目是由外协开发人员进行开发维护的，项目启动初期没有制定完善的开发规范，以及开发流程吗，导致项目越发臃肿，项目中css代码，js代码未根据业务模块或者功能模块进行划分，代码重复率，代码质量都存在较大问题。以下将介绍下我在优化css代码时进行的工作记录。解决方案：本节内容主要针对css层面进行代码优原创 2021-06-16 10:51:05 · 149 阅读 · 0 评论 -
css实现tooltip
想起在群里有位群友问过一道面试题，怎么用css实现tooltip，第一解决方案大家可能是都是用title解决，但是会是这么简单吗？面试题考察点css实现tootip,个人感觉应该考点在于对css的熟悉程度。用title来实现tootip这个是基本上能解决问题的但是样式美化就是一个小问题。我来解决的话第一解决方案就是用伪类，伪元素实现。伪类 伪元素伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来原创 2021-05-28 22:01:46 · 1241 阅读 · 0 评论 -
vue前端设置跨域(跨端口)
前端项目访问接口是8080，后台项目提供接口是8081，这种跨端口的跨域问题，前端处理方案如下原创 2021-02-24 23:55:57 · 10519 阅读 · 2 评论 -
CSS Sticky Footer 几种实现方式
本文主要介绍CSS Sticky Footer的几种实现方式，希望对大家的学习工作提供一定的参考学习价值。原创 2021-01-04 11:05:12 · 206 阅读 · 0 评论 -
前端小知识
1.JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了可原创 2020-12-29 15:58:35 · 160 阅读 · 0 评论 -
jQuery中.bind() .live() .delegate() .on()区别
简介最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊，什么时候该使用它们啊。下面本文将给大家详细介绍这四个方法之间的区别，分别对每个方法都进行了详细的介绍，话不多说，来一起看看详细的介绍：在我们深入了解这些方法之前，我们先来一段常见的的HTML，作为我们编写jquery示例方法使用的样本。<ul id="members" data-role="listview" d原创 2020-10-21 11:04:09 · 189 阅读 · 0 评论 -
http返回200但是response是“读取失败“
问题场景在项目开发时，由于后台暂未开发完成，所以前端采用mock数据进行页面调试。mock数据的格式由自定义，所以问题就产生了问题描述本地访问mock数据时，http状态响应码是200，访问成功，但是没有数据返回，在response里查看，提示"读取失败"。排查记录1、根据状态码，可以肯定访问mock数据成功，说明请求mock数据的方法没问题，请求方法如下： const result = await Http.postCuss(checkPriceApi) if (resu原创 2020-09-10 10:32:28 · 5872 阅读 · 0 评论 -
META标签属性说明
总结一些常用的meta标签属性及应用。1、声明文档使用的字符编码: <meta charset='utf-8'>2、强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 3、必须联网才可以访问,禁止浏览器从本地计算机的缓存中访问页原创 2020-08-24 22:36:05 · 1715 阅读 · 2 评论 -
总结40条常见的移动端Web页面问题及解决方案
前言工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，这是在前一篇基础上，整理网友的经验，希望对大家有用。1.安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把 iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat原创 2020-08-17 16:38:09 · 627 阅读 · 0 评论 -
移动端常见bug/兼容01
前言工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，希望对大家有用。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-we原创 2020-08-17 16:17:53 · 263 阅读 · 0 评论 -
Ajax原理
目录1 Ajax 的运行原理2 Ajax 简介3 Ajax 的使用3.1 XMLHttpRequest 对象3.2 Ajax 的使用步骤4 实例4.1Jsp页面4.2 Servlet4.3 运行效果1 Ajax 的运行原理2 Ajax 简介 Ajax ...转载 2020-08-10 11:08:16 · 107 阅读 · 0 评论 -
移动端UI涉及规范
很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图片设计比例建立统一风格的图标APP版式设计规范界面文字设计规范设计适配切图规范设计稿标.原创 2020-08-18 10:41:19 · 770 阅读 · 0 评论 -
Http常见状态码总结
前言最近项目开发时，由于项目一开始计划制定不详细，前后台字段定义不清晰，前端后台同事都是根据对已有项目的理解进行开发工作，导致前端发送请求，或2XX，或4XX，或5XX。在这里将做个前端状态码的总结，以对自己有用，也希望对各位有用。状态码分类http状态码分为五种类型：1**，2**，3**，4**，5**。分类 分类描述 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4*原创 2020-08-05 23:02:41 · 149 阅读 · 0 评论 -
浅谈前端SEO
前言在上家公司时，接手过这么一个任务，改版公司网站。在进行网址性能分析的时候，发现了很多地方可以进行SEO优化，最终采取css精灵图图片压缩，List item减少http请求，启用gzip，优化后台查询方法，优化代码结构等方案。今天就顺便记录下方案已经摘录下网上比较全面的优化方案。首先附上连接：yahoo的优化原则=》https://developer.yahoo.com/performance/rules.html?guccounter=1本文摘自《摘自高性能网站建设指南》前原创 2020-07-23 00:25:37 · 761 阅读 · 0 评论