JavaScript
文章平均质量分 95
小平果118
我是一匹奔腾的野马,需要你来征服。。。。。
展开
-
mini-webpack 源码浅析
minipack 源码简析其实“打包”对于前端来说再熟悉不过了,但是深入其中的原理,却不是人人都熟悉。由于webpack功能的强大和盛行,我们大部分都是所谓的“配置工程师”。借此,特地简单分析了一官方文档中提到的一个minipack项目的源码,以此深入了解下什么是打包?以及打包的原理是什么?文章写的比较平,是按照分析代码的顺序写的,细微有些总结,有错误或不妥之处,恳请指出。前置知识首先...原创 2020-01-08 23:54:03 · 656 阅读 · 0 评论 -
超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果图片尺寸 统一设置成:490*170px;一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数提示:1、 index不能一直无限制的递增下去,需做判断2、调用切换图片函数时需将递增之后的index作为参数传过去三、定义图片切换函数提示: 1.遍历所有放数原创 2015-10-31 10:17:17 · 1837 阅读 · 3 评论 -
JavaScript设计模式Item 1—多态
多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。从字面上来理解多态不太容易,下面我们来举例说明一下。主人家里养了两只动物,分别是一只鸭和一只鸡,当主人向它们发出“叫”的命令时,鸭会“嘎嘎嘎”地叫,而鸡会“咯咯咯”地叫。这两只动物都会以自己的方式来发出叫声。它们同样“都是动物,并且原创 2015-11-01 14:17:38 · 1316 阅读 · 0 评论 -
JavaScript设计模式 Item 4 --继承
1、继承在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可。与它们不同,在javascript中要想达到传承公用成员的目的,需要采取一系列措施。更有甚者,javascript属于使用原型式继承的少数语言之一。利益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些的原型式继承。2原创 2015-11-01 21:27:20 · 969 阅读 · 0 评论 -
你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年转载 2015-10-31 13:51:27 · 1836 阅读 · 2 评论 -
JavaScript设计模式 Item 3 --封装
在JavaScript 中,并没有对抽象类和接口的支持。JavaScript 本身也是一门弱类型语言。在封装类型方面,JavaScript 没有能力,也没有必要做得更多。对于JavaScript 的设计模式实现来说,不区分类型是一种失色,也可以说是一种解脱。从设计模式的角度出发,封装在更重要的层面体现为封装变化。通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开来,在系统的演变过程中,原创 2015-11-01 20:52:31 · 1174 阅读 · 0 评论 -
JavaScript设计模式 Item 2 -- 接口的实现
1、接口 (1)什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段。尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现。例如,如果一个接口包含有一个名为setName的方法,那么你有理由认为这个方法的实现应该具有一个字符串参数,并且会把这个参数赋给一个name变量。有了这个工具,你就能按对象提供的特性对它们进行分组。例如,即使一批对象彼此存在着极大的原创 2015-11-01 16:13:16 · 1567 阅读 · 1 评论 -
你不知道的JavaScript--Item26 异步的脚本加载
先来看这行代码:<script src = "allMyClientSideCode.js"></script>这有点儿……不怎么样。“这该放在哪儿?”开发人员会奇怪,“靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?”这两种做法都会让富脚本站点的下场很凄惨。<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于“白屏死机”状态。而<body>标签末原创 2015-11-03 14:38:31 · 1729 阅读 · 0 评论 -
65条最常用正则表达式,你要的都在这里了
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下。给自己留个底,也给朋友们做个参考。一、校验数字的表达式1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$转载 2016-01-08 16:28:06 · 4048 阅读 · 2 评论 -
高性能JavaScript之DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上。我们不可能原创 2016-03-23 10:06:31 · 1278 阅读 · 0 评论 -
你不知道的JavaScript--Item25 创建对象(类)的8种方法总结
1. 使用Object构造函数来创建一个对象下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。 var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"])上述写法的另外一种表现形式是使用对象原创 2015-10-31 14:55:48 · 1870 阅读 · 4 评论 -
ECMAScript 6 入门 ----Generator 函数
本文转自:阮一峰老师的ECMAScript 6 入门,有时间可以看下评论!Generator 函数简介基本概念Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍Generator函数的语法和API,它的异步编程应用请看《异步操作》一章。Generator函数有多种理解角度。从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部转载 2015-10-31 14:18:46 · 1132 阅读 · 0 评论 -
超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .第一步、获取按钮、绑定事件、设置定时器变量和计时变量第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”<!doctype html><html lan原创 2015-10-31 10:48:10 · 1781 阅读 · 0 评论 -
你不知道的JavaScript--Item17 循环与prototype最后的几点小tips
1、优先使用数组而不是Object类型来表示有顺序的集合ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序。但是在使用for..in循环对Object中的属性进行遍历的时候,确实是需要依赖于某种顺序的。正因为ECMAScript没有对这个顺序进行明确地规范,所以每个JavaScript执行引擎都能够根据自身的特点进行实现,那么在不同的执行环境中就不能保证fo原创 2015-10-21 21:35:44 · 1688 阅读 · 0 评论 -
jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作、样式操作、设置和获取HTML,文本和值、Css-Dom操作。1、属性操作<input type=”text” name=”username” value=”jack” class=”apple”>方法:attr() attribute属性使用:1、 attr(名称); 获得元素节点对应的属性信息$(“input”).attr(‘class’);原创 2015-10-26 13:27:12 · 1442 阅读 · 2 评论 -
你不知道的JavaScript--Item9 call(),apply(),bind()与回调
1、call(),apply(),bind()方法JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。简单的说就是改变函数执行的上下文,这是最基本的用法。两个方法基本区别在于传参不同。call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null。参数以逗号分原创 2015-10-17 17:19:57 · 1951 阅读 · 0 评论 -
你不知道的JavaScript--Item12 undefined 与 null
当讨论JavaScript中的原始数据类型时,大多数人都知道从String、Number到Boolean的基本知识。这些原始类型相当简单,行为符合常识。但是,本文将更多关注独特的原始数据类型Null和Undefined,是什么让它们如此相似,却又似是而非。一、理解null和undefined在JavaScript中,null是字面量同时也是语言中的关键字,用来表示无法识别的对象值。换句话说,这用来表原创 2015-10-20 21:33:34 · 2044 阅读 · 0 评论 -
如何编写高质量JavaScript代码
书写可维护的代码(Writing Maintainable Code )软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时。当你发现bug 的时候就立即修复它是最好的,此时你代码要解决的问题在你脑中还是很清晰的。否则,你转移到其他任务,忘了那个特定的代码,一段时间后再去查看这些代码就 需要:花时间学习和理解这个转载 2015-09-23 22:19:46 · 1006 阅读 · 0 评论 -
javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页每页信息条数:7信息总条数:select count(*) from table信息总页数:ceil向上取整(总条数/每页条数)分页类具体使用<?phpclass Pagination { private $tot原创 2015-10-13 17:12:17 · 2139 阅读 · 1 评论 -
ajax技术基础详解
一、概述1、什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新2、什么时候出现ajax? —- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候流行使用 2005年 google 公司发布产品 gmail邮箱服务,里边有使用ajax javascript从此也被人们重视起来原创 2015-10-13 16:49:42 · 957 阅读 · 0 评论 -
你不知道的JavaScript--Item22 Date对象全解析
本篇主要介绍 Date 日期和时间对象的操作。1. 介绍1.1 说明Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。1.2 属性无; Date对象对日期和时间的操作只能通过方法。2. 构造函数2.1 new Date() :返回当前的本地日期和时间参数:无返回值:{Date} 返回一个表示本地日期和时间的Date对象。示例:var dt = new Date();原创 2015-10-29 21:09:12 · 1498 阅读 · 0 评论 -
超实用的JavaScript代码段 Item2 --伸缩菜单栏
伸缩菜单栏点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding原创 2015-10-31 10:02:46 · 1651 阅读 · 0 评论 -
你不知道的JavaScript--Item5 全局变量
1、尽量少用全局对象全局变量的问题在于,你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量的时候,命名冲突在所难免。web页面包含不是该页面开发者所写的代码也是比较常见的,例如:第三方的JavaScript库 广告方的脚本代码 第三方用户跟踪和分析脚本代码 不同类型的小组件,原创 2015-10-16 15:04:58 · 1881 阅读 · 1 评论 -
高性能JavaScript之重绘与重排
浏览器是怎样渲染一个页面的?1,解析标签DOM:浏览器解析html源码,然后创建一个 DOM树。 在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。 DOM树的根节点就是 documentElement,对应的是html标签。2,渲染:浏览器解析CSS代码,计算出最终的样式数据。对CSS代码中非法的语法她会直接忽略掉。解析CSS的时候会按照如下顺序来定原创 2016-03-23 10:09:54 · 1688 阅读 · 0 评论 -
你不知道的JavaScript--Item34 大白话讲解Promise
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛一、Promise小试复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类原创 2016-03-12 22:10:30 · 3573 阅读 · 3 评论 -
Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if在字符串模板中,如 Handlebars,我们得像这样写一个条件块:<!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}}在 Vue.js,我们使用 v-if 指令实现同样的功能:<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一个 “else” 块:<h1 v-if="ok">Yes</h1><h1 v-e转载 2016-07-08 00:10:45 · 4604 阅读 · 0 评论 -
Vue.js学习 Item8 -- 方法与事件处理器
方法处理器可以用 v-on 指令监听 DOM 事件:<div id="example"> <button v-on:click="greet">Greet</button></div>我们绑定了一个单击事件处理器到一个方法 `greet`。下面在 Vue 实例中定义这个方法:var vm = new Vue({ el: '#example', data: { name: 'V转载 2016-07-08 00:29:23 · 2803 阅读 · 0 评论 -
超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
js 对象 浅拷贝 和 深拷贝1.浅拷贝拷贝就是把父对像的属性,全部拷贝给子对象。下面这个函数,就是在做拷贝:var Chinese = { nation:'中国'}var Doctor = { career:'医生'} function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i原创 2016-09-04 12:03:10 · 1882 阅读 · 1 评论 -
JavaScript数据结构与算法Item1--数组
几乎所有的编程语言都原生支持数组类型,因为数组是最简单的内存数据结构。JavaScript 里也有数组类型,数组存储一系列同一种数据类型的值。但在JavaScript里,也可以在数组中保存不同类型的值。数组遍历1 数组合并考虑如下场景:有多个数组,需要合并起来成为一个数组。我们可以迭代各个数组,然后把 每个元素加入最终的数组。幸运的是,JavaScript已经给我们提供了解决方法,叫作conca原创 2016-09-27 10:57:04 · 970 阅读 · 0 评论 -
JavaScript数据结构与算法Item2--栈
栈是一种遵从后进先出(LIFO)原则的有序集合。新添加的或待删除的元素都保存在栈的 末尾,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。1 栈的创建首先,我们需要一种数据结构来保存栈里的元素。可以选择数组:var items = [];接下来,要为我们的栈声明一些方法。 push(element(s)):添加一个(或几个)新元素到栈顶。 pop():移除栈顶的元素,同时原创 2016-09-27 11:00:06 · 907 阅读 · 0 评论 -
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
这篇文章主要介绍了5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例,需要的朋友可以参考下ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法。然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器。但是,时代在变化。如果你看看Github上流行的开源JS项目,你会发现原创 2015-11-10 15:58:12 · 1690 阅读 · 1 评论 -
React_Flux入门实例
Flux 架构入门实例过去一年中,前端技术大发展,最耀眼的明星就是React。本文参考的是阮大神的实例。加上自己的一些理解。React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上,使用 Flux 组织代码和安排内部逻辑,使得你的原创 2017-02-11 16:18:30 · 1148 阅读 · 0 评论 -
浅谈搜索引擎——SEO
浅谈搜索引擎——SEO浅谈SEO如何快速提高网站的权值及浏览量有效方式,专业检测网站的流量SEO 与SEM的区别SEO(Search Eneginee Optimization) 搜索引擎优化 免费SEM (Search Eneginee Market) 搜索引擎市场 付费百度引擎的广告SEM,竞价排名SEM高投入,SEO低投入(中小型企业)SEM短,效益快,SEO长期投入,增原创 2017-08-13 21:58:45 · 10956 阅读 · 0 评论 -
JavaScript设计模式 Item10 -- 策略模式Strategy
理解javascript中的策略模式策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。使用策略模式的优点如下:优点: 1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句。 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展。 3. 策略模式中的代码可以复用。一:使用策略模式计算奖金;下...转载 2018-05-06 15:51:48 · 379 阅读 · 0 评论 -
超实用的JavaScript代码段 Item7 -- “&&”和“||”操作符总结
1、||(逻辑或),从字面上来说,只有前后都是false的时候才返回false,否则返回true。alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // false这个傻子都知道~~ 但是,从深层意义上来说的话原创 2016-07-18 01:09:41 · 5375 阅读 · 1 评论 -
你不知道的JavaScript--Item38 自定义事件
JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件,在叙述自定义事件有何好处之前,先来看一个自定义事件的例子:<div id="testBox"></div>// 创建事件var evt = document.createEvent('Event');// 定义事件类型evt.initEvent('customEvent', true, tru原创 2016-07-26 01:25:05 · 2515 阅读 · 0 评论 -
你不知道的JavaScript--Item23 定时器的合理使用
1、定时器概述window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下: window.setTimeout(expression,milliseconds); window.setInterval(expression,原创 2015-10-29 21:59:47 · 2685 阅读 · 3 评论 -
JavaScript设计模式 Item8 --外观模式Facade
外观模式(门面模式),是一种相对简单而又无处不在的模式。一、定义外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备,它可以将一些复杂操作封装起来,并创建一个简单的接口用于调用。在JavaScript中,也经常使用对底层结构兼容性做统一的原创 2016-03-14 14:02:43 · 1447 阅读 · 0 评论 -
你不知道的JavaScript--Item35 事件流与事件处理
1. 事件处理1.1. 绑定事件方式(1)行内绑定 语法: //最常用的使用方式 <元素 事件=”事件处理程序”>(2)动态绑定 //结构+样式+行为分离的页面(html+css+js事件) 语法: 对象.事件=事件处理程序行内绑定和动态绑定的重要区别:以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象 因为原创 2015-10-08 13:19:05 · 1301 阅读 · 0 评论 -
JavaScript设计模式 Item9 --适配器模式Adapter
适配器模式(转换器面模式),一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况。适配器模式的作用是解决两个软件实体间的接口不兼容的问题。一、定义适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器(wrapper)。适配器的别名原创 2016-03-14 16:49:43 · 2353 阅读 · 3 评论