搜索文章
类目归类
小白
2020-11-23
/
0 评论
/
0 阅读
2020-11-23
javaScript之策略模式
定义定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。核心将算法的使用和算法的实现分离开来。一个基于策略模式的程序至少由两部分组成：第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明Context 中要维持对某个策略对象的引用实现策略模式可以用于组合一系列算法，也可用于组合一系列业务规则假设需要通过成绩等级来计算学生的最终得分，每个成绩等级有对应的加权值。我们可以利用对象字面量的形式直接定义这个组策略// 加权映射关系 var levelMap = { S: 10, A: 8, B: 6, C: 4 }; // 组策略 var scoreLevel = { basicScore: 80, S: function() { return this.basicScore + levelMap['S']; }, A: function() { ...
小白
2020-11-23
/
0 评论
/
0 阅读
2020-11-23
javaScript之单例模式
定义保证一个类仅有一个实例，并提供一个访问它的全局访问点核心确保只有一个实例，并提供全局访问实现假设要设置一个管理员，多次调用也仅设置一次，我们可以使用闭包缓存一个内部变量来实现这个单例function SetManager(name) { this.manager = name; } SetManager.prototype.getName = function() { console.log(this.manager); }; var SingletonSetManager = (function() { var manager = null; return function(name) { if (!manager) { manager = new SetManager(name); } return manager; } })(); SingletonSetManager('a').getName(); // a SingletonSetManage...
小白
2020-11-23
/
0 评论
/
0 阅读
2020-11-23
JavaScript中常见的设计模式
在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念，JS中的函数属于一等对象，在JS中定义一个对象非常简单（var obj = {}），而基于JS中闭包与弱类型等特性，在实现一些设计模式的方式上与众不同。设计原则单一职责原则（SRP）一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。应该把对象或方法划分成较小的粒度最少知识原则（LKP）一个软件实体应当 尽可能少地与其他实体发生相互作用 应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理开放-封闭原则（OCP）软件实体（类、模块、函数）等应该是可以 扩展的，但是不可修改当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定什么是设计模式假设有一个空房间，我们要日复一日地往里 面放一些东西。最简单的办法当然是把这些东西 直接扔进去，但是时间久了，就会发现很难从这...
小白
2020-11-19
/
0 评论
/
0 阅读
2020-11-19
TypeScript任意值
任意值任意值（Any）用来表示允许赋值为任意类型。什么是任意值类型如果是一个普通类型，在赋值过程中改变类型是不被允许的：let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.但如果是 any 类型，则允许被赋值为任意类型。let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7;任意值的属性和方法在任意值上访问任何属性都是允许的：let anyThing: any = 'hello'; console.log(anyThing.myName); console.log(anyThing.myName.firstName);也允许调用任何方法：let anyThing: any = 'Tom'; anyThing.setName('Jerry'); anyThing.setName('Jerry...
小白
2020-11-19
/
0 评论
/
0 阅读
2020-11-19
TypeScript数据类型
JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。本节主要介绍前五种原始数据类型在 TypeScript 中的应用。布尔值布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：let isDone: boolean = false; // 编译通过 // 后面约定，未强调编译错误的代码片段，默认为编译通过注意，使用构造函数 Boolean 创造的对象不是布尔值：let createdByNewBoolean: boolean = new Boolean(1); // Type 'Boolean' is not assignable to type 'boolean'. // 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'b...
小白
2020-11-18
/
0 评论
/
0 阅读
2020-11-18
Hello TypeScript
我们从一个简单的例子开始。将以下代码复制到 hello.ts 中：function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user));然后执行tsc hello.ts这时候会生成一个编译好的文件 hello.js：function sayHello(person) { return 'Hello, ' + person; } var user = 'Tom'; console.log(sayHello(user));在 TypeScript 中，我们使用 : 指定变量的类型，: 的前后有没有空格都可以。上述例子中，我们用 : 指定 person 参数类型为 string。但是编译为 js 之后，并没有什么检查的代码被插入进来。这是因为 TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。而在运行时，与普通的 JavaScript 文件一样，不会对类型进行检查。如果我们需要保...
小白
2020-11-18
/
0 评论
/
0 阅读
2020-11-18
安装 TypeScript
TypeScript 的命令行工具安装方法如下：npm install -g typescript以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。编译一个 TypeScript 文件很简单：tsc hello.ts我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。编辑器TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。它是一款开源，跨终端的轻量级编辑器，内置了对 TypeScript 的支持。另外它本身也是用 TypeScript 编写的。下载安装：https://code.visualstudio.com/获取其他编辑器或 IDE 对 TypeScript 的支持：Sublime TextWebStormVimEmacsEclipseAtomVisual Studio 2019
小白
2020-11-18
/
0 评论
/
0 阅读
2020-11-18
TypeScript介绍
首先，我对 TypeScript 的理解如下：TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。其次引用官网的定义：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.翻译成中文即是：TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。为什么选择 TypeScriptTypeScript 增加了代码的可读性和可维护性类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了可以在编译阶段就发现大部分错误，这总比在运行时候出错好增强了编辑器和 IDE 的功能，包括代码...
小白
2020-11-18
/
1 评论
/
0 阅读
2020-11-18
TypeScript 入门教程
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript 4.0 [2-3] 。TypeScript介绍安装 TypeScriptHello TypeScriptTypeScript数据类型TypeScript任意值TypeScript类型推论TypeScript联合类型TypeScript对象的类型——接口TypeScript数组的类型TypeScript函数的类型TypeScript类型断言TypeScript声明文件TypeScript内置对象TypeScript类型别名TypeScript字符串字面量类型TypeScript元组TypeScript枚举TypeScript类TypeScript类与接...
小白
2020-11-18
/
0 评论
/
0 阅读
2020-11-18
带你一文读懂ES6的Symbol
前言Symbol这个特性对于很多同学来说，可能是在学习ES6特性的过程中，感到比较困惑的一个特性点。在大部分开发场景中，你可能根本用不到这个特性，但理解Symbol各个属性和方法的作用和意义还是非常有必要的，在一些特定的场景中，你会发现它不可或缺。Symbol内含的方法和属性非常多，本文仅对大概率会用到的一些讲解。基础类型对Javascript属性的小伙伴都知道，Javascript中有6大基础类型：Boolean，BigInt，undefined，Number，String，Symbol。可以看到，Symbol是Javascript中的基础类型之一。简单的去理解，Symbol数据就是一个全局唯一的值，那全局唯一有什么用？当然是用于避免冲突啦~我们先来看看Symbol最简单的用法：const symbolOne = Symbol(); console.log(symbolOne); // Symbol()由于Symbol是基础数据类型，所以我们不能用new的方式去创建Symbol对象，只需要直接调用Symbol即可。这里我们创建了一个简单的Symbol对象，你也可以像下面这样给S...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
JavaScript 原型链的理解
在JS中，函数的本质就是对象，它与其他对象不同的是，创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢？是一个叫做Function的特殊函数，通过new Function 产生的对象就是一个函数。function f1() {} //上面的函数等同于： var f1 = new Function(); function sum(a, b) { return a + b; } //上面的函数等同于： var sum = new Function("a", "b", "return a + b");//前面的是函数形参名，最后一个参数是函数体也就是说：只要通过Function创建的对象就是函数，函数都是通过Function创建的。看下面这张图片：以上我们可以看到普通对象是由函数创建的，函数是由Function创建的。那我们会有一个疑问Function是从哪里来的？其实Function是不通过其他函数得到，它是JS执行引擎初始化就直接通过本地代码直接放置到内存中的。当一个函数被创建后，这...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
微信小程序里长按识别二维码
我们都知道公众号里的二维码可以长按识别，但是小程序限制比较严格，没有办法实现二维码的长按识别，一直以来我都是这样认为的，微信的官方规则里也是这么写的，直到今天上午，我无意间发现一个小程序里的二维码居然可以长按识别，于是就好奇的去研究了一番，结果还真的可以实现小程序里长按识别二维码。不知道是官方的漏洞还是程序的bug，但是既然这个功能可以实现，那当然要愉快的用上一用啦可以看到，我们成功的在小程序里实现了长按识别二维码的功能。下面就教大家如何一步步实现吧。因为官方的规格还没有明确说支持这个功能，所以这个功能有可能随时被禁。这里先带大家爽一把，能爽一会是一会儿。首先使用webview来显示公众号文章我们知道公众号文章里是自带长按识别二维码的功能的，所以我们要先在小程序里长按识别二维码，就必须在小程序里显示公众号文章，怎么显示公众号文章在小程序里呢，这里我们就要用到webview了。webview使用起来很简单，只需要如下即可。src就是我们公号文章对应的链接，只需要这样写就完成了代码部分了，后面都是一些配置工作了。必须要把你的小程序关联到公众号如果你只是随便找个公号文章链接，就放到we...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
微信小程序 h5下载xlsx 文件
出于对数据安全的考虑，查询到的表格数据是以base64数据形式返回给到前端，需要前端自行解析处理。如果直接返回www.xxx.xx/aa.xlsx 这种形式就会容易很多。案例： 如下body字段的数据，就是表格的数据，对其进行展示。base64形式的文件下载处理微信小程序处理利用wx.base64ToArrayBuffer(data) 将base64 数据转成ArrayBuffergetFileSystemManager 把数据写入到本地（writeFile）利用wx.openDocument 打开生成的文件即可。 const fileReg = /\.pdf$|\.xlsx$|\.doc$|\.docx$|\.xls$/i; filename = filename.trim(); if (!fileReg.test(filename)) { toast("warn 需要设置文件格式，默认打开xlsx"); filename = `${filename}.xlsx`; } const _fsm = wx.getFileSyst...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
微信小程序二维码生成海报
<view class="container"> <image class="instead" show-menu-by-longpress // 这个用于设置 长按识别小程序码 mode="widthFix" src="{{img}}" /> <canvas id="myCanvas" canvas-id="myCanvas" style="width:{{width}}px; height:{{height}}px;" ></canvas> </view> data(){ width:0, height:0, ratio:0, }, .container{ height:100vh; wi...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
微信小程序，我为什么放弃 setData，使用 upData
鉴于在下使用微信小程序开发时使用 setData 的蹩脚体验，开发了个库函数 wx-updata，项目上线之后，我把这个自用的库函数整理放到 Github 上开源出来 wx-updata，这个库函数在开发的时候对我很有帮助，希望也可以帮到大家 如果大家在使用中遇到了问题，可以给我提 pr，提 issue，一起来改善小程序开发体验～wx-updata 版本 0.0.10Github小程序代码片段预览小程序代码片段代码setData 不方便的地方你在使用 setData 的时候，是不是有时候觉得很难受，举个简单的例子：// 你的 data data: { name: '蜡笔小新', info: { height: 140, color: '黄色' } }如果要修改 info.height 为 155，使用 setData 要怎么做呢：// 这样会把 info 里其他属性整不见了 this.setData({ info: { height: 155 } }) // 你需要取出 info 对象，修改后整个 setData const { info } = this.da...
小白
2020-11-17
/
0 评论
/
0 阅读
2020-11-17
Session只能存储在服务器端？
Session是什么session机制采用的是一种在服务器端保持状态的解决方案。由于采用服务器端能保持状态。也需要客户端保存一个标识。所以session机制可能需要借助于cookie机制来达到保存标识的目的。服务器在接受客户端首次访问时在服务器端创建seesion，然后保存seesion(我们可以将seesion保存在内存中，也可以保存在redis中，推荐使用后者)，然后给这个session生成一个唯一的标识字符串,然后在响应头中种下这个唯一标识字符串。签名。这一步通过秘钥对sid进行签名处理，避免客户端修改sid。（非必需步骤）浏览器中收到请求响应的时候会解析响应头，然后将sid保存在本地cookie中，浏览器在下次http请求的请求头中会带上该域名下的cookie信息，服务器在接受客户端请求时会去解析请求头cookie中的sid，然后根据这个sid去找服务器端保存的该客户端的session，然后判断该请求是否合法。如果按照经典实现的方式，session数据是保存在服务器端的，那么假设session不使用外部存储设备，session也就是存储在内存中的。那么如果一旦服务器重新启...
小白
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
javaScript实用函数技巧手记
实现base64解码function base64_decode(data){ var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = []; if (!data) { return data; } data += ''; do { h1 = b64.indexOf(data.charAt(i++)); h2 = b64.indexOf(data.charAt(i++)); h3 = b64.indexOf(data.charAt(i++)); h4 = b64.indexOf(data.charAt(i++)); bits = h1 << 18 | h2 <<...
小白
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
javaScript理解事件循环、宏任务、微任务
事件循环（Event Loop）、宏任务和微任务这几个概念，是最近面试中经常问到的知识点，理解它不但能帮助我们更好地应对面试，也能彻底理解js的执行机制，写出更为高效的代码，本文将帮你彻底理解事件循环、宏任务、微任务，内容大纲什么是事件循环、JS代码的内在执行机制什么是宏任务和微任务async的坑总结、更新&补充什么是事件循环？在JS中我们经常会需要“同时”进行多项工作，例如：定时器、事件、异步数据交互等，那么JS是如何管理这些任务的，又是如何确定他们的执行顺序的？首先，所有的语言都拥有并发模型的概念，也就是说多个任务如何同时执行，大部分语言支持多线程执行，JS拥有所有语言中最简单的并发模型——JS使用单线程的"事件循环(Event Loop)"来处理多个任务的执行我们用示意性的代码，来表示js的事件循环while(获取任务()){ 执行任务(); }简单来说，js的事件循环，每次读取一个任务，然后执行这个任务，执行完再继续获取下一个，如果暂时没有任务，就暂停执行，等待下一个任务到来；如果在执行任务的过程中有新的任务到达，也不会中断现有任务的执行，而是添加到队列的尾部等待结论...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第二十章 ECMAScript 6 Module
ES6的Class只是面向对象编程的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。比如，CommonJS模块就是对象，输入时必须查找对象属性。// CommonJS模块 let ...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十九章 ECMAScript 6 修饰器（Decorator）
类的修饰修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。function testable(target) { target.isTestable = true; } @testable class MyTestableClass {} console.log(MyTestableClass.isTestable) // true上面代码中，@testable就是一个修饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。基本上，修饰器的行为就是下面这样。@decorator class A {} // 等同于 class A {} A = decorator(A) || A;也就是说，修饰器本质就是编译时执行的函数。修饰器函数的第一个参数，就是所要修饰的目标类。function testable(target) { // ... }上面代码中，testable函...
