JavaScript
文章平均质量分 50
samfung09
这个作者很懒,什么都没留下…
展开
-
Object.defineProperty和Proxy对比
Object.defineProperty(obj, prop, descriptor)MDN文档第三个参数的解释:configurable:属性是否可配置(重新defineProperty),是否可删除,默认falseenumerable:属性可否被遍历,默认falsewritable:配合value使用,可否修改value,默认falsevalue:默认undefine...原创 2019-12-29 23:59:47 · 626 阅读 · 0 评论 -
JavaScript小妙招2
二、十、十六进制转换二进制十进制互转二进制转十六进制位运算符~、&、|、^、<<、>>链接位运算符是在数字底层(即表示数字的 32 个数位)进行操作的。~ 加一取反var a = 2;console.log(~a) //-3a = -9;console.log(~a) //8&...原创 2019-12-03 00:18:31 · 138 阅读 · 0 评论 -
简单几句代码写个缓冲运动
看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-23 16:25:53 · 309 阅读 · 0 评论 -
show()封装没有想象中那么简单
以往写显示隐藏效果时,一般都习惯将display值设为none和block,隐藏是对的,就是display='none',但显示时我们一昧的display='block'会将行内元素变成块级元素,或许你不太在意,但这始终是不对的。那么该怎么来判断在元素显示时给它的display值设为block还是inline还是inline-block呢,我的想法是在元素隐藏前将它的display值保存起来,...原创 2018-05-25 17:30:34 · 179 阅读 · 0 评论 -
attribute与property
区别简单理解,attribute指html标签上属性,property指dom元素对象上的属性。一般情况下property无法获取html标签自定义属性,比如<div dname="haha">自定义标签属性</div>console.log(document.querySelector('div').dname)//输出undefinedconsole....原创 2018-05-27 19:48:22 · 359 阅读 · 0 评论 -
generator函数与async函数
generator函数其实从我开始接触es6中的异步函数就是一直在用async await(这是es7的),所以generator基本没用过,不过作为曾经的异步解决方案还是用必要了解一下。generator函数的特点:1、generator函数又名生成器函数,与普通函数不同,普通函数一旦调用就会执行完,但generator函数中间可以暂停,执行一会歇一会。2、函数声明时带上 * ,...原创 2018-10-06 20:40:06 · 1025 阅读 · 0 评论 -
JavaScript模块化
从前写js代码的时候都是直接写一个js文件然后在html页面中引入,但当项目越来越大需求越来越复杂时,这种做法就显得鸡肋,各种问题暴露,比如命名冲突,可维护性差等。所以,当项目越来越复杂时我们要怎么将业务逻辑代码分工协作,各功能块分开管理,互相独立,需要时按需引入呢?于是就有了JavaScript模块化。js模块化的好处1、避免命名冲突,减少全局污染。2、更好的分离,按需加载。3、...原创 2018-10-24 20:30:14 · 178 阅读 · 0 评论 -
HTML解析之DOMContentLoaded和onload
说在前面在很久很久以前,我在封装自己的JQuery库时就使用过DOMContentLoaded,觉得这个知识点看看别的文章就行了,不过现在我想把它记下来。JS代码与body标签的位置关系一个HTML初学时会遇到的问题,一个html页面中js代码应该放到哪里?<!--如果script标签在body前面--><head> ... <...原创 2019-09-12 00:01:45 · 1486 阅读 · 0 评论 -
JS数组扁平化
本来是不想写的,想了一下还是写下来吧。数组扁平化意思就是将多维数组变成1维数组,在JS中要实现数组扁平化方法有很多种,下面随便列举几种。话不多说,往下看代码。方法1、最基础的for循环 + 递归var arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];function arrFlat(arr){ var temp = []; for...原创 2019-09-18 23:27:21 · 297 阅读 · 0 评论 -
JS面向对象
封装工厂模式创建对象function createPerson(name, age){ let obj = {}; obj.name = name; obj.age = age; obj.sayHi= function(){ console.log('My name is '+ name +'!'); } return ob...原创 2019-09-24 23:08:06 · 171 阅读 · 0 评论 -
AJAX封装
一些前置知识AJAX状态(readyState)0 ---------- unsent 刚开始创建XHR,还未发送1 ---------- opened 已经执行open这个操作2 ---------- headers_received 已经发送AJAX请求(AJAX任务开始),响应头信息已经被客户端接收(响应头中包含了:服务器的时间,返回的HTTP状态码...)3...原创 2019-10-05 23:20:27 · 282 阅读 · 0 评论 -
一个函数简单实现事件委托
平时给元素绑定事件一般是直接写到属性上(即0级事件处理程序)或是addEventListener()监听事件(2级事件处理程序)。但有些应用场景以上方法可能不太管用,比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了(也叫事件代理)。事件委托简单通俗理解就是,给外层元素绑定事件,然后利用事件冒泡,针对当前触发的元素执行相应的函数。具体代码 <ul class="l...原创 2018-07-13 18:30:43 · 1473 阅读 · 0 评论 -
随手写写前端路由的简单实现
前端路由主要有两种实现方式1、location.hash+hashchange事件。2、history.pushState()+popstate事件。第一种、location.hash+hashchange事件这种方式的优势就是浏览器兼容性较好。当页面url地址发生改变时,location.hash获取hash值,比如"www.xxx.com/#/home",location....原创 2018-06-29 04:26:55 · 1265 阅读 · 1 评论 -
使用发布订阅模式简单实现类似vue的双向数据绑定
看代码var inp = document.querySelector('input');var p = document.querySelector('p');//发布订阅对象var obj = {};//发布订阅事件列表obj.list = {};//定义订阅事件函数obj.listen = function(eventName,fn){ obj.list[event...原创 2018-05-09 18:52:58 · 958 阅读 · 0 评论 -
JavaScript中一些小妙招
IE浏览器版本过低处理IE10及以下版本提示升级(使用只有IE10和旧版IE才支持@cc_on 条件编译语句实现)<script>/*@cc_on alert("您正在使用的浏览器版本过低,为了您的最佳体验,请先升级浏览器。");window.location.href="http://support.dmeng.net/upgrade-your-browser.html?...原创 2018-05-09 00:33:47 · 430 阅读 · 0 评论 -
canvas压缩图片上传
图片预览使用html5中FileReader读取文件base64信息var input = document.querySelector('input');var preview = document.querySelector('.preview');input.onchange = function(){ var file = input.files[0]; /...原创 2018-05-12 00:54:54 · 195 阅读 · 0 评论 -
DOM与虚拟DOM的概念
DOM的本质: 浏览器概念,浏览器从服务器端读取html页面,浏览器将html解析成一棵元素嵌套关系的dom树,用对象来表示页面上的元素,并提供操作dom对象的api。虚拟DOM: 框架概念,程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 ),为了实现页面元素的高效更新( 目的 )react中//虚拟dom实质就是一个js对象可以声明变量直接使用let...原创 2018-05-03 17:03:38 · 2103 阅读 · 0 评论 -
简单理解JavaScript中this指向以及箭头函数中的this
平时敲代码时经常会用到this关键字,但如果你不清楚了解当前this指向谁时经常会带来一些错误,下面简单理解下JavaScript中的this。JavaScript中this指向与函数在哪声明或是在哪执行无关,主要看最终是谁调用,简单来说看函数执行时前面是否有点,有点则该函数内this指向点前面的对象,没点则指向全局对象( 浏览器端为window )。看代码var obj1 = { ...原创 2018-05-02 21:34:56 · 334 阅读 · 0 评论 -
promise原理及简单实现
谈谈promisepromise是es6提供的异步编程解决方案,相比之前的回调函数方案更加合理强大。promise是一种异步流程的控制手段,下面几个promise特点1、避免了回调地狱,可链式调用。2、支持多个并发请求,获取并发请求数据。3、promise可以解决异步的问题,但不能说promise本身就是异步的。4、promise三种状态:pending,resolved,...原创 2018-07-31 23:18:56 · 319 阅读 · 0 评论 -
javascript闭包
闭包用文字简单概括一下闭包理论简述版:函数执行形成私有作用域,保护里面的私有变量不受外界干扰,这种保护机制称为闭包。市面共识版:函数执行形成一个不销毁的私有作用域,称为闭包。代码简单实现//柯里化函数function fn(){ return function(){}}var f = fn();//惰性函数var util = (function(){ ...原创 2018-03-31 19:15:27 · 149 阅读 · 0 评论 -
javascript闭包和立即执行函数
闭包—closure先看一个闭包的例子。我们想实现一个计数器,最简单的方法就是定义一个全局变量,计数的时候将其加1。但是全局变量有风险,哪里都有可能不小心改掉它。那局部变量呢,它只在函数内部有效,函数调用完后它就没了,而且全局没法使用。那我们用想让计数器全局使用,又不想让这个变量被随便修改怎么办。这就需要闭包了:function count(){ var i=0; ret...转载 2018-04-03 01:30:59 · 581 阅读 · 0 评论 -
原型与原型链
最近在重温一遍JavaScript,发现以前的笔记都在代码上,为了更加方便现在会在博客上做些笔记。1、先来说说for in,for in循环在遍历的时候会将对象自己私有的和所属类原型上扩展的属性及方法都遍历到var obj = {a:1,b:2,fn:function(){}};Object.prototype.c = 3;for(var key in obj){ console...原创 2018-04-18 01:06:36 · 126 阅读 · 0 评论 -
图片延迟加载
原生js简单实现图片延迟加载,话不多说,看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-04-22 00:35:10 · 1062 阅读 · 0 评论 -
js数组高阶函数
1、forEach(遍历)forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。(没有返回值,将数组遍历)注意:forEach() 对于空数组是不会执行回调函数的。回调函数参数:currentValue 必需。当前元素;index 可选。当前元素的索引值;arr 可选。当前元素所属的数组对象。2、filter(过滤,返回新数组)filter() 方...原创 2018-04-23 03:23:05 · 6990 阅读 · 1 评论 -
移动端touch事件实现无缝滚动及下拉刷新
pc端的鼠标事件写多了,但移动端没有鼠标,所以来写写移动端的touch事件。touch事件主要用到touchstart,touchmove,touchend三个事件,事件没什么好说的,做效果是最主要用到的是touch事件对象给我们提供的几个属性touches 屏幕触点集合targetTouches touch事件绑定元素身上的触点集合changesTouches 发生...原创 2018-08-08 21:58:52 · 4941 阅读 · 0 评论