YaoDeBiAn-CSDN博客

原创兼容getElementsByClassName与classList（ie8及以上）

知乎文章地址：https://zhuanlan.zhihu.com/p/52423430之前面试的时候考到对html元素的class进行增删改，然后有前辈说如果使用classList并且通过原型实现兼容，会非常满意，由此想到对getElementsByClassName与classList这两个接口进行浏览器兼容。不过目前仅兼容到ie8，下面是具体的一些方案：兼容getElementsBy...

2018-12-17 12:57:43 1288

原创 Webpack4.0基础教程八：生产环境构建

1. 配置：上面是官方的原话~~~下面我们将会分别创建开发环境与生产环境的webpack配置文件，并将两个配置文件中公共用到的部分抽离出来，存放到一个公用配置文件中，最后通过webpack-merge这个工具我们将公共配置合并到开发与生产配置中。首先下载webpack-merge:npm install --save-dev webpack-merge 文件目录中...

2018-12-04 20:06:49 374

原创 Webpack4.0基础教程六：开发工具(自动编译代码)

每次要编译代码时，手动运行npm run build特别麻烦。webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：1.webpack's Watch Mode(观察模式)2.webpack-dev-server(提供一个服务器)3.webpack-dev-middleware(是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器...

2018-12-04 19:45:13 695

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告，JavaScript 提供了...

2018-12-04 19:40:36 412

原创 Webpack4.0基础教程四：plugins(插件)

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用n...

2018-12-04 19:32:20 824

原创 Webpack4.0基础教程三：安装简单的loader解析

webpack中，有一种操作就是在“.js”文件中引入非javascript资源，所以在将其打包的过程中，我们需要某些loader解析器对相关的资源进行解析。首先我们先来看看引入css资源：安装style-loader和css-loader两个loader:npm install --save-dev style-loader css-loader webpack.confi...

2018-12-04 19:27:19 576

原创 Webpack4.0基础教程二：ES6的babel转码配置

1.安装babel-preset-env包：npm install –save-dev babel-preset-env2.在根目录下创建.babelrc文件：{ "presets": [ "env" ], "plugins": []}3.为了检验我们的配置是否成功，我们再安装babel-cli包：npm install --save-dev babel-cli，然后我们...

2018-12-04 19:16:13 647

原创 Webpack4.0基础教程一：准备工作

准备工作1.初始化项目目录：npm init -y2.建立以下的目录结构：--dist--src----index.js--package.json（初始化后生成）3.完成基本的webpack配置：首先，安装基本的webpack包：npm install --save-dev webpack webpack-cli注：webpack4对webpack内核与c...

2018-12-04 19:07:56 975

原创一步步实现Promise代码封装

知乎文章地址：https://zhuanlan.zhihu.com/p/51373575ES6中加入了Promise的一个概念，使得非阻塞式语句的同步变得简单起来，但是具体它是怎样实现的，接下来一步步地实现它。一.Promise基本结构new Promise((resolve, reject) => { setTimeout(() => { resolve('...

2018-12-03 20:40:44 1495 2

原创深入理解BFC

知乎文章地址：https://zhuanlan.zhihu.com/p/50478999一. BFC的基本概念BFC是“Block Formatting Context”的缩写，即块格式化上下文。它是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗的讲，BFC是web页面中一块渲染区域（或者说是一种渲染环境），对于环境内的盒子...

2018-12-03 20:37:28 334

原创谈谈个人对js事件循环的理解

知乎文章地址：https://zhuanlan.zhihu.com/p/50003943在这之前，首先谈谈js的单线程机制：众所周知，js是单线程的语言，也就是说同一时间只能做一件事情。不过，现在这个年代还不能多线程开发吗？答案肯定是否定的，而关于为什么js选择用单线程，只要举一个栗子就好了：比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个...

2018-12-03 20:32:42 517

原创 js事件绑定的几种方式

1.首先是直接在标签中绑定事件，如：<button onclick="clickme()"></button>;2.通过节点元素进行绑定，如：el.onclick = function () {console.log(111)};3.通过addEventListener与attachEvent来绑定事件；另外写了几个关于事件的小demo:(里面)yaodeb...

2018-12-03 20:30:10 555

原创总结一些前端笔试面试

