2018年12月_YaoDeBiAn

原创总结一份自己写购物车的思考

知乎文章地址：https://zhuanlan.zhihu.com/p/53707400最近在继续完善自己之前写的一个demo:yaodebian/taobaoAppgithub.com之前并没有对购物车进行特别的设计，仅仅是将一个个商品添加到购物车列表，也没有做一些处理，比如：列表是按照商家来分类呈现的等等。。。以下是我目前为了学习写的一个demo:接下来，记录下我的一...

2018-12-31 17:04:19 275

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

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

2018-12-17 12:57:43 1315

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

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

2018-12-04 20:06:49 393

原创 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 713

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

2018-12-04 19:40:36 439

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

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

2018-12-04 19:32:20 871

原创 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 597

原创 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 659

原创 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 994

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

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

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

原创深入理解BFC

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

2018-12-03 20:37:28 353

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

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

2018-12-03 20:32:42 544

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

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

2018-12-03 20:30:10 572

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

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

2018-12-03 20:27:37 604

原创 ajax跨域总结

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

2018-12-03 20:21:00 213

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

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

2018-12-03 20:19:36 2616

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

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

2018-12-03 20:14:27 2647

YaoDeBiAn的博客