随笔档案「2016年8月」 - dataman

return false

摘要：DOM的事件传播有两个类型，一个是捕获（从父节点到子节点），一个是冒泡（从子节点到父节点），所以一个事件触发时可以有多个处理器去处理它，DOM标准约定了return false后就会阻止事件继续传播。 jQuery中each里面用return false代替break；return ture 代替c 阅读全文

posted @ 2016-08-31 20:04 dataman 阅读(462) 评论(0) 推荐(0)

CSS position: absolute、relative定位问题详解

摘要：CSS2.0 HandBook上的解释：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。 TRBL属性（TOP、RIGHT、BOTTOM、LE 阅读全文

posted @ 2016-08-31 12:23 dataman 阅读(955) 评论(0) 推荐(0)

浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

摘要：一、浏览器渲染页过程描述 1、浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。 DOM树的根节点就是documentElement，对应的是html标签。 2、浏览器解析CSS代码，计算出阅读全文

posted @ 2016-08-31 09:47 dataman 阅读(1920) 评论(0) 推荐(0)

position：absolute 的深入探讨

摘要：position：absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级（祖父）元素没有设置position属性的时候，该元素的position：absolute会参考body进行定位。换句话说是如果父级设置了position（且值为非static），参照（最近的阅读全文

posted @ 2016-08-31 09:42 dataman 阅读(430) 评论(0) 推荐(0)

jQuery判断Dom对象是否存在

摘要：我们时常要检测一个DOM对象是否为空。 var $jObject = $('#btn'); alert($jObject ); 我们会发现，$jObject 永远不会为空。为什么呢？$ 方法查找对象，始终都会返回一个jQuery 对象的。解决办法：我们就要把jQuery对象转换成js对象。 va 阅读全文

posted @ 2016-08-30 21:07 dataman 阅读(1422) 评论(0) 推荐(0)

div 初始高度，并随内容高度变化

摘要：前几天做个邮箱系统，其中在内容的div设置了高度为200px; 可是在内容大于200高度后就出现了内容的溢出。如图：查完资料够才知道css有个min-height; 设置div的初始化高度，设置属性就适应内容的高度。如图： ok了。阅读全文

posted @ 2016-08-30 09:42 dataman 阅读(1836) 评论(0) 推荐(0)

jQuery的height()和JavaScript的height总结，js获取屏幕高度

摘要：jquery的各种高度首先来说一说$(document)和$(window)，如下：用一句话理解就是：当网页滚动条拉到最低端时，注意，是拉到最低端！当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height() 假如您要获取整个网页的高度，不建阅读全文

posted @ 2016-08-29 21:41 dataman 阅读(4828) 评论(0) 推荐(0)

深入理解js构造函数