1.关于购物的一道题，题目很简单：最近不是双十一吗，小美想要尽可能多的买各种商品，但小美只有一定数额的钱，规定每件商品只能买一件，问最后小美花了多少钱？用例：输入购买上限mPrice：188 输入一串以空格分隔的字符串，代表不同的商品的价格pStr：50 42 9 15 105 63 14 30 输出：160注：mPrice最大不超过一万。解：// 获取应买物品的总价格f...

2018-12-03 20:27:37 582

原创 ajax跨域总结

之前在看云上总结的一些ajax跨域解决方案，在这里分享给大家：原生ajax基础性原理 · javascript之ajax运用及跨域解决 · 看云www.kancloud.cn

2018-12-03 20:21:00 199

原创如何使用纯css实现轮播图

知乎文章地址：https://zhuanlan.zhihu.com/p/48350702轮播图一直是一个很有意思的东西，之前没有好好总结，导致一要写的时候就要重新开始思考过程然后编码，这是个特别烦的问题，今天就好好总结一下。关于轮播器的一些demo，请看：yaodebian/Carouselgithub.com因为考虑到方法实在是太多了，这里就以css的实现方式来进行记录。yao...

2018-12-03 20:19:36 2525

原创如何在页面上实现一个圆形的可点击区域

知乎文章地址：https://zhuanlan.zhihu.com/p/48168812以下涉及的demo代码请查看：yaodebian/ClickableAreagithub.com这个问题确实从没想过，也是今天前端面试中被问倒的问题之一，接下来做一个简单的总结吧。这个问题确实从没想过，也是今天前端面试中被问倒的问题之一，接下来做一个简单的总结吧。一.border-rad...

2018-12-03 20:14:27 2522

翻译 requestAnimationFrame笔记总结

知乎文章地址：https://zhuanlan.zhihu.com/p/45201506一．什么是requestAnimationFrame首先看张图：相当一部分的浏览器的显示频率是16.5ms，就是上图第一行的节奏，表现就是“我和你一步两步三步四步往前走……”。如果我们火力搞猛一点，例如搞个10ms setTimeout，就会是下面一行的模样——每第三个图形都无法绘制（红色箭头指...

2018-09-23 17:41:29 970

原创尬谈Js对象的深拷贝与浅拷贝

知乎文章地址：https://zhuanlan.zhihu.com/p/44944466JS 中的浅拷贝与深拷贝，只是针对复杂数据类型（Object，Array）的复制问题。浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象，由此拷贝的时候就存在两种情况了：拷贝引用和拷贝实例，这也是浅拷贝和深拷贝的区别。浅拷贝：浅拷贝是拷贝引用...

2018-09-19 21:11:31 4247

原创网易秋招前端开发工程师三面回顾（网易杭州研究院）

知乎文章地址：https://zhuanlan.zhihu.com/p/43704513一面：（主要考基础，时间大概40分钟）1.简单自我介绍；2.简单问我简历上写的项目，其中一个项目用sessionStorage来存储登录态，问我为什么没有用cookie，我说当时没有用cookie也没有意识到sessionStorage的一个缺点（将项目页面在一个新窗口打开或者关闭浏览器重新打开就会消...

2018-09-19 10:07:31 1274 2

原创抽奖九宫格Demo

写在前面最近做了一下网易游戏的笔试题，最后一道题是叫你设计一个抽奖九宫格动画，当时有思路但是有很大的瑕疵，故而有了这次git。开发环境vuejs框架 ajax用的是axios思路首先必须将UI设计好；声明一个list对象用于存放九宫格中的内容列表，包括奖项、抽奖按钮、谢谢参与等，然后通过v-for将这些项填充到九宫格中；声明一个activeIndex来标记当前被选中的项...

2018-09-19 10:03:04 3886 1

原创基于webpack4.0手动搭建web项目（更新中）

由于篇幅限制，目前已转移至专栏更新：https://blog.csdn.net/YaoDeBiAn/column/info/30815知乎文章地址：https://zhuanlan.zhihu.com/p/42424686闲暇之余做的总结，仍在更新中，有错误或不足的地方请大家指正与分享见解，谢谢。一.准备工作1.初始化项目目录：npm init -y2.建立以下的目录结构：...

2018-08-20 09:09:07 2286 2

转载理解设备像素比

移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至还有更高的 4k 屏等。我们在开发移动端页面时，将视口（viewport）设置为设备宽度（device-width）后，同一份页面在这些不同的设备上又怎样的表现呢？我们写一个测试页面，在 Chrome 中看看就知道了。同一份页面在不同设备上的表现测试...

