javascript技巧

详解Typescript 内置的模块导入兼容方式

2020-05-30
一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

微信小程序调用wx.getImageInfo遇到的坑解决

2020-05-30
这几天做到微信小程序详情页分享的功能,需要把原页面的一些参数带到分享页,然后在分享页需要获取图片的宽高等基本信息. 1.先说分享传参的方式: 在onShareAppMessage方法里面返回的path里面可以带参数传过去,具体传参的方式有两种,一种是可以传对象(需要把JSON对象stringiny),另外一种是通过一般的参数拼接的方式一个个拼. 代码: onShareAppMessage: function (res) { let data = this.data; let shareParam

JS实现前端动态分页码代码实例

2020-05-30
思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ... 首先,先是前端的布局样式 <body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在

JavaScript forEach中return失效问题解决方案

2020-05-30
在最近学习并使用ES6过程中,在一次循环数组并且作判断时返回值无效,return拿到的结果是undefined 我们分别使用for循环和forEach方法来验证: 结果:for循环里的可以return终止遍历,forEach里的return不能终止遍历 以上是return终止for循环的遍历和forEach循环的遍历测试. -------------------------------------------------------------- 分 割 线 ------------------

JavaScript类的继承多种实现方法

2020-05-30
类的继承 1 子承父业 extends(继承父类的普通函数)(方法) class Father { constructor() { } money() { console.log(100); } } class Son extends Father { } class sunzi extends Son { } var yxf = new Father; var lbw = new Son; var bb = new sunzi; console.log(yxf.money()); consol

原生JS封装拖动验证滑块的实现代码示例

2020-05-29
前言 星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果 分析 看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库 具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM

react结合bootstrap实现评论功能

2020-05-29
本文实例为大家分享了react结合bootstrap实现评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/react@15.3.2/dist/react.j

JS中准确判断变量类型的方法

2020-05-29
这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型.从1. JS基础变量类型.2. Js中判断变量的函数. 3. 实现getValType函数.3个方面来分析实现. Js基础变量类型 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Fun

JavaScript闭包原理与用法学习笔记

2020-05-29
本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();

JavaScript Window浏览器对象模型原理解析

2020-05-29
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性. Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局

公众号SVG动画交互实战代码

2020-05-29
越来越多的公众号在图文消息中加入了SVG动画交互效果,SVG支持事件触发动画,相对于单独做一个H5而言,由于公众号消息依托于微信服务器,为广告主节约了服务器流量成本.这次我们以苹果公众号的一篇交互消息为例,剖析下里面的效果是怎样实现的. 苹果公众号SVG交互 动画主要分为两屏,第一屏出现闪动文字提示用户点击交互,用户点击后第一屏动画消失接着播放第二屏的gif动画,最后画面停止在产品图片帧上. 1.首先构建第一屏动画: 1.1 SVG的基本结构 <svg viewBox="0 0 1080

24个ES6方法解决JS实际开发问题(小结)

2020-05-29
本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看. 1.如何隐藏所有指定的元素: const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none')); // 事例:隐藏页面上所有`<img>`元素? hide(document.querySelectorAll('img')) 2.如何检查元素是否具有指定的类 ? 页面DOM里的每个节点上都有一个 classL

微信小程序语音同步智能识别的实现案例代码解析

2020-05-28
一.背景 在小程序的一些应用场景中,会有语音转文字的需求.原有的做法一般是先通过小程序的录音功能录下语音文件,然后再通过调用语音智能识别WebApi(比如百度云AI平台,科大讯飞平台)将语音文件转成文字信息,以上的做法比较繁琐且用户的体验性较差. 为解决此问题,微信直接开放了同声传译的插件,小程序作者可以直接使用该插件进行语音同声传译的开发.此文章将通过前后端整合应用的完整案例完成语音的实时转换,并将语音上传到服务端后台备份. 二.同声传译插件介绍 微信同声传译由微信智聆语音团队.微信翻译团队与

基于canvasJS在PHP中制作动态图表

2020-05-28
CanvasJS是一个JavaScript库,用于轻松为网页创建其他类型的图表.例如条形图,饼图,柱形图,面积图,折线图等. 让我们以需要创建一个图表的示例为例,在该图表中我们可以显示每月销售和购买的产品.我们将考虑两个数组,我们也可以从数据库中考虑它们.一旦我们从数据库中获取数据并将其存储在数组中,它就可以使用canvasJS轻松绘制动态图形. 创建一个文件并将其保存在项目文件夹中.文件名chart_sample.php包含数组形式的数据,其中第一个数组代表购买的产品,第二个数组代表sols产

JavaScript隐式类型转换代码实例

2020-05-28
值类型之间的数据类型转换: (1)数字和字符串使用+运算符: 数字和字符串如果使用+运算符进行操作,那么会将数字先转换为字符串,然后进行字符串连接操作: var str = "string text "; var num = 10; console.log(str + num) // "string text 10" (2)布尔值参与的+运算符操作: 如果有布尔型参与,那么首先会将布尔值转换为对应的数字或者字符串,然后再进行相应的字符串连接或者算数运算. var n

JS常见内存泄漏及解决方案解析

2020-05-27
内存泄漏? 官方解释:内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果. 通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存,不再用到的内存却没有及时释放,从而造成内存上的浪费. 避免内存泄漏? 在局部作用域中,等函数执行完毕,变量就没有存在的必要了,垃圾回收机制很亏地做出判断并且回收,但是对于全局变量,很难判断什么时候不用这些变量,无法正常回收:所以,尽量少使用全局变量.在

基于JavaScript或jQuery实现网站夜间/高亮模式

2020-05-27
创建夜间/高亮模式的步骤: 创建一个HTML文档. 为文档文件以及黑暗模式创建CSS. 添加一个开关转换器按钮,以在明暗模式之间进行切换. 使用javascript或jQuery代码向开关转换器添加功能,以在明暗模式之间切换. 示例1:以下示例演示了使用JQuery代码在明暗模式之间进行切换.它基本上通过使用函数hasClass(),addClass()和removeClass()方法来工作. <!DOCTYPE html> <html lang="en"> &

JavaScript设计模式之策略模式实现原理详解

2020-05-27
俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小

JS组件库AlloyTouch实现图片轮播组件过程解析

2020-05-26
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container"> <div clas

基于aotu.js实现微信自动添加通讯录中的联系人功能

2020-05-26
什么是Auto.JS? Auto.JS是Android平台上的JavaScript自动化工具. 它的本质是可执行自己编写的简易Javascript脚本的,尤其可以在开启"无障碍模式"的情况下对其他App进行一些操作的一个Android App,便于进行自动化操作.学习成本非常低. Auto.JS已被黑产广泛使用,以至于作者关闭了官方下载通道. 官网:https://github.com/hyb1996/Auto.js 下面通过代码给大家介绍下基于aotu.js实现微信自动添加通讯录中的