- 博客(46)
- 收藏
- 关注
RSS订阅原创 持久化储存之IndexDB常用方法封装
IndexedDB提供了一套完整的API，包括打开数据库连接，创建数据库对象，增删改查等，然而这些API当中存在部分异步、部分同步的情况，异步接口并非Promise形式，操作起来稍有点复杂，相比localStorage来说，于是我对常用的一些方法进行了二次封装。
2022-10-22 10:47:27
838
1
原创 安装npm包时出现依赖树错误的解决办法
报错提示：无法解决该依赖(Could not resolve dependency)，与该less版本冲突(Conflicting peer dependency: [email protected]). 并告知：Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependen
2022-10-22 09:08:41
8033
原创 使用webpack-如何清理无用源文件
项目随着时间的推移不断更新迭代，或者新项目从老项目迁移开发，项目变得越来越臃肿，无形中就存在了很多无用的文件. 大型的项目，如果仅靠人肉去识别，难度相当大，那么怎样能够自动检测哪些是无用的文件呢？
2022-10-15 20:13:35
1881
1
原创 异步组件之动态弹窗
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。 弹窗几乎是项目中比不可少的一部分，它就是经典的异步组件需求。 同时，它也是动态的，需要的时候通过方法来调用执行。
2022-10-15 11:47:31
1081
原创 简易步骤控制器
不少复杂函数中都存在一个问题，逻辑步骤或分支较多，很多时候我们都采用if else/Promise等来处理，而有些场景我们不得不额外把一部分逻辑封装成一个函数待以重用。
2022-09-29 08:02:39
77
原创 Vue大型项目如何统一管理API
一、需求：1.独立管理所有API接口；2.按模块拆分；3.拦截控制；4.数据一致化；二、实现：1.目录结构设计：src/api/index.js // 入口(从main.js引入)src/api/configs.js // 全局配置src/api/request.js // 封装的主程序src/api/common.js // 公共类api接口src/api/modules // 模块-对齐微服务2.全流程：1.引入axios --> 2.全局配置 --> 3.实例配
2020-08-07 23:28:38
1422
3
原创 让你像数组一样操作Tree树结构
可以这么说，小到一个生命体，大到整个宇宙，世间万物皆是树。现实生活中最常见的树的例子是家谱，或是公司的组织架构图。树是一种非顺序数据结构，一种分层数据的抽象模型，它对于存储需要快速查找的数据非常有用。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点（除了顶部的第一个 节点）以及零个或多个子节点。JS里面没有像Array一样直接的一个Tree对象，也没有处理Tree...
2019-11-30 23:06:05
468
原创 一个非常精简灵活的流程控制JS类框架
前段时间，由于业务需求，无意中在网上看到一篇原腾讯高级工程师张镇圳的文章《一个只有99行代码的JS流程框架》其中感悟颇深，而且正好满足现实中的需求。需求如下：有A、B、C、D四个接口； A接口最先请求，B、C接口根据A接口的返回值决定是并发或者串联请求； D接口依赖于C接口，但前提条件是A接口的返回值决定是否请求； 每一次所有流程走完后(包括异步)执行某个特定的任务；尽管上述只有4...
2019-11-12 22:13:31
532
转载 Javascript常用的一些数据结构与算法
本文主要讲述Javascript中实现栈、队列、链表、集合、字典、散列表、树、图等数据结构，以及各种排序和搜索算法，包括冒泡排序、选择排序、插入排序、归并排序、快速排序、顺序搜索、二分搜索，最后还介绍了动态规划和贪心算法等常用的高级算法及相关知识。 在阅读之前假设你已了解并可以熟练使用Javascript编写应用程序。 一、数据结构 栈：一种遵从先进后出 (LIFO) 原则的有序集...
2018-12-09 22:05:36
693
转载 不容错过的图标样式-FONT-AWESOME
设置Font Awesome字体的方法很简单,只需将两行代码添加到你的网站。或者你可以成为一个专业和定制一个最简单的自己，Bootstrap 3 Font Awesome字体会让更好的扮演自己!一、最简单的通过MaxCDN方法使用BootstrapCDN由于在MaxCDN的慷慨的人,您可以使用BootstrapCDN字体的添加到你的网站一行代码。你甚至不需要下载和安装任何东西!1.将下
2018-09-23 10:26:05
360
原创 这里有你不知道的正则表达式
// 去重'aaaannnewwrffqdffv'.replace(/(.)+/g, '$1');// 首字母大写'aaaa nnne wwr ff qdf fv'.replace(/\b\w/g, function(item){ return item.toUpperCase();});// 千分符'12345678912'.replace(/(\d)(?=(\d{3})+$)/g, '$1,'...
2018-04-23 20:04:45
167
转载 2016各大互联网公司前端面试题汇总
百度篇 1 写出java运行结果：for(var i=0; i<10; i++){} alert(i); // 102 Cookie、sessionStorage、localStorage的区别3 JSONP原理4 简述css盒模型5 说说get和post请求的区别6 运行结果 var a = {n: 1} var b = a; a.x = a = {n: 2} ...
2018-04-23 20:01:17
226
转载 总结ES6最有用的的十大特性
虽然ES6的规范并不是特别地新，但我认为很多开发人员对其仍然不太熟悉。 主要原因在于Web浏览器的支持可能比较差。目前，该规范发布已经有两年多了，很多浏览器对ES6的支持还算不错。 即使不使用最新版本的Web浏览器，也可以在应用程序的构建过程中使用代码转译工具（如Babel）将ES6的源代码转换为ES5的源代码。 赶快提升自己，学习ES6吧。本文尽可能简单地介绍了ES6中最有用的功能。 在
2017-10-13 22:33:05
879
原创 吐槽出入react踩过的“坑”
一、渲染篇：1. 第一个要说说“内联样式”:场景：在JSX的render中写内联样式，如报错：warning：Style prop value must be an object react/style-prop-object原因：在React框架的JSX编码格式要求，style必须是一个对象解决：style={{"marginTop:10px"}}
2017-09-24 12:40:54
7031
1
原创 浅谈mvc、mvp、mvvm框架模式
背景：随着软件工业的发展，复杂的软件没有清晰合理的架构，很难开发和维护，于是出现了MVC框架模式。一、MVC简介：MVC，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的
2017-03-25 22:39:06
1905
1
转载 JS继承的实现几种方式
既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); }}// 原型方法Animal.
2017-03-22 10:19:14
266
原创 div+css布局有哪些技巧？
一、处理九刀十断的情况css2：使用伪类:first-child 例如：.news-list .item{border:1px solid #ddd;} .news-list .item:first-child{border:none;}css3：使用伪类:not(:last-child)、:not(:first-child)、:not(:nth-child)等二、遵循“
2017-03-08 12:03:50
827
原创 谈谈div+css布局命名、语义化、结构化的开发经验？
一、什么是HTML语义化？根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等 二、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看； 用户体验：例
2017-03-07 10:16:11
855
原创 移动端屏幕适配 fis3+rem方案
移动端多屏适配rem方案 背景1. 开发移动端H5页面2. 面对不同分辨率、dpr的手机3. 面对不同屏幕尺寸的手机 一、概念1、物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。2、设备独立像素(density-independent pixel)设
2017-02-10 10:52:19
3308
原创 百度团队前端自动化工程工具fis-parser-node-sass插件安装失败的解决方案
问题：fis-parser-node-sass安装失败的解决方案如果你正在构建一个基于fis的前端自动化开发环境，那么极有可能会用到fis-parser-node-sass ,由于网络原因你可能会安装失败，因为安装过程中部分细节会到亚马逊云服务器上获取文件。本文主要讨论在不变更网络环境的前提下安装fis-parser-node-sass / node-sass 。 问题描述
2017-02-10 10:35:33
3448
转载 总结移动端开发的一些问题
标签：1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport有些手机网站我们看到如下声明：DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
2016-12-14 11:04:47
492
转载 html头文件<meta>设置缓存
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) ,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：1） 打开新窗口 值为private
2016-08-19 10:17:22
499
转载 canvas刮刮卡在三星s3和一些android4.1系统的手机上不能使用的问题
//画圆 function drawcircle(id,x,y,r){ var ca = document.getElementById(id); var cans = ca.getContext("2d"); cans.globalCompositeOperation
2016-05-27 11:38:45
501
转载 如何在PS,AI上直接使用FONTAWESOME图标？
如何在PS,AI上直接使用FONTAWESOME图标？FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方
2015-12-15 17:18:40
3425
转载 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
JavaScript的闭包特性如何给循环中的对象添加事件初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1
2015-10-24 17:42:03
485
转载 JQuery UI datepicker 参数详解
参数（参数名 : 参数类型 : 默认值） altField : String : ” 将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串。 初始：(‘.selector’).datepicker({ altField: ‘#actualDate’ }); 获取：var altField =(‘.selector’).datepicker({ altField
2015-04-23 17:16:40
1518
转载 滚动条宽度到底是多少？
滚动条宽度到底是多少？ 相信不管是web前端还是后台的程序员，都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条，计算宽度是必不可少的。而在设计过程中，设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条，而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800*600的分辨率，950px或974px对1024*768的分辨率。一般认为：这个
2015-02-04 10:01:26
7676
翻译 可扩展的模块化架构的CSS
分类CSS规则每个项目需要一些组织。将您创建的每个新风格到单个文件的结束会发现事情更困难,会对别人非常混乱的项目。当然,你可能有一些组织已经到位。希望你读在这些页面将强调与您现有的流程和工作,如果我很幸运,你将会看到新的方法可以改善你的过程。你如何决定是否使用ID选择器,或类选择器,或任何数量的选择器在你处理吗?你怎么决定哪些元素应该得到样式魔术你希望给吗?你如何让它容易理解如何组
2014-11-23 11:15:01
773
翻译 你认为你懂javascript吗?
So, you think you know JavaScript?Tue, 31 Mar 2009Quick test for real understanding of JavaScript core beyond closures and scopes. Here five small scripts. Try to answer what will be alerted i
2014-11-23 11:07:27
486
转载 Google式用户体验的十大内在原则
Google作为全球最大的搜索引擎，一直引领着搜索技术的发展，除此之外，Google一直强调并遵从用户体验的原则，我们今天就来看看Google用户体验十大设计原则：Google用户体验小组致力于推出集实用、快速、简单、引人注目、创新、通用、盈利、美观、可靠和个性于一身的设计。如何在这十项原则间实现协调与均衡是一项永无止境的挑战。只有实现这种均衡的产品，才可以称为“Google 式”产品，并
2014-11-16 20:28:26
524
转载 jQuery全屏滚动插件fullPage.js
简介如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏
2014-10-24 09:40:41
879
转载 跟着8张思维导图学习javascript
学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将po出8张javascript相关的思维导图。思维导图小tips：思维导图又叫心智图，是表达发射性思维的有效的图形思维工具 ，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接，思维导图充分运用左右脑的机能，利用记忆、阅
2014-09-10 22:43:27
2066
翻译 手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=d
2014-09-02 09:52:29
493
翻译 图片原理与优化
前言：该文收集了前辈们的一些关于图片优化的技巧，在此收拢到一起，对于各个方法的优化原理做了一些研究，希望能给大家对于图片优化这一块起到抛砖引玉的作用。提到图片，我们不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。常见的
2014-08-21 14:15:02
922
转载 CSS 实现表格内容超出显示省略号
原理：本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句CSS样式：1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）2. white-space: nowrap 是为了保证无论
2014-08-18 22:40:57
729
原创 完美解决多行文字垂直居中
完美解决不固定行数的文字垂直居中 body{font-size:14px;font-family:tahoma;} .wrap{display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden;
2014-08-13 14:30:42
1486
翻译 IE label中有图片 无法选中radio？其实可以完美解决
今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。例如，这样的代码 ，这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码3个方面来解决。方法一，JS：window.onload = function(){
2014-07-21 11:03:57
717
翻译 jQuery prop和attr有什么区别？
.prop()1、.prop( propertyName )获取匹配集合中第一个元素的Property的值2、.prop( propertyName, value ).prop( map ).prop( propertyName, function(index, oldPropertyValue) )给匹配元素集合设定一个或多个属
2014-07-10 11:40:31
538
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人