![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
hkwBest
这个作者很懒,什么都没留下…
展开
-
ES6--数组
写在前面: 我本前端小汪一枚,本着对前端知识的无比热爱的心情(其实最近比较闲~),工作之余整理了一些ES6的要点内容,特此分享与君共勉,会持续更新欢迎各路大神批评指正~今个儿头一天咱们来扯一扯数组的八卦: 对于前端的程序旺来说数组再熟悉不过了,不过最新的ES6规范中对数组进行了很多的扩展和改进,闲话不多说进入主题。/* Array.from()用于把类数组对象或可遍历的对象转化为真原创 2017-11-23 22:04:41 · 1853 阅读 · 0 评论 -
Vue--双向绑定
在React或者Vue这类MVVM框架中使用双向绑定是很常见的需求,最近项目中在使用Vue,今天来谈一谈Vue中双向绑定的实现。先来说几句废话:什么是双向绑定?把Model中的数据绑定到View中,然后更新Model时View会自动跟新,这叫单向绑定,而当用户改变View时Model中数据也能自动更新时,这叫双向绑定!如何实现Vue中的双向绑定?有两种方式可供参考:$emit 自定义事件处...原创 2019-05-30 16:17:13 · 502 阅读 · 0 评论 -
根据输入实时发送请求(防抖函数)
有这样一种常见的需求:有一个搜索框,需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。最先想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。这样做的不足也很明显:其实我们并不需要用户每次输入时都发送请求,这样会给服务器造成不必要的压力。因为发送的是异步请求,有可能查询的结果和最后输入的内容并不匹配。如何解决以上两种问题呢? 有两种解决...原创 2019-05-21 17:38:36 · 2441 阅读 · 2 评论 -
keydown、input、keyup
我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容,所以他们的差异就不得不了解。先来看一个实验案例:<body> <input id='user' type="text" /></body><script> var user = document.getElementById('...原创 2019-04-09 12:09:33 · 1611 阅读 · 0 评论 -
ES6的Module模块
设计思想ES6模块的设计思想是尽可能的静态化,使得编译时就能确定模块间的依赖关系。这也是与CommonJS和AMD运行时才能确定模块间的关系的主要区别。以CommonJS来说明一下运行时加载的原理。// CommonJS模块let { beef, wine, glass } require(material.js);//等价于let materials = require(mater...原创 2019-04-11 20:44:33 · 397 阅读 · 0 评论 -
Attribute和Prototype详解
最新有小伙伴问我Attribute和Prototype的区别,今总结如下:Attribute: 表述HTML标签的特性集合。Prototype: 表述DOM对象的属性,它属于Js里对象的范畴。举个栗子:<input id="test" placeholder="hello world" other="something" />var input = document.get...原创 2019-03-13 11:01:40 · 733 阅读 · 0 评论 -
instanceof和typeof 详解
判断变量是某种数据类型也是实际开发中常见的操作,总结如下:写在前面在介绍这两者之前先来回顾下js中的数据类型都有哪些。基础数据类型nullundefinedStringNumberBoolean引用数据类型Object、Array、Function、Date等typeoftypeof操作符返回一个字符串,我们先来看看使用typeof判断数据类型的结果typ...原创 2019-03-12 15:30:21 · 565 阅读 · 0 评论 -
重学原型链
一切源于一个简单的案例:function Foo(){ this.name = name; // 原始属性or方法}Foo.prototype.say = function(){ // 原型属性or方法 f}var f1 = new Foo();f1.say(); //helloFoo.prototype = {};var f2 = new Foo()...原创 2019-03-11 17:45:52 · 175 阅读 · 0 评论 -
输入银行卡,每4位加空格
前几天项目中用到这个,在网上查到一个很好的解决方案 特拿出来分享Dom<input type='tel' maxLength=25 class='bank' />js// 获取光标位置function getCursortPosition(textDom) { var cursorPos = 0; if (document.selection) { ...翻译 2019-01-28 18:26:03 · 1070 阅读 · 0 评论 -
可以使用break/continue跳出的循环
js中对数组、对象的遍历方法众多,但并不是每个方法都可以使用break/continue跳出循环,这些方法我们经常使用却也很容易混淆,特总结如下:直接看代码吧!!var arr = ['beijing', 'shanghai', 'guangzhou', 'shenzhen', 'hangzhou', 'chengdu'], obj = { name: 'tom', age: 20, addr...原创 2018-11-07 16:27:38 · 2034 阅读 · 0 评论 -
手写JSONP
jsonp在前端领域是个很常用的技术,面试中也可能会让你手写jsonp。相信很多同学都听过jsonp但对其实现原理并不是很清楚,今天咱们来一边手写jsonp一边介绍其原理。首先为什么会有jsonp这个技术呢?都是同源策略惹的祸。那什么又是同源策略呢?所谓同源是指,域名,协议,端口相同。举个简单的栗子,你在百度的站点通过ajax是访问不到新浪的页面的?那怎么解决这个问题呢,jsonp要闪亮登场了...原创 2018-08-07 16:53:02 · 1914 阅读 · 0 评论 -
操作数组之常用方法:map()、filter()、some()、every()、 forEach()
如标题所说这几个方法是操作数组最常用的几个方法。它们有怎样的区别呢?map(callback)返回一个新的数组。为每个元素执行callback方法let arr = [1,2,3,4];let newArr = arr.map((item,index)=>{return item*2}); //callback要有returnconsole.log(newArr); // [2...原创 2018-07-25 16:37:34 · 1689 阅读 · 0 评论 -
去掉字符串前后空格--trim
原生的js并没有提供像jQuery的trim方法,但是工作中又会经常用到,所以常常需要自己实现。去掉字符串前后的空格有很多种实现方式,正则无疑是最方便高效的一种,也是最常用的一种。原理也很简单。function Trim(){ String.prototype.trim = function(){ return this.replace(/(^\s*) | (\...原创 2018-07-25 14:55:00 · 5019 阅读 · 0 评论 -
一个简单的笛卡儿积分享
前两天工作中用到笛卡儿积,一时间没有思路,在网上找个一个很不错的方法特记录分享如下:function cartesianProductOf() { return Array.prototype.reduce.call( arguments, (total, currItem) =>{ var ret = []; ...翻译 2018-07-23 12:04:59 · 445 阅读 · 0 评论 -
理解this指向
this指向大致可以分为两种,一种是ES5中的this,另外一种是ES6中的this也就是箭头函数的this。 想要了解ES5中的this只要记住两点就可以了: this的指向在函数执行时才能确定, 而this指向 最近一次 调用的对象(不过也有几种特殊情况,后面会做说明。) 来看几个例子var n = 10;var obj = { n: 20, f...原创 2018-07-23 11:23:35 · 270 阅读 · 0 评论 -
javascript数组
js中的数组很基础,今天写下此文的原因是本人总是把slice和splice搞混,所以特此记下一笔,算是做个总结。 let arr = [1,2,3,4]常用方法 arr.push('5') //数组尾部添加元素 [1,2,3,4,5] arr.unshift('0') //数组头部添加元素 [0,1,2,3,4] arr.pop() //数组...原创 2018-03-08 10:47:35 · 339 阅读 · 0 评论 -
图片加载失败占位符
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。有两种方式可以实现:js其实这种方式也很简单,监听onerror事件就可以了。举个栗子:<img src="http://xxxx" onerror="{this.src='/statictest.png'}" />监听onerror...原创 2019-06-25 11:25:28 · 1903 阅读 · 0 评论