设计模式
面向对象的夜猫子
抽象,继承,封装,多态。
展开
-
什么是javascript封装,封装的方法有几种
封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。在JavaScript中,并没有显示的声明私有成员的关键字等。所以要想实现封装/信息隐藏就需要从另外的思路出发。我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性,来达到封装的要求。转载 2017-09-17 11:38:20 · 1405 阅读 · 0 评论 -
实践中的前后端分离
实践中的前后端分离相信前后端分离这个词,早已流传甚广,大家一些自己的理解,但可能有些人的观点有稍许偏差:我们要搞 SPA,全AJAX,那才是前后端分离了。什么是前后端分离我们来聊聊什么是前后端分离。先来看一张WEB系统前后端架构模型图。WEB系统前后端架构模型从图中可以清晰的看到,前后端的界限是按照浏览器和服务器的划分。那么我们经常会发现一些问题:模转载 2017-10-10 10:31:03 · 798 阅读 · 0 评论 -
聊聊Vue.js的template编译
可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。$mount首先看一下mount的代码/*把原本不带编译的$mount方法保存下来,在最后会调用。*/const mount = Vue.prototype.$mount/*挂载组件,带模板编译*/Vue.prototype.$mount = function ( el?: string | Element转载 2017-10-10 10:36:23 · 969 阅读 · 0 评论 -
前端跨域的解决方案
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: link>、script>、img>、frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等转载 2017-10-11 09:10:54 · 181 阅读 · 0 评论 -
详解 CORS 跨域资源共享
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS转载 2017-10-11 09:14:06 · 225 阅读 · 0 评论 -
完美解决前端跨域之 easyXDM 的使用和解析
0、背景因个别网络运营商存在 HTTP 劫持的情况,导致网站某些重要的 iframe 弹窗页面被插入了第三方广告,内容完全被遮挡,严重影响用户体验。公司决定将这些页面切换为 HTTPS,切换后发现原来 iframe 浮层自动适应大小的功能失效了,原因是主页面是 HTTP 的,子窗口加载后对父页面浮层大小的操作跨域了,被浏览器限制无法操作。于是就需要跨域解决方案来解决这种情况。1、跨域问题转载 2017-10-10 11:00:56 · 754 阅读 · 0 评论 -
JavaScript的十个小技巧
每一门语言都有一些奇技淫巧,JS也不例外,一直想总结这么篇文章,我包括一些新手,都会有这么一个疑问,每次面对一张空白的页面,不知从何下手,没有思路,高手有的是设计模式,但是在这里讲一些设计模式,我可能不够格,这些书籍都有可以自己去翻阅,我能给的就是,总结我写代码的时候,会优化的一些技巧实用篇1.立即执行我为什么把立即执行放在第一个,因为一般做业务的时候都会有一个入口函数,比如一下这种格转载 2017-10-10 10:59:13 · 229 阅读 · 0 评论 -
javascript匿名函数的巧妙应用
匿名函数最早是LISP语言引入,后面发展为不仅是函数式语言所特有,在解释型语言和编译型语言中也越来越多匿名函数的身影,或许有个更潮的名字叫 lambda 表达式。闭包多是用匿名函数实现,在匿名函数中引用了外部变量,那这个匿名函数就形成了闭包。由于闭包和匿名函数之间有着千丝万缕的关系,所以经常会把两者搞混淆。其实在 Js 中匿名函数、闭包、自执行函数、回调函数、箭头函数,这些概念似乎相同,却又不转载 2017-10-10 10:48:32 · 258 阅读 · 0 评论 -
JavaScript中的设计模式之代理模式
代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。虚拟代理虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行图片懒加载//图片加载let imageEle = (function(){ let node = docum转载 2017-10-10 10:46:44 · 145 阅读 · 0 评论 -
说说JavaScript的原型链
在JS中,原型链有时候让人觉得很胡里花哨,又是prototype、__proto__又是各种指向什么的,让人觉得很头疼。如果你也有这种感觉,或许这篇文章可以帮助到你一、认识原型1、先来一串代码var Person = function(msg){ this.msg = msg;}var person1 = new Person("wanger")person1.cons转载 2017-10-12 10:55:42 · 377 阅读 · 0 评论 -
详解 CORS 跨域资源共享
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS转载 2017-10-24 08:45:57 · 194 阅读 · 0 评论 -
关于cookie的详细讲解
在学以致用的工作学习里,对于不怎么使用的部分,多少有些雾里探花的窘迫感~差不多是了解一二,然而又非真切的明晰;这就使得再用的时候,总要去再搜索一番;如此颇为难受,倒不如总结纪录下来,一方面加深认知,也易便于查阅;对于某相关技术,不断学习、运用、总结、更新,积淀过后也能对别人给予帮助。写博,真是一件值得去做的事。背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信转载 2017-10-24 08:48:21 · 577 阅读 · 1 评论 -
前端高性能计算之一:WebWorkers
最近做一个项目,里面涉及到在前端做大量计算,直接用js跑了一下,大概需要15s的时间, 也就是用户的浏览器会卡死15s,这个完全接受不了。虽说有V8这样牛逼的引擎,但大家知道js并不适合做CPU密集型的计算,一是因为单线程,二是因为动态语言。我们就从这两个突破口入手,首先搞定“单线程”的限制,尝试用WebWorkers来加速计算。什么是WebWorkers简单说,WebW转载 2017-10-24 08:50:45 · 436 阅读 · 0 评论 -
ES6 变量作用域与提升:变量的生命周期详解
ES6 变量作用域与提升:变量的生命周期详解从属于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建全局对象等内容;建议阅读前文 ES6 变量声明与赋值。变量作用域与提升在 ES6 之前,JavaScript 中只存在着函数作用域;而在转载 2017-10-24 12:31:26 · 501 阅读 · 0 评论 -
localstorage的那些事
HTML5中 Web Storage 的出现,主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小,而且数据会自动携带到请求头里,但服务器端可能并不关心这些数据,所以会造成带宽的浪费。Web Storage 提供了两个存储对象:localStorage 和 sessionStorage。sessionStorage 存储的数据仅在本次会话有用,会话结束后会转载 2017-10-10 09:54:19 · 221 阅读 · 0 评论 -
《深入理解ES6》阅读笔记 --- 用模块封装代码
不知不觉《深入理解ES6》阅读笔记就写到了最后一篇,完结之后可能会开启另外的一个系列,分享自己的知识点,让阅读到的人有一点点的收获,以及自己的成长。最后一篇主要是来写一写用模块封装代码的事情,回顾历史,从最早的立即执行函数,再到require.js,以及commonjs,今天我们面对的是语言标准给我们带来的模块化方案。如果说模块,我们应该可以从字面的意思上来看,这是一种可以自动运行在严格模式下并且转载 2017-10-10 09:47:57 · 314 阅读 · 0 评论 -
JavaScript是如何实现继承的(六种方式)
大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现,下文给大家技术js实现继承的六种方式,需要的朋友参考下转载 2017-09-17 11:57:11 · 217 阅读 · 0 评论 -
javascript之多态
javascript每日必学之多态,介绍了有关多态的相关内容,感兴趣的小伙伴们可以参考一下转载 2017-09-17 17:56:37 · 441 阅读 · 0 评论 -
Vue.js双向绑定的实现原理
vuejs是如何实现双向数据绑定的呢?转载 2017-09-17 18:02:36 · 263 阅读 · 0 评论 -
JS中的算法与数据结构——栈(Stack)
栈(Stack)上一篇我们说到了列表,它是一种最自然的数据组织方式,如果对数据的存储顺序要求不重要,那么列表就是一种非常适合的数据结构,但对于计算机其他的一些应用(比如后缀表达式),那么列表就显得有些无能为力, 所以,我们需要一种和列表功能相似但更复杂的数据结构。栈,又叫堆栈,是和列表类似的一种数据结构,但是却更高效,因为栈内的元素只能通过列表的一端访问,称为栈顶,数据只能在栈顶添加或转载 2017-09-26 09:06:57 · 479 阅读 · 0 评论 -
一套表单验证的解决
此插件是在项目中,根据不同业务场景进行了多版本的迭代,实现了表单验证的功能,仅作为参考。原创 2017-09-26 09:22:50 · 357 阅读 · 0 评论 -
笔试算法须知---用JS实现队列处理问题
队列普通队列 先进先出FIFO循环队列 队首出队后,又从队尾入队优先队列如果优先值小的元素放到队列的前面,这叫做最小优先队列反之优先值大的元素放到队列的前面,这叫做最大优先队列队列的操作(就是医院看病排队)向队列中添加元素(进入排队的队伍中)--push移除队头元素(队伍最前面的人出队,进诊室)--shift查看队头元素(查看队伍最前面的人)--front判断队列是否为转载 2017-09-26 13:25:31 · 239 阅读 · 0 评论 -
数据结构与算法JavaScript描述 | 数组
1、基础:数组的标准定义:一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量。JavaScript 中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是属性。然而,这些数字索引在内部被转换为字符串类型,这是因为JS对象中的属性名必须是字符串;即数组在JS中只是特殊的对象。2、使用数组:1)创建数组:①转载 2017-09-26 13:27:07 · 289 阅读 · 0 评论 -
Vue的发现和理解
1. 性能优化:相对于计算属性computed、方法methods、观察watch,优先考虑使用计算属性实现,因为计算属性会缓存它的值,只有当计算属性的相关依赖发生改变时才会重新求值;尽可能最大化地让Vue复用可用的元素,即,在用key管理可利用元素的地方看是否有其它更快速的替代方案;适当地选择v-if和v-show,当元素被渲染后,需要经常被切换时,使用v-show;否则,使用v-if;转载 2017-09-26 13:31:00 · 567 阅读 · 0 评论 -
webpack:从入门到真实项目配置
该文使用的 Webpack 版本为 3.6.0,本文分两部分。第一步是简单的使用 webpack,第二部分通过一个真实项目来配置 webpack,没有使用任何的 CLI,都是一步步配置直到完成生产代码的打包。这是本项目对应的仓库,每个小节基本都对应了一次转载 2017-09-19 08:51:09 · 430 阅读 · 0 评论 -
发布-订阅模式
发布-订阅模式转载 2017-09-19 09:02:57 · 334 阅读 · 0 评论 -
vuex使用的正确姿势
一、介绍VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用。1、什么是状态管理模式?看个简单的例子: Vuex Demo 01 Count is {{ counterValue }} Incremen转载 2017-09-29 10:07:32 · 814 阅读 · 0 评论 -
vuex2.0源码分析
一、前言当我们用 Vue.js 开发一个中到大型的单页应用时,经常会遇到如下问题:如何让多个 Vue 组件共享状态Vue 组件间如何通讯通常,在项目不是很复杂的时候,我们会利用全局事件总线 (global event bus)解决,但是随着复杂度的提升,这些代码将变的难以维护。因此,我们需要一种更加好用的解决方案,于是,Vuex 诞生了。本文并不是 Vuex转载 2017-09-29 10:16:55 · 369 阅读 · 0 评论 -
[V8]找出可能影响性能的代码(模式)
原文地址:Tracing Patterns that Might Hinder Performance原文作者:Jakub Rożek译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m…译者:薛定谔的猫校对者:AceLeeWinnie、HydeSong找出可能影响性能的代码(模式)现在你很可能会遇到不止一个响应迟钝的 app 或加载缓慢的页面。已经转载 2017-11-02 09:56:45 · 646 阅读 · 0 评论