miao淼-CSDN博客

原创 Axios源码研究学习系列---xhr请求模块大概分析

改变是人生的定律，专注于过去和现在的人，必将错过未来首先文件结构，插件标准模式，严格模式，用ES6语法promise返回，所以就是常见的axios.get(url).then(res=>{})形式'use strict';var utils = require('./../utils');var settle = require('./../core/settle');v...

2020-03-22 23:44:51 867

原创前端面试题集锦

https://www.easemob.com/news/797 25个最经典的JavaScript面试题及答案https://www.cnblogs.com/dll-ft/p/5515692.html JS面试题（二）（常见算法编程）https://blog.csdn.net/sinat_17775997/article/details/78122999 webpack篇http...

2018-05-17 00:42:16 358

原创 es6+canvas+webpack+babel编译实现简单打字游戏

之前用es5和canvas写过打字游戏，今天为了增强对es6理解以及webpack环境配置，决定重新对以前代码进行模块化开发。由于有些简单，就直接上目录结构项目依赖{ "name": "typing", "version": "1.0.0", "description": "es6 typingGame", "main": "index.js&

2018-03-16 00:38:37 735

原创 iframe跨域问题思考

工作遇到一个bug，弹窗调整至顶层window.top.dialog，使用的artDialog弹窗插件，本来用的好好的，可是随着需求的增加，bug就出现。需求：在一个弹窗基础上，再添加弹窗展示某项数据，后台接口请求数据代码现状：那个弹窗是通过iframe引用一个新的页面展示，我要在那个iframe引用的页面添加另外弹窗问题：1.那个弹窗若是保证正常展示，那个弹窗展示也是在ifr

2017-11-03 21:22:08 1362

原创仿Zepto自动触发事件函数---trigger()

某个博客说，上半年单身已经结束，下半年单身还将继续，莫名喜感去年恬不知耻的去看了jQuery源码，被虐之后接着去看zepto源码，现实给了我很好教训。看不懂，枯燥，味同嚼蜡。要不是知道自己年纪经不起荒废，要不是知道很多高手成神之路都少不了去看看源码，早就坚持不下去。话说，如果当初读书时候有现在一半的坚持，或许也不至于混的这么差，可惜没有如果，只有更加的努力。10月份项目修改用到了事件自

2017-10-22 22:08:05 2180

原创 js语法中with的学习

首先呢，严格模式下with报错，而且with在js引擎环境下运行缓慢，所以并不建议使用。当然了，通过各种资料，with貌似都是用来拓展作用域，延长作用域链，简化书写，具体的就不深入了。with 语句用于设置代码在特定对象中的作用域。它的语法：with (expression) statement毕竟，with运行缓慢！知道有这么个东西就好。举个例子var obj={a:"1

2017-10-19 23:58:47 1065

原创简单的前端渲染模板实现

国庆节过去第一天，有点懒，但一想到今年的法定节假日都已经过完，慢慢就燃起奋斗欲望。今天碰巧看到网络上一些高手博客写着渲染模板教程，就做个随笔记录吧！渲染模板简单的说，就是将一些数据，字符串加载到几个的变量当中。var tpl = 'Hei, my name is , and I\'m years old.';js数据加载方式var data = { "name

2017-10-09 22:40:24 5710 1

原创 js文档碎片---DocumentFragment

当我们操作html节点时候，很多情况是需要大量添加DOM元素，如果是不断地使用appendChild插入子节点方式，性能会大打折扣。所以我们应该使用文档碎片，一种轻量级文档处理方式，但是并没有所谓的文档碎片标签。文档碎片可以当作仓库，缓存使用。看例子代码： DocumentFragment文档碎片

2017-10-08 21:22:17 700

原创前端大牛博客备忘

司徒正美 http://www.cnblogs.com/rubylouvre/叶小钗 http://www.cnblogs.com/yexiaochai/艾伦 http://www.cnblogs.com/aaronjs/汤姆大叔 http://www.cnblogs.com/TomXu/周爱民 http://www.cnblogs.com/yuzhongwusan

2017-10-04 15:35:24 352

原创 jQuery原生js实现---trim

中秋节快乐！今天有点空闲，特意找下简单的jQuery方法，但还算是实用的方法，jQuery静态方法trim。该方法能够清楚字符串首尾空格，一般用于输入框，表单等地方。相信有点正则或者对js原生api有点了解都知道，该方法实现并不难，所以直接上代码。//jQuery原生js实现---trim//直接修改原生String对象原型链，为其增加trim方法String.prototype.t

2017-10-04 14:34:38 1410

原创 jQueryy原生js实现---hover事件

jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！ 3 4 1 2//j

2017-10-03 22:41:25 13075

原创 jQuery原生js实现---ready方法

对于很多js库，框架来说都带有js加载延迟。jQuery的ready方法就是等待DOM元素加载完便立即执行，原生js接口onload是等待所有html加载完再加载js文件。ready方法实现原理是利用DOMContentLoaded和 document.documentElement.doScroll("left");实现跨浏览器加载。两个方式都能够监测dom元素是否加载完毕，从而回掉函数执行

2017-10-02 23:21:52 1335

原创 jQuery的原生js实现---on方法

国庆节来了，心情不错，但学习还得继续，今天特意对jQuery的on事件绑定做一个笔记。 1 2 3 4 5 6 7 8 //原生js简单实现jQuery---on方法//IE9以下支持

2017-09-30 23:45:22 6711

原创仿jQuery原生js实现----hasClass，removeClass,addClass

今天发现自己遇到事情总会很粗心，不是不会做，明明自己做出来了，却心急，然后将代码改错。说以前习惯差，说自己不够重视这个工作，不负责任都对。我改，毛病一定得改！！！jQuery的hasClass,removeClass,addClass我们经常用到，那么为了提高水平。决定自己实现一个，好好学习，天天向上。1 2 3 4 5 6hasClass =

2017-09-28 22:44:52 1051

原创 jQuery方法原生js实现 --- siblings兄弟节点

今天工作失误，导致移动端浏览器无法工作，初步估计是es6未经过编译便进入项目。经验欠缺，吃一堑长一智吧。工作中用到兄弟节点的地方不算太多，或许选项卡，轮播图会用到。为了对jQuery进一步深入，特意研究一下siblings()方法。 1 2 3 4 5 11 siblings = (o)=>{ let arr

2017-09-27 22:21:12 3941

原创 jQuery方法原生实现---each遍历

最近有点浮躁，总想着快速前端进阶，成为高手。奈何现实残酷，故此用原生js实现下jQuery一些函数，用于练手。each遍历类数组，数组挺好用的。网上也有很多教程，原理无非是利用call，apply改变this指针指向，指向谁呢？嗯，js数组！原生数组有着很多方法能够读取数组元素，例如新增加every()方法遍历数组,IE9以上支持该方法function each(object,

2017-09-26 00:51:36 755

原创 es6版打灰机游戏 --- 玩家飞机类的构建

JavaScript新标准es6语法已经被大多数主流浏览器所支持，像谷歌，edge等最新版都支持ES6大多数语法。不需要额外编译器，Babel之类的。为了适应社会潮流，我在看了阮一峰es6入门和一些网络教程，决定移植以前es5版本灰机游戏。由于时间原因，分步骤进行，此篇只讲玩家飞机类构建和键盘事件控制主要变化变量声明：var ---> let箭头函数使用 functio

2017-09-18 23:07:48 722

原创 nodejs小爬虫

最近看到很多招聘前端写着会node，狠狠心，抽空看教程。然后看到慕课网基础教程有个简单版本的爬虫，故照着练习。现在放出我自己修改后的源码，当然只能抓取一个页面，下次学习深入再研究多个页面的相关js文件// 慕课网node爬虫练习// 引入http模块var http=require('http')// 引入cheerio模块（类似jquery，需要安装引入）var chee

2017-06-29 09:00:04 754

转载【转】placeholder属性模拟插件(兼容IE)

转载文章地址：http://www.cnblogs.com/sunscheung/p/5277331.html/*! * copyright c by zhangxinxu 2012-02-06 * jquery.placeholder.js placeholder属性模拟插件 * v1.0 2012-02-06 create * v1.2 2012-12-20 兼容IE10下

2017-06-13 07:14:25 433

转载【转载】zepto返回顶部--滚动条控制

本文是转载文章需要看的请点击该链接原文地址：http://www.qdfuns.com/notes/20768/46075004e6fc9fd269c3c5ffac63dfcc.html我这里直接上代码了，做个备忘+($.fn.scrollTo =function(options){ var defaults = { toT : 0, //滚动目标

2017-06-12 03:24:54 1397

原创常用的前端工具，js插件，前端书籍，学习网址收集

--------------------2017-06-11-------------前端开发工具：1.sublime.text2.webstorm3.Dreamweaver4.visual studio code前端js插件：1.zepto.js（移动端）------项目使用2.jQuery（pc端）------项目使用3.vue.js ----重构的移动端...

2017-06-11 16:04:44 1007

转载【转载】Js 冒泡事件阻止

原文 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html 1. 事件目标现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器

2017-05-22 17:43:16 231

原创 jQuery插件防冲突原理

说到jQuery插件，bootstrap的jQuery插件名声在外，当然主要原因是bootstrap框架被很多人喜爱，学习，并不是因为他的js插件功能强大，比它强大好用的jQuery很多！不过对于插件，眼前成熟做法都会在结尾那里加上防止变量名冲突，也就是不要让别的插件覆盖自己插件，导致程序出错。最开始便是jQuery的noConflict()函数，之后大部分插件都会加上这个函数。很多人可能会问

2017-05-16 16:48:58 1990

原创 jQuery插件开发-----tab选项卡

经过实践，发现我不是一个能够坚持的人，所以一有计划马上执行，为了每天保持学习，敲代码，所以不断看视频教程，看书，当年成为学渣就是因为不能重复看一本书。为了分担家里负担，好书重复翻看，好的视频教程重复看，忍忍也就过去了，我需要提升！今天看到慕课网出的tab选项卡，看完之后，觉得有些简单，但使用data-*属性保存值方式值得学习，所以呢，决定自己来一个！

2017-05-15 01:45:09 1885

原创 jQuery插件开发初步练习

看了下，前面的bootstrap的carousel.js源码分析好像还没有补充完整，现在想想算了。每月计划还是要做的，carousel.js（轮播）虽然没说完，但我知道自己底细，对bootstrap插件源码不够了解，对jQuery插件缺乏必要认知。所以5月计划便是捣鼓jQuery插件开发，然后进一步完成对bootstrap框架的探索以及利用，对待知识就是要挖掘他的闪光点，学会它。bootstr

2017-05-06 01:36:37 454

原创 bootstrap之 carousel.js轮播插件源码分析

公司主要客户是外国人，主要交流语言是英语，公司里的人都使用一口流利的中国式英语进行对话，中国式英语在不正式场合没什么问题，大家都听得懂即可。可惜，我不会，所以接下来得好好练习英语口语了。相信我能够坚持下来，起码把中国式英语学会。以前都是jQuery或者zepto（移动端）布局完事，后来公司要求pc端移动端兼容，然后想到bootstrap，当然，公司项目很小，小外包公司嘛。所以浏览器兼容跟随bo

2017-04-26 01:16:09 5393 1

原创 bootstrap之tab.js分析

我一定要征服移动端布局，深入分析bootstrap就成为了捷径之一。路虽长，我虽笨，但架不住傻逼似得坚持。加油！！tabjs是bootstrap选项卡动态，里面常见的下拉框等效果，今天来试试源码难度，顺带温习jQuery的API，何乐不为，反正目前我都是小项目，jQuery，zepto，挺好！插件外壳，立即执行函数，传形参$和实参jQuery

2017-04-21 02:08:02 3156

原创 bootstrap源码jQuery插件之button.js源码分析笔记

架不住移动端的兼容的诱惑，bootstrap随着学习，它的强大以及可以让我学习的地方众多。今天又来写写button.js这个相对简单的按钮插件，写完这篇文章，估计我对js又有新的提高和巩固。本文只是作为本人笔记，看法，不保证对，也很肤浅，大神绕道。个人认为知识点：jQuery插件：能够进一步学会如何封装某个js库的插件，能够学习更多平时不常用却比较重要的js语法基础bootstrap的js

2017-04-19 02:26:06 1779

原创 bootstrap的less源码学习之button组件控制

本来想看看栅格系统，但后来发现有点多，而且个人有些懒了，就看看button组件算了。做个笔记，缓解下枯燥烦闷的自学。minxin文件夹中的buttons.less 文件规定按钮伪类，按钮颜色，禁用选项，主要是用来给上一级文件夹中对应buttons.less调用。其中内容如下：.button-variant(@color; @background; @border) { color:

2017-04-16 18:10:06 729

原创 bootstrap的less文件分析之@media媒介查询

关于bootstrap响应式布局，国内外名气满满的前端样式布局框架。3.0之前版本都采用less动态css预处理语言，实现机制是通过@media媒介查询来达到样式控制。例如：@media screen and (min-width:320px) and(max-width:360px){ html{ width:30px; height:20px; }

2017-04-12 23:37:47 4453

原创 less练习之transition

以前同学使用sass写css，说比较好用，而且看起来有点高大上。作为初级web前端的我，刚好遇到bootstrap的使用，为了更好学会它，我选择less操作css。less和sass语法相对简单，内置函数目前没用到，一切刚开始。从慕课网，网易云等视频网站看了一些免费基础视频，现在开始敲代码。网上很多案例都是关于css3的，说是弥补浏览器兼容，试了一下，还挺爽，但这不是我想要的。我是冲着le

2017-03-31 00:28:05 1115

原创 css3的transition练习

现在开个css3特效分类，目的很简单，掌握它的常用属性与技巧。今天是2017-3-30 明年今天在回首，希望我已经成为一名优良的web前端工程师。transition：属性国度时间时间函数延迟时间过渡效果需要IE10以上才能很好支持，不过现在css3基本上都流行使用在移动端，就没有IE什么事情了。过渡效果能够很好的平滑过渡运动，常见使用场景，鼠标经过:hover 物体@keyf

2017-03-30 23:46:32 693

原创 html5+canvas+javascript开发打灰机小游戏

今天不出太阳，整个人都有点颓废。为了我的大前端计划，不得已找点代码练练手。打灰机是很早就流行的手机游戏，那时候智能手机还很贵，我还是学生一枚。现在出来工作了，发现别人写的打灰机游戏，然后游戏逻辑很差劲的我，开始了学习之路。游戏使用html5+canvas+javascript写成，效果一般，游戏逻辑略坑。可能下次就不再进行游戏练习了，按照计划，得闷头扎进bootstarp zepto

2017-03-29 23:33:21 717

原创 html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏

感觉又是在发小白文，没办法，我还在不断学习中。前端进阶计划再一次因为学习难度，项目经验而告吹。好在，我在缓慢进步~文章内容来源我网络上看到别人用js和css3写的仙剑记忆力翻牌游戏，感觉自己可以学到些什么。所以就有了一天一夜的奋斗成果，写的过程，感觉好坎坷，又是查看canvas的API，又是设置相关变量，又得摸索坑爹费脑的游戏逻辑！说实话，人家那个玩的挺爽，想过很炫。换成我做得，不说了

2017-03-22 09:29:25 2732

原创移动端rem布局初步练习

渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。首先是移动头

2017-03-17 23:56:53 1210

原创原生javascript开发打字游戏---代码重构版本

浏览器支持版本：IE9+ 火狐谷歌等上一次使用canvas制作，代码有些乱，这一次使用原生javascript制作，原理就是div动态生成，定时器刷新，div删除，div重新生成，字母消失特效由于使用addEventListener添加事件，IE9以下不支持，支持另外一种事件机制，但原理不同，暂时不考虑，等研究jQuery源码之后，再回来修改兼容。定时器//定时器window.

2017-02-19 16:17:18 592

原创 jQuery源码学习---简单dom封装（一）

封装简易的dom操作。一、解决命名空间和变量污染1.作用域2.立即执行函数3.闭包jQuery是一个类数组对象，里面有各种方法，当然jQuery的dom选择器是sizzle很牛叉，据了解还有更快的dom选择器，实力上去再探索。jQuery使用无new构造函数，可以直接使用$().xx (function(window){ var wdjs=function(sel

2017-02-14 00:33:26 1550

原创 javascript开发贪吃蛇小游戏练习

对于javascript语言，经过一段时间努力，有些入门，所以捣鼓一些小游戏练手。和之前的canvas相比，只能说有些进步，对于游戏图层分布渐渐有了模糊的认知。对于设计模式，编程开发，算法之类的，任重而道远了。贪吃蛇小游戏代码有点乱，不过还是写了详细注释，希望对你们有帮助，高手勿喷，我是小白。游戏设计思路：1.开始加速重来三个按钮，分别触发不同事件2.贪吃蛇运动，吃食物

2017-01-17 15:40:32 793

原创 javascript2048游戏开发练习笔记

我是写笔记，实际点是保存自己练习成果，视频教程来自网络的 JavaScript网页游戏开发实战篇喜欢的自行百度2048游戏分析：1.键盘事件：上下左右2.单元格（16个），背景色3.数字单元格（16个），背景色，字体颜色4.判断数字单元是否可以移动：1）左移动，最左边那一列不能移动，相同数字叠加，判断移动数字和目标之间单元格是否为空，如果不为空，是否数字相同。2）右移动，

2017-01-06 21:59:51 704