ddwddw4的博客

结论：观察者模式和订阅模式很容易混淆一谈，其实订阅模式有一个调度中心，对订阅事件进行统一管理。而观察者模式可以随意注册事件，调用事件，虽然实现原理都雷同，设计模式上有一定的差别，实际代码运用中差别在于：订阅模式中，可以抽离出调度中心单独成一个文件，可以对一系列的订阅事件进行统一管理。这样和观察者模式中的事件漫天飞就有千差万别了，在开发大型项目的时候，订阅/发布模式会让业务更清晰！// 观察者模式 vue的依赖收集 // 被观察者 class Subject { .

大体思路主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数据劫持：遍历vm实例里data对象，为每个数据绑定setter和getter，触发get时将当前元素watcher推入订阅者数组，触发set时，如果值更新则通知订阅者更新数据 观察者：给数据对应的元素绑定一个观察者实例，并推入订阅者数组，当数据更新时发布订阅通知元素数据变化具体模块MVVMconstr...

转载自：https://blog.youkuaiyun.com/qq_26003101/article/details/101107838文章目录1、history 2、两种路由模式的生成 3、historyApiFallback1、historyHistory接口，允许操作浏览器的session history，比如在当前tab下浏览的所有页面或者当前页面的会话记录。history属性1、length(只读)返回一个总数，代表当前窗口下的所有会话记录数量，包括当前页面...

