- 博客(57)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 填坑记录-ORACLE版本与JAR包的对应关系
背景：做一个小程序，A表中有600万条数据，每天数据都要经过计算得出一个值，存入B表。数据库是ORACLE。1、数据查询采用rowid与rownum混合使用，进行分批查询select t.* from A t,(select rowid rid, rownum rnum from A order by rid) b where t.rowid=b.rid and b.rnum
2018-01-04 11:48:53
3648
转载 SSO认证服务器实现原理
作者： 常明，Java架构师[请尊重原创，盗版必究，转载请指明出处]上篇我们引入了SSO这个话题《15分钟了解SSO是个什么鬼！》。本篇我们一步步深入分析SSO实现机理，并亲自动手实现一个线上可用的SSO认证服务器！首先，我们来分析下单Web应用系统登录登出的实现机理。Web系统登录登出功能，通常属于系统安全管理模块的一部分。如上篇所说，登录，意味着用户与系统之间的一次会话
2017-11-24 19:37:10
1122
原创 Webpack学习笔记与填坑记录
起源最近在做一个项目啦，用webpack打包。学习打包工具是一种可以极大减轻前端开发工作量的存在，目前据我接触过的有webpack、百度的fis、当时在腾讯实习时候同事自己开发的mt，个人认为这种工具的要点有以下几个：路径解析，包括绝对路径、相对路径、模块路径等依赖关系构建，通过依赖关系，从入口开始，将所有资源打包到出口Loader，具备对jxl、less等多种非js语言解析功能辅助功能，通
2017-11-24 16:30:40
348
翻译 Blockly学习之文档阅读笔记
blockly是一个用于Web、Android、iOS的可视化代码编辑器库。 使用了相互关联的积木来表示表达代码中变量、逻辑表达式、循环等。让用户能够了解编程，而不用面对命令行上让人恐惧和枯燥的代码和语法。
2017-04-19 15:58:54
4283
转载 react组件生命周期
[组件生命周期]一、理论 组件本质上是状态机，输入确定，输出一定确定 生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类： 二、初始化阶段： getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,) getInitialState:获取每个实
2016-07-28 12:41:30
340
原创 scroll事件研究
起源想用react做一个无限加载图片的功能，每当页面上滑到一定程度，就继续获取新的图片。具体实现采用了在react根节点添加onScroll属性并编写handleScroll方法。但是编写完成后发现页面滚动并不会触发onScroll事件。 借此，对scroll事件做一些研究，补课……html和js中的onscroll事件定义和用法onscroll 事件在元素滚动条在滚动时触发//HTML 中:<
2016-07-26 14:00:19
4598
原创 ReactRedux学习
ReactRedux是react和redux合用时需要的组件。源码整体结构代码整体结构和redux相似：检测环境，挂载reactredux功能代码整体结构如下，采用_ webpack_require_方法帮助各个模块相互获取，可以看出最终对外导出的是模块0function(react, redux) { return(function(modules) { functi
2016-07-21 16:02:00
873
转载 深度剖析：如何实现一个 Virtual DOM 算法
作者：戴嘉华原文链接（ https://github.com/livoras/blog/issues/13 ）和作者信息。目录：1 前言2 对前端应用状态管理思考3 Virtual DOM 算法4 算法实现4.1 步骤一：用JS对象模拟DOM树4.2 步骤二：比较两棵虚拟DOM树的差异4.3 步骤三：把差异应用到真正的DOM树上5 结语6 References
2016-07-20 16:15:29
265
原创 redux源码分析
本分析既有redux的源码架构流程等，也包括自己对js基础的补课（(┬＿┬)）redux简介Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (
2016-07-19 19:47:31
3131
转载 解读redux工作原理
1. 前言随着WEB应用变得越来越复杂，再加上node前后端分离越来越流行，那么对数据流动的控制就显得越发重要。redux是在flux的基础上产生的，基本思想是保证数据的单向流动，同时便于控制、使用、测试。redux不依赖于任意框架(库)，只要subscribe相应框架(库)的内部方法，就可以使用该应用框架保证数据流动的一致性。那么如何使用redux呢？下面一步步进行解析，
2016-07-18 11:16:33
942
原创 background-position的百分比是怎么计算定位的
首先，背景设置为no-repeat，定位坐标才可以生效采用像素值来定位时，像素值意味着背景图片和元素左上角的差值。采用百分比时，效果却很奇怪，0% 0%时背景图片和元素左上角对其，100% 100%时背景图片和元素右下角对齐。查了资料，才知道原来采用百分比定位背景是遵守以下公式 x：（元素的宽度-图片的宽度）* X% y：（元素的高度-图片的高度）* Y%
2016-05-27 17:43:05
1532
1
转载 react学习
2016/5/20 今日任务：react入门，基本知识加简单实例 学习资料：http://www.ruanyifeng.com/blog/2015/03/reactReactDOM.renderReactDOM.render(html元素,节点);JSXJSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规
2016-05-24 16:00:55
232
原创 JavaScript异步编程-Promise模式
Promise是个对象也是个规范 使用场景：异步操作概念三个状态未完成（pending） 已完成（fulfilled） 失败（rejected）以CommonJS Promise/A 标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异
2016-04-12 16:22:38
757
原创 js-call和apply
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)call语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明： call 方法可以用来代替另一个对象调用一个
2016-04-12 08:59:35
286
原创 JS-this关键字
this指的是，调用函数的那个对象。 指向全局var x = 1; function test(){ var x =2; alert(x+","+this.x); }test();这个时候的结果是：2，1 此时的this指向全局作为某个对象的方法调用，指向这个上级对象function test(){ var x=1;alert(x+","+this.x+","+window.x);
2016-04-11 08:55:16
296
转载 CSS-硬件加速
翻译文章，原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能GPU概念图形处理器（ Graphics Processing Unit ）
2016-04-05 14:39:41
464
原创 CSS表显示值
display属性表格属性 display:table/inline-table 表格行属性 display:table-row-group/table-header-group/table-footer-group/table-row 表格列属性 display:table-column-group/table-column 单元格属性 table-cell 表标题 table-
2016-04-05 10:18:43
298
原创 KMP算法
kmp算法是一个效率非常高的字符串匹配算法 kmp算法完成的任务是：给定两个字符串O和f，长度分别为n和m，判断f是否在O中出现，如果出现则返回出现的位置。常规方法是遍历a的每一个位置，然后从该位置开始和b进行匹配，但是这种方法的复杂度是O(nm)。kmp算法通过一个O(m)的预处理，使匹配的复杂度降为O(n+m)。next数组 位置i 0 1 2 3 4
2016-04-03 13:50:32
238
转载 HTTP缓存原理
通过Internet获取资源既缓慢，成本又高。为此，Http协议里包含了控制缓存的部分，以使Http客户端可以缓存和重用以前获取的资源，从而优化性能，提升体验。虽然Http中关于缓存控制的部分，随着协议演进，有一些变化。但我觉着，作为后端程序员，在开发Web服务时，只需要关注请求头If-None-Match、响应头ETag、响应头Cache-Control就足够了。因为这三个Http头就可以满足你
2016-04-02 21:17:53
269
原创 Ajax
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。JS生成一个新的XMLHttpRequest需要考虑到浏览器兼容性，兼容IE低版本及其他浏览器var XMLHttpReq = null;//XMLHttpRequest生成function createXMLHttpRequest() { if (window.XMLHttpRequest){// code f
2016-03-27 20:14:58
295
转载 JS中的函数
函数类型在JS中函数可以分为两种，具名函数（命名函数）和匿名函数。 区分这两种函数的方法非常简单，可以通过输出 fn.name 来判断，有name的就是具名函数，没有name的就是匿名函数。 获取指定函数的函数名称方法/** * 获取指定函数的函数名称（用于兼容IE） * @param {Function} fun 任意函数 */function getFunction
2016-03-25 16:04:47
471
原创 同步和异步
同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。Ajax同步异步1 异步请求方式： $.ajax({ url : 'your url'
2016-03-25 10:01:10
338
转载 CSS Hack
简介由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
2016-03-25 09:34:58
405
转载 src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当
2016-03-25 09:11:56
308
原创 垂直居中
display:table-cell通过将父元素设置为display:table-cell，并添加vertical-align: middle，它的子元素就可以实现垂直居中。 测试框架<div id="wrap"><div id="subwrap"></div></div>div#wrap { vertical-align: middle; display: table-cell
2016-03-24 17:38:23
271
转载 <![CDATA]>
CDATA 内部的所有东西都会被解析器忽略。关于 CDATA 区段的注释:CDATA 区段不能包含字符串 “]]>”，所以，CDATA 区段的嵌套是不被允许的。同时也需要确保在 “]]>” 字符串中没有空格或折行。为什么要使用CDATA: XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大
2016-03-24 15:55:00
356
原创 客户端检测
浏览器存在不一致的问题，开发人员需要采用迁就各方的最小公分母策略或者利用各种客户端检测方法，来规避这种局限性。检测客户端的手段很多，但是最好先采用更通用的方案，再使用特定于浏览器的技术增强方案。能力检测if(object.propertyInQuestion){}1.使用typeof进行能力检测-funciton 2.能力检测是确定下一步方案的依据，而不是用来判断浏览器怪癖检测知道浏览器存在什么
2016-03-24 11:22:57
239
原创 BOM（浏览器对象模型）
简介BOM是Browser Object Model的缩写，简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C BOM最初是Netscape
2016-03-23 23:35:11
688
转载 Doctype
DOCTYPE声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 详细请看：http://www.w3school.com.cn/tags/tag_doctype.asp怪异模式和严格模式（译注：一般称为标准模式：Standards Mode,下文中的严格模式都
2016-03-23 15:51:32
315
原创 box-sizing和background-clip
box-sizingcontent-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit
2016-03-23 15:16:53
409
转载 Flex布局
简介Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex; /* Safari */ display: flex;}.inlin-box{ display: -webkit-inline-flex; /* Safari */ display: i
2016-03-23 14:56:23
404
原创 事件捕获和事件冒泡
时间冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用（1）事件冒泡允许多个操作被集
2016-03-23 14:03:59
250
原创 html5之viewport
viewportviewport是用来使移动端页面适配不同的手机屏幕的，它的语法如下： <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] ,
2016-03-17 10:37:39
506
原创 CSS3无前缀脚本prefixfree.js/Animatable
写css的时候总是需要考虑到各种浏览器兼容问题，prefixfree.js和Animatable就是两个可以用来帮助减轻这种负担，自动补上需要的前缀。prefixfree.js官网地址http://leaverou.github.io/prefixfree/引用格式animatablehttp://leaverou.github.io/ani
2016-03-16 17:33:28
354
原创 CSS3新特性学习
边框border-radius可继续拆分，它设置所有四个 border-*-radius 属性的简写属性兼容写法：.class_name{ border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值
2016-03-16 15:37:12
322
原创 盒子模型
检测浏览器支不支持盒子模型可以使用 $.support.boxModel盒子模型分为两类：W3C标准盒子模型和IE盒子模型 这两者的关键差别就在于： W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border）IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border）如果在
2016-03-15 15:41:10
225
转载 filter IE滤镜（Internet Explorer）CSS
CSS滤镜虽然只能在IE浏览器中表现出效果，但是仍不失为网页增加特效的好办法。1．CSS静态滤镜样式 （filter） CSS静态滤镜样式的使用方法：{ filter : filtername( parameters1, parameters2, …) }Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、star
2016-03-15 14:19:27
520
转载 深入理解requestAnimationFrame
前言本文主要参考w3c资料，从底层实现原理的角度介绍了requestAnimationFrame、cancelAnimationFrame，给出了相关的示例代码以及我对实现原理的理解和讨论。本文介绍浏览器中动画有两种实现形式：通过申明元素实现（如SVG中的元素）和脚本实现。可以通过setTimeout和setInterval方法来在脚本中实现动画，但是这样效果可能不够流畅，且会占用额外的资源。可参考
2016-03-15 11:15:17
391
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人