搜索文章
类目归类
搜索到40篇与javascript的结果
小白
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-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
微信小程序 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函...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十八章 ECMAScript 6 Class
Class基本语法JavaScript语言的传统方法是通过构造函数，定义并生成新对象。下面是一个例子。function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);上面这种写法跟传统的面向对象语言（比如C++和Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写，就是下面这样。//定义类 class Point { constructor(x, y) { this.x = x; t...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十七章 ECMAScript 6 异步操作和Async函数
异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。ES6诞生以前，异步编程的方法，大概有下面四种。回调函数事件监听发布/订阅Promise 对象ES6将JavaScript异步编程带入了一个全新的阶段，ES7的Async函数更是提出了异步编程的终极解决方案。基本概念异步所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。回调函数JavaScript语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。它的英语名字callback，直译过来就是"重新...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十六章 ECMAScript 6 Promise对象
Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rej...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十五章 ECMAScript 6 Generator 函数
简介Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍Generator函数的语法和API，它的异步编程应用请看《异步操作》一章。Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();上面代码定义了一个Generator函数hel...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十四章 ECMAScript 6 Iterator和for...of循环
Iterator（遍历器）的概念JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。Iterator的遍历过程是这样的。（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。（3）第二次调用指针对象的next方...
admin
2020-11-12
/
0 评论
/
0 阅读
2020-11-12
第十三章 ECMAScript 6 Set和Map数据结构
SetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4上面代码通过add方法向Set结构加入成员，结果表明Set结构不会添加重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll('div')]; } var set = new Set(divs()...
小白
2020-11-11
/
1 评论
/
0 阅读
2020-11-11
新版chrome浏览器设置允许跨域
前言目前前端解决跨域，主要是通过webpack的devServer来配置。但是有时候开发环境中没有配置devServer，后端又没有设置跨域。前后端分离项目，本地调试代码的时候，经常会遇到跨域问题。本文主要是对之前文章浏览器跨域访问解决方案，做一个补充吧，因为这篇文章最后对chrome设置方式，目前设置不起作用了，更新文章，修正一下。解决--disable-web-security 不起作用的方案之前文章，提供了windows，mac，linux等设置--disable-web-security的方式，但是chrome新版本安全策略升级，这种打开方式或者之前的设置方式是无效的。那么如何解决呢？一、设置跨域，在chrome快捷方式右键‘属性’，‘快捷方式’，‘目标’ 路径最后边按一下空格，再添加以下代码：--args --disable-web-security --user-data-dir=D:\HaoroomsChromeUserData或者--disable-web-security --user-data-dir=D:\HaoroomsChromeUserDataD:Ha...
admin
2020-11-11
/
0 评论
/
0 阅读
2020-11-11
第十二章 ECMAScript 6 二进制数组
二进制数组（ArrayBuffer对象、TypedArray视图和DataView视图）是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格（2011年2月发布），ES6将它们纳入了ECMAScript规格，并且增加了新的方法。这个接口的原始设计目的，与WebGL项目有关。所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。文本格式传递一个32位整数，两端的JavaScript脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可以像C语言那样，直接操作字节，将4个字节的32位整数，以二进制形式原封不动地送入显卡，脚本的性能就会大幅提升。二进制数组就是在这种背景下诞生的。它很像C语言的数组，允许开发者以数组下标的形式，直接操作内存，大大增强了JavaScript处理二进制数据的能力，使得开发者有可能通过JavaScript与操作系统的原生接口进行二进制通信。二进制数组由三类对象组成。ArrayBuffer对象：代表内存之中的一...
