javascript
文章平均质量分 53
布瑞泽的童话
这个作者很懒,什么都没留下…
展开
-
远程文件下载采坑指南
Content Disposition附件头是从浏览器下载文件的最佳首选方式。它具有更好的跨浏览器兼容性,不会有任何内存限制,也不需要任何JavaScript。主流平台都是采用这个方式来进行下载(CSDN/minio等等)最好的方式是方案一,如果方案一没有条件,有存在足够技术能力的话就用方案五,自己私有化html和sw(单独短暂弹框的交互是无法解决的)。否则就退而求其次用方案二或者三来直接打开(牺牲pdf、图片等文件的下载体验,它们会直接打开)。原创 2023-02-13 16:16:42 · 773 阅读 · 0 评论 -
一文讲清大屏适配(大到四个屏幕也不怕)
政企项目少不了大屏适配的场景,如何打造完美的大屏适配解决方案呢?原创 2022-09-06 10:22:53 · 2272 阅读 · 3 评论 -
js判断字符串处于键盘三连键
有个弱密码的需求,需要判断用户注册的密码不能是键盘三连键的,比如说(123,qaz,rew,TRE,%RD,bhu)等等,找了下都没有最完美解决方案,故而自己基于网上的方案进一步封装了下。原创 2022-06-10 13:20:43 · 888 阅读 · 2 评论 -
三方包依赖node版本过高,构建失败解决方案
前端生态众多,开发中会用到各种各样的三方包。但是构建平台往往是统一的node版本,如果遇到构建机node版本太低,而某些三方包语法报错、或者某些三方库有bug的情况怎么办呢?原创 2022-06-01 10:53:50 · 2441 阅读 · 2 评论 -
input的type为number时,过滤符号的方法
前言input标签的type为number时,是可以输入+/-/e/.等符号的。通过常规的方式(比如onChange中去正则、onKeypress中去拦截等均无效)。因为当在移动端时,输入-,浏览器识别的e.target.value为’’,所以压根没有触发onChange。解决办法通过监听input的onInput事件,然后判断是否为’'来解决:let value = e.target.value; if (!value) { e.preventDefault();原创 2021-11-16 15:33:57 · 624 阅读 · 0 评论 -
vue技术栈前端建设方案
前言主要介绍云课堂前端在CRM系统的前端建设方面的经验总结,方便其他前端人做技术选型,全栈工程师快速建站。本文适合对vue技术栈和前端工具化、工程化感兴趣的朋友。整体架构CRM系统的服务端是基于node的,前端是以vue技术栈为主的。前端部分整体架构图如下:应用层整体前端应用层基于vue技术栈的传统三大件:路由层由vue-router统一管理。基础组件库则是选择了基于vue的e...原创 2019-12-12 16:26:49 · 1327 阅读 · 0 评论 -
深入理解javascript之闭包
理解闭包闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化。闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回。我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2。 function f1(){ var n=999; functio原创 2015-12-29 15:01:06 · 1210 阅读 · 3 评论 -
深入理解javascript系列之序章
从今天开始,博主会对javascript进行深入理解分析并将自己学习到的一些知识分析整理成博文,来让大家一起共同学习和讨论。如果有什么疑问或者建议,可以和博主联系。如果包含什么错误,希望大家可以进行讨论和指导。该系列是建立在已经基本掌握了javascript中的基础语法,进入更深一步学习的进阶笔记。该系列目录分为:深入理解之内存分配原创 2015-06-20 10:26:31 · 1777 阅读 · 1 评论 -
深入理解javascript之typeof和instanceof
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方。typeof先来说说typeof吧。首先需要注意的是,typeof方法返回一个字符串,来表示数据的类型。语法讲解我们先看看各个数据类型对应typeof的值: 数据类型 Type Undefined “undefined” Null “object” 布尔值原创 2015-12-18 20:31:13 · 24860 阅读 · 2 评论 -
javascript跨域方法
本文主要介绍几种常见的javascript跨域通信方法。首先讲解一下JSONP。JSONPJSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的 元素是一个例外。利用原创 2015-05-21 21:45:09 · 1422 阅读 · 2 评论 -
初步探究ES6之箭头函数
今天要介绍的是ES6中的箭头函数。语法我们先来看看箭头函数的语法:([param] [, param]) => { statements}param => expressionparam 是参数,根据参数个数不同,分这几种情况: () => { … } // 零个参数用 () 表示; x => { … } // 一个参数可以省略 (); (x, y) => { … } // 多参数不原创 2015-11-20 09:16:58 · 24440 阅读 · 5 评论 -
初步探究ES6之解构
语法解构可以使得我们用类似于数组或者对象文本的语法来指定数组的属性或者对象的属性。该语法比传统语法更加简便。光说可能不好理解,下面看看用传统的方法来表示数组的前三项:var first = someArray[0];var second = someArray[1];var third = someArray[2];有了解构语法后,我们可以使用下面的语法来完成同样的工作:var [first,原创 2015-11-19 09:04:34 · 1066 阅读 · 0 评论 -
初步探究ES6之module模块化
多人开发javascript时伴随着命名冲突等问题,先后有了模拟块级作用域、命名空间、模块化开发等方法。之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范。两个规范分别对应requirejs和seajs。而现在,ES6提出了自己的模块化统一标准。一个ES6的模块是一个包含了js代码的文件。ES6里没有所谓的module关键字,一个模块就是一个普通的脚本文件,除了以下两个区别原创 2015-11-25 16:42:30 · 3591 阅读 · 0 评论 -
初步探究ES6之字符串模板和剩余参数,默认参数
本文介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。 先来说说字符串模板。字符串模板ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。//产生一个随机数var num=Math.random();//将这个数字输出到consoleconsole.lo原创 2015-11-18 09:16:16 · 3024 阅读 · 0 评论 -
初步探究ES6之class类
类语法是ES6中新增的一个亮点特色。我们熟悉的javascript终于迎来了真正意义上的类。在之前,想要通过javascript来实现类,通常会采用如下构造函数的模式:function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ['Shelby','Co原创 2015-11-24 09:05:39 · 1265 阅读 · 0 评论 -
深入理解javascript之闭包
理解闭包闭包是静态语言不具有的一个特性,闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。闭包就是函数的堆栈在函数返回后并不释放,可以理解为这些函数并不在栈上分配而是在堆上分配。 这里需要讲一下堆栈,堆与栈都是编程语言用来在RAM中存放数据的地方。栈的优势就是存取速度比堆要快,仅次于直接位于CPU中的寄存器,但缺点是,存在栈中的数据大小与生存期必须是确定的,缺乏灵活性原创 2015-06-25 19:42:37 · 1126 阅读 · 0 评论 -
深入理解javascript之高级定时器
setTimeout()和setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了。这里主要介绍一下javascript的代码队列。在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行。所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待。如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看原创 2015-12-29 15:52:36 · 3184 阅读 · 2 评论 -
serviceworker运用与实践
前言本文首先会简单介绍下前端的常见缓存方式,再引入serviceworker的概念,针对其原理和如何运用进行介绍。然后基于google推出的第三方库workbox,在产品中进行运用实践,并对其原理进行简要剖析。前端缓存简介先简单介绍一下现有的前端缓存技术方案,主要分为http缓存和浏览器缓存。http缓存http缓存都是第二次请求时开始的,这也是个老生常谈的话题了。无非也是那几个http...原创 2019-01-24 09:33:36 · 12681 阅读 · 0 评论 -
浏览器跨域问题解决办法
浏览器跨域问题解决办法–前言之前在一个项目中,调用了别的部门的接口,但是由于存在跨域问题,只能进行简单的本地数据模拟调试,然后再把资源给对方进行联调。这样的方法肯定不是最佳方案,正好最近看到一篇文章,说到的就是跨域问题的解决办法,所以进行了学习和整理。同源政策首先说说同源政策,最初,它的含义是指,A网页设置的Cookie,B网页不能打开,除非这两个网页“同源”。所谓“同源”,就是三个相同:协议相同原创 2016-05-14 10:37:04 · 5757 阅读 · 0 评论 -
策略模式与开发实践
前言昨天学习了单例模式在前端中的应用实践,今天来看看策略模式的应用实践。策略模式策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 在应用中,策略模式可以用来优化具有很多不同判读分支的场景。我们先来看一个例子,根据不同的绩效成绩来算年终奖。(说到奖金我就开心,哈哈)简单的多条件判断我们根据不同的绩效来发奖金:var calculateBonus = function(原创 2016-05-14 10:33:47 · 701 阅读 · 0 评论 -
jquery的deferred使用详解
前言之前在一篇文章中写过一点when方法的使用,最近看到同事的一篇文章,又详细学习了deferred方法的各种使用技巧。特此总结。简单介绍deferred对象就是jQuery的回调函数解决方案,jQuery之前的版本在异步回调这一块做得不是很好,所以后期加上了该解决方案。普遍的ajax操作我们先来回顾一下jQuery中普通的ajax操作:$.ajax({ url: "test.html",原创 2016-04-27 11:12:15 · 5706 阅读 · 0 评论 -
HTML5之File文件操作
本文主要就web中的文件操作进行整理。file的属性首先看看input标签选中的文件中可以通过javascript获取的属性。 最常用的应该就是name,type和size了。还有FileReader,readAsDataURL,readAsText等实用的方法。原创 2015-12-09 21:00:36 · 1890 阅读 · 0 评论 -
javascript多线程
最近在项目中用到了多线程编程,所以就此处深入产开学习。众所周知,javascript是单线程的语言,单线程意味着程序会按照指定的顺序按部就班的执行下去,遇到堵塞也无法越过。我们简单地看看下面这个例子:function f1(){ console.time('time span');}function f2(){ console.timeEnd('time span');}set原创 2015-07-14 14:09:44 · 8336 阅读 · 3 评论 -
深入理解javascript之this
javascript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式。函数有以下几种调用方式:作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。 对象方法调用 作为对象方法调用的时候,this会被绑定到该对象。var point = { x : 0, y : 0, moveTo : functio原创 2015-06-27 10:08:13 · 5031 阅读 · 1 评论 -
初步探究ES6之序章
ES6是新一代的javascript语言标准,我们作为web开发者,无论是前端工程师还是后端开发者都需要适当的了解。上一次正式推出ES5,还是在2009年的时候。而这次ES6却更新和添加了很多新的内容呢。相信ES6给程序世界带来的影响不会小于CSS3和HTML5。ES6包含许多新的语言功能,会使javascript更加强大而富有表现力。ES6相对于互联网来说已经不算是什么新鲜知识了,国内有阮一峰老师原创 2015-11-28 20:11:08 · 887 阅读 · 0 评论 -
初步探究ES6之生成器
语法何为生成器?让我们先看看以下代码:function* quips(name) { yield "hello " + name + "!"; yield "i hope you are enjoying the blog posts"; if (name.startsWith("X")) { yield "it's cool how your name starts with原创 2015-11-17 09:46:21 · 979 阅读 · 0 评论 -
初步探究ES6之Proxy代理
ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。举一个例子来说:var engineer = { name: 'Joe Sixpack', salary: 50 };var interceptor = { set: function (receiver, property, value) { console.log(property, 'i原创 2015-11-23 09:24:05 · 4522 阅读 · 0 评论 -
判断两个对象内容相等
我们知道,如果两个对象即使内容,javascript也会判断它们不相等。但是有时候,我们仅仅需要判断两个对象的内容是否相等。那么我们应该如何做到且考虑周全呢?比如说0和-0,null和undefined,是不相等的,NaN和NaN默认是不相等的。我写了一个isEqual方法,考虑到了诸多方面,代码如下: //isEqual:判断两个对象是否键值对应相等原创 2015-07-15 20:09:51 · 3260 阅读 · 0 评论 -
深拷贝
要讲javascript的拷贝,就得先讲讲javascript中的值传递和引用传递。javascript中没有一个具体的语法来规定哪些参数是引用传递,而其他语言中都有明文规定,比如 C# 中的 ref 和 PHP 中的 & 。这也是javascript众多弊端中的一个。我们先看看下面这段代码://值传递var i = 3;var j = i;j = 4;document.w原创 2015-07-13 21:22:51 · 808 阅读 · 0 评论 -
javascript模块化笔记
本文是个人笔记链接集合。汇总了各个优秀的关于模块化开发的链接。AMD和CMD的区别http://segmentfault.com/a/1190000000733959原创 2015-07-27 11:03:40 · 915 阅读 · 0 评论 -
javascript验证数据类型
最近通过对Underscore.js源码的学习,对javascript数据类型的验证又有了一个新的认识,原来可以判断得这么简单又如此全面。我们自定义了isString,isNumber ,isDate ,isError ,isRegExp ,isBoolean ,isNull ,isUndefined ,isObject等方法。现在将自己定义的javascript数据类型验证函数及测试集展示:原创 2015-07-02 09:27:55 · 3087 阅读 · 0 评论 -
深入理解javascript之设计模式
设计模式设计模式是命名、抽象和识别对可重用的面向对象设计有用的的通用设计结构。设计模式确定类和他们的实体、他们的角色和协作、还有他们的责任分配。每一个设计模式都聚焦于一个面向对象的设计难题或问题。它描述了在其它设计的约束下它能否使用,使用它后的后果和得失。因为我们必须最终实现我们的设计模式,所以每个设计模式都提供了例子,代码来对实现进行阐释.虽然设计模式被描述为面向对象的设计,它们基于原创 2015-06-30 08:03:30 · 4289 阅读 · 0 评论 -
鼠标位置距浏览器窗口距离
代码如下: #test_div { width:400px; height: 400px; background-color: red;} function mousePos(e){ e=e||window.event; var scrollX=document.documentElement.scrollLeft||document.原创 2015-06-07 16:25:48 · 3998 阅读 · 0 评论 -
深入理解javascript之原型
理解原型原型是一个对象,其他对象可以通过它实现属性继承。任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型。任何一个对象都有一个prototype的属性,记为:__proto__。每当我们定义一个对象,其__proto__属性就指向了其prototype。示例如下: var foo = { x: 10, y: 20 };原创 2015-06-24 19:43:19 · 3819 阅读 · 0 评论 -
深入理解javascript之作用域
简单地说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在javascript中,变量的作用域分为全局和局部两种。拥有全局作用域就是在代码任何地方都能够访问到,叫做全局变量,以下三种情况可以拥有全局作用域 最外层函数和最外层函数外面定义的变量:var name="brizer";function doSomething(){原创 2015-06-23 19:22:39 · 1527 阅读 · 0 评论 -
深入理解javascript之内存分配
javascript中的变量分为两种,原始值和引用值。原始值指的是原始数据类型的值,比如undefined,null,number,string,boolean类型所表示的值。引用值指的是复合数据类型的值,即Object,Function,Array等。 原始值和引用值存储在内存中的位置分别为栈和堆。原始值是存储在栈中的简单数据段,他们的值直接存储在变量访问的位置。引用值是存储在堆中的对象原创 2015-06-20 10:50:10 · 2799 阅读 · 0 评论 -
倒计时
有时候,网站需要一个倒计时的特效来庆祝某些特别的日子。自己也实现了一个,占用内存也很小噢。其原理就是每隔一秒执行一次处理函数,将终点时间和现在的时间比较然后换算之后显示对应的值。效果如下:代码如下: 这里显示倒计时 var okbtn=document.getElementById("okbtn"); textp=原创 2015-06-18 13:30:13 · 1111 阅读 · 0 评论 -
delegate事件代理
如果用过jquery,相信对delegate方法的印象非常深刻,其前身是live方法。可以保证在节点还未出现就绑定监听事件。这么说可能不太明白。首先看看下面例子: liuf seven hehe 现在我们要给ul中的每一个li绑定click事件,最笨的办法如下://最笨的方法 addClickEvent($mi('#item1'),clickListener原创 2015-06-13 14:41:48 · 1794 阅读 · 0 评论 -
数组去重javascript
数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍。首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下:// 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组//第一种方法,遍历,将没有的插入临时数组function uniqArray1(arr) {原创 2015-06-01 23:42:30 · 1681 阅读 · 0 评论 -
深入理解javascript之防篡改对象
javascript中对象内置有多个属性Configurable,Writable,Enumerable,Value,Get和Set,来控制属性的行为。同样的ES5也有几个方法,来指定对象的行为。我们知道,javascript中的对象是可以共享的,也是默认可拓展的://一旦将对象设置防篡改,就不能撤销了//众所周知,一般的对象是可以随意拓展的var person = {name:'liufang原创 2015-08-05 09:00:28 · 1415 阅读 · 0 评论