[前端基础]前端开发基础整理(基础篇)

1.0 BFC

        BFC(Block Format Context)块级格式化上下文，在CSS中不同的display属性和元素类型会呈现不同的Formatting Content（一个决定如何渲染文档的容器），以下是在CSS2.1中出现的Format Context.

• Block-level box：display属性为block、list-item、table的元素，会生成Block-level box。并且参与Block Formatting Content
• Inline-level box：display属性为inline、inline-block、inline-table的元素，会生成Inline-level box。并且会参数Inline Formatting Content

        所谓FormatContext就是一块渲染区域，其中决定了其子元素之间如何定位以及和相邻元素之间的定位关系，常听说的格式化上下文有BFC,IFC，对于网上所说的GFC和FFC目前没有去了解，不做分析。

        1.0.1 BFC的规则

• BFC内部的Box会在垂直方向，一个接一个的设置；（Box级元素一行显示）
• Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（Margin重叠，取最大的）
• 每个元素的margin box的左边会与 包含块 border box的左边相接触（对>于从左到右的格式化，否则相反），即使存在浮动也会如此。（）
• BFC不会和浮动元素重叠。
• BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算，BFC可以包裹浮动。

        1.0.2 BFC触发的条件

• 根元素或其它包含它的元素
• float属性不为none
• position属性为absolute或fixed
• display属性为inline-block、table-cell、table-caption、flex、inline-flex
• overflow属性不为visible

上述内容摘录自 前端精选文摘：BFC 神奇背后的原理

2.0 清除浮动

        2.0.1 一些常见的清除浮动的手段：

• 给浮动元素的父级加上指定高度(治标不治本)
• 浮动元素父级页浮动(要是有多个父级呢)
• 浮动元素父级设置为inline-block (IE6 7不支持)
• 在浮动元素下加<div class="clear"></div>
  .clear{ height:0px;font-size:0;clear:both;overflow:hidden;}(鸡肋)
• 在浮动元素下加<br class="clear"/>clear{ height:0px;font-size:0;clear:both;}(不符合W3C标准)

        2.0.2 利用BFC清除浮动
        通过BFC的了解，我们可以通过触发父级的BFC中的特性，就可以包含浮动元素。通过以下方法可以设置父级为BFC格式：

• float为 left 或 right
• overflow为 hilien|auto|scroll
• display为 table-cell|table-caption|inline-block|flex|inline-flex
• position为 absolute|fixed

        上面设置父级为BFC格式的弊端：我们不可能为所有的父容器都添加float属性（虽然现实中确实有网页是这么做的）；overflow属性会影响滚动条和绝对定位元素；diaplay很多属性低版本IE并不支持；position影响元素的定位，会出现我们不想要的效果。

        2.0.3 hasLayout的特性
        在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当元素的hasLayout属性值为flase的时候，元素的尺寸和位置由其最近的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责自身及其子元素的尺寸的定位，同时当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。

详情请看百度百科：https://baike.baidu.com/item/hasLayout/2682564

        2.0.4 清除浮动目前最佳方法

.clear{
    *zoom:1;//触发元素的haslayout
}
.clear:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.clear {
  *zoom: 1;//触发元素的haslayout
}
.clear:after {
  content: "";
  display: table;
  clear: both;
}

3.0 层级定位

• 在没有定位属性的兄弟元素中，在HTML结构中排列在后面的元素层级高于前面的同级兄弟元素
• 兄弟元素中有定位属性的元素层级高于没有定位属性(static 默认为没有定位)的其他兄弟元素。
• 兄弟元素中有position:relative和position:absolute(暂时不考虑fixed属性值，他不在一个频道，它相对视窗定位)定位属性的元素，结构下面的元素层级高于结构上面的元素，但是有z-index设置时，z-index值大者居上。
• 非兄弟元素(假设有两个)，任意一个或其祖元素拥有动态定位时，同时各自向上寻找这些元素的动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。无论这两个非兄弟元素的zindex值有多大，只有他们的最高阶定位祖元素zindex大时层级才高，同时综合上述三者与最后一项的运用，相信项目中遇到与之类似的问题都可以迎刃而解啦。

4.0 CSS Hack

        由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。 常用的CSS hack 有三种：条件Hack、属性级Hack、选择符级Hack。

        4.0.1 条件Hack
        01-条件Hack 语法: < !--[if <keywords>? IE <version>?]> HTML代码块 <![endif]-->
        <keywords> 取值：if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

• 是否：指定是否IE或IE某个版本。关键字：空
• 大于：选择大于指定版本的IE版本。关键字：gt（greater than）
• 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
• 小于：选择小于指定版本的IE版本。关键字：lt（less than）
• 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
• 非指定版本：选择除指定版本外的所有IE版本。关键字：!

        4.0.2 css属性hack

css选择器hack.png
        4.0.3 标签选择符hack
标签选择器hack.png

01-区别IE于非IE浏览器
    background:blue;/*非IE背景蓝色 因为所有浏览器都能解释*/
    background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，被覆盖 */
02-区别IE6,IE7,IE8,FF
    background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
    background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
    *background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
    _background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
03-区别IE6、IE7、Firefox(方法一)
    background:blue;/*标准浏览器背景变蓝色*/
    *background:black;/*IE7背景变黑色*/
    _background:orange;/*IE6背景变橘色*/