摘要：JavaScript对象的创建方式在JavaScript中，创建对象的方式包括两种：对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式，例如： [javascript] view plain copy print? var o1 = { p:”I’m in Object litera 阅读全文

posted @ 2016-08-28 19:49 dataman 阅读(18602) 评论(3) 推荐(4)

摘要：一. 普通对象与函数对象 JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object ，Function 是JS自带的函数对象。下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(... 阅读全文

posted @ 2016-08-28 19:47 dataman 阅读(2077) 评论(2) 推荐(2)

JS原型、原型链深入理解

摘要：原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。一、初识原型在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的阅读全文

posted @ 2016-08-28 19:45 dataman 阅读(22414) 评论(0) 推荐(1)

原型链的继承都发生在构造函数上

摘要：首先应该是 k.prototype ...原型链的继承都是基本都是发生在构造函数上的，所以在实例上进行继承有点不靠谱。你这么写是没有问题的：或者你也可以用简单点的办法：阅读全文

posted @ 2016-08-28 19:42 dataman 阅读(354) 评论(0) 推荐(0)

理解js中的原型链，prototype与proto的关系

摘要：说到prototype，就不得不先说下new的过程。我们先看看这样一段代码： 1 <script type="text/javascript"> 2 var Person = function () { }; 3 var p = new Person(); 4 </script> 1 <scrip 阅读全文

posted @ 2016-08-28 19:34 dataman 阅读(440) 评论(1) 推荐(1)

JavaScript正则表达式

摘要：定义和使用定义和使用 var patt1 = new RegExp("hello"); var patt2 = /world/ ; test方法 test() 方法检索字符串中的指定值。返回值是 true 或 false。 var pat = /my/; var str = "this is my 阅读全文

posted @ 2016-08-28 13:03 dataman 阅读(209) 评论(0) 推荐(0)

border-image详解

摘要：一、border-image的兼容性 border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，阅读全文

posted @ 2016-08-27 18:45 dataman 阅读(7286) 评论(0) 推荐(0)

学习SpringMVC——从HelloWorld开始

摘要：前言：虽然从学java的第一个程序——helloworld至今，已经有好几个年头了。当时自己找资料，看视频，学习了java的输入输出流，多线程，网络编程等等，而三大框架（Struts、Hibernate、Spring）基本只是开了个头就出来实习了，尤其对于Spring更是没有进行系统的学习，虽阅读全文

posted @ 2016-08-27 18:07 dataman 阅读(3099) 评论(0) 推荐(2)

学习SpirngMVC之如何获取请求参数

摘要：学习SpringMVC——如何获取请求参数 @RequestParam,你一定见过；@PathVariable，你肯定也知道；@QueryParam，你怎么会不晓得？！还有你熟悉的他（@CookieValue）！她（@ModelAndView）！它（@ModelAttribute）！没错，仅注解这块阅读全文

posted @ 2016-08-27 18:01 dataman 阅读(1118) 评论(0) 推荐(0)

深入理解 CSS3 弹性盒布局模型

摘要：弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用。本文详阅读全文

posted @ 2016-08-27 17:54 dataman 阅读(9295) 评论(1) 推荐(1)

JavaScript正则表达式验证大全(收集)

摘要：以下函数调用方式： ? 1 2 3 4 function check() { var bb = document.getElementById("txt_id").value;//txt_id为文本框的ID alert(ismobile(bb));//ismobile 代表以下任何一个函数名称 } 阅读全文

posted @ 2016-08-26 16:55 dataman 阅读(1237) 评论(0) 推荐(0)

JavaScript中常用的正则表达式日常整理(全)

摘要：//校验是否全由数字组成 ? 1 2 3 4 5 6 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } ? 1 2 3 4 5 6 function isDi 阅读全文

posted @ 2016-08-26 16:53 dataman 阅读(1011) 评论(0) 推荐(0)

我所认识的JavaScript正则表达式

摘要：如果说这是一篇关于正则表达式的小结，我更愿意把它当做一个手册。 RegExp 三大方法本文的RegExp采用直接量语法表示：/pattern/attributes。attributes有三个选择，i、m和g，m（多行匹配）不常用直接省略，所以一个pattern（匹配模式）可以表示如下： var p 阅读全文

posted @ 2016-08-26 16:51 dataman 阅读(283) 评论(0) 推荐(0)

不再以讹传讹，GET和POST的真正区别

摘要：如果有人问你，GET和POST，有什么区别？你会如何回答？我的经历前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把GET改个名字叫GET2。他阅读全文

posted @ 2016-08-26 16:48 dataman 阅读(228) 评论(0) 推荐(0)

JavaScript中的正则表达式

摘要：定义在javascript我们可以通过内建的类来定义一个正则表达式。实际上RegExp类的构造函数可以接受两个参数，除了本身需要匹配的模式字符串外，还可以定义指定额外处理方式的第二个参数。我很好奇输出reName会得到什么结果呢？于是：得到结果：/nowamagic/i，于是我们得到java 阅读全文

posted @ 2016-08-26 16:45 dataman 阅读(330) 评论(0) 推荐(0)

JavaScript正则表达式

摘要：1.语法基础正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。语法 /pattern/modifiers; 正则表达式修饰符修饰符可以在阅读全文

posted @ 2016-08-26 16:25 dataman 阅读(317) 评论(0) 推荐(0)

CSS清除浮动

摘要：什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而阅读全文

posted @ 2016-08-26 15:26 dataman 阅读(237) 评论(0) 推荐(0)

CSS基础之盒子模型及浮动布局

摘要：盒模型谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是内容(content)、填充(padding)、边框(border)、边界(margin)；这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。先阅读全文

posted @ 2016-08-26 15:25 dataman 阅读(4709) 评论(0) 推荐(0)

JavaScript数组forEach()、map()、reduce()方法

摘要：1. js 数组循环遍历。数组循环变量，最先想到的就是 for(var i=0;i<count;i++)这样的方式了。除此之外，也可以使用较简便的forEach 方式 2. forEach 函数。 Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下： [html 阅读全文

posted @ 2016-08-25 19:23 dataman 阅读(7288) 评论(0) 推荐(2)

Redux 核心概念

摘要：http://gaearon.github.io/redux/index.html ，文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文，以加深其中的重点概念。根据该项目源码的习惯，示例都是基于阅读全文

posted @ 2016-08-25 18:50 dataman 阅读(1515) 评论(0) 推荐(0)

reduce 方法 (Array) (JavaScript)

摘要：对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。语法 array1.reduce(callbackfn[, 阅读全文

posted @ 2016-08-25 18:47 dataman 阅读(578) 评论(0) 推荐(0)

jQuery-懒加载技术(简称lazyload)

摘要：第一：lazyLoad简介及作用：网站性能优化的插件，提高用户体验。页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样的话页面在打开只加载可视区域的图片，而其它隐藏的图片则不加载。第二：使用场合涉及到图片，falsh资源，iframe，网页编辑器(CK)，JS文件阅读全文

posted @ 2016-08-25 16:39 dataman 阅读(333) 评论(0) 推荐(0)

Javascript闭包的几种用法

摘要：一、什么是闭包和闭包的几种写法和用法 1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点： 1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。 2. 一个闭包就是当一个函数返回时，一个阅读全文

posted @ 2016-08-25 15:32 dataman 阅读(3263) 评论(1) 推荐(1)

浅谈 HTTPS 和 SSL/TLS 协议的背景与基础

摘要：要说清楚 HTTPS 协议的实现原理，至少需要如下几个背景知识。大致了解几个基本术语（HTTPS、SSL、TLS）的含义大致了解 HTTP 和 TCP 的关系（尤其是“短连接”VS“长连接”）大致了解加密算法的概念（尤其是“对称加密与非对称加密”的区别）大致了解 CA 证书的用途大致了解几阅读全文

posted @ 2016-08-25 14:47 dataman 阅读(468) 评论(0) 推荐(0)

使用Vue快速开发单页应用

摘要：本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从后端转移到前端，提升了性能减少了页面加载时间，前后逻辑更扁平。但是当页面复杂度变高时，你会发现，数据处理，U 阅读全文

posted @ 2016-08-25 14:36 dataman 阅读(21294) 评论(0) 推荐(0)

轻松入门React和Webpack

摘要：说说React 一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：通过前端模板引擎定义结构 JS文件中写自己的逻辑 CSS中写组件的样式通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖那么在React中阅读全文

posted @ 2016-08-25 13:53 dataman 阅读(823) 评论(1) 推荐(1)

使用Redux管理你的React应用

摘要：原文作者：http://www.cnblogs.com/Leo_wl/p/4780750.html 因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew 阅读全文

posted @ 2016-08-25 11:27 dataman 阅读(570) 评论(0) 推荐(0)

深入理解 react-router 路由系统

摘要：作者：范洪春链接：https://zhuanlan.zhihu.com/p/20381597来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面阅读全文

posted @ 2016-08-25 10:33 dataman 阅读(46724) 评论(1) 推荐(1)

webpack学习之路

摘要：当自己在学习webpack的时候，在网上发现中文的很详细的教程很少，于是便想将自己学习webpack的笔记记录整理下来，便有了这篇文章，希望对大家有所帮助，如果有错误，欢迎大家指出。在我们开始之前 webpack有多种加载器(Loader,后面会介绍),可以处理各种需要被处理的静态文件 webpa 阅读全文

posted @ 2016-08-25 10:10 dataman 阅读(429) 评论(0) 推荐(0)

webpack编译流程漫谈

摘要：前言 weback在web构建工具的激烈竞争中逐渐脱引而出。无论是编译速度、报错提示、可扩展性等都给前端开发者耳目一新的感觉。本篇文章是个人对webpack的一点小研究总结。 webpack在开发者社区的反馈类似gulp把自己定位为stream building tools一样，webpack把阅读全文

posted @ 2016-08-25 09:53 dataman 阅读(725) 评论(0) 推荐(0)

HTML5无刷新修改Url,history pushState/replaceState

摘要：一、认识window.history window.history表示window对象的历史记录，是由用户主动产生，并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退。阅读全文

posted @ 2016-08-25 09:21 dataman 阅读(789) 评论(0) 推荐(0)

gulp的流与执行顺序

摘要：gulp的关键在于流，这从它的logo就能看出来。在node中，流是操作文件时一个重要的概念。流是指什么呢？它包含两个含义：“水流”和“流水”。水流蕴含了源源不断或是一股一股那样流过的意味；而流水是“流水线”或是“流水作业”里那种让物件通过各个环节依次对其加工的意思。我们经常接触到的“流媒体” 阅读全文

posted @ 2016-08-24 19:39 dataman 阅读(838) 评论(0) 推荐(0)

RequireJS对文件合并与压缩实现方法

摘要：RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。本文为大家讲解的是requireJS对文件合并与压缩的阅读全文

posted @ 2016-08-24 18:43 dataman 阅读(872) 评论(0) 推荐(0)

RequireJS模块化后JS压缩合并

摘要：使用RequireJS模块化后代码被拆分成多个JS文件了，在部署生产环境需要压缩合并，RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至可以对整个项目进行打包。 r.js的压缩工具使用UglifyJS或Closure Compile 阅读全文

posted @ 2016-08-24 18:40 dataman 阅读(1753) 评论(0) 推荐(0)

gulp不完全入门教程

摘要：引言 gulp 是基于 Nodejs 的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，gulp 借鉴了Unix操阅读全文

posted @ 2016-08-24 18:26 dataman 阅读(538) 评论(0) 推荐(0)

gulp详细入门教程

摘要：原文地址：http://www.ydcss.com/archives/18 简介： gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作阅读全文

posted @ 2016-08-24 16:15 dataman 阅读(198) 评论(0) 推荐(0)

JS移动客户端--触屏滑动事件

摘要：移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件 touchstart: //手指放到屏幕上时阅读全文

posted @ 2016-08-24 16:11 dataman 阅读(201) 评论(0) 推荐(0)

React Router 使用教程

摘要：一、基本用法 React Router 安装命令如下。使用时，路由器Router就是React的一个组件。 Router组件本身只是一个容器，真正的路由要通过Route组件定义。上面代码中，用户访问根路由/（比如http://www.example.com/），组件APP就会加载到documen 阅读全文

posted @ 2016-08-24 15:15 dataman 阅读(1610) 评论(1) 推荐(1)

React/Router

摘要：React Router 一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。概览在阐明React Router可以帮你解决的问题之前我们来举一个没有引用React Router 的简单例子。没使用 React Router 阅读全文

posted @ 2016-08-24 15:11 dataman 阅读(625) 评论(0) 推荐(0)

Redux入门指南

摘要：简介状态现在有一个开关按钮组件ToggleButton，而按钮的on/off就是这个组件的状态。一个应用里面会有大量的组件，而管理以及传递这些组件的状态，就成了非常繁琐的工作。redux使用一个非常简洁的思路，方便地提供不同层级组件的解耦式状态操作。管理状态 reudx本身是一个非常简单的流程阅读全文

posted @ 2016-08-24 15:07 dataman 阅读(407) 评论(0) 推荐(0)

Redux入门示例-TodoList

摘要：Tip 前端技术真是日新月异，搞完 React 不搭配个数据流都不好意思了。满怀期待的心去翻了翻 flux，简直被官方那意识流的文档折服了，真是又臭又长还是我智商问题？😖转战 redux ，越看越有意思，跟着文档做了个 TodoList 的入门小例子。废话不多说，先贴上文章用到例子的源码 htt 阅读全文

posted @ 2016-08-24 15:04 dataman 阅读(2312) 评论(0) 推荐(1)

实例讲解基于 React+Redux 的前端开发流程

摘要：原文地址：https://segmentfault.com/a/1190000005356568 前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达 42000 +，超过了 jquery 的 39000+，也即将超过前几年比较火的ang 阅读全文

posted @ 2016-08-24 14:58 dataman 阅读(3178) 评论(1) 推荐(2)

使用 webpack + react + redux + es6 开发组件化前端项目

摘要：因为最近在工作中尝试了 webpack、react、redux、es6 技术栈，所以总结出了一套 boilerplate，以便下次做项目时可以快速开始，并进行持续优化。对应的项目地址：webpack-react-redux-es6-boilerplate 该项目的 webpack 配置做了不少优化，阅读全文

posted @ 2016-08-24 14:51 dataman 阅读(2227) 评论(0) 推荐(0)

Git分支-分支简介

摘要：源地址：https://git-scm.com/book/zh/ch3-1.html 几乎所有的版本控制系统都以某种形式支持分支。使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线。在很多版本控制系统中，这是一个略微低效的过程——常常需要完全创建一个源代码目录的副本。对于大项目阅读全文

posted @ 2016-08-24 14:16 dataman 阅读(1894) 评论(0) 推荐(0)

HTML5 history新特性pushState、replaceState

摘要：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取，让你可以在用户的访问记录中前进和后退。从HTML5开始，我们可以开阅读全文

posted @ 2016-08-24 13:53 dataman 阅读(275) 评论(0) 推荐(0)

ajax与HTML5 history pushState/replaceState实例

摘要：一、ajax载入与浏览器历史的前进与后退众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pu 阅读全文

posted @ 2016-08-24 13:40 dataman 阅读(357) 评论(0) 推荐(0)

详解css3弹性盒模型（Flexbox）

摘要：目前没有浏览器支持 box-flex 属性。 Firefox 支持替代的 -moz-box-flex 属性。 Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。 css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。 Flexb 阅读全文

posted @ 2016-08-24 12:53 dataman 阅读(407) 评论(0) 推荐(0)

深入理解React、Redux

摘要：React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与react+redux就是OO与FP编程范式的对决。简单学习某项技术并不能让建立起一个全阅读全文

posted @ 2016-08-24 12:49 dataman 阅读(694) 评论(0) 推荐(0)

Redux 介绍

摘要：本文主要是对 Redux 官方文档的梳理以及自身对 Redux 的理解。单页面应用的痛点对于复杂的单页面应用，状态（state）管理非常重要。state 可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI 的状态信息（比如，路由、选中的 tab、是阅读全文

posted @ 2016-08-24 12:47 dataman 阅读(593) 评论(0) 推荐(0)

前端 IoC 理念入门

摘要：背景近几年，前端应用（WebApp）正朝着大规模方向发展，在这个过程中我们会对项目拆解成多个模块/组件来组合使用，以此提高我们代码的复用性，最终提高研发效率。在编写一个复杂组件的时候，总会依赖其他组件来协同完成某个逻辑功能。组件越复杂，依赖越多，可复用性就越差，我们可以借助软件工程中优秀的编程理阅读全文

posted @ 2016-08-24 12:31 dataman 阅读(857) 评论(0) 推荐(0)

【转载】前端面试

摘要：一：先来看道js笔试题貌似我写错了，把参数误漏了。囧考察知识点：函数声明的方式，对于这种，先调用后声明的形式，在js世不报错的，但是如果是匿名函数将会报错,原因是匿名函数没有给出具体的函数名js无法识别。在js里，声明有三种。方式一：这种方式，声明的是全局变量，如果包裹在function里阅读全文

posted @ 2016-08-24 12:28 dataman 阅读(441) 评论(0) 推荐(0)

Object.prototype.toString.call()方法浅谈

摘要：使用Object.prototype上的原生toString()方法判断数据类型，使用方法如下： Object.prototype.toString.call(value) 1.判断基本类型： 2.判断原生引用类型：函数类型日期类型数组类型正则表达式自定义类型很明显这种方法不能准确判断p 阅读全文

posted @ 2016-08-22 16:38 dataman 阅读(18705) 评论(1) 推荐(5)

JavaScript call()和apply()

摘要：ECMAScript规范给所有函数都定义了call()与apply()两个方法，call()与apply()的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值，call()与apply()的不同就是call传的参数可以是任意的，而apply传的剩余阅读全文

posted @ 2016-08-22 16:07 dataman 阅读(336) 评论(0) 推荐(0)

jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式

摘要：jQuery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery使用户能更方便地处理HTML documen 阅读全文

posted @ 2016-08-19 17:04 dataman 阅读(18533) 评论(0) 推荐(0)

JavaScript for in的缺陷

摘要：for in 语句用来列举对象的属性(成员)，如下 1 2 3 4 5 6 7 var obj = { name:"jack", getName:function(){return this.name} }; //输出name,getName for(var atr in obj) { alert( 阅读全文

posted @ 2016-08-19 15:11 dataman 阅读(451) 评论(0) 推荐(0)

JavaScript判断对象是否含有某个属性

摘要：两种方式，但稍有区别 1，in 运算符 1 2 3 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 1 2 3 var obj = {name:'jack 阅读全文

posted @ 2016-08-19 15:09 dataman 阅读(549) 评论(0) 推荐(0)

【一小时入门】webpack 入门指南

摘要：什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sas 阅读全文

posted @ 2016-08-19 14:45 dataman 阅读(305) 评论(0) 推荐(0)

webpack实例与前端性能优化

摘要：壹 | Fisrt 曾几何时，我们是如上图的方式引入JS资源的，相信现在很少遇见了。近年来Web前端开发领域朝着规范开发的方向演进。体现在以下两点： MVC研发构架。多多益处（逻辑清晰，程序注重数据与表现分离，可读性强，利于规避和排查问题...）构建工具层出不穷。多多益处（提升团队协作，以及工程运阅读全文

posted @ 2016-08-17 17:04 dataman 阅读(341) 评论(0) 推荐(0)

JavaScript splice() 方法

摘要：定义和用法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。例子 1 在本例中，我们将创建一个新数组，并向其添加一个元素：输出：例子 2 在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：输出：例子 3 阅读全文

posted @ 2016-08-17 15:38 dataman 阅读(212) 评论(0) 推荐(0)

JavaScript拆分字符串并将分割的数据放到数组中

摘要：1 2 3 4 5 6 7 var splitArray = new Array(); var string="太平洋、大西洋、印度洋、北冰洋"; var regex = /、/; splitArray=string.split(regex); for(i=0; i < splitArray.len 阅读全文

posted @ 2016-08-17 15:32 dataman 阅读(1152) 评论(0) 推荐(0)

JavaScript中数组map()方法

摘要：JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果。语法 ? 1 array.map(callback[, thisObject]); ? 1 array.map(callback[, thisObject]); ? 1 array.map(cal 阅读全文

posted @ 2016-08-17 15:29 dataman 阅读(1147) 评论(0) 推荐(0)

ES5中新增的Array方法详细说明

摘要：一、前言 ES5中新增的不少东西，了解之对我们写JavaScript会有不少帮助，比如数组这块，我们可能就不需要去有板有眼地for循环了。 ES5中新增了写数组方法，如下：浏览器支持 Opera 11+ Firefox 3.6+ Safari 5+ Chrome 8+ Internet Explo 阅读全文

posted @ 2016-08-17 15:25 dataman 阅读(406) 评论(0) 推荐(0)

React入门实例教程

摘要：文章转自：阮一峰现在最热门的前端框架，毫无疑问是 React 。上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，阅读全文

posted @ 2016-08-17 15:14 dataman 阅读(457) 评论(0) 推荐(0)

前端涉及的所有知识体系

摘要：资源教程: 综合类前端知识体系前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引前端书籍前端免费书籍大全前端知识体系免费的编程中文书籍索引智能社 - 精通JavaScript开发重新介绍 Ja 阅读全文

posted @ 2016-08-17 12:20 dataman 阅读(560) 评论(0) 推荐(1)

web前端性能优化总结

摘要：网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户阅读全文

posted @ 2016-08-16 18:06 dataman 阅读(366) 评论(0) 推荐(0)

Web前端，高性能优化

摘要：高性能HTML 一、避免使用iframe iframe也叫内联frame，可将一个HTML文档嵌入另一个HTML文档中。 iframe的好处是，嵌入的文档独立于父文档，通常也借此使浏览器模拟多线程。缺点是： ①虽然iframe能模拟多线程，但主流浏览器的同域名并行下载数是不变的，浏览器对同域名的链接阅读全文

posted @ 2016-08-16 18:04 dataman 阅读(169) 评论(0) 推荐(0)

移动前端知识总结

摘要：原文链接：http://caibaojian.com/mobile-knowledge.html meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对io 阅读全文

posted @ 2016-08-16 17:29 dataman 阅读(379) 评论(0) 推荐(0)

CSS的box-sizing属性

摘要：box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border 阅读全文

posted @ 2016-08-16 16:02 dataman 阅读(161) 评论(0) 推荐(0)

一篇非常不错的前端面试文章

摘要：文章来自翻译，其中忽略了一些无关紧要的内容直入主题。作者先后在twitter,Stripe工作，期间会参加面试工作。实际上参加面试工作的人都知道要想在一个较短的时间内（30min-1h）就对一个应聘者做出判断其实是很难的，因此我们不得不想尽办法去更加合理的去判断面试者。下面是作者理出的一个思路: 阅读全文

posted @ 2016-08-16 14:55 dataman 阅读(264) 评论(0) 推荐(0)

CSS 选择器参考手册

摘要：CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）阅读全文

posted @ 2016-08-16 14:45 dataman 阅读(249) 评论(0) 推荐(0)

浏览器的工作原理：新式网络浏览器幕后揭秘

摘要：本文转载自html5rocks，考虑到有时候html5rocks不方便访问，所以转载过来。序言这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时阅读全文

posted @ 2016-08-16 14:41 dataman 阅读(342) 评论(0) 推荐(0)

Web前端性能优化

摘要：1.请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能阅读全文

posted @ 2016-08-16 14:40 dataman 阅读(245) 评论(0) 推荐(1)

谈谈Grunt,NPM,Gulp

摘要：随着前端工程化的趋势,产生了越来越多的构建工具,而其中比较优秀的就是grunt,npm,gulp,今天我来说说这三者间的区别以及他们的优缺点. 相信一般前端开发者选择构建工具的时候,更多的是看个人习惯以及团队的情况.相信这三个构建工具总有一个会适合你的,我们先来看看grunt. Grunt grun 阅读全文

posted @ 2016-08-16 14:33 dataman 阅读(403) 评论(0) 推荐(0)

【译】2015: 前端工具现状

摘要：原文：http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results译者：@lizheming 本文数据更新至 2015年09月09日。由于当我发出这篇文章后，问卷又增加到了 1000 份（编写这篇文章的时候还是 649 份），阅读全文

posted @ 2016-08-16 14:29 dataman 阅读(240) 评论(0) 推荐(0)

认识Sass和Compass

摘要：第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 1.2.1 通过变量来复用属性值 1.2.2 通过嵌套来快速写出多层级的选择器 1.2.3 使用混阅读全文

posted @ 2016-08-16 14:26 dataman 阅读(342) 评论(0) 推荐(0)

在实战中使用Sass和Compass

摘要：第三章无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 3.2.3 固定的网格布局还是流动的网格布局 3.3 使用Blueprint 3.3.2 使用Compass应用Blueprint 3.3.3 使用Compass应用无需类名的Blueprint 3.4 阅读全文

posted @ 2016-08-16 14:26 dataman 阅读(313) 评论(0) 推荐(0)

Sass和Compass入门

摘要：一.前言 1.Sass是什么？ Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。 Sass引入了一些新的概念阅读全文

posted @ 2016-08-16 14:24 dataman 阅读(1172) 评论(0) 推荐(0)

Grunt VS Gulp

摘要：前期准备 windows7 node ruby sass+compass grunt篇新建一个grunt_demo 目录，用compass 创建一个项目打开CMD，安装grunt-cli到全局环境注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gr 阅读全文

posted @ 2016-08-16 14:18 dataman 阅读(284) 评论(0) 推荐(0)

Gulp开发教程（翻译）

摘要：Building With Gulp 原创翻译，有不当的地方欢迎指出。转载请指明出处。谢谢！对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。 Gulp是一个构建阅读全文

posted @ 2016-08-16 09:54 dataman 阅读(365) 评论(0) 推荐(0)

JavaScript的ajax使用

摘要：使用ajax首先定义个XMLHttpRequest变量，为了判断对IE6以及以下版本的兼容性，需要var xmlHR; if (window.XMLHttpRequest) { xmlHR = new XMLHttpRequest(); }else{ xmlHR = new ActiveXObjec 阅读全文

posted @ 2016-08-15 22:13 dataman 阅读(188) 评论(0) 推荐(0)

移动端交互手势详解及实现

摘要：一丶概述如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感阅读全文

posted @ 2016-08-15 22:10 dataman 阅读(3561) 评论(0) 推荐(0)

JavaScript获取页面宽度高度

摘要：网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth(包括边线的宽)网页可见区域高：document.body.offsetHeight(包括边线的宽) 阅读全文

posted @ 2016-08-15 21:49 dataman 阅读(562) 评论(0) 推荐(0)

JavaScript中的this（你不知道的JavaScript）

摘要：JavaScript中的this，刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要，然而自己并不关心；随着自己对JavaScript一步步深入了解，突然恍然大悟，原来它真的很重要！所以，自己花费了大约2周的时间去查贴、翻阅之前读的书籍，将this的全貌展示如下。先出几道题： va 阅读全文

posted @ 2016-08-15 21:35 dataman 阅读(2916) 评论(0) 推荐(1)

前端Web开发MVC模式-入门示例

摘要：MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目阅读全文

posted @ 2016-08-12 22:02 dataman 阅读(4024) 评论(0) 推荐(0)

RequireJS实例分析

摘要：随着JS越来越庞大，已经不仅仅是以前复制粘贴做特效的时代了，JS越来越偏向于业务逻辑与应用。恰逢Node的流行，JS在web开发中占有越来越重要的地位。由于JS代码庞大，文件数目多，传统的使用<script src=""></script>会带来很多性能的问题，因此requirejs可以为我们提供两阅读全文

posted @ 2016-08-11 19:17 dataman 阅读(233) 评论(0) 推荐(0)

JavaScript 模块化历程

摘要：这是一篇关于js模块化历程的长长的流水账，记录js模块化思想的诞生与变迁，展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑，没经历过的人也应该知道这段历史。无模块时代在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表阅读全文

posted @ 2016-08-11 16:30 dataman 阅读(853) 评论(0) 推荐(0)

LABjs、RequireJS、SeaJS 哪个最好用？为什么？- 玉伯的回答

摘要：LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 阅读全文

posted @ 2016-08-11 16:26 dataman 阅读(236) 评论(0) 推荐(0)

CommonJS,AMD,RequireJS的区别

摘要：RequireJS实现了AMD的API. CommonJS是使用exports对象来定义模块的一种方法，它定义了模块的内容。简单地实现一个CommonJS的定义就像下面这样： // someModule.js exports.doSomething = function() { return "fo 阅读全文

posted @ 2016-08-11 16:17 dataman 阅读(391) 评论(0) 推荐(0)

前端必读：浏览器内部工作原理

摘要：目录一、介绍二、渲染引擎三、解析与DOM树构建四、渲染树构建五、布局六、绘制七、动态变化八、渲染引擎的线程九、CSS2可视模型英文原文：How Browsers Work: Behind the Scenes of Modern Web Browsers 一、介绍浏览器可以被认阅读全文

posted @ 2016-08-11 15:35 dataman 阅读(5869) 评论(0) 推荐(1)

CSS3阴影 box-shadow的使用总结

摘要：text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor 阅读全文

posted @ 2016-08-09 12:21 dataman 阅读(4394) 评论(0) 推荐(1)

跨浏览器开发：CSS

摘要：理解CSS盒子模型如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。CSS 盒子模型负责处理以下事情: ◆一个blcok（区块）级对象占据多大的空间 ◆该对象的边界，留白阅读全文

posted @ 2016-08-08 09:43 dataman 阅读(525) 评论(0) 推荐(0)

08 2016 档案

导航

公告