JavaScript
ECMAScripter
这个作者很懒,什么都没留下…
展开
-
同事:这个页面的逻辑没什么能复用的,不抽组件也没什么影响吧?
最近在维护同事的一个项目时,发现有不少单个vue文件一千余行,同一个文件上有倒计时、有输入信息的表单;当时我就在想:是不是策划经常改需求或者排期紧急,所以没抽组件呢。原创 2022-11-16 01:14:57 · 653 阅读 · 5 评论 -
jsonp请求拦截
前言:最近遇到的一个问题,可以通过拦截修改jsonp请求去解决;搜了下关键字“拦截jsonp请求”,没有找到想要的答案,都是搜到一些跨域的文章…所以自己实现记录了下,希望帮助到正在搜的伙伴。思路理解jsonp原理的话,实现起来很简单,就直接贴代码啦(监听dom创建,识别script标签,修改src)代码 (function () { var originalCreateElement = document.createElement function changeReqLink (scr原创 2021-10-17 17:29:47 · 1162 阅读 · 1 评论 -
Ajax跨域post请求后端无法获取登录态原因及解决办法
遇到个小坑,印象中不是第一次遇到了,记录一下:前后端分离时前端、后端不在同一个子域,跨域post请求后端无法获取登录态。原因后端通过cookie验证用户是否登录,跨域post不会自动携带上cookie,因此验证失败。解决办法手动设置请求带上cookie即可,支持版本:jQuery 1.5.1+:$.ajax({ url:'//xxx.37games.com/xxx', typ...原创 2019-10-25 21:29:58 · 1137 阅读 · 1 评论 -
JavaScript设计模式——单例模式的理解与应用
JavaScript设计模式——对单例模式的一些见解JavaScript设计模式主要分类:①创建型设计模式,例如单例模式、工厂模式②结构型设计模式,例如装饰者模式、适配器模式③行为型设计模式,例如观察者模式、访问者模式④技巧型设计模式,例如委托模式、数据访问队形模式⑤结构型设计模式,例如MVC模式、MVVM模式、MVP模式本文讨论的是JavaScript中最常见的设计模式:单例模式,适合对Java...原创 2018-03-24 06:20:11 · 476 阅读 · 0 评论 -
JavaScript数据结构与算法——列表详解(上)
列表是一组有序的数据,每个数组中的数据项称为元素。数组相关知识不够了解的伙伴可以阅读本人上篇博客在JavaScript中,列表的元素可以是任意数据类型。列表中可以保存不定数量的元素,实际使用时元素的数量受到程序内存的限制。本文将介绍如何创建一个简单的列表类,将根据给出的列表抽象数据类型定义,实现该抽象数据类型,在列表详解(下)中,将分析几个适合解决的实际问题。1、列表的抽象数据类型定义listSi...原创 2018-04-03 00:02:35 · 1004 阅读 · 1 评论 -
Some Essential JavaScript Questions And Answers(4)
Some Essential JavaScript Questions And AnswersQuestion7:What is NaN? What is its type? How can you reliably test if a value is equal to NaN?[译]:NaN是什么?它是什么类型的?如何可靠地测试一个值是否等于NaN?Answer:The NaN proper...翻译 2018-03-28 00:02:41 · 529 阅读 · 0 评论 -
Some Essential JavaScript Questions And Answers(6)
Some Essential JavaScript Questions And AnswersQuestion11:Write a simple function (less than 160 characters) that returns a boolean indicating whether or not a string is a palindrome.[译]:写一个简单的方法(少于16...翻译 2018-04-03 19:44:08 · 692 阅读 · 2 评论 -
Eight Machine Learning JavaScript Frameworks to Explore
Eight Machine Learning JavaScript Frameworks to Explore [译]:8个值得探索的JavaScript机器学习框架In this post, you will learn about different JavaScript framework for machine learning: DeepLe...翻译 2018-03-29 20:11:59 · 853 阅读 · 0 评论 -
Some Essential JavaScript Questions And Answers(5)
Some Essential JavaScript Questions And AnswersQuestion 9:Discuss possible ways to write a function isInteger(x) that determines if x is an integer.[译]:写一个isInteger(x)函数用于决定x是不是整数,讨论可行的方法有哪些。A...翻译 2018-03-28 23:08:16 · 717 阅读 · 1 评论 -
JavaScript数据结构与算法——列表详解(下),基于Nodejs实现一个列表应用
1、上篇回顾:上篇我们实现了一个列表类,并添加了一些属性,实现了比较多的方法,本文章将与大家一起使用列表实现一个图书借阅查询系统。需要使用JavaScript数据结构与算法——列表详解(上)中写好的列表类List()。如需查看List()类代码说明,请查阅本人列表上篇讲解,这里只给出List的源码,以供接下来写调用: function List() { this.listSize ...原创 2018-04-05 14:31:15 · 1811 阅读 · 3 评论 -
JavaScript数据结构与算法——链表详解(上)
注:与之前JavaScript数据结构与算法系列博客不同的是,从这篇开始,此系列博客采用es6语法编写,这样在学数据结构的同时还能对ECMAScript6有进一步的认识,如需先了解es6语法请浏览http://es6.ruanyifeng.com/1、链表定义链表是一组节点组成的集合。每个节点都使用一个对象的引用指向它的后继,指向另一个节点的引用叫做链。 之前我们介绍过列表,如需回顾...原创 2018-04-23 02:35:05 · 840 阅读 · 2 评论 -
JavaScript算法与数据结构——字典详解
字典是一种以键-值对的形式存储数据的数据结构,接下来我们将使用JavaScript实现字典数据结构。1、定义字典类由于比较字典数据结构比较简单,就直接上代码好了。class Dictionary { constructor () { this.data = [] }}2、add()此方法用于往字典添加元素,需要接受两个参数,键和值 add (...原创 2018-04-30 21:21:27 · 880 阅读 · 0 评论 -
Some Essential JavaScript Questions And Answers(2)
Some Essential JavaScript Questions And AnswersQuestion3:What will the code below output to the console and why?[译]:以下代码在控制台的输出是?为什么?var myObject = { foo: "bar", func: function() { var...翻译 2018-03-27 19:31:32 · 736 阅读 · 0 评论 -
Some Essential JavaScript Questions And Answers(3)
Some Essential JavaScript Questions And AnswersQuestion5:What is the significance, and what are the benefits, of including 'use strict' at the beginning of a JavaScript source file?[译]:在JavaScript源文件开...翻译 2018-03-27 20:29:15 · 618 阅读 · 1 评论 -
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑 请阅读以下代码并猜测结果: function test() { let obj = {}, arr=[] for(var i = 0; i < 4; i++) { obj.first = i obj.s...原创 2018-04-08 13:18:52 · 2337 阅读 · 1 评论 -
JavaScript数据结构与算法——数组详解(上)
1、JS中的数组 JS中的数组是一个特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数,但是这些数字索引会在内部转换成字符串类型(因为JS对象中的属性名必须是字符串)。数组在JS中只是一种特殊的对象,效率不如其他语言中的数组高。2、使用数组 JS是一种灵活的语言,数组在JS中也是非常灵活的,接下来对数组的使用做一些总结。2.1、创建数组 要使用数组,第一步就是创建,j...原创 2018-03-31 14:39:41 · 1990 阅读 · 3 评论 -
JavaScript数组结构与算法——数组详解(中)
迭代器方法在上篇中,我们探讨了很多数组方法,接下来总结一下最后一组方法——迭代器方法。这些方法对数组的每个元素应用一个函数,可以返回一个值、一组值、或者一个新数组。1、不生成新数组的迭代器方法以下这组迭代器方法不产生任何新数组,它们要么对数组中的每个元素执行某种操作,要么返回一个值。1.1 forEach()此方法接受一个函数作为参数,对数组中的每个元素使用该函数。 function squ...原创 2018-03-31 22:13:26 · 1912 阅读 · 3 评论 -
JavaScript数据结构与算法——数组详解(下)
1、二维与多维数组JavaScript只支持一维数组,但是通过在数组里保存数组元素的方式,可以轻松创建多维数组。1.1 创建二维数组二维数组类似一种由行和列构成的数组表格,在JavaScript中创建数组,需要先创建一个一维数组,然后让数组的每个元素也是一个数组,创建二维数组时,起码需要知道要创建的二维数组有多少行,比如: var arr = [] for(var i = 0; i ...原创 2018-04-01 13:12:56 · 522 阅读 · 1 评论 -
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求:footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后;有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部;窗口高度的变化时,footer的位置需要重新调整。可能有的伙伴首先想到的是给footer组件添加: position: fixed; bottom: ...原创 2018-03-22 11:57:48 · 9319 阅读 · 2 评论 -
JavaScript数据结构与算法——队列详解(下)
接下来会借助本人另一篇文章JavaScript数据结构与算法——队列详解(上)中实现的队列类及其方法实现一个应用。配对问题需求分析:在一个文件中保存着一份男女混合的数据,名称前以B开头表示男士,以G开头表示女士,将文件中的男女读出来,分别放进一个队列,两两配对(比如排成两队,相对的匹配男女朋友),直至有一方人数为0,若刚好双双配对成功,则显示“全部配对完成”,若有人没配对成功,则显示没...原创 2018-04-09 00:39:50 · 881 阅读 · 0 评论 -
对JavaScript内置对象arguments的一些见解
深入理解JavaScript内置对象arguments这两天有伙伴问到我关于arguments的问题,使我产生了一种arguments对象容易被学习者忽略的想法,想分享一下自己对于JavaScript内置对象arguments的一些见解(阅读提醒:本文适合对JavaScript中arguments对象 || es6 rest参数了解不多的小伙伴)。说明: 与很多语言不同,JavaScript...原创 2018-03-26 15:55:15 · 693 阅读 · 0 评论 -
Some Essential JavaScript Questions And Answers(1)
一些很经典的JavaScript探讨题,分享分享,英语好的可以忽略我的翻译。Some Essential JavaScript Questions[译]:一些必要的(基本的)JS面试题及答案Question 1:What is a potential pitfall with using typeof bar === "object" to determine if bar is an obje...翻译 2018-03-26 23:59:04 · 540 阅读 · 1 评论 -
[JS Array]Find an item in an array that contains a string and then return that string
[A JavaScript question from stackoverflow.com]question:I have an array of strings.I want to search in that array for and string that contains a specific string.If it's found, return that string WITHOU...翻译 2018-03-21 12:40:07 · 437 阅读 · 0 评论 -
JavaScript数据结构与算法——链表详解(下)
在JavaScript数据结构与算法——链表详解(上)中,我们探讨了一下链表的定义、实现原理以及单链表的实现。接下来我们进一步了解一下链表的其他内容。1、双向链表双向链表实现原理图: 与单向链表不同的是,图中增加了小线部分,每一个节点增加了一个指向前驱节点的属性,这样就实现了双向链表。 双向链表中,删除节点不需要知道待删除节点的前驱节点,只要把待删除节点指向前驱节点的属性指向N...原创 2018-04-23 21:45:59 · 565 阅读 · 3 评论 -
JavaScript排序算法——插入排序算法
// 插入排序-原理解释:从数组第二项开始循环,每次循环取当前项与前边的项对比,符合条件则交换位置。 function insertSort(array) {// 从第二个元素开始循环 for (var i = 1; i < array.length; i++) {// 从当前项开始往前对比 for (...原创 2017-11-09 10:14:54 · 5235 阅读 · 0 评论 -
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化
一:require.js1、require.js是什么?为什么要用它? require.js是一个JavaScript模块载入框架,实现的是AMD规范。使用require.js有以下优点: ① 异步加载,防止js加载阻塞页面渲染,提高了性能。 ② 使用程序调用的方式加载js,避免使用传统的标签引入方式。 ③ 模块化,便于代码的编写和维护。 ④ 按需加载...原创 2018-09-12 20:40:24 · 1830 阅读 · 0 评论 -
浏览器指纹实现方案:Cookie、Flash Cookies、帆布指纹识别
浏览器指纹实现方案及对比,Cookie、Flash Cookies、帆布指纹识别浏览器指纹指什么?是一个能够唯一标识当前浏览器的字符串实现方法1、Cookie2、Cookie替代方案——Flash Cookies3、帆布指纹识别(使用canvas实现)原创 2018-11-19 22:57:14 · 12108 阅读 · 11 评论 -
ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d1、效果展示2、容易产生bug的点当前图片需要一个背景框,如上图所见白色框,白色框为漂浮于当前轮播图片上方;轮播图可以点击跳转到其他网页,但是由于存在层级关系,白色款会挡住轮播图,导致无法跳转2.1解决思路将白...原创 2019-01-07 00:30:47 · 4180 阅读 · 7 评论 -
ES6公用跑马灯抽奖组件的封装及使用
ES6公用抽奖组件的封装及使用此组件为本人使用ES6封装的抽奖组件,以下只分享组件的实现及使用方法,不涉及业务相关代码。原创 2019-06-30 17:35:13 · 891 阅读 · 5 评论 -
ES6公用花瓣飘落插件的封装及使用,支持npm安装
前言此组件为本人使用ES6封装的花瓣飘落插件,已应用于多个活动,以下只分享组件的实现及使用方法,不涉及活动相关代码,插件已上传npm,可通过npm安装使用。github地址:https://github.com/XieTongXue/flower-fly安装$ npm install flower-fly -S使用方法原创 2019-07-31 22:53:29 · 726 阅读 · 2 评论 -
[Vue源码分析]谷歌翻译后,Vue双向数据绑定失效了?
最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额。首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是运营没有通过语言栏切换语言,而是通过谷歌翻译。当初想到的方法禁止谷歌浏览器翻译当前页面...原创 2019-09-29 20:39:48 · 2498 阅读 · 5 评论 -
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间;当预定时间内没有再次调用该函数,则执行响应逻辑。函数节流(throttle): 可以理解为在函数防抖上多加了一个功能:函数节流会预定一个自动执行时间,到时自动执行一次。共同点: 函数节流与函数防抖都是为了限制函数的执行频次,是一种性能优化的方案,比如应用于windo...原创 2018-08-24 11:17:28 · 686 阅读 · 0 评论 -
Vue2.x通用编辑组件的封装及应用
效果 组件源码&amp;lt;template&amp;gt; &amp;lt;div class=&quot;edit-input&quot;&amp;gt; &amp;lt;div class=&quot;editBox&quot;&amp;gt; &amp;lt;div&am原创 2018-06-25 19:56:45 · 615 阅读 · 0 评论 -
Node+Express+Vue2.x+Mongodb结合muse-ui、less、rem等实现简易博客
源码地址:https://github.com/XieTongXue/node-blog 请先阅读项目中的readme文件,按步骤启动,避免运行出错。写此demo的缘由最近在看学习express,想找个demo了解一下,发现找到的资源不多,有的难度比较大,不适合新手入门,于是花了几个空闲的夜晚写了个博客demo,熟练一下mongodb、express,同时希望能帮到想入门的朋友。de...原创 2018-05-26 02:16:31 · 1037 阅读 · 7 评论 -
Koa入门——关键知识点总结
概念:Koa是基于nodejs平台的下一代web开发框架 - Express原班人马打造 - Async+await处理异步 - 中间件机制HelloWorldnode环境安装好的前提下,新建一个文件夹,进入该文件夹,使用npm init使其支持npm随后使用npm install koa --save安装koa 新建server.js,代码如下:// Crea...原创 2018-06-02 20:13:46 · 1351 阅读 · 1 评论 -
Mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建
一、微信开发者工具 如何使用微信开发者工具上传测试代码到腾讯云?可通过以下设置实现。(1)登录小程序后台进入https://mp.weixin.qq.com/使用注册小程序时的邮箱登录(勿使用公众号的邮箱登录),点击开发者工具如下,点击开通。 (2)下载nodejs demo随后会进去腾讯云,绑定账号后,点击下载nodejs demo。 解压缩后看到文件目录结构如...原创 2018-06-03 02:46:00 · 4765 阅读 · 2 评论 -
Mpvue+koa开发微信小程序——wx.request()的封装及应用
以下封装方法仅供mpvue+koa开发小程序入门参考,具体应用请根据实际更改。config.js// 配置项const host = 'http://localhost:5757'const config = { host}export default configutil.js// 工具函数import config from './config'ex...原创 2018-06-04 01:16:03 · 2210 阅读 · 2 评论 -
使用JavaScript解答2018第九届蓝桥杯C/C++省赛A组试题
大三时参加过第七届蓝桥杯,转眼已经两年,最近看了看第九届蓝桥杯试题,打算用JavaScript实现一下。题目1标题:分数1/1 + 1/2 + 1/4 + 1/8 + 1/16 + …. 每项是前一项的一半,如果一共有20项, 求这个和是多少,结果用分数表示出来。 类似:3/2 。当然,这只是加了前2项而已。分子分母要求互质。 注意: 需要提交的是已经约分过的分数...原创 2018-05-19 11:35:55 · 1152 阅读 · 1 评论 -
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
封装原因:在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有两个: 1:使用window.scrollTo()方法,但是这个方法是没有动画效果的,需要手动封装一下。 2:使用JQuery的动画函数,缺点比较明显:需要引入JQuery。 显然,选择第一种好很多。以下为封装window.scrollTo()的方法scroll(),文件名为scroll.js// Crea...原创 2018-05-30 00:42:35 · 3533 阅读 · 8 评论 -
JavaScript面向对象——深入理解默认的继承方式原型链
描述:正如我们所了解,JavaScript中的每个函数中都有一个指向某一对象的prototype属性。该函数被new操作符调用时会创建并返回一个对象,并且该对象中会有一个指向其原型对象的秘密链接,通过该秘密链接(__proto__),我们就可以在新建的对象中调用相关原型对象的方法和属性。而原型对象自身也具有对象固有的普遍特征,因此本身也包含了指向其原型的链接,由此就形成了一条链,即我们所说的原型链...原创 2017-11-14 09:23:25 · 3523 阅读 · 0 评论