YaoDeBiAn的博客

将所学运用到方方面面

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

知乎文章地址:https://zhuanlan.zhihu.com/p/53707400 最近在继续完善自己之前写的一个demo: yaodebian/taobaoApp​github.com 之前并没有对购物车进行特别的设计,仅仅是将一个个商品添加到购物车列表,也没有做一些处理,比如:列表...

2018-12-31 17:04:19

阅读数:24

评论数:0

兼容getElementsByClassName与classList(ie8及以上)

知乎文章地址:https://zhuanlan.zhihu.com/p/52423430 之前面试的时候考到对html元素的class进行增删改,然后有前辈说如果使用classList并且通过原型实现兼容,会非常满意,由此想到对getElementsByClassName与classList这两...

2018-12-17 12:57:43

阅读数:38

评论数:0

Webpack4.0基础教程八:生产环境构建

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

2018-12-04 20:06:49

阅读数:56

评论数:0

Webpack4.0基础教程七:tree shaking

添加一个通用模块: src/math.js: export function square(x) { console.log('square'); return x*x; } export function cube(x) { console.log('cube'); ...

2018-12-04 19:53:25

阅读数:44

评论数:0

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

每次要编译代码时,手动运行npm run build特别麻烦。 webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码: 1.webpack's Watch Mode(观察模式) 2.webpack-dev-server(提供一个服务器) 3.webpack-dev-mi...

2018-12-04 19:45:13

阅读数:46

评论数:0

Webpack4.0基础教程五:suorce map

当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为...

2018-12-04 19:40:36

阅读数:32

评论数:0

Webpack4.0基础教程四:plugins(插件)

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

2018-12-04 19:32:20

阅读数:46

评论数:0

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

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

2018-12-04 19:27:19

阅读数:50

评论数:0

Webpack4.0基础教程二:ES6的babel转码配置

1.安装babel-preset-env包:npm install –save-dev babel-preset-env 2.在根目录下创建.babelrc文件: {  "presets": [  "env"  ],  ...

2018-12-04 19:16:13

阅读数:43

评论数:0

Webpack4.0基础教程一:准备工作

准备工作 1.初始化项目目录:npm init -y 2.建立以下的目录结构: --dist --src ----index.js --package.json(初始化后生成) 3.完成基本的webpack配置: 首先,安装基本的webpack包: npm install --s...

2018-12-04 19:07:56

阅读数:45

评论数:0

一步步实现Promise代码封装

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

2018-12-03 20:40:44

阅读数:72

评论数:0

深入理解BFC

知乎文章地址:https://zhuanlan.zhihu.com/p/50478999 一. BFC的基本概念 BFC是“Block Formatting Context”的缩写,即块格式化上下文。它是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元...

2018-12-03 20:37:28

阅读数:27

评论数:0

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

知乎文章地址:https://zhuanlan.zhihu.com/p/50003943 在这之前,首先谈谈js的单线程机制:众所周知,js是单线程的语言,也就是说同一时间只能做一件事情。不过,现在这个年代还不能多线程开发吗?答案肯定是否定的,而关于为什么js选择用单线程,只要举一个栗子就好了:...

2018-12-03 20:32:42

阅读数:39

评论数:0

js事件绑定的几种方式

1.首先是直接在标签中绑定事件,如:<button onclick="clickme()"></button>; 2.通过节点元素进行绑定,如:el.onclick = f...

2018-12-03 20:30:10

阅读数:34

评论数:0

总结一些前端笔试面试

1.关于购物的一道题,题目很简单:最近不是双十一吗,小美想要尽可能多的买各种商品,但小美只有一定数额的钱,规定每件商品只能买一件,问最后小美花了多少钱? 用例: 输入购买上限mPrice:188 输入一串以空格分隔的字符串,代表不同的商品的价格pStr:50 42 9 15 105 63 1...

2018-12-03 20:27:37

阅读数:130

评论数:0

ajax跨域总结

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

2018-12-03 20:21:00

阅读数:22

评论数:0

如何使用纯css实现轮播图

知乎文章地址:https://zhuanlan.zhihu.com/p/48350702 轮播图一直是一个很有意思的东西,之前没有好好总结,导致一要写的时候就要重新开始思考过程然后编码,这是个特别烦的问题,今天就好好总结一下。 关于轮播器的一些demo,请看: yaodebian/Carou...

2018-12-03 20:19:36

阅读数:58

评论数:0

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

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

2018-12-03 20:14:27

阅读数:86

评论数:0

requestAnimationFrame笔记总结

知乎文章地址:https://zhuanlan.zhihu.com/p/45201506 一.什么是requestAnimationFrame 首先看张图: 相当一部分的浏览器的显示频率是16.5ms,就是上图第一行的节奏,表现就是“我和你一步两步三步四步往前走……”。如果我们火力搞猛一...

2018-09-23 17:41:29

阅读数:41

评论数:0

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

知乎文章地址:https://zhuanlan.zhihu.com/p/44944466 JS 中的浅拷贝与深拷贝,只是针对复杂数据类型(Object,Array)的复制问题。浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象,由此拷...

2018-09-19 21:11:31

阅读数:44

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