04-区别IE6、IE7、Firefox(方法二)
    background:blue;/*Firefox背景变蓝色*/
    *background:green!important;/*IE7背景变绿色*/
    *background:orange;/*IE6背景变橘色*/
05-区别IE7、Firefox
    background:blue;/*Firefox背景变蓝色*/
    *background:green!important;/*IE7背景变绿色*/

5.0 事件委托原理

事件委托原理:利用事件冒泡的原理，把事件加到父级上，触发执行效果
事件委托的好处:
        1.1 提高网站性能
        1.2 对后添加的元素仍然拥有之前的事件

//HTML代码
<input type="button" value="添加" id="input1" />
<ul id="#ul1">
   <li>100</li>
   <li>200</li>
   <li>300</li>
   <li>400</li>
</ul>
//JS代码
window .onload = function(){
   var oUl  = document.getElementById('ul1');
   var oLi  = oUl.getElementById('li');
   var oBtn = document.getElementById('input1');
   var iNow = oLi.length;
         oUl.onmouseover = function(ev){
              var ev  = ev||window.event
              var target  = ev.target || ev.srcElement;
              if(target.nodeName.toLowerCase()=="li"){
               target.style.background = 'red';
               } 
         };
           oUl.onmouseout = function(ev){
              var ev  = ev||window.event
              var target  = ev.target || ev.srcElement;
              if(target.nodeName.toLowerCase()=="li"){
               target.style.background = '';
               } 
         };
         oBtn.onclick = function(){
               iNow++;
              var aLi  = createElement("li");
              aLi.innerHTML = 100*iNow;
              oUl.appendChild(aLi);
               } 
         };
} 

6.0 JSPON用途及原理

       JSONP用途： 在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略使得JavaScript只能访问与包含它的文档在同一域下的内容，而JSONP就是为了解决这种限制的而来。

       原理：记得我们在使用JQuery的时候可能会这样引入<script src="https://code.jquery.com/jquery-1.11.0.js" ></script>，那么为什么我们就可以从自己的网站调用Jquery的内容呢？ 这就是就是利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。所以我们可以通过script标签在本地引用外地资源，并在本地通过自定义的回调函数处理第三方传递过来的数据(一般为JSON格式)

       JSONP的优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用自定义回调函数的方式回传结果。

       JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况。

Jsonp获取服务器端数据

jsonp前端代码.png
服务器端代码演示.png

JSONP百度搜索的实现

window.onload = function(){
var searchText = document.getElementById("search_text");
var oSearchLists = document.getElementById("baidu_search_lists");
  if(this.value!= ""){
    searchText.onkeyup = function(){
    var oScript = document.createElement("script");
    oScript.src= "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=baiduSearch";
    document.getElementsByTagName("head")[0].appendChild(oScript);
    this.onblur = function(){
        oSearchLists.style.display = "none";
    }
    this.onfocus = function(){
        oSearchLists.style.display = "block";
    }
    }
  }else{
    oSearchLists.style.display = "none";
  }
}

function baiduSearch(data){
  var oSearchLists = document.getElementById("baidu_search_lists");
  var html = "";
  if(data.s.length){
    oSearchLists.style.display = "block";
    for(var i=0;i<data.s.length;i++){
        html+='<li><a target="_blank" href="https://www.baidu.com/s?wd= '+data.s[i]+'" >'+data.s[i]+'</a></li>'

    }
    oSearchLists.innerHTML = html;
  }else{
    oSearchLists.style.display = "none";
  }
}

jsonp百度搜索效果图.png

7.0 渐进增强和优雅降级

• 逐渐增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

8.0 Canvas图片加载实现效果

Canvas图片加载在移动网页中的应用.gif

       上图是我在大学期间做的移动端网页，用到了当时比较兴起的require.js和scss,同时结合了canvas图片加载的技术，可以看到在大图没有加载出来的手，首先用一张旋转的表示进度的旋转gif图代替，等待图片完全加载出来之后最终显示完整图片。图片的显示效果是在用GifCam软件录制下来的。

functionloadCanvas(){
    var canvasImgLen = $("#goodsLists").find("canvas").length;
      if(canvasImgLen>0){
        $("#goodsLists").find("canvas").each(function(){
            var imgSrc = $(this).data("src");
            var imgObj = new Image();
            imgObj.canvasImg = $(this)[0];
            var canvasScope = imgObj.canvasImg.getContext("2d");
            if(canvasScope){
                imgObj.onload = function(){
                    imgObj.canvasImg.width = this.width;
                    imgObj.canvasImg.height = this.height;
                    canvasScope.drawImage(this, 0, 0);
                    $(imgObj.canvasImg).css("background-image","none");
                 }
                imgObj.src = imgSrc;
            }
        })
    }
}

<section id="goodsLists">
     <li class="span-12 span-6">
       <a href="" class="">
         <figure class="figure_content clearfix">
            <div class="canvasImg"><canvas data-src="images/goods2.png"></canvas></div>
            <figcaption>
                <h3>[天猫市]巷仔香脆海虾，即开即食用,休闲零食</h3>
                <p>月销量123万笔，天猫超市</p>
                <p class="money"><strong ><em class="price">35.6</em>元/200g</strong>  </p>
            </figcaption>
          </figure>
       </a>
    </li>
    ...
</section>