2018-05-27 19:37:14 3118

转载配置Tomcat使用https协议

注：该方法对于ie浏览器可以去除https非法标志，对于谷歌等浏览器不行一. 创建tomcat证书这里使用JDK自带的keytool工具来生成证书： 1. 在jdk的安装目录\bin\keytool.exe下打开keytool.exe 2. 在命令行中输入以下命令:keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore "g:\...

2018-05-15 14:56:12 227

原创 Mysql笔记二：数据查询时要注意的问题

1.ORDER BY可以与LIMIT混合使用吗？很简单，试一下就好，在使用ORDER BY 子句时，应保证其位于FROM子句之后，如果使用LIMIT，则必须位于ORDER BY之后，如果子句顺序不正确，MySql将产生错误消息。2.在where子句中必须使用圆括号吗？任何时候使用具有AND和OR操作符的WHERE子句，都应该使用圆括号明确操作顺序。如果条件较多，即使能确定计算次序，默认的计算次序也...

2018-04-24 22:44:58 458

原创 Tomcat数据源

一.数据库操作原理首先，先来回顾一下JDBC操作原理：1.加载数据库驱动程序，数据库驱动程序通过classpath配置。2.通过DriverManager类取得数据库连接对象。3.通过Connection实例化PreparedStatement对象，编写SQL命令操作数据库。4.数据库属于资源操作，操作完成后要关闭数据库以释放资源。注：数据库连接时需要建立多次连接：在使用JDBC连接数据库时，程序...

2018-04-20 09:26:23 684

原创 Mysql笔记一：简单查询中那些不起眼的用法

1.带LIKE的字符匹配查询（模糊查询）该用法原理为：a.百分号通配符“%”，匹配任意长度的字符串，包括零字符（零个字符），这就好比js正则表达式中的*号，是同样的道理。给定一张表user:输入以下语句：SELECT username FROM user WHERE username LIKE '%b%'; #查询用户名中含b字符的用户名列表结果：b.下划线通配符‘_’，一次只能匹配任意一个...

2018-04-17 17:40:50 204

转载 Java Web如何操作Cookie的添加修改和删除

一、Cookie是什么Cookie是服务器存放在客户端浏览器上的一些小数据，可以使用Cookie完成与服务器的一些交互动作。服务器可以通过HTTP响应头将Cookie发送给浏览器，而浏览器如果支持存储Cookie，则将HTTP响应头信息中的Cookie内容存放到浏览器中。当浏览器请求访问一个网站时，如果这个网站在此浏览器中存放有Cookie内容，浏览器会将Cookie内容附加到HTTP请求头信息中...

2018-04-16 17:06:15 283

原创初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台

github地址：https://github.com/yaodebian/GoGoLe初识java web，想在后端用java有一技之长。注：以下仅是自己的一个程序记录。首先java web的动态页面是通过jsp来实现，但是由于近些年来，各种前端框架的流行，比如说最近中国内陆兴起的vuejs，它们都提供了很方便快捷的功能，故而仍然用java来编写动态网站看起来已经不切实际了，java更多...

2018-04-15 12:43:46 8504 11

原创 CSS3 display:flex和display:box有什么区别？

同样是弹性盒模型，但是前后两个版本不同，还是有一定的区别的，以下是百度后的记录总结：1.前者是flex2012年的语法，也将是以后的标准语法，大部分浏览器已经实现了无前缀版本。后者是2009年的语法，已经过时，是需要加上对应前缀的。2.flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-boxdisplay: box 使用可以参考h...

2018-04-12 17:27:38 5937

转载媒体查询使用方法@media

转自：媒体查询使用方法@mediaMedia Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。@media 媒体类型and （媒体特性）{你的样式}注意：使用Media Queries必须要使用“@...

2018-04-12 16:24:49 619

转载移动web页面前端开发总结

工作笔记：移动web页面前端开发总结转载来源:http://www.cnblogs.com/gyjWEB/p/3780374.html移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。 1.四大浏览器内核1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的...

2018-04-12 16:12:48 241

翻译 JAVA工厂方法的疑问（为何要创建工厂类或者工厂接口)