删除cookie的方法一般都是给他个过期时间就可以了。有个需求是在退出登录的时候去删除一个cookie，结果却发现怎么也删不掉，仔细检查后发现是因为和当前不在同一个域下。最简单的话可以使用下面这个去删除，记得指定好domain就可以了。document.cookie = `LG_TK_SAAS=; expires=${new Date(0).toUTCString()}; domai...

我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。直到昨天，我读到法国程序员Vjeux的解释，才恍然大悟，完全明白了Javascript为什么...

书上有个例子：function setName(obj) { obj.name = 'Nicholas'; obj = new Object(); obj.name = "Greg"; console.log(obj.name); // "Greg"} var person = new Object();setName(person);alert(person.name) // "Nich...

jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作。具体可参考jQuery官方文档：http://api.jquery.com/Ajax_Events/$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, ...

受浏览器的同源策略限制，JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范，这个规范试着从根本上解决安全的跨域资源共享问题。在此之前，解决此类问题的途径往往是服务器代理、JSONP等，治标不治本。目前基本所有浏览器都已经支持该规范。一个域是由schema、host、port...

CSRF概念：CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解：       攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在...

一、简介什么是XSS?百度百科的解释: XSS又叫CSS  (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的。它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实...

在做项目的时候，经常需要调试js，要是项目环境在本地，可以直接在js代码里面设置断点或者修改变量值。但是在测试或者生产等线上环境时，再频繁登录服务器去修改js代码就显得麻烦了。项目线上环境，可以在firebug中设置断点或者修改变量值的方式调试js。下面用修改ajax中变量returnurl的值为www.pp.com来做个例子分享一下：一、在firebug中选择需要调试的文件：打开firebug-...

ECMA-262 第 5 版在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特征。ECMA-262 定义这些特性是为了实现 JavaScript 引擎用的，因此在 JavaScript 中不能直接访问它们。为了表示特性是内部值，该规范把它们放在了两对儿方括号中，例如[[Enumerable]]。尽管 ECMA-262第 3 版的定义有些不同，但本书只参考第 5...

作者： 阮一峰这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。今天要介绍的是，对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。　　function Animal(){　　　　this.species = "动物";　　}还有一个"猫"对象的构造函数。　　function Cat(name,color){　　　　this.name = name...

作者： 阮一峰这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分，介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承？比如，现在有一个对象，叫做"中国人"。　　var Chinese = {　　　　nation:'中国'　　};还有一个对象，叫做"医生"。　　var Doctor ={　　　　career:'医生'　　}请问怎样才能让&

作者：阮一峰Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？一、 生成实例对象的原始模式假定我们把猫看成一个对象，它有...

原文地址：https://segmentfault.com/q/1010000004080910/a-1020000004121373仅供参考！首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto...

1. 前言flex弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器2. flex的优势举个例子：这里我们要实现一个功能，让一个dom元素水平垂直居中;2.1 传统实现方式（1），居中元素的宽高已知 .box1{ ...

转载自：http://www.cnblogs.com/frostbelt/p/3425498.htmlvar arr = new Array(); // 或 var arr = [];typeof arr; // "object"既然是object，用于判断条件时就会被转化为trueif(arr)console.log("it's true"); // it's tr...

在移动端实现一像素边框由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点所以 border: 1px 在移动端会渲染为 2px 的边框虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的 “一像素问题” 最简单的解决办法，就是用图片做边框，只是修改颜...

问题：使用vue加载图片变量，为了图片的自适应，需设置为背景图居中排布<tr v-for="(item,index) in dataObj">    <td class="video-msg" v-bind:id="item.videoid">        <div class="videoImg fl" v-bind:style="{b

1、嵌套层级不深，可直接继承自 body width：100%； height:100%;// html<body> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class=&qu

根据 MDN的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded（）方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。因...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js酒瓶经典问题算法实现</title></head><body><

很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式（注意数字和%之间不可以有空格），但在不同的使用场合下，其意义会有很多不同。因此，百分比值可以说包含了相当丰富的内容。百分比值是相对值要理解诸如100%这样的百分比值，其关键点是要明白，百分比是一定有其对应的参照值的。也就是说，百分比值是一种相对值，任何时候要分析它的效果，都需要正确找到它的参照。一个cs...

因为习惯了jq中去用on()去实现事件委派，原生的反而有点遗忘，所以写个小例子回顾下，当然jq的写法比原生的用起来实在方便太多了。  原生js的事件委派：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生事件

mouseover与moseenter很多情况下可以混用，但是他们是有区别的。 mouseover在当鼠标移入元素或其子元素的时候都会触发，是一个重复触发，冒泡的过程。见下面例子，一个父元素包含一个子元素，在其父元素内滑动鼠标，超出子元素的范围时，也会触发事件。而mouseenter在鼠标移入元素本身以后，无论在元素内部如何移动，都不会再次触发。mouseout与mouseleave同...

在 javascript 中 ["1","2","3"].map(parseInt) 为何返回不是 [1,2,3] 却是 [1,NaN,NaN]？我们首先回顾一下 parseInt() 个 map() 两个函数的用法：parseInt() 函数定义和用法parseInt()

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/u010703975/article/details/50261441 最近碰到了[‘1’,’2’,’3’].map(parseInt)这种看似不起眼陷阱却极大的问题。...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #box{

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .box{

<style>.box{width:100%;height:0;overflow:hidden;padding-bottom:24.6%;}img{width:100%;}</style><div class="box"> <img src="https://img1.qunarzz.com/order/comp/1805/...

在表单提交中， return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交。而return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。<form action="" id="form"> <input type="text" name="aa"> &l

总结：对象遍历最好用for in ，for循环。 数组遍历最好用forEach，map，for循环。            因为for...in 并不能够保证返回的是按一定顺序的索引，但是它会返回所有可枚举属性，包括继承属性。具体看如下例子：对对象操作var obj={"1":"first", "two":"zoo", "3":"2", "three&

Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Pr...

 toFixed在金额运算的时候是非常方便的，但是今天写的时候遇到一点小坑，所以记录一下，免得日后又忘了。toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。语法NumberObject.toFixed(num)参数 描述 num 必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了...

今天使用 splice又遇到一个没注意到的小坑。先看下它的定义与用法定义和用法splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。语法arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从...

 本来这块也算很熟悉了，就是在回顾下，做个笔记第一种写法：//使用递归的方式实现数组、对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; ...

之前比较懒，只会一两种去重方法，现在才发现原来去重还可以这么高效和花样多，所以收集了不少方法，特此记录一下。1.简单的去重方法// 最简单数组去重法/** 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中* IE8以下不支持数组的indexOf方法* */function uniq(array){ var temp = []; //一个新的临时数组 ...

他们两者的共同点就是都是一种框架在推广的过程中对模块定义的规范产出；而且他们都是异步加载模块。AMD即Asynchronous Module Definition,翻译过来就是异步模块化定义，是一个模块化开发的规范。此处是规范链接 那么AMD是怎么弄出来的呢？其实AMD是在RequireJS之后才出来的，是大名鼎鼎的RequireJS产出了这一套模块化开发的概念。那么谈AMD就必须先谈Requ...

function aa(selector){ if(typeof selector=="string"){ if(selector.charAt(0)=="."){ var doms=this.getClass(selector.slice(1)); //this指什么 ...