前端杂谈

JS

1.对于原型而言,只要构造函数才有prototype属性,而构造函数的实例是没有该属性的,也就是说console.log(a1.prototype)输出的是undefined.

2.每一个函数的prototype属性指向的对象都包含唯一一个不可枚举属性constructor,constructor又指向了它所在的构造函数。每一个构造函数的实例都会继承这个constructor。

3.新定义prototype对象的话,该prototype对象中的constructor就会指向别的构造函数(如下),此时的constructor指向的就是object

                                          A.prototype={

                                               getName:function(){return this.name}

                                           }

修改这个问题的方法就是,再给这个prototype显示的添加上constructor:A

4.js的解析过程分为两个阶段:预编译期和执行期

        预编译的时候,会先将声明式函数进行处理,同时也进行变量的声明,将其赋为undefined。按照代码块(<script>)从上到下分别进行编译,所以下面的代码块可以引用上面代码块的变量。

若代码块出现错误,则会跳过该代码块剩下的代码,进入下一个代码块。

5.因为全局变量会在作用域链的最后得到访问,效率较慢,同时又容易产生污染,所以尽量避免使用全局变量。

6.对于canvas而言,画布中的图形不会超过canvas的范围。

7.闭包:A函数可以访问B函数中的变量。但闭包使用过多,B函数中的变量会一直保存不会释放回收,会严重消耗内存,影响性能。

8.js中没有块级作用域的概念。所以

                    for(var i=0;i<10;i++){

                     alert(i);

                    }

                   alert(i);      //11

之后,i还是存在的。

9.alert(p1 instanceof Person)                    //判断p1是否是Person的实例

   delete p1.name                                    //删除p1的name属性

   alert(‘name‘ in p1)                               //判断name属性是否在p1中

   var arr=Object.keys(p1)                      //得到对象的所有属性,返回一个数组

CSS

1.css hack主要针对于IE6/7,

       选择器hack:   *html .selector{}     //IE6

                          *+html .selector{}   //IE 7

       属性hack:     .header{_width:100px;}     //IE6

                         .header{*+width:100px;}   //IE7

2.clientHeight=topPadding+bottomPadding+height(可看到的区域)-scrollbar.height

  offsetHeight=clientHeight+滚动条+边框

  scrollHeight=topPadding+bottomPadding+内容的高度(内容的实际高度)

3.clientTop:borderTop的厚度 

   scrollTop:被卷起的高度

   offsetTop:相对于第一个使用了position的父元素上边框的距离

兼容性问题

1.textarea文本自适应

   IE:textarea.onpropertychange=function(){

              this.style.posHeight=this.scrollHeight;

         }

  FF: textarea.oninput=function(){

              this.style.height=this.scrollHeight+‘px‘;

        }

2.事件问题

                   function addEventListener(obj,type,handle){

                          if(obj.attachEvent){              //IE

                             obj.attachEvent(‘on‘+type,handle);

                             obj.attachEvent(‘on‘+type,stopEvent);

                          }else{                               //FF

                             obj.addEventListener(type,handle,false);

                             obj.addEventListener(type,stopEvent,false);

                          }

                    }

                   function stopEvent(Event){

                      var e=event||window.event;             //FF||IE

                      var srcEle=e.target||e.srcElement;    //FF||IE

                      var mx=e.pageX||e.x;                     //FF||IE

                      if(e.stopPropagation){                    //FF

                            e.stopPropagation();

                      }else{                                          //IE

                           e.cancelBubble=true;   

                     }

                }

3.父元素:

          IE:ele.parentElement

          IE,FF:ele.parentNode和parent.childNodes

4.在打开的子窗口刷新父窗口  window.opener.location.reload();

       IE:ele.innerText

       FF:ele.textContext

5.创建XMLHTTPRequest

      if(window.XMLHTTPRequest){

         req=new XMLHTTPRequest();

      }else if(window.ActiveXObject){

         req=new ActiveXObject(‘Microsoft.XMLHTTP‘);

      }

8.使用parent.childNodes时  ‘\n‘ 也会算作一个文本节点

9.图片预加载

     function preLoadImg(src.callback){

           var img=new Image();

           img.src=src;

           if(!!window.ActiveXObject){

                img.onreadystatechange=function(){

                     if(this.readyState==‘complete‘){

                            callback();

                      }

                }

           }else{

                    img.onload=function(){

                              callback();

                    }

           }

     }

10.IE6没有position:fixed这一属性值

11.HTML5  localStorage

          localStorage.clear();                 //清除localStorage的数据

          for(var i=0;i<localStorage.length;i++){

               var key=localStorage.key(i);

               var value=localStorage.getItem(key);

          }

   将json文本作为键值存储在localStorage中,存储的信息量将大大提高

