前端开发
文章平均质量分 90
liangklfang
https://github.com/liangklfangl
展开
-
body元素和html元素之间的一些表现
问题1:布局方面的表现有什么不同?解答:body只是占用文档内容的区域,如果内容较少那么可能占据不了整个浏览器的可视区域,但是html元素至少也会占用浏览器的可视区域!该图是当body内容较少的情况下,html元素和body元素在浏览器中的表现。问题2:html,body元素之间是否会发生margin重叠现象? 我们给html元素也设定了一个margin-top值验证b原创 2016-01-07 10:31:36 · 2088 阅读 · 0 评论 -
深入理解margin重叠以及负margin对元素大小的影响
CSS代码: body { background-color:yellow; } .par { margin-top:10px; background-color:red; width:100px; height:100px; }HTML部分: javascript部分:window.onload=functio原创 2015-11-21 09:57:42 · 6211 阅读 · 0 评论 -
获取元素相对于文档的偏移量以及元素相对于父元素的偏移量
问题1:如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.client原创 2015-12-22 09:30:53 · 13681 阅读 · 0 评论 -
javascript中那些计算元素位置的方法和jQuery位置计算方法比较
问题1:offsetTop,offsetLeft,offsetWidth,offsetHeight等方法的用法?对于offsetWidth/offsetHeight/offsetLeft/offsetTop的计算都是以border为界限的,也就说从子元素border开始计算,到父元素border为止!对于offsetTop/offsetLeft都是要牵涉到offsetParent的,该元素是非原创 2016-01-02 09:05:36 · 3518 阅读 · 0 评论 -
无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始
问题1:什么是offsetParent?解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素!问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离?注意:下面的例子都是在标准模式下测试的结果 上面这种情况肯定会发生margin重叠 //offsetParent如果没有被定位的元素的情况下,如果和body发生了margin原创 2016-01-08 10:21:25 · 4891 阅读 · 1 评论 -
seajs配置问题详解以及seajs一些插件的使用
base配置: seajs.config({ base:"http://localhost:8080/sealJs/"}note: 这里是设置基础的文件夹,所有路径都是相对于他来说的alias配置:(alias就是当模块标识很长的时候用的方式)alias: { 'jquery1': 'moduler1/fakeJquery',/*相对地址,相对于base来说的,表示htt原创 2015-12-06 12:07:31 · 5517 阅读 · 0 评论 -
javascript高级程序设计中很多值得仔细推敲的地方
用法1:正则表达式实现格式化输出 var f = '9999999'.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,'); console.log(f);后面的?=表示只有相等的情况下才会保存前面的部分!如果是match,我们看看他打印什么 console.log('9999999'.match((/\d{1,3}(?=(\d{3})+$)/g)));因原创 2015-12-20 12:23:29 · 881 阅读 · 0 评论 -
前端路上的各种问题-javascript—7
1.抽象出prototype的好处:(1)每个类中可以抽象出来一些共有的属性和方法定义在prototype对象中,当使用构造函数创建多个类的实例时,多个实例使用同一个prototype对象,大大减少了内存占用(2)新创建的对象的属性是在创建对象时候用prototype对象带来的,这样可以实现属性和方法的继承2.eval如果不再window中执行,都是局部变量,IE除外。window.eval都原创 2015-09-05 09:53:11 · 1118 阅读 · 1 评论 -
瀑布流特效,回到顶部特效,放大镜特效,选项卡原理分析
特效1:放大镜特效 其中demo是相对布局 /*这是大盒子,用于存放所有元素,同时是相对定位*/ #demo { display: block; width: 400px; height:原创 2016-01-04 14:23:18 · 1602 阅读 · 0 评论 -
jQuery源码分析之$.map函数
/*// 传入一个空函数作为参数,返回一个空数组// 空函数的返回值为undefined,而null或undefined值会被$.map()忽略掉。看最后的判断if(value!=null)var result = $.map( [1, 2, 3], $.noop );document.writeln( result.length ); // 0*/// arg is fo原创 2015-10-06 16:28:30 · 819 阅读 · 0 评论 -
使用接口解决JS文件冲突
//采用封装函数的方法,进而解决可能造成的冲突。接口技术就是对函数进行封装,然后定义一个对外的接口,其它文件只能通过接口来访问被封装的函数(function(){ average_floor={average:average};//接口对象 function average(a,b){return Math.floor((a+b)/2)}//被封装的函数 })原创 2015-09-18 15:09:27 · 997 阅读 · 0 评论 -
DataTransfer对象的一些总结
11Hello /* document.getElementById("droptarget").ondragover=function(event){ event.preventDefault();}; document.getElementById("srcE").ondragstart=function(event){ event.dataTrans原创 2015-09-21 16:23:37 · 20730 阅读 · 0 评论 -
JSON.stringify几种可能的用法总结
$(document).ready(function(){//如果JS对象含有toJSON方法,那么stringify返回该方法的返回值 //var obj={name:"xxx",sex:'female',toJSON:function(){return "xxx";}}; // alert(JSON.stringify(obj));//如果stringify提供了第原创 2015-09-10 12:24:06 · 12815 阅读 · 1 评论 -
jQuery动画模块源码分析之queue,dequeue,clearQueue方法源码分析
问题1:当我们回调队列中的函数的时候会传给他什么参数,他的上下文是什么/*通过_queueHooks我们知道,他其中封装了Callbacks对象,他可以提前使得我们清除元素上面的队列集合,同时once和memory告诉我们调用fire以后,就会使得Callbacks中封装的集合变成[],所以多次调用fire是没有意义的*/_queueHooks: function( elem, type )原创 2015-12-08 10:58:02 · 984 阅读 · 0 评论 -
Webpack系列专栏文章发布上线了
关于Webpack的专栏文章已经整理成册了,欢迎在gitchat预定。本课程包含从 Webpack 的基本概念和使用一直深入到核心的内容,如 Loader 和 Plugin 的书写,以及 Compiler 和 Compilation 对象分析。同时也涵盖了 HMR 的实现原理及 Tree-shaking,按需加载等高级知识点。通过本课程,将深入的了解和使用 Webpack,并能够按照项目需求快速开发原创 2017-11-13 09:20:35 · 1276 阅读 · 0 评论 -
那些年我准备的前端面试题集合
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义了DOCTYPE浏览器则会进入标准模式(Standards Mode),否则浏览器会进入怪异模式或混杂模式(Quirks mode)。原创 2015-12-30 18:06:24 · 12353 阅读 · 1 评论 -
那些年我准备的前端面试题
commonJS相关:(1)在commonJS规范中,require,exports,module,__filename,__dirname都是通过动态编译后添加到模块的头部的,这样就不存在全局变量污染的问题 但是他们传入的require,exports,module都是一个空对象。而且必须弄清楚一点:exports是一个对象,如果重新赋值,那么不会反映到外面,但是module.expo原创 2016-08-07 15:23:31 · 13521 阅读 · 0 评论 -
JS异步处理方案总结
代码最新内容请在github阅读,也欢迎您star和issue1.Generator与其他异步处理方案以前,异步编程的方法,大概有下面四种。1.1 回调函数JavaScript 语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。它的英语名字 callback,直译过来就是”重新调用”。 读取文件进行处理,是这样原创 2017-07-03 19:55:24 · 2840 阅读 · 0 评论 -
教你如何优雅的使用React的context属性
项目代码和最新内容,请在我的github阅读,也欢迎您star, issue对于React的context的基本用法可以参考我的: react的context更新而组件不更新的解决方案。首先:我们来介绍一个高阶函数,该函数对我们的原始组件进行装饰,并提供了访问应用context中的相应声明: Inject.contextTypes = { data: React.PropTypes.obje原创 2017-07-01 17:15:15 · 10093 阅读 · 1 评论 -
JS中各种构造模式对比
JS中各种构造模式对比原创 2015-09-05 14:11:14 · 778 阅读 · 0 评论 -
JS中子类中如何调用父类的同名方法(继承时候,父类的同名方法被覆盖了)
继承时候,同名方法发生覆盖了,通过在临时私有变量先保存超类的同名方法,然后在子类同名方法中调用即可!function A(){ //通过call传递进来的this就是var b=new B()创建的b对象,所以this.sex打印了female this.m=function(){alert("A"+this.sex)}}function B(){//用原创 2015-09-05 18:28:52 · 11383 阅读 · 0 评论 -
JS中各种继承方式对比
JS中各种继承方式对比原创 2015-09-05 15:29:50 · 739 阅读 · 1 评论 -
JS中的克隆与数据属性和访问器属性
一、数据属性和访问器属性:(1)在ECMAScript5中用Object.keys可以获取到对象的所有的可枚举属性的字符串数组,如果用于原型,那么就获取原型上面的所有的属性,如果用于实例,那么就返回实例属性。如果你想得到所有的实例属性,不管他是否可以枚举就可以用Object.getOwnPropertyNames方法,这个方法连constructor也会迭代出来!(2)Object.key原创 2015-10-21 12:15:09 · 1579 阅读 · 0 评论 -
[高级程序设计]从高级程序设计中搬来的一些值得注意的地方
1、默认情况下只有表单字段可以获得焦点,但是如果对于其它的元素首先把tabindex设置为-1,然后调用focus方法也能获取焦点,只有opera不支持这个技术 var elem=document.getElementById("elem"); elem.tabIndex=-1; elem.focus();2、HTML5的autofocus属性window原创 2015-12-29 18:51:30 · 943 阅读 · 0 评论 -
前端路上的各种问题-javascript—6
1.function语句,new Function()或者函数直接量的比较: 1)作用域方面,new Function具有全局作用域 2)解析效率方面,new Function每次都需要重新编译对象,而function语句会提前编译,不会重复编译。这是new Fucntion具有全局作用域根本原因 3)Function构造函数和函数直接量定义的函数不需要额外的变量原创 2015-09-04 09:09:48 · 602 阅读 · 0 评论 -
jQuery源码分析之jQuery中常用正则表达式分析
jQuery源码中正则表达式分析原创 2015-10-11 15:50:13 · 2320 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.fix方法五问
源码如下: var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/, rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, rtypenam原创 2015-10-17 16:28:46 · 1309 阅读 · 1 评论 -
jQuery源码分析之jQuery.event.special八问
参见博客:点击打开链接jQuery.event.special源码如下:special: { load: { // Prevent triggered image.load events from bubbling to window.load //防止img元素的load事件冒泡到window的onload事件上面 noBubble: true }, foc原创 2015-10-17 16:45:28 · 2657 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.trigger及jQuery.Event十问
首先我们给出一个例子:HTML部分: JS部分:$("#n1").on("click",function(){alert("n1 ")});$("#n2").on("click",function(){alert("n2 ")});$("#n3")[0].onclick=function(){ alert("click1 invoked!"); retur原创 2015-10-15 15:59:29 · 3421 阅读 · 1 评论 -
jQuery源码分析之jQuery.even.handlers八问
首先给出测试用例:HTML部分: 给出JS部分代码:var handlers1=function( event, handlers ) { var sel, handleObj, matches, i, handlerQueue = [], //获取这个数组的delegateCount表示delegate了几个对象 delegateC原创 2015-10-14 15:20:43 · 932 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.add和jQuery.event.dispatch十一问
dispatch方法源码:var rnotwhite = (/\S+/g);var rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;var strundefined=undefined;var slice=[].slice;//当点击对象时候就会调用下面的eventHandle对象,传入的参数是Event对象!jQuery.event.dispatc原创 2015-10-14 17:00:54 · 3325 阅读 · 0 评论 -
jQuery源码分析之remove和detach方法的区别
请提前阅读:点击打开链接detach源码分析:detach: function( selector ) { return this.remove( selector, true ); }可见detach内部调用的是remove函数,同时把selector传入remove方法,但是第二个参数是true,所以remove方法中的keepData是true表示不会调用里面的cleanDa原创 2015-10-12 10:56:49 · 1113 阅读 · 0 评论 -
jQuery源码分析之jQuery.cleanData和jQuery.removeData以及jQuery._removeData十五问
internalRemoveData函数详解function internalRemoveData( elem, name, pvt ) {if ( !jQuery.acceptData( elem ) ) {return;}var thisCache, i,isNode = elem.nodeType,// See jQuery.data for more原创 2015-09-28 19:12:37 · 3209 阅读 · 0 评论 -
jQuery源码分析之empty和remove方法四问
测试代码1:把id为first下面所有的子元素移除 $(document).ready(function(){ var ps=document.getElementById("first"); while(ps.firstChild) { ps.removeChild(ps.原创 2015-10-12 09:59:24 · 1865 阅读 · 1 评论 -
jQuery源码分析之深入理解jQuery.data,jQuery._data以及data实例函数十八问
jQuery源码分析之内置函数internalData原创 2015-09-28 10:38:02 · 2979 阅读 · 0 评论 -
用JQuery中的方法实现跨域请求
用JQuery中的方法实现跨域请求原创 2015-09-06 18:27:51 · 2070 阅读 · 0 评论 -
jquery源码中ajax方法理解之十五问
问题1:回调函数的上下文是什么?s = jQuery.ajaxSetup( {}, options ), // Callbacks context //回调函数上下文,默认是自己指定的context,如果没有自己指定context那么就是总的options对象! //在ajaxSetup中的逻辑分为: //第一步url,context直接封装到target上面(因为URL和con原创 2015-12-10 10:03:30 · 11217 阅读 · 1 评论 -
jQuery源码分析之tearDown和setup
问题1:如果我绑定focusin,那么底层是如何处理的?在jQuery.event.add方法中 special = jQuery.event.special[ type ] || {};//获取初始事件的对象 // If selector defined, determine special event api type, otherwise given type type = (原创 2015-12-14 20:03:09 · 1443 阅读 · 0 评论 -
JS中exec,match,replace,test方法对比
正则表达式中各种方法的比较: 方法名称RegExp的exec方法String对象的match方法RegExp对象的test方法String的replace方法RegExp的exec方法(1)第0个元素是与表达式匹配的文本(2)第1个元素是与子表达式匹配的文本(3)很显然返回值是数组(4)返回数组有length,inde原创 2015-10-19 09:33:38 · 5537 阅读 · 1 评论 -
jQuery源码分析之实例find和filter方法的区别七问
首先我们要介绍一个winnow函数,它用于filter函数 function winnow( elements, qualifier, not ) {//如果qualifier是函数,那么给每一个对象调用if ( jQuery.isFunction( qualifier ) ) {return jQuery.grep( elements, functi原创 2015-10-07 09:52:11 · 1779 阅读 · 0 评论