Noxxxx

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件。 debounce： 防抖 // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on…

最早听说service worker的时候是团队的分享会上，之后就听说了饿了么pwa改造，技术学习的脚步始终不能停。 对于一个新技术，它能做什么？它能给我带来什么？这一直是我在学习之前会反问的问题。 Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。 普通的浏览器环境下我们一般用它来缓存资源，提升页面打开速度。其他使用场景如下： 后台数据同步 响应来自其它源的资源请求 集中接收计算成本高的数据更新，比如地理位置和陀螺仪信息，这样多个页面就可以利用同一组数据 在客户端进行CoffeeScript，LESS，CJS/AMD等模块编译和依赖管理（用于开发目的） 后台服务钩子 自定义模板用于特定URL模式 性能增强，比如预取用户可能需要的资源，比如相册中的后面数张图片 第四点在 React的开发配置项里就有体现，利用官方的create-react-app就会有一个service worker 文件。 出于安全原因，Service Workers 要求要在必须在 HTTPS 下才能运行。为了便于本地开发，localhost 也被浏览器认为是安全源。 在 Firefox 的 private browsing mode 隐私模式下是无法使用 service worker 的，但是chrome 的隐私模式可以使用。 注意: localStorage 跟  service worker 的 cache 工作原理很类似，但是它是同步的，所以不允许在  service workers 内使用。 注意: IndexedDB 可以在  service worker 内做数据存储。 var VERSION = ‘v1’; //开始缓存 self.addEventListener(‘install’,function(event) { event.waitUntil(…

Not to be confused with MVC, a “view controller” or “controller view” is a top level component that holds all state and passes it to children as props. For any top level component, such as a <HomePage />, create a <HomePageController /> that passes all needed data as props to <HomePage />in the render function. //…

