fn | 易学教程

AWS Cloudformation - Template 学习（1）

阅读更多关于 AWS Cloudformation - Template 学习（1）

Cloudformation里面，整个架构都是在template里面定义的，然后通过这个template生成对应的Stack AWS官方提供了一个参考手册， https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-whatis-howdoesitwork.html 非常的详细和有用，初看有些枯燥，但是细细品味很有意思，下面是豆子的学习笔记。在template里面，他一共有9个section可以定义，但是只有resource这个模块是必须存在的，其他8个模块都是可选项。这9个模块分别是Format Version，MetaData，Parameters, Mappings, Conditons, Transform，Resources 和 Outputs。基本的格式如下所示 JSON 版 { "AWSTemplateFormatVersion" : "version date", "Description" : "JSON string", "Metadata" : { template metadata }, "Parameters" : { set of parameters }, "Mappings" : { set of mappings }, "Conditions" : { set of

简单的Promise

阅读更多关于简单的Promise

function MYPromise(fn) { var self = this self.onResolvedCallback = [] function resolve(value) { setTimeout(() => { self.data = value self.onResolvedCallback.forEach(callback => callback(value)) }) } fn(resolve) } MYPromise.prototype.then = function (fn) { var self = this return new MYPromise(resolve => { self.onResolvedCallback.push(function () { var result = fn(self.data) if (result instanceof MYPromise) { result.then(resolve) } else { resolve(result) } }) }) } 　　参考文章： https://juejin.im/post/5e6f4579f265da576429a907#heading-0 来源： https://www.cnblogs.com/shen076/p/12655996.html

【zepto学习笔记03】事件机制

阅读更多关于【zepto学习笔记03】事件机制

前言我们今天直接进入事件相关的学习，因为近期可能会改到里面的代码就zepto来说，我认为最重要的就是选择器与事件相关了，随着浏览器升级，选择器简单了，而事件相关仍然是核心，今天我们就来学习学习 zepto事件处理部分篇幅不大，不到400行，前面篇幅也很小，所以真的很适合移动开发变量定义 1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 } 事件部分首先定义了几个变量，$$为zepto选择器的方法，暂时不管他（据观察，好像也没有地方用到了，所以无意义） handlers为一个对象，与_zid息息相关，暂时不知道干什么的（据猜测两个应该是保存函数句柄，为removeEvent做准备） hover应该会同时触发两个事件才会触发，我们这里先不管，继续往下看这里提供一个zid飞方法，该方法用于保证-zid的唯一性 1 function zid(element) {2 return element._zid || (element._zid = _zid++)3 } 算了，我们这里还是用一个实际点的方法跟进来吧，首先说一个关键的 $.Event(type,

图解 Promise 实现原理（一）—— 基础实现

阅读更多关于图解 Promise 实现原理（一）—— 基础实现

本文首发于 vivo互联网技术微信公众号链接： https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者：孔垂亮很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。本系列文章有如下几个章节组成：图解 Promise 实现原理（一）—— 基础实现图解 Promise 实现原理（二）—— Promise 链式调用图解 Promise 实现原理（三）—— Promise 原型方法实现图解 Promise 实现原理（四）—— Promise 静态方法实现本文适合对 Promise 的用法有所了解的人阅读，如果还不清楚，请自行查阅阮一峰老师的《 ES6入门之 Promise 对象》。 Promise 规范有很多，如 Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+，有兴趣的可以去了解下，最终 ES6 中采用了 Promise/A+ 规范。所以本文的Promise源码是按照 Promise/A+规范来编写的（不想看英文版的移步 Promise/A+规范中文翻译）。引子为了让大家更容易理解

面试官：看到你简历上写着会Vue?

阅读更多关于面试官：看到你简历上写着会Vue?

在面试过程中，被问到Vue知识点的一些碎事。来源:掘金推荐面试官：vue是什么？ vue是一门渐进式的javascript框架。所谓的渐进式就是：从中心的的视图层渲染开始向外扩散的构建工具层。这过程会经历：视图层渲染->组件机制->路由机制->状态管理->构建工具；五个层级。特点：易用，灵活，高效，入门门槛低。图来自百度👆 面试官：v-if和v-show的区别？前者是将DOM创建和删除后者则是改变display的值来控制DOM的显示和隐藏。面试官：vue有什么生命周期？在new Vue 到 vm.$destory的过程经历了什么？初始化阶段 beforeCreate和create 挂载阶段 beforeMount和mounted 更新阶段 beforeUpdate和update 卸载阶段 beforeDestory和destory 当 new Vue() 后，首先会初始化事件和生命周期，接着会执行 beforeCreate生命周期钩子，在这个钩子里面还拿不到 this.$el 和 this.$data ;接着往下走会初始化inject 和将data的数据进行侦测也就是进行双向绑定；接着会执行 create钩子函数，在这个钩子里面能够拿到 this.$data 还拿不到 this.$el ;到这里初始化阶段就走完了。然后会进入一个模版编译阶段

我的模块加载系统 v22

阅读更多关于我的模块加载系统 v22

时隔差不多两个月，积累了许多改进，升级到v22。主要改进点如下：进行瘦身，移除本地储存 IE6789的HTML5新标签支持列表，添加一个 m标签 loadJS内容方法，在动态插入script节点，发现最新的firefox Nightly做了些改动，如果head还没有解析完就插入节点，那么新script会触发onerror事件。补救措施，针对firefox使用html.insertBefore(node, head)。chrome不支持head.insertBefore(node, null)，第二参数必须是节点，因此firefox外浏览器统一使用 head.insertBefore(node, head.firstChild)。 getCurrentScript方法进行增强，现在支持对chrome取正在解析的节点，详见源码。如此一来，除safari外，都能立即确认模块ID与script节点的对应关系。修正parseURL转"mass.draggable"为url出错的BUG。升级$.log，让它支持更古老的opera。升级$.error，对异常进行包装，防止中文乱码。现在详解一下getCurrentScript引入的新hack，利用e.stack截取正在解析的节点的src，从而得到节点。首先随便搞个错误，比如a.b.c()。在opera12的控制台下，我们通过try

03JavaScript程序设计修炼之道 2019-07-07_14-54-59_ 定时器的使用

阅读更多关于 03JavaScript程序设计修炼之道 2019-07-07_14-54-59_ 定时器的使用

02setInterval.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // 定时器 /* setInterval() window.setIn... setInterval(函数,时间); 每隔一段时间执行函数中代码 ---取消 clearInterval(timeId); setTimeout(函数,时间) 隔一段时间执行函数一次并且只执行一次 clearTimeout(timeId) */ var i = 0; var timeId = setInterval(fn,1000); //setTimeout(fn,1000); function fn() { console.log(i); i++; if(i===101) { // 取消定时器 clearInterval(timeId); } } </script> </body> <

手动实现一个eventEmitter

阅读更多关于手动实现一个eventEmitter

观察者模式在前端开发中非常常用，我们经常用的事件就是观察者模式的一种体现。它对我们解耦模块、开发基于消息的业务起着非常重要的作用。Node.js 原生自带 EventEmitter 模块，可见它的重要性。作为在工作中经常遇到和面试的经典题目当然要琢磨透彻，下面一步步手动写一个eventEmitter 首先，我们要知道EE的api是什么样的 node的EventEmitter包含了很多常用的API，我们一一来介绍几个实用的API. 方法名方法描述 addListener(event, listener) 为指定事件添加一个监听器到监听器数组的尾部。 prependListener(event,listener) 与addListener相对，为指定事件添加一个监听器到监听器数组的头部。 on(event, listener) 其实就是addListener的别名 once(event, listener) 为指定事件注册一个单次监听器，即监听器最多只会触发一次，触发后立刻解除该监听器。 removeListener(event, listener) 移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器 off(event, listener) removeListener的别名 removeAllListeners([event]) 移除所有事件的所有监听器，

js笔记10

阅读更多关于 js笔记10

1.闭包　　封装：减少代码的冗余，提高代码的重复利用率　　继承：本来需要开辟多个空间，只需要开辟一个空间，减少内存的消耗，提高性能　　函数归属：函数归属谁，跟他在哪调用没有关系，而跟他在哪定义有关　　闭包的定义：函数在调用的时候，会形成一个私有作用域，内部的变量不能被外部访问，这种保护机制叫闭包（这就意味着函数调用完毕，这个函数形成的栈内存就会被销毁）　　栈内存被销毁的案例：　　　function fn(){ 　　　　var a=12; 　　　　a++; 　　　　console.log(a) 　　} 　　fn() //13 　　fn() //13 　　fn() //13 （因内部存在一个变量，所以在函数内部栈内存就会被销毁）　　　　但有时候，我们不希望他被销毁，所以需要return 　　案例：　　　function fn(){ 　　　　var a=12 　　　　return function(){ 　　　　　　a++; 　　　　　　console.log(a) 　　　　} 　　} 　　var ss=fn() 　　ss()　　//13 　　ss()　　//14 　　ss()　　//15 　　解析：　　　　 fn()调用完毕后得到的是一个匿名函数，但这个匿名函数在fn()这个作用域下定义的，所以匿名函数内部的变量在fn()作用域下查找

ES6 Promise --回调与Promise的对比、信任问题、错误处理、Promise的状态、以及Promise对象的常用方法

阅读更多关于 ES6 Promise --回调与Promise的对比、信任问题、错误处理、Promise的状态、以及Promise对象的常用方法

之前怎么用回调解决异步的问题： function f(callback){ setTimeout(function(){ callback && callback(); }); } f(function(){ console.log(1); f(function(){ console.log(2); f(function(){ console.log(3); f(function(){ console.log(4); f(function(){ console.log(5); f(function(){ console.log(6); }) }) }) }) }) }) 使用promise实现相同的效果 //使用promise实现相同的效果 function f2(){ return new Promise(resolve=>{//参数传入一个回调函数 setTimeout(function(){ //时执行函数 resolve(); },1000) }) } f2()//只有返回Promise实例，才能.then .then(function(){ console.log(11); return f2(); }) .then(function(){ console.log(22); return f2(); }) .then(function(){ console.log(33)

订阅 fn