前端一些概念的理解

最新推荐文章于 2022-01-23 17:22:12 发布

vieber

最新推荐文章于 2022-01-23 17:22:12 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/sufubo/article/details/50831748

版权

前端专栏收录该内容

91 篇文章 0 订阅

订阅专栏

web标准的理解：

web标准不是由一个标准，而是由一系列标准组成的，最基本的结构，表现，行为这三个标准组成的，也就是html，css，js，这些都是最基本的，这些都是由w3c起草，制定并发布的，也有一些是由其他组织制定的。比如：WHAT Working Group，这些都是先由牛人创建，然后初步完善，最后发布，为的是各个浏览器使用同一个标准，方便程序员统一开发。

1.结构标准：html就是网页的结构语言，其中必须引出一些其他的的结构语言：

*xml（The Extensible Markup Language）可扩展标记语言，为的是弥补html语言表达方式的不足，不够语义化，xml可以由自己定义标签名，更好的语义化。但是没有能够替代html，因为大家已经熟悉使用html了，但xml有了他特定的用途，用于存储数据。

*xhtm是The Extensible HyperText Markup Languag是可扩展超文本标记语言的缩写，他其实也是html，不过他比html语法更加的严格，她是为了html的标准更加的规范，按照xml的要求规范html，他要求必须使用MIME type来分发页面，但是没有人使用。

2.表现标准：css就是CSS是Cascading Style Sheets层叠样式表的缩写，使用css布局可以代替原先的表格布局，更好的表现内容的样式，是结构与样式更好的分离，这也是现在提倡的。方便我们的开发。

3.行为标准：他包括dom（文档对象模型），bom（浏览器对象模型），ECMAScript语言标准，其中ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。

浏览器兼容问题

所谓浏览器兼容问题就是在不同的的浏览器下，代码显示效果是一样的，因为在不同的浏览器下对同一代代码可能会出现不同的解析效果，对于前端开发人员，肯定是希望在不同的浏览器下我们的网站呈现的效果是一样的，这就是前端开发人员必须解决的问题。

对于解决浏览器兼容问题，我们好的开发人员，会很容易看到设计图上的缺点，并且会将代码精确到1px之内，这样做出的代码，基本不会遇到浏览器兼容问题，后期维护量少，可是说是比较牢固放心的代码。
下面列举一下常见的兼容性问题
可以分为样式方面的和行为方面的

样式

浏览器默认的margin和padding问题
这个我们可以用 margin：* 和 padding：* 问题。或者我们可是使用reset样式，在某些方面讲也可以是base样式。
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

这个我没有遇到过，假如遇到的话可以查资料，知道这个问题就行。

图片默认有间距，在好几个图片加在一起的时候，浏览器会默认的出现一些间距，我们使用通配符也不管用，解决方案就是使用float，

行为方面

其实也就是js方面的问题，特别是ie浏览器和其他浏览器之间的差异，这个就是比较多的了，我们在写js程序的时候经常会遇到这样的问题，所以我们有时候为了快会使用一些库或者框架，他会帮助我们更好的屏蔽浏览器之间的差异。

举几个例子：
* firefox的window没有event对象，是直接是event对象，可是在ie中直接是只支持window.event对象，其他浏览器两种都支持，所以在我们用到event的时候经常要写这样的代码：event ? event ： window.event,
* 还有在添加事件的时候，在dom2级规范的时候是在element.addEventListener(‘click’,function(){},false)，ie中是element.attachEvent(”onclick”,function(){});在ie中与使用dom0级方法的主要区别在于事件处理程序作用域，在使用dom级方法的情况下，事件处理程序会在其所属元素都作用域下，而attachEvent（）方法事件处理程序会在全局作用域中运行
* 对于定位问题，ie支持event.x或event.y在firefox中是event.pageX和event.pageY,统一的解决问题就是使用event.clientX和event.clientY
* 还有event对象在ie下，有srcElement属性，没有target属性，在firefox中有target，所以在使用中我们用srcObj = event.srcElement ? event.srcElement : event.target;
* 还有一个对于前端经常会用到的XMLHTTPRequest对象的创建在创建xhr的时候我们需要写下面这样的代码：

function createXHR(){
    if(typeof XMLHttpRequest != "undefine"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefine"){
        if(typeof argumnets.callee.activeXString != "string"){
            var versions = ["MSXM2.XMLHttp.6.0","MSXML2 .XMLHttp.3.0","MSXML2.XMLHttp"],i ,len;
            for(i=0,len=versions.length;i<len;i++){
                try{
                    new ActiveXOject(versions[i]);
                    arguments.callee.activeXString[i];
                    break;
                }catch(ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee,activeXString);
    }else {
        throw new Error("No XHR object available");
    }
}

简单的写法：这是w3cshool上的写法

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

还有很多兼容问题，以后可以补充。不会的可以查《javaScript高级程序设计》这本书

css布局

这里我写过一篇博客http://blog.csdn.net/sufubo/article/details/50658604

盒模型

看这篇文章，讲的很详细，w3c上的标准和ie的标准不一样，在开发的时候注意，iecontent包含了border和padding，解决办法就是加doctype 声明，
http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

选择符的优先级

以前看过，现在复习一下，内联样式最高（1000）、id选择器（100）、类选择器（10）、元素选择器（1）。

javaScript基础

http://www.imooc.com/learn/36
http://www.imooc.com/learn/10

JS面向对象实现原理

js的面向对象是基于原型继承实现的，
http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/
http://www.imooc.com/learn/277

闭包机制

闭包是由函数与其相关的引用环境组成。
闭包允许函数访问其引用环境的中的变量
广义上说js函数都是闭包
作用：
* 保存变量现场典型例子(添加事件）
* 封装

var observer = (function(){
            var observerList = [];
            return {
                add:function(obj){
                    observerList.push(obj);
                },
                empty:function(){
                    observerList=[];
                },
                getCount:function(){
                    return observerList.length;
                },
                get:function(){
                    return observerList;
                }
            }
        })();

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
https://segmentfault.com/a/1190000000652891

作用域

变量的作用域就是变量的声明周期和作用范围，
* 静态作用域（定义就确定）
* 动态作用域（运行时）（栈管理）

没有块级作用域，只有函数作用域和c、c++不一样
函数作用域

var scope = 'global';
        function t(){
            //后面的把前面的覆盖了，所以是undefined
            console.log(scope);
            var scope = 'local';
            console.log(scope);
        }
        t()

//没有全局作用域
var name="global";  
if(true){  
    var name="local";  
    console.log(name)  
}  
console.log(name);