12.    HTML5 读取文件

        var file=document.getElementById(‘file‘).files[0];

        var reader=new FileReader();

        reader.readAsDataURL(file);                            //readAsBinaryString,readAsText

        reader.onload=function(){

             result.innerHTML=this.result;

        }

13.图片浮动时,下放会产生空隙,解决方案:对图片的属性设置 vertical-align:top;
时间: 2024-08-24 01:47:10

前端杂谈的相关文章

前端杂谈: Attribute VS Property

前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值对, 例如: <input id="the-input" type="text" value="Name:" /> 上面代码中的 input 节点有三个 attribute: id : the-input type : text valu

#前端杂谈 【Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?via知乎 张秋怡】

先附上链接:Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么? 这是分享自知乎用户张秋怡的一个回答,用通俗形象的语言解释了关于前端的一些基本概念,比较适合像我这种刚入门的小白阅读.

前端资源

Webpack: [webpack-howto] [webpack] [http://www.infoq.com/cn/articles/react-and-webpack] JS相关: [javascript weekly] [javascript标准参考教程] --阮一峰的参考教程,可读性很好,非常不错的 [QuirksMode-DOM] [深入理解JAVASCRIPT系列] [User Timing API (window performence)] 关注ES6(ES2015): [ES6

杂谈之WEB前端工程师身价

了解javascript语言规范么?+1000 知道各浏览器的css差异么?+1000 javascript差异呢?+1000 知道html各标签的含义并很好地运用么?+1000 知道如何跨浏览器解决布局问题么?+1000 了解最新的html5和css3么?+1000 看得懂jquery的源代码么?+1000 了解并运用最新的前端开发框架么?+1000 知道coffeescript.typescript.less这些预编译工具么?+1000 知道javascript引擎的实现原理么??+1000

前端模块化杂谈

Teambition是一家追求卓越技术的公司,我们工程师都很Geek,我们使用了很多新潮的,开源的技术.同时我们也贡献了很多开源的项目.我们希望能够把一些技术经验分享给大家.于是有了这个「创作随笔」.废话休说,「创作随笔」第一弹,来自我们的前端工程师寸志,谈一谈他在前端模块化开发方面的一些感想. 在模块化方面,Node.js就显得游刃有余. 作为用户,我们把代码放到一个个JavaScript文件中,然后Node.js就有一套规则帮我们把这些代码组织起来,Node.js还有包的概 念,于是我们就可

前端跨域杂谈

1.前端跨域之表单(post) 项目需求,需要跨域向另一台服务器传送大量值,从ajax角度跨域是get方式,基于此,方案采用构造<form>表单,通过action发送到对方服务器,对方服务器需要做一些配合. 发送方post.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,

前端-【学习心得】-node使用杂谈

很早之前就关注过node js.也做过许多实验性的东西.总结一下nodejs可以做哪些东西. node本身可以做很优秀的服务端程序,对于web项目,使用express框架,结合mongodb 或者mysql数据库可以构建很棒的应用. 如果是作为整个web应用来说,结合ejs或者jade这样的模板可以大大提高开发的效率.但是相应的路由配置也比较复杂一些.如果再加入过滤项,可能需要在每个请求前面再加一个过滤请求,那样的路由配置必将十分庞大. 个人觉得理想的使用方式就是使用统一的url,定义好post

美利金融前端技术架构杂谈

今天简单说下我厂前端方面一些技术选择. 构建工具 构建工具上我们选用了fis2,可以自动化文件压缩.打版本号,而且自带数据mock功能,可以充分实现前后端并行开发. 在选择js模块化方案时候,我们选择了commonjs规范的模块加载,为了降低团队的使用难度,我非常希望使用browserfiy的模式,即把所有require进来的模块打包成一个文件,这样既很舒服的使用了commonjs规范,又无需主动配置文件合并策略. 但研究后发现想要很舒服的配合fis2+browserfiy使用并不容易,还好fi

前端优化杂谈(一)

如何组织前端开发中的css以及js代码,相信在开发的过程中是一个比较让人头疼的问题. 我们的目标是: 1. 让代码拥有较好的可维护性,提高代码的重复利用率.2. 尽可能少的减少引入的css以及js的文件数量,因为过多的http请求会一定程度影响页面加载的效率.3. 尽量少的引入与页面无关的代码,即减少代码冗余. 但要同时满足以上三个条件不容易,在后续的优化中,我们只能尽可能的平衡这种关系. 说到底就是如何处理代码的可维护性以及代码的性能,但不管怎么样,代码的可维护性应该是我们更应该重视的.现在的