- 博客(23)
- 收藏
- 关注
转载 javascript事件中'return false'详解
浏览器中有很多异步事件,如click,mouseenter,mouseover等等,当用户执行相应操作之后,触发这个事件,然后执行相应的事件处理函数,一般情况下,我们可以通过三种方式给元素添加事件处理函数:// HTML事件处理函数:<input type="button" onclick="return false" />// DOM0级事件处理函数...
2017-10-11 19:56:00 570
转载 jquery源码——noConflict实现
实现方式很简单:在初始化的时候,记录当前全局中jQuery和$两个变量的的值,用_jQuery和_$分别存放,调用noConflict方法时,使用_jQuery和_$分别恢复对应的值,并且返回jQuery对象。 // 初始化jQuery对象时,调用逻辑如下: // 1. 记录全局中的jQuery和$变量(此时这两个变量指向生成jQuery对象之前的全局中的变量) v...
2017-10-10 09:42:00 124
转载 Charles抓包工具安装与配置
在实际开发中,我们需要时常抓取线上的请求及数据,甚至是请求的html文档,js,css等静态文件来进行调试。在这里,我使用charles来进行以上操作。但是呢,charles需要进行一系列配置才能达到我们的要求。下面将介绍一个mac下详细且完整的安装和配置过程。 1. 下载和安装Charles 在Charles官网下载,然后按照正常流程安装即可。 2. 破解Ch...
2017-06-30 23:18:00 146
转载 js模版引擎开发实战以及对eval函数的改进
简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根据固定规则,解析为可执行语句字符串; 2. 执行可执行解析后的语句字符串,即生成我们想要的页面结构。具体实现方法:1. 最终效果 1 /* ...
2017-06-25 14:21:00 86
转载 CSS元素垂直居中方法总结
坚持,坚持,坚持。。。 以上为自我鼓励,哈哈。。。 ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中很简单啊,不是有个margin: auto嘛,如果你真正尝试过,你就知道,垂直居中真的不想你想象中那么简单。 在日常设计网页过程中,我们可以根据text-alig...
2017-04-24 17:27:00 371
转载 你必须要了解的几种排序方法
作为一个程序员,你怎么能不了解冒泡算法呢? 下面向大家介绍六中排序算法,并提供javascript实现,以及简单分析算法复杂度。1. 简单排序方法1.1 冒泡排序总体描述: 相邻元素进行比较,每次选取最大的元素,进行下一次比较,因此可以将最大的元素像冒泡一样,从某一位置,到达最顶端算法简单描述: 假设:共有n个元素 进行(n-1)次循环,第i(从1开始计数)次...
2017-04-07 11:09:00 148
转载 学习Redux之分析Redux核心代码分析
1. React,Flux简单介绍 学习React我们知道,React自带View和Controller库,因此,实现过程中不需要其他任何库,也可以独立开发应用。但是,随着应用程序规模的增大,其需要控制的state也会越来越多,为了统一控制,我们一般都会将所有的状态和控制逻辑都放在顶层组件中,这样就会导致,react顶层组件中体积庞大,并且数据和组件混合在一起,非常不方便管理。...
2017-03-31 10:23:00 71
转载 React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦。今天呢,我就在这里介绍一个试用react-addons-css-transition-group插件,在react中实现轮播图效果。 首先,大家需要了解的是,页面中的动画,可以分为两种,一种是js动画,这是用js脚本来驱动的动画,另一种呢,就是用css的trans...
2017-03-28 23:20:00 369
转载 在React中使用CSS Modules设置样式
最近,一直在看React。。。那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的。其实,我内心是兴奋的啊,毕竟,活着就是要接触一些新的东西啊,那样才有意思啊。 反正多学点,肯定是没错的。哈哈。。。进入正题啦 我一看到CSS Modules这个词我就懵了,毕竟在我印象中,CSS高端一点的就是用SASS,L...
2017-03-22 20:50:00 207
转载 React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构。 刚好最近在看React,并且了解到其中的虚拟DOM,其实,就是利用json数据来代替DOM结构表示,然后利用这个json数据,渲染出DOM树,总体添加到页面中。下面,我就通过介绍我如何实现上面实际问题...
2017-03-19 15:06:00 291
转载 react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发。所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体。 webpack,是一个模块打包工具,其主要功能,就是将浏览器端无法识别的代码,通过各种loader和plugin,生成浏览器可用的代码。比如,我们可以在浏览器端使用ES2015和JSX编码的文件。 在使用react进行组件化...
2017-03-14 14:39:00 96
转载 javascript中replace使用总结
ECMAScript提供了replace()方法。这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。 1. 两个参数都为字符串的情况1 var text = 'cat, bat, sat, fat';2 // 在字符串中找到at,并将at替换为ond...
2017-03-01 16:01:00 144
转载 JavaScript作用域链和垃圾回收机制
作用域链基本概念: 在了解作用域链和内存之前,我们先了解两个概念,分别是执行环境和变量对象。 执行环境:定义变量或者函数有权访问的其他数据,决定了它们各自的行为。每个对象都有自己的执行环境。 变量对象:包含执行环境中所有变量和函数都保存在这个对象中,每个执行环境都有一个与之关联的变量对象。但是我们无法访问。作用域链: 在我们了解这两个概念之后,我们来了...
2017-02-28 18:44:00 94
转载 require.js 源码解读——配置默认上下文
首先,我们先来简单说一下,require.js的原理: 1、载入模块 2、通过模块名解析出模块信息,以及计算出URL 3、通过创建SCRIPT的形式把模块加载到页面中。 4、判断被加载的脚本,如果发现它有依赖就去加载依赖模块。如果不依赖其它模块,就直接执行factory方法 5、等所有脚本都被加载完毕就执行加载完成之后的回调函...
2017-02-24 21:15:00 137
转载 jQuery中jsonp函数实现
由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据。因此出现了浏览器跨域请求数据问题。 Jsonp是解决跨域问题的一个非常流行的方法。 JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON。callback({"name": "Kate"}); 1. JSONP原理 通过script标签进...
2017-02-21 23:06:00 92
转载 模块化规范Common.js,AMD,CMD
随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖。 模块化编程称为迫切的需求。 所谓的模块,就是实现特定功能的一组方法。 1. 模块的发展 1)函数封装1 // 存在问题:污染全局变量,模块成员之间看不出直接关系2 function...
2017-02-19 17:14:00 73
转载 js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的。那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的原型对象,如此循环,就行成了原型链。 在了解原型链之后,我们还需要了解属性搜索机制,所谓的属性搜索机制,就是当我们访问对象上的一个属性时,我们如何找到这个属性值。首先,我们现...
2017-02-18 16:16:00 95
转载 js中prototype,__proto__,constructor之间的关系
首先,我们需要了解三点: 1. 只要创建一个任意新函数,就会根据一个prototype属性,该属性指向函数的原型对象; 2. 每一个原型对象都会自动获得一个constructor属性,该属性只想prototype所在函数的指针; 3. 当调用构造函数创建实例时,该实例内部将包含一个指向构造函数原型对象的指针,在大部分浏览器中用__proto__标识; 从上面这...
2017-02-18 14:27:00 91
转载 圣杯布局
圣杯布局是讨论三栏液态布局的实现,所谓的液态布局,是相对于固态布局而言的,固态布局就是宽度固定值不变的布局,液态布局,就是好比容易向容器里倒水,它会随着容器的宽度的变化自适应宽度。 而双飞燕布局,是对圣杯布局的一种改进。 在了解这两个布局之前,你需要先了解margin负值和positon中负值的使用。 margin负值可参考http://www.cnblogs.co...
2017-02-16 21:07:00 61
转载 BFC详解
BFC(block formating context),翻译过来就是块级格式化上下文。我们可以理解为:BFC就是一个Block-level Box内部的Block-level Box布局的一系列规则。下面我们列出将有哪些布局规则并且举例解释说明。布局规则: 1. 内部的Box会在垂直方向,从顶部开始一个接一个地放置。(即每个块级元素独占一行) 2. Box垂直方向的...
2017-02-16 19:37:00 99
转载 cookie
由于HTTP是无状态协议,它不对之前的请求和响应状态进行管理,因此无法通过上一次的状态对本次请求进行处理。 cookie技术则是在这一条件下产生,它通过在请求报文和响应报文中写入cookie来控制用户客户端的状态。cookie交互(假设开始没有cookie) 1. 客户端向服务器端发送请求报文,服务器端在响应报文中设置Set-Cookie头首部字段,通知客户端保存co...
2017-02-15 15:51:00 69
转载 HTML5 canvas
canvas主要用于绘制简单的2D图形,具备基本绘图能力的2D上下文。webGL用于绘制3D图形,但支持不够好。下面我们主要来说明绘图的步骤,以及有哪些绘图API。绘图步骤创建画布,指定绘图区域,必须指定宽高,否则画布不显示。1 <!-- 创建一个长200,宽200的画布 -->2 <canvas id="drawing" width="...
2017-02-15 09:14:00 70
转载 HTML5拖放
拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息。拖动物体上拥有的事件dragstart (在物体刚被拖动时触发)drag (在dragstart事件触发之后就被触发)dragend (拖动事件结束时触发)...
2017-02-14 22:55:00 53
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人