在学java web的时候碰到了一个DAO设计模型的东西，代码示例过了一遍后，发现这个结构就是将代码模块化，因为结构清晰故而便于组织，但是其中有个工厂类，这个类的作用就是说将对象的实例化分离出来，单独用这个类来实现，下面是示例：定义一个类：public Class Person{ 相关属性与方法。。。}工厂类：public Class Factory{ public Person ge...

2018-04-05 19:26:47 852

原创 tomcat安装与配置

1.1 JDK安装在64位操作系统中下载64位的JDK，直接安装。 1.2 Tomcat配置1.2.1 下载解压下载apache-tomcat-8.5.15-windows-x64.zip，直接解压到某个分区即可。在解压后的bin目录中，有4个重要的脚本文件：1.2.2 启动配置1.2.2.1 简单启动在catalina.bat中的setlocal下面添加两行，配置java环境。之后就可以将...

2018-03-24 10:00:44 482

转载 tomcat 一闪而过如何查看错误信息

转载自：tomcat 一闪而过不能查看错误信息问题本文讲得是在运行tomcat文件的startup.bat来启动tomcat的，不是在eclipse启动但是在tomcat的安装目录下双击startup.bat时一闪而过，也没能看到原因，因此需要做一些操作来排查错误本机Java：1.6.20，tomcat：7.0.53.0：1）在eclipse里面启动tomcat时都是正常的。2）确认在系统中配置...

2018-03-24 09:00:46 961

原创 CSS3笔记：Border-radius的形成原理

参考文章：http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/一．前言最近自己写了一个导航栏，马马虎虎就是啧个样纸：其中的圆角做了好久，就是啧个：既然用到了，我就在这总结一下圆角border-radius的用法，闲话不多说，进入正题。二．border-radius的几种

2017-10-20 15:14:06 1775

原创初识XML

初识XML 一．XML是啥 XML只可扩展标记语言。 XML被设计用来传输和存储数据。类似HTML语言，XML在形式上与HTML别无二致，不过，在用途上HTML是页面渲染语言，浏览器通过解析HTML将页面呈现给用户，而XML是用来存储与传输数据的，例如XML文件本来就是一种数据文件，同时我们可以通过XMLHTTPRequest对象实现后台与服务器之间的交互。另外，HTML的标记是预先定义的

2017-10-08 19:22:26 358

转载 Apache与Tomcat有什么关系和区别

转自：http://blog.csdn.net/longzs/article/details/10959945经常在用apache和tomcat等这些服务器，可是总感觉还是不清楚他们之间有什么关系，在用tomcat的时候总出现apache，总感到迷惑，到底谁是主谁是次，因此特意在网上查询了一些这方面的资料，总结了一下：一 apache支持静态页，tomcat支持动态的，比如servl

2017-09-27 19:27:24 473

原创日常：如何修改网页源代码

最近我一个学安全的同学在玩一个叫做黑客丛林的游戏，当他玩到第二关的时候卡住了，想改源码却改不了，当时我也是一脸懵逼，通过Chrome的开发者工具的element修改页面却没有效果，强迫症如我之后查找相关的信息总结了这篇文章。以下是该游戏第二关的截图：然后我们来看看它的源码，是这样的：<metah

2017-09-27 14:15:12 55073 3

原创 css笔记：css的继承性

所谓继承性是指书写css样式表时，子标签会继承父标签的某些样式，如文本的颜色和字号。例如：垚的彼岸的日志我只是一个渣渣我想把上述文字居中显示，如下图显示：(背景颜色时为了比较清晰明了)那么我就这样设置css:body{background:blue;opacity:0.5;filter:alpha(opacity=50);}.yaodeb

2017-09-27 13:41:17 2425

原创 js日常：用js构造一个轮播器的思考

用js构造一个轮播器的思考最近用纯js编写了一个轮播器，期间遇到了很多问题，由此记录下这篇文章。一．轮播器结构设计轮播器就是一个用于承载图片并实现图片动态滚动效果的模块，首先县分析一下其基本组成结构：一个容器(我用的是div块)+图片容器(img)+轮播器图片信息与操作栏(一个div模块，然后其中放置一个span用于描述图片信息+一个图片列表项ul)。结构图如下：二．轮播器的

2017-09-17 12:59:04 346

空空如也

win10控制面板一闪就关闭，但单独打开其中的功能快又没问题

Java关于在catch中抛出一个异常给外围函数却捕获不到的问题

每个用户每访问一个网站运营商就要想网站所有者支付0.1元是否事实