![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 69
柒青衿
前端
展开
-
JavaScript-读 You Dont Know JS,原型继承不是继承
这篇博客是读You Dont Know JS系列书中this & Object Prototypes这本书后总结的第三篇博客,也是最后一篇(第一篇讲this到底是什么,第二篇讲Object到底是什么)。本篇博客中涉及到原型继承的链式结构、prototype与__proto__(也就是[[prototype]])区别等问题。原创 2017-05-10 16:25:02 · 881 阅读 · 0 评论 -
HTTP-URL中查询字符串格式化
HTTP-URL中查询字符串格式化GET请求是最常见的请求类型,常用语向服务器查询某些信息。必要时,需要将查询字符串追加到URL末尾。有的时候为了根据URL中查询字符串的不同渲染不同的页面也需要读取URL中的查询字符串。如何避免在URL写入查询字符串时报出格式错误 及 如何更快捷读出URL中查询字符串就是这篇博客要解决的问题。 https://www.baidu.com/baidu?wd=%C6原创 2016-05-10 21:15:38 · 6805 阅读 · 0 评论 -
JavaScript-观察者模式(publish/subscribe)
JavaScript-观察者模式(publish/subscribe)观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。 在N原创 2016-05-08 14:27:38 · 18788 阅读 · 2 评论 -
JavaScript-装饰器函数(Decorator)
JavaScript-装饰器函数(Decorator)用于给对象在运行期间动态的增加某个功能,职责等。相较通过继承的方式来扩充对象的功能,装饰器显得更加灵活,首先,我们可以动态给对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点。其次:继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余了。 下面给出几个常用的装饰器函数示例,相关代码请查看github1原创 2016-05-08 11:07:57 · 14544 阅读 · 0 评论 -
JavaScript-函数柯里化
JavaScript-函数柯里化 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数。也就是说是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数。 例如,我想创建一个做自我介绍的函数,每个人只要输入自己姓名、性别、原创 2016-05-07 21:26:49 · 2463 阅读 · 0 评论 -
React-基于React & Reflux 的评论框组件 (ES6)
React-基于React & Reflux 的评论框组件 (ES6)可以通过如下地址下载源码:https://github.com/CynthiaLYY/comments打开方式:下载压缩包并解压至你本地服务器目录下,安装package.json中的模块依赖,通过webpack重新打包校验是否有错误,通过locallhost:端口号 /comments 访问。最近在学原创 2016-04-24 19:19:37 · 1410 阅读 · 0 评论 -
ES6-Promise
Promise1.Promise概念Promise 对象有三种状态: Fulfilled 可以理解为成功的状态 Rejected 可以理解为失败的状态 Pending 既不是 Fulfilld 也不是 Rejected 的状态,可以理解为 Promise 对象实例创建时候的初始状态2.三个重要方法在 Promise 对象当中有三个重要方法————resolve原创 2016-04-22 17:14:22 · 2929 阅读 · 0 评论 -
ES6-Iterator与for..of..遍历
Iterator与for..of..遍历1.Iterator概念遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。JavaScript中有些数据结构具备原生的Iterator接口。为了更好理解这个概念,我们也可以自己写一个Iterator。 var it = simIteractor(['hi','ES5']); console.lo原创 2016-04-22 15:51:48 · 758 阅读 · 0 评论 -
ES6-Object的变化
Object的变化1. ES6允许在对象中只写属性名,不写属性值,属性值为属性名对应的变量值。 var a = 'hi'; var obj = {a}; console.log(obj); //Object {a: "hi"}2.对象内方法的简写。 var a = 'hi'; var obj = { name: 'ES6', a, sayHi(){原创 2016-04-22 15:10:52 · 1954 阅读 · 0 评论 -
ES6-Proxy与Reflect 实现重载(overload)
Proxy与Reflect实现重载(overload)从语法角度讲JavaScript不支持重载。原因很简单,JS中函数可以传入任意类型、任意个数的参数,通通可以通过在函数内使用this.arguments获得。这样,就无法实现同名函数参数列表不同实现不同功能。当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作。但是,我认为这不能叫做重载。ES6带来了Proxy和R原创 2016-04-16 21:56:01 · 4333 阅读 · 0 评论 -
ES6-Symbol类型
Symbol类型1. 为了避免属性名的冲突,ES6新增了Symbol类型。Symbol可以产生一个独一无二的值。 let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2原创 2016-04-22 15:14:35 · 1536 阅读 · 0 评论 -
ES6-新数据结构Set与WeakSet
新数据结构Set与WeakSet1. SetSet类似于数据,但是成员值都是唯一的。生成Set的方式如下。var s = new Set();[1,1,3,3,5,5].map( x => s.add(x) );console.log(s); //Set {1, 3, 5}没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了。或者你可以这样写。va原创 2016-04-10 21:45:13 · 930 阅读 · 0 评论 -
HTTP-URL编码函数
HTTP-URL编码函数一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。比如,世界上有英文字母的网址 “h ttp://www.haorooms.com”, 但是没有希腊字母的网址“h ttp://www.aβγ.com” (读作阿尔法-贝塔-伽玛.com)。这是因为网络标准RFC 1738做了硬性规定: Only alphanumerics [0-9a-zA原创 2016-05-10 21:53:58 · 1709 阅读 · 0 评论 -
JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
JavaScript-在父元素与子元素都绑定多个事件时执行顺序事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段、有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。1. 原生事件的发生顺序一般来讲,当为一个a标签添加click事件以后,原创 2016-05-12 20:18:49 · 18817 阅读 · 3 评论 -
JavaScript-读 You Dont Know JS, Object到底是什么
这篇博客是读You Dont Know JS系列书中this & Object Prototypes这本书后总结的第二篇博客(第一篇讲this到底是什么)。 这篇博客讲对象,其中会涉及到一些让我们困惑已久的问题,比如:对象的数据属性和访问器属性,对象属性(property)的特性(attribute)。原创 2017-05-10 11:12:05 · 1049 阅读 · 0 评论 -
JavaScript-读 You Dont Know JS,this到底是什么
You Dont Know JS一系列书不错。这一系列博客是我读这本书以后总结的干货。这篇博客讲解为什么使用this,以及如何确定一次函数调用的this到底是哪个对象。原创 2017-05-05 17:21:45 · 3589 阅读 · 0 评论 -
React-组件渲染和更新的实现
最近一直写React,慢慢就对里面的一些实现很好奇。最好奇的就是自定义标签的实现和this.setState的实现。这里不分析JSX是如何解析的,所有组件都用ES5方式编写。组件渲染渲染时候,我们会调用render方法。原创 2016-08-16 16:35:47 · 17036 阅读 · 1 评论 -
ES6-Generator与异步操作
Generator与异步操作1.Generator概念可以把Generator理解成一个状态机(好像React中有很多state),封装了多个内部状态。执行Generator返回的是一个遍历器对象,可以遍历Generator产生的每一个状态。在function后加*就可以声明一个Generator函数。 function* hiGenerator(){yield 'hi';原创 2016-04-22 16:52:11 · 3349 阅读 · 0 评论 -
Redux-Provider与connect
Redux使用的基本思路1)定义actions.js,其中包括actions type(字符串常量)、actions creators(返回一个json的函数,返回的这个json就是actions)2)定义reducers.js,包含多个reducer(就是一个函数):(state, action)=>{……return newState};最后通过 combineReducers()将多个red原创 2016-07-05 13:37:48 · 6285 阅读 · 2 评论 -
JavaScript-二进制与二进制数组
在ES5中引入了Blob用于处理二进制。在ES6中引入了ArrayBuffer、TypedArray、DataView用于处理二进制数组。常规的前端操作用,用到二进制的地方不多。但是,当我想处理文件的传输时候,使用二进制进行传输可以更快。在进行异步数据传输(AJAX)时,很可能出现这种场景。BlobBlob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。其他原创 2016-07-03 18:09:40 · 13328 阅读 · 0 评论 -
React-为什么要使用虚拟DOM
什么是虚拟DOM(Virtual DOM)首先,解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应。虚拟DOM的工作原理是:数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较,得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端,其实就有点类似DocumentFragment,把多次DOM操作做原创 2016-07-01 20:42:10 · 6153 阅读 · 1 评论 -
JavaScript-mixin实现多继承
mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上,注意这个继承还是有区别的。js是一种只支持单继承的语言,毕竟一个对象只有一个原型,如果想实现多继承,那就简单暴力的把需要继承的父类的所有属性都拷贝到子类上,就是使用mixin啦。原创 2016-06-26 13:30:12 · 10324 阅读 · 0 评论 -
JavaScript-学会进行错误处理
好的代码还是应该健壮,不应该页面一执行控制台一堆错误。今天学习了一种向服务器端报错的方式.原创 2016-06-25 21:30:24 · 553 阅读 · 0 评论 -
JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
我在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件。调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX。这在本地服务器测试还好,如果我把它拿到运行环境,很可能出现提示功能卡顿,甚至没等提示出现用户就输入完毕的现象。毕竟大家现在打字都很快啊。于是我找到了一个新技能,函数节流 & 函数去抖。 throttle 和 debounce 是解决请求和响应速度不匹原创 2016-06-04 14:34:18 · 6970 阅读 · 3 评论 -
JavaScript-可维护代码编写,函数式编程与纯函数
JavaScript-可维护代码编写,函数式编程与纯函数JavaScript是函数式编程与面向对象编程的混合编程语言,加上本身一些可扩展性(比如:函数参数个数及类型的不确定),使得JavaScript非常灵活,当然也可以说非常不可控。正是这个特点,使得一个团队维护一个共同的前端项目时,JavaScript代码可能非常难以读懂。试想,你新加入一个团队,让你去读别人的代码本身就不太容易,如果团队的注释习原创 2016-05-26 21:02:59 · 2483 阅读 · 0 评论 -
ES6-新数据结构Map
新数据结构MapJavaScript中对象的本质是键值对的集合,但是键只能是字符串。为了弥补这种缺憾,ES6带来了一种新的数据结构Map。Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇)。请看下面例子。var m = new Map();var ul = document.getElementsByTagName('ul');m.set(ul,原创 2016-04-10 21:06:19 · 2782 阅读 · 0 评论 -
ES6-let带来了更简单的块级作用域
let 带来了更简单的块级作用域1. ES6新增了let命令,用于声明变量。其与var的不同在于,用let声明的变量只在 { } 内有效。这使得我们可以很方便的实现块级作用域,不再使用立即实行函数。{ let a=1; var b=2;}console.log(a); //undefinedconsole.log(b); //2在for循环中使用let可以有效避免全局变量污染。原创 2016-04-04 21:39:57 · 1857 阅读 · 0 评论 -
JavaScript-bind()与函数绑定
bind()与函数绑定函数绑定是可以优化JS性能的一种高级技巧。说到函数绑定,就必然提高bind()函数。首先看下官网对于bind()的介绍:bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.使用bin原创 2016-02-20 21:01:10 · 3109 阅读 · 0 评论 -
jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()
JQuery动画以下JS代码公用的HTML: Show:Paragraph 2 Show:Paragraph 2&3 Hide:Paragraph 2 Hide:Paragraph 2&3原创 2016-01-15 21:38:43 · 6148 阅读 · 1 评论 -
JavaScript-内存泄漏问题
内存泄漏1. 概念内存泄漏是指一块被分配的内存,既不能使用,又不能回收,直到浏览器进程结束。2. 可能导致内存泄漏的几种情况(1) 当页面中的元素被移除或者替换时,若元素绑定的事件没有被移除,在IE中不会做出处理,应该先移除绑定的事件。(2) 普通循环引用可能导致内存泄漏:原创 2016-01-11 15:38:04 · 635 阅读 · 0 评论 -
JavaScript-跨域实现方法总结
JavaScript跨域取值问题实现方法总结最近在学习JS跨域,发现两篇个不错的博客,分享一下。1 JavaScript跨域总结与解决办法什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为Jav转载 2016-01-12 16:08:40 · 1885 阅读 · 0 评论 -
jQuery-事件委托案例练习
这是一个按钮控制文字大小的案例,使用了事件委托机制。 jQuery Button and Animate *{ margin:0; padding:0; } .maindiv{ font-family: "Microsoft YaHei", "微软雅黑"; width:600px; margin:0 auto; color: #原创 2016-01-08 16:27:35 · 672 阅读 · 0 评论 -
AJAX-实现简单的异步传输实例
需求:查询员工信息,新增员工信息。页面:一个纯html页面,一个php页面。代码:html页面:Demobody, input, select, button, h1 { font-size: 28px; line-height:1.7;} 员工查询请输入员工编号:查询员工新建请输入员工姓名:请输入员工编号:请选择员工性别:原创 2016-01-05 21:16:32 · 2190 阅读 · 0 评论 -
jQuery-iframe加载完成后触发的事件监听
最近遇到一个问题,要写一个后台管理系统的layout,里面content是一个iframe,如何在iframe变化时使body里其他元素也发生相应变化呢。我借鉴了如下代码: $(document).ready(function(e){ var iframe = document.getElementById("Box"); i原创 2016-01-09 10:16:46 · 73511 阅读 · 0 评论 -
AJAX-基本知识介绍
1. 简介AJAX是异步的Javascript和XML的缩写。实际含义是可以在不重新刷新整个网页的情况下,局部更新网页。比如,更新局部表单,在用户填写一个字段以后,可以马上把该行数据发送给服务器,服务器进行验证,即时返回错误,不用等待表单内容全部填写完毕再发送给服务器,快捷方便。2. 用AJAX进行局部刷新的步骤(1) HTML和CSS完成页面编写(2原创 2016-01-04 21:49:08 · 621 阅读 · 0 评论 -
JSON-基础知识及实例应用
1. 基本概念JSON:JavaScript对象表示法(javaScript Object Notation)JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式组织,易于人们阅读和编写。同时也易于机器解析和生成JSON是独立于语言的,也就是说不管什么语言,都可以解析JSON,只需要按照JSON的规则就可以2. JSON与XML比较JSON比X原创 2016-01-07 21:10:35 · 506 阅读 · 0 评论 -
JavaScript-offsetWidth,clientWidth,scrollWidth,及对应top、left区别及实测结果
实测 offsetWidth clientWidth scrollWidth在 IE, FireFox, Chrome 中显示效果原创 2015-12-06 11:51:01 · 942 阅读 · 0 评论 -
JavaScript-JS优化与惰性载入函数
惰性载入函数由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时,都要对每个if分支或try语句进行检查,这样会使得浏览器反应变慢。实际上,当我们用某个浏览器打开网页时,就决定了某个if分支或try语句是可用的,没有必要每次调用都检查。为了解决以上问题,JavaScript中出现一种名为惰性载入的技巧。惰性载入表示函数原创 2016-02-20 19:29:16 · 1671 阅读 · 0 评论 -
JavaScript-Javascript中bind()方法的使用与实现
Javascript中bind()方法的使用与实现原文链接:http://blog.liuwanlin.info/javascriptzhong-bindfang-fa-de-shi-xian/原文作者:superlin在讨论bind()方法之前我们先来看一道题目:var altwrite = document.write; altwrite("hello"); /转载 2016-02-20 21:14:14 · 861 阅读 · 0 评论 -
Avalon-插入删除处理
1. ms-if与显示隐藏处理不同,ms-if是通过删除和添加节点来实现的。下面是一个小demo三个按钮控制三个色块,点击每个按钮可以控制相应色块的出现,页面刷新以后5秒出现按钮和色块,默认出现的是红色色块。html red blue yellow原创 2016-03-14 16:27:38 · 519 阅读 · 0 评论