franki Blog

make a small progress every day

设计模式之模板方法模式

模板方法模式模板方法模式是一种只用继承就可以实现非常简单的模式主要思想是：抽象父类，具体实现子类，在父类主要是封装了子类的算法框架一些公共的方法的以及子类的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。 // Coffee or Tea // 模拟传统面向对象的形式实现 // 父类 var Beverage = function() {} ...

Posted by franki on November 7, 2018

设计模式之组合模式

组合模式组合模式将对象组合成树形结构，以表示“部分与整体”的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性组合模式适用于以下这两种情况 1 表示对象的部分与整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分与整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完...

Posted by franki on November 6, 2018

设计模式之迭代器模式

迭代器模式迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示迭代器模式可以把迭代过程中从业务逻辑分离出来，从而不用关心对象的内部构造，也可以按照顺序访问其中的每个元素。实现自己的each函数，each函数接收两个参数，一个是被循环的数组，第二个是循环中的每一步后将被触发的回调函数。 //内部迭代器 var each = functi...

Posted by franki on November 5, 2018

设计模式之发布命令模式

命令模式命令模式中的命令(command)指的是一个执行某些特定事情的指令命令模式最常见的应用场景是:有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。记住设计模式的主题，就是把变的事物和不变的事物分离开来。实例：假如有这样的一个需求，一...

Posted by franki on November 4, 2018

设计模式之发布订阅模式

发布订阅模式又被称为观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。在js中，我们一般用事件模型来替代传统的发布订阅模式。现实场景，买房者与售楼处的关系，前者相当于订阅者，后者相当于发布者。订阅者需要知道知道何时有房子出售，订阅者无需每天打电话到售楼处去询问，他们只需要留下手机号码等联系方式。而售楼处也无需每天回答订阅者的...

Posted by franki on November 3, 2018

设计模式之代理模式

代理模式为一个对象提供一个代用品或占位符，以便控制对它的访问（1）代理模式实现预加载 // 本体对象 var myImage = (function() { var imgNode = document.createElement(‘img’); document.body.appendChild(imgNode); return { ...

Posted by franki on November 2, 2018

设计模式之策略模式

策略模式定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。目的是将算法的使用和算法的实现分离开来；一个基本策略模式的程序至少有两部分组成，一部分是策略类，策略类封装了具体的算法，并负责具体的计算过程。第二部分是环境类Context,Context接收请求，随后把请求委托给某个策略类。要做到这点，需要Context要维持对某个策略对象的引用。模仿静态语言的传统面向...

Posted by franki on November 1, 2018

npm包制作发布初体验

npm包制作及发布小结闲话 npm包的出现解决了js的一些通病，例如变量易污染，模块代码交互耦合严重的问题好戏开场，搬好小凳子听课啦打开npm官网注册账号，记住你的username 和 password 打开命令行工具，例如 mac 用 iterm2 打开 common-func git:(master) ✗ npm adduser...

Posted by franki on October 7, 2018

async-await用法实践

解决回调难题，优化promise 直接进入主题 async awiat 用于解决回调地狱的问题，进一步优化promise而创造出来的 async 用于声明是一个异步的函数，主要是用于将函数结果封装未promise，如Promise.resolve(res),若res是个直接值则封装为promise，若是undefined，则直接就返回了； await 主要作用是等待promise的返回...

Posted by franki on July 31, 2018

HTML-CSS-JS 基础知识

html css javascript 基础回顾 HTML & CSS 部分 HTML lable 标签有什么用 label主要作用于表单填写，当用点击了标签，就会聚焦到绑定的输入框 eg: <label for="Name">username</lable> <input type="text" name="Name" id="Name" /&...

Posted by franki on July 1, 2018