/** * Question 1 */ var name = ‘window’ var person1 = { name: ‘person1’, show1: function () { console.log(this.name) }, show2: () => console.log(this.name), show3: function () { return function () { console.log(this.name) } }, show4: function () { return () => console.log(this.name) } } var person2 = {…

1. 创建一个函数poll，它接受两个参数checkStatus[函数]，callback[函数]。 2. poll会调用checkStatus，checkStatus返回true或者false。 3. 如果checkStatus返回true，调用callback并结束 4. 如果checkStatus返回false，1.5秒后继续调用checkStatus，如果还是返回false，1.5×2秒后继续调用checkStatus，还是false的话，1.5×3秒后继续调用，以此类推。 5. 不可以使用全局变量。 function poll(checkStatus, callback){ let time = 0; let timer = null; function dd(){ console.log(date()) let status = checkStatus(); if(status){ clearTimeout(timer); return callback(); } time++; timer = setTimeout(()=>{ dd(checkStatus, callback); }, time * 1500); } return dd; } function a(){return Math.random()>0.5}…

最近折腾上了react和electron，一切只是刚开始，记录下一点过程。 最普遍的需求就是，隐藏原本略丑的工具栏。 const BrowserWindow = require(‘electron’).BrowserWindow var win = new BrowserWindow({ width: 800, height: 600, frame: false }) 效果是实现了，但是你拖不动应用了，所以需要在应用的顶部div加上 -webkit-app-region: drag 同时在有按钮的元素上取消拖拽 -webkit-app-region: no-drag但是这样做还是有问题，普通的程序顶部是可以缩放的，而这样操作的话就不可以了。刚开始想到title div的包裹层使用padding-top撑开，但是碰到布局有背景色的就略尴尬。。后来想到使用一个div position定位 height设置为5px，本质上就是代替padding出来的那段白色区域，height设置为5px是因为我在windows上对比了其他应用程序，这样的热区容易让鼠标识别到，太宽或太窄的就本上很难一次性就被识别进行伸缩。

有人建议编码规范这种东西应该落实到ESlint这类工具上去，而不是停留在文档层面。 在我看来，规范也要看和记，难道你用 vscode/sublime 写个demo还要配上语法检查这一套东西么。 HTML section里面要有标题标签 section/aside/article/nav这种标签，需要在里面写一个h1/h2/h3之类的标题标签，因为这四个标签可以划分章节，它们都是独立的章节，需要有标题，如果UI里面根本就没有标题呢？那你可以写一个隐藏的标题标签，如果出于SEO的目的，你不能直接display: none，而要用一些特殊的处理方式，如下套一个hidden-text的类： <style>.hidden-text{position: absolute; left: -9999px; right: -9999px}</style> <section> <h1 class=”hidden-text”>Listing Detail</h1> </section> 要用table布局写邮件模板 由于邮件客户端多种多样，你不知道用户是使用什么看的邮件，有可能是用的网页邮箱，也有可能用的gmail/outlook/网易邮箱大师等客户端。这些客户端多种多样，对html/css的支持也不一，所以我们不能使用高级的布局和排版，例如flex/float/absolute定位，使用较初级的table布局能够达到兼容性最好的效果，并且还有伸缩的效果。 另外邮件模板里面不能写媒体查询，不能写script，不能写外联样式，这些都会被邮件客户端过滤掉，样式都得用内联style，你可以先写成外联，然后再用一些工具帮你生成内联html。 写完后要实际测一下，可以用QQ邮箱发送，它支持发送html格式文本，发完后在不同的客户端打开看一下，看有没有问题，如手机的客户端，电脑的客户端，以及浏览器。 由于你不知道用户是用手机打开还是电脑打开，所以你不能把邮件内容的宽度写死，但是完全100%也不好，在PC大屏幕上看起来可能会太大，所以一般可以这样写： <table style=”border-collapse:collapse;font-family: Helvetica Neue,Helvetica,Arial;font-size:14px;width:100%;height:100%”> <tr><td align=”center” valign=”top”><table style=”border:1px solid #ececec;border-top:none; max-width:600px;border-collapse:collapse”> <tr><td>内容1</td></tr> <tr><td>内容2</td></tr> </table></td></tr></table> 最外面的table宽度100%，里面的table有一个max-width:600px，相对于外面的table居中。这样在PC上最大宽度就为600px，而在手机客户端上宽度就为100%。 但是有些客户端如比较老的outlook无法识别max-width的属性，导致在PC上太宽。但是这个没有办法，因为我们不能直接把宽度写死不然在手机上就要左右滑了，也不能写script判断ua之类的方法。所以无法兼容较老版本outlook.  img空src的问题 有时候可能你需要在写一个空的img标签，然后在JS里面动态地给它赋src，所以你可能会这么写： <img src=”” alt> 但是这样写会有问题，如果你写了一个空的src，会导致浏览器认为src就是当前页面链接，然后会再一次请求当前页面，就跟你写一个a标签的href为空类似。如果是background-image也会有类似的问题。这个时候怎么办呢？如果你随便写一个不存在的url，浏览器会报404的错误。 我知道的有两种解决方法，第一种是把src写成about:blank，如下： <img src=”about:blank” alt>…

好比单例模式用的最多的就是遮罩层的、全局dialog这种，那么表单校验这块最经典就是策略模式了。 即便是在 vuejs 开发的项目中，你只需要校验变量这么简单的操作，但是有了策略模式代码的组织结构将会更好，每个人在业务代码中不再需要自己定义一套业务规则。 这里我使用ES6的类来定义 Validator 本质上也是也函数，但类的方式，子类扩展的话会更加直观。 //validator.js ‘use strict’; let strategies = { isNonEmpty: (value, errorMsg) => { if (value === ”) { return errorMsg; } }, maxLength: (value, length, errorMsg) => { if (value > length) { return errorMsg; } }, }; class Validator { constructor() { this.cache…

冒泡排序 平均时间复杂度 O(n2)  空间复杂度 O(1) function bubbleSort(arr) { var i = arr.length; var position = 0; var tmp = 0; while (i>0) { position = 0; for(var j = 0;j<i;j++) { if(arr[j]> arr[j+1]) { position = j; tmp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = tmp; } } i =…

在分析 VueJs 2.0 的源码中会碰到一些不知道的知识点，记录下来。 JSON.stringify JSON.stringify(val, null, 2) JSON.stringify(value[, replacer [, space]]) //第二个参数如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理 //如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中 //如果该参数为null或者未提供，则对象所有的属性都会被序列化 //第三个参数，指定缩进用的空白字符串，用于美化输出（pretty-print） //如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格； //如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。 var obj = { name: ’11’, age: 12, func: function() { console.log(1) } } //输出 “{ “name”: “11”, “age”: 12 }” MDN 文档   Vue 中存在很多这种写法 /** * Check whether…