JavaScript
文章平均质量分 68
allenliu6
这个作者很懒,什么都没留下…
展开
-
从web浏览器的渲染到性能优化
本文主要讲谈及web浏览器的渲染原理、流程以及相关的性能问题最近在复习时遇到一个问题,关于async和defer,发现自己还能记住一点,然而再往深一想,浏览器的渲染顺序?怎么防止阻塞DOM渲染?如何保证首屏优化、关键渲染路径优化?如何从浏览器渲染、网络请求、js引擎机制优化性能?好像找不到让自己满意的答案,所以查阅资料写个博客总结一下。原创 2017-08-05 16:06:28 · 6648 阅读 · 0 评论 -
DOM(一)
DOM,document object model,文档对象模型,是针对XML但经过扩展支持HTML的应用编程接口,其将整个页面结构映射为一个多层节点结构,通过这种语法解析或者说是逻辑抽象,我们可以清晰构建整个HTML树状节点结构,同时根据其API比较容易增删改各个节点,进而改变浏览器呈现内容。原创 2016-04-30 17:58:45 · 268 阅读 · 0 评论 -
DOM(二)
DOM是针对HTML和XML文档的API,DOM描绘了一个层次化的节点树Node(抽象表示文章的一个独立部分):NodeType:表明节点类型 1为元素节点 2为特性节点 3为文本节点 8为注释节点 9文档节点NodeName 元素节点保存标签名 NodeValue 节点值 元素节点为零 childNodes 保存NodeList对象,随DOM树变化动态变化 parentNo原创 2016-06-02 21:06:52 · 377 阅读 · 0 评论 -
BOM
BOM,browser object model,浏览器对象模型,JavaScript的DOM专注于图形界面的html节点结构,而BOM则主要控制整个浏览器的界面以及浏览器上方的工具栏、网络请求相关的内容等。BOM以window对象为依托,表示浏览器窗口以及页面可见区域。同时window对象还是ECMAScript中的Global对象,因而所有的全局变量和函数都是它的属性和方法,且所有的原生构造函数以及其他的函数也都存在于他的命名空间下。原创 2016-06-01 22:02:09 · 304 阅读 · 0 评论 -
JavaScript数组简述
数组每一项可以保存任何类型的数据,大小是可以动态调整的,随数据添加自动增长length。原创 2016-05-25 18:40:39 · 455 阅读 · 0 评论 -
js 组合继承(使用原型模式和构造函数模式)和原型式继承
构造函数和原型模式各有很大用武之地,构造函数用于定义实例私有属性,而原型模式用于定义共享方法和属性,所以此模式下创建的实例都会有一份自己构造模式所定义的实例属性的副本,但又同时共享着原型模式所定义的原型链上的属性与方法,最大限度节约内存原创 2016-09-13 08:37:06 · 705 阅读 · 0 评论 -
【转】异步与未来(一) --JavaScript实际执行顺序浅谈
作为单线程的JavaScript虽然速度不算慢吧,但跟多线程处理事务的速度以及方便程度还是有所差距吧,异步算是对此有所弥补以及增强吧,而异步编程的核心就是程序中现在运行的部分和将来运行的部分之间的联系。转载 2017-05-21 10:48:52 · 360 阅读 · 0 评论 -
踩坑之统计请求发送与页面跳转冲突
随着大数据时代的到来,数据成了兵家必争之地,据之前的数据统计全球数据基本一年多就会翻上一番,当然从数据中做出成绩的公司也数不胜数,与此同时,我们也是越来越高重视数据采集,数据将作为每一个公司的重要战略资源,不断进行清洗挖掘储存。扯远了,作为横跨各大平台的web无疑是数据采集的重要阵地,我就最近在数据采集这方面遇到很大一坑。原创 2017-08-18 14:46:33 · 3526 阅读 · 0 评论 -
JavaScript ECMAScript5
ECMAscript一切区分大小写数据类型:undefined null boolean number string objectnumber:小数点区分浮点和整形 string:转义序列 字符串创建后值不能改变 严格模式为JavaScript容易出错的地方施加了限制位操作符:按位非~取反减一 按位与& 按位或| 按位异或^ 左移 有符号右移(符号位不动) 无符号右移 函原创 2016-04-21 20:37:17 · 398 阅读 · 0 评论 -
在HTML中使用JavaScript
使用<script>元素方式:包含外部文件(可以访问非本地文件,其中的嵌入式代码不会解释) 直接嵌入JavaScript代码(解释器会首先解释) 建议把<script>元素放在</body>前面简单分析defer和async属性的特点和作用原创 2016-04-20 19:59:39 · 257 阅读 · 0 评论 -
个人的一些前端思考
Sass都提供了一个更简单、更优雅的语法CSS,实现各种功能,是比较有用的管理css样式的一种新方式。其实sass可以被看做是CSS3的扩展,其中也包括了许多cssnext的用法,包括变量、mixin等等函数或机制,使我们在编写代码时,大大提升开发效率,后续的维护、迭代甚至重构都更为简单。当然其最终还是会被编译为当前支持的CSS的语法sass也很容易入门,基本css的特性都保留着,只是增加了许多便利。原创 2017-08-09 15:23:36 · 302 阅读 · 0 评论 -
JS开发中的一些小技巧和方法
前言这两年前端很火,JavaScript又是前端的必会技能,在JavaScript开发中其实有一些有意思的小技巧和方法,本文记录了一些我工作中遇到的一些技巧和方法。正文生成指定范围内的随机数当我们需要获取指定范围(min,max)内的整数的时候,下面的代码非常适合;这段代码用的还挺多的。function setRadomNum(min,max){ return M转载 2017-08-31 13:57:18 · 325 阅读 · 0 评论 -
响应式学习----从VUE1 到 VUE2
最近比较喜欢一张非常喜感的图。 其实最初的前端很简单,就跟这位大爷的说法差不多,直接拿起键盘,搞个编辑器然后打开浏览器就可以了,我相信包括我在内的很多人也就是这么单纯地喜欢上前端的,记得宇豪也是说喜欢前端就是因为CSS。起初的前端,标准混乱,浏览器性能差,随着ajax和node出现带来的两次飞跃,前端能做的事情越来越多,越来越多的需求也放到了前端,由后端主导的静态页面发展到了前后端分离的原创 2017-08-31 22:34:21 · 993 阅读 · 0 评论 -
vue2.5 与 typescript 不知不说的那些事
前言 没有特殊原因建议还是不要过快往vue中加入typescript,typescript和vue是比较成熟,但vue刚添加支持,契合度以及资料等都比较少,所以容易踩到坑,写起来并不顺手。原创 2017-11-15 21:35:54 · 4154 阅读 · 0 评论 -
下拉选择组件从内部组件到 ant-design 不得不说的三个故事
前言 昨天接到了第一个需求吧,目标就是一句话:把 @mtfe/react-dropdown 组件替换为 antd 的Select组件用图来说就是从 到 分解一下工作点 表现当长度过长时,不会出现滚动条,而是向左或向右扩展 正常的过滤以及选择功能具体实现: 要求 组件自由配置输入框与下拉框宽度样式 灵活配置下拉框相对位置 输入字符过滤,键盘上下键和回车可以在下拉框中控制选择内容明原创 2017-12-09 11:58:28 · 20449 阅读 · 1 评论 -
浅析前端MVC、MVP、MVVM模式
MVC是一种架构设计,通过关注点分离鼓励改进应用程序组织,其强调将业务数据(model)和用户界面(view)隔离,用第三部分控制器(controller)管理逻辑和用户输入。MVC其实是早期软件开发大牛想实现关注点分离时提出来的,后来也被广泛的使用在软件设计开发中,随着web大行其道,逐渐有人在web前端开始使用MVC模式,但很多框架其实更像是使用了MVC的变种MV*。原创 2017-06-10 19:15:54 · 1116 阅读 · 0 评论 -
【转】快速搭建react的webpack初始环境
网上找了半天才找到正常的教程,也是本文参考的教程可能是因为webpack版本等一些其他原因吧,我使用的是webpack3+,当然大家也可以选择react官方的脚手架—create-react-app。 本文主要将完成以下目标 1. 使用webpack进行模块管理,并进行简单配置 2. 实现热更新,也就是监听代码变动并刷新浏览器 3. 实现HMR,也就是代码动态替换转载 2017-08-01 20:28:23 · 559 阅读 · 0 评论 -
从零开始react入门(一)
作为一个稍微有点基础的人吧,思来想去如何开始学习react呢,最终觉得还是选择权威,简单即有效,直接奔官网,讲真确实直接get started,英文水平不错的推荐直接英文,如果英文差一点也可以去中文翻译官网。如果读者还没搭好react开发环境,可以参考我的另一篇博客–––快速搭建简单环境。这里我也就是用官网的例子,讲一下自己的理解和体会,有不对敬请指出。原创 2017-08-02 16:51:03 · 851 阅读 · 0 评论 -
vue和react比较
相似之处: 1. 使用virtual DOM 2. 提供响应式和组件化的视图组件 3. 将注意力集中保持在核心库,将其他功能如路由、全局状态管理交个其他插件原创 2017-08-09 11:40:49 · 586 阅读 · 0 评论 -
JavaScript杂谈之promise揭秘
所谓promise就是一个用来传递异步操作的消息,他代表了某个未来才能知道事件的结果,我们用这个代表了未来的结果先一步决定其下一步进行的操作,在ES6标准出之前我们是用笨拙的回调函数进行异步操作。事实上promise出现的意义要大得多,表面看来它只是让我们逃离了可怕的回调金字塔,让我们的代码颜值更高,语义化更强,更易于测试巴拉巴拉的一堆,但一个很多语言都坚定采用的标准有这么简单嘛?原创 2017-02-28 11:04:57 · 536 阅读 · 0 评论 -
关于DOM中元素位置、大小的API
综述DOM 的 API 繁多复杂,拿一个节点来说首先你要根据选择器或节点的特征获取到这个元素或者干脆创建一个节点然后你要使用具体的 API 来了解这个元素,如获取元素的style对象、位置、大小、属性、事件等最后你要使用强力的 API 对节点进行操作,如改变前面了解到的信息甚至对节点整体进行操作不论你使用什么框架,界面展示的最终环节基本就靠上面提到的 DOM API 进行,而框架的作用只是替原创 2017-10-24 13:00:15 · 689 阅读 · 0 评论 -
ECMAScript6简介和学习笔记(一) let const 解构
第一篇,介绍ECMAScript6 let const 解构赋值。原创 2016-12-08 16:23:16 · 667 阅读 · 0 评论 -
ECMAScript6简介和学习笔记(三)symbol proxy reflect set map
es6确实对es进行了较大的改动,从数据类型的变化就能反映出很大一部分。这一篇主要讲一下Symbol、Proxy和Reflect、Set、Map这四方面。原创 2016-12-21 12:19:02 · 609 阅读 · 0 评论 -
读you don't know js 有感之作用域
作用域这个词有过一些编程经验的猿们应该都不陌生,可是深究下去,他到底是什么呢?根据本书所述我的理解是:作用域是在程序中储存变量值和引用的一套规则。但是深究下去,这套规则到底是在哪储存变量值和引用?使用时如何取得它们?甚至这套规则是如何设置的呢?原创 2016-11-14 20:09:16 · 407 阅读 · 0 评论 -
读you don't konw js 有感之this全面解析
本文默认读者已经对this有了一定了解,如果读者觉得自己对this定义或者this的简单指向还有疑问,请先看我的另一篇文章。 this直译过来就是这个,它会被自动定义到所有函数的作用域中,不过这也造成了很多困扰,因为经常很难分辨它到底代表着什么,但由于它自身的功能确实可以提供很多便利,所以程序员不管能不能掌握this,不管会经常报错,还是会乐此不彼的使用它。 那么this到底是什么?其实它是函数在运行时根据一定规则绑定到变量上的,在函数被调动时,会创建一个调用的记录,也被称为执行上下文,这个记录中记录着原创 2016-11-14 20:42:02 · 310 阅读 · 0 评论 -
javascript设计模式(五) 装饰者模式 状态模式
装饰者模式是在对象不改变自身的情况下,在程序运行期间给对象动态添加职责。这样既保证了原来对象的一定封装性,又保证了装饰的对象不会太过臃肿,当然如果装饰得过多,那么装饰的链条自然会很臃肿,以至于影响性能。状态模式允许一个对象在其内部状态改变时改变他的行为,其关键就是要区分好事物内部的状态。原创 2016-11-09 21:40:25 · 366 阅读 · 0 评论 -
javascript设计模式(四) 职责链模式 中介者模式
职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。在职责链中,请求发送者只需要知道链中的第一个节点就可以将请求一直传递下去,这样就弱化了发送者和一组接收者之间的强联系。如果使用了中介者模式,各个对象之间的联系全靠中介者进行传递,彼此之间并不互相引用,在当一个对象改变时,只需要通知中介者即可。这样一个网状的关系就变成了一个以中介者为中心的一对多的关系。原创 2016-11-09 10:20:57 · 289 阅读 · 0 评论 -
javascript设计模式(一)单例模式 策略模式
单例模式的定义是指保证一个类仅有一个实例,并且提供一个访问它的全局访问点,其核心很简单就两点,唯一实例和提供全局访问,策略模式的定义是:定义一系列算法,把他们一个个封装起来,并且使他们可以相互替换原创 2016-11-08 09:03:15 · 625 阅读 · 0 评论 -
javascript设计模式(三) 命令模式 享元模式
命令模式的主要用途是让命令的接收者和命令发送者消除耦合,命令的意思是指执行某些行为的指令元(flyweight)模式是一种用于性能优化的模式,fly是苍蝇的意思,代表着蝇量级,其模式的核心为用共享技术来有效支持大量细粒度的对象原创 2016-11-08 15:34:12 · 343 阅读 · 0 评论 -
设计原则之开放-封闭原则 javascript
当需要改变一个程序的功能或者给这个程序增加新功能的时候,可以使用增加代码的方式,但是不允许改动程序的源代码,这就是开放-封闭原则,使用它最重要的就是找出程序中将要发生变化的地方,然后把变化封装起来,通过封装变化,我们可以把系统中稳定不变的部分和容易变化的部分隔离起来,若以后需要修改则只修改封装好的变化部分的,这样更加易于维护一些。原创 2016-11-07 19:52:52 · 1694 阅读 · 0 评论 -
设计原则之最少知识原则 javascript
一个软件实体应当尽可能少地与其他实体发生相互作用,这就是最少知识原则(LKP),所谓软件实体是一个广义的概念,包括系统,类,,对象,模板,函数,变量等。而在javascript中,软件实体大多指的是对象的概念,一般来说,减少对象之间的联系首先要做好对对象的封装,使其暴露出有限的接口和内容,其次是javascript中对象繁多,包括自带的window,location等,再加上各种自定义对象,按照单一职责原则来说程序中很容易出现复杂的对象关系网,而此时就需要最少知识原则来减少对象之间的耦合了。原创 2016-11-07 18:31:20 · 1487 阅读 · 0 评论 -
设计原则之单一职责原则 javascript
就一个类而言,应该仅有一个引起它变化的原因。这就是所谓的单一职责原则(SRP),这里的职责指的是引起变化的动机,如果有两个动机去改写一个类,那么就违反了单一职责原则,其实总体来说SRP要求的就是高内聚低耦合,但往往在实际的敲代码过程中很容易造成职责分散,也就是某一个职责往往在不经意间就被我们分成了多个职责。原创 2016-11-07 14:47:44 · 1288 阅读 · 0 评论 -
JavaScript杂谈之iterator for循环
iterator为了给表示集合的数据结构如数组、对象、set、map等定义一个统一的接口,方便进行统一的遍历,ES6新增了一种遍历器机制即iterator。其作用有三个,提供统一便利的访问接口,是数据结构成员按照一定次序排列,供for of使用遍历。原创 2017-02-27 12:20:56 · 1261 阅读 · 0 评论 -
JS函数参数都是按值传递的!
访问变量有按值和按引用两种方式,但参数只能按值传递在向参数传递基本类型的值时,被传递的值会被复制给命名参数,即arguments对象数组的中一个元素。在向参数传递引用类型的值时,会把这个值在内存的地址传递给命名参数即函数内的局部变量,此时若局部变量变化则可以影响到函数外部。基本类型传值比较好理解,下面给出一个书中引用类型传值的例子:原创 2016-09-12 20:09:49 · 3415 阅读 · 0 评论 -
踩坑之页端唤醒nativeAPP
算是科普文吧,坑没填完。最近一直在填坑,好久没写博客了,工作终于暂时告一段落,正好趁此机会熟悉一下坑,以后继续填在native app综合表现还是优于web的现在,尤其是用户也已经习惯于使用native app,从web导流到native的需求还是比较常见,而与旺盛的需求相反的是唤醒native app的方法或者说途径十分操蛋,可谓是遍地是坑。原创 2017-07-09 16:09:03 · 3062 阅读 · 0 评论 -
记科大讯飞武汉研发中心前端面试
很幸运遇到了一个人很好的面试官,问的问题也比较基础,不过自己可能还是基础不扎实吧,也有点紧张,问题回答的一般,主要自己会的都没有说的太好,希望下次面试会有进步,加油!原创 2017-03-16 20:54:59 · 10795 阅读 · 4 评论 -
跨域方法小结 CORS JSONP emmet window.name等
js跨域指,通过js在不同域之间进行数据传输或通信,如ajax获取不同域数据,js获取页面内不同域的iframe中的数据。只要协议、域名、端口有一个不相同即为跨域 如今才意识到无时无刻不在跨域,多少客户端和服务器端域名不同1.jsonp json+padding 利用script标签不受不同域影响的性质,在自己代码中添加js src链接的url值,用url参数发送请求并规定回...原创 2017-03-16 21:12:35 · 1053 阅读 · 0 评论 -
JavaScript冒泡捕获事件流详解
JavaScript事件由来已久,他们是js和html之间交互的桥梁,同时纵观整个事件响应得过程基本符合观察者模式,js订阅html中的事件是否发生,一旦发生即发布内容,js回调相应做出回应。原创 2017-03-13 13:36:39 · 473 阅读 · 0 评论 -
javascript设计模式(二) 代理模式 观察者模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对他的访问。观察者模式又称发布-订阅模式,定义了对象之间的一种一对多的依赖关系,当被依赖对象的状态发生改变时,所有依赖于它的对象都将得到通知。原创 2016-11-08 10:53:03 · 359 阅读 · 0 评论 -
ECMAScript6简介和学习笔记(二)数组 函数 对象
这次我们来谈谈数组、函数、对象,这三个家伙出现的频率太高了。在整个js的体系中占据着非常重要的位置。es6对其的优化扩展也是整个es6比较重要的部分。原创 2016-12-19 22:08:47 · 647 阅读 · 0 评论