前端基础知识-示例代码

分手后的思念是犯贱 2022-02-05 06:53 197阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

2.0链接：[前端基础知识-示例代码2.0][-_2.0]

### 1、ajax ###

### 2、jsonp ###

a、原生实现方式

b、jquery ajax：

$.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "onBack",    // 自定义回调函数名
        data: {}
    });

c、vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'onBack'
    }).then((res) => {
        console.log(res); 
    })

d、npm包jsonp

npm install jsonp --save

import originJSONP from 'jsonp'   //引入jsonp
    
    //进行封装并export
    export default function jsonp(url,data,option) {
        url += (url.indexOf('?')<0? '?' : '&')+param(data)
    
        return new Promise((resolve,reject)=>{
            originJSONP(url,option,(err,data)=>{
                if(!err){
                    resolve(data)
                }else{
                    reject(err)
                }
            })
        })
    }
    
    //对data进行处理，并encodeURIComponent()进行转码。
    function param(data) {
        let url = ''
        for(var k in data) {
              let value = data[k] !== undefined? data[k] : ''
              url += '&' + k + '=' + encodeURIComponent(value)
        }
        return url ? url.substring(1) : ''
    }

### 3、实现一个简单的Promise ###

promise对象的调用

let p =new Promise(function(resolve, reject){
        if(/* 异步操作成功 */){
            resolve(data)
        }else{
            reject(err)
        }
    })

p.then((res)=>{
      console.log(res)
    },(err)=>{
      console.log(err)
    })

实现一个简单的promise

Promise中的resolve和reject用于改变Promise的状态和传参，then中的参数必须是作为回调执行的函数。因此，当Promise改变状态之后会调用回调函数，根据状态的不同选择需要执行的回调函数。

示例2：

### 4、闭包 ###

或者

for (var i = 0; i < 3; i++) {
        setTimeout((function(i) {
            return function() {
                console.log(i);
            };
        })(i), 0);
        console.log(i);
    }

### 5、事件处理 ###

> 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

*  减少事件注册,节省内存占用,提高性能
 *  可以实现当新增子对象时无需再次对其绑定

<div class="wrap" id="wrap">
        <div class="btn" data-type="btn" data-feat="add">添加</div>
        <div class="btn" data-type="btn" data-feat="delete">绘画</div>
        <div class="btn" data-type="btn" data-feat="delete">散步</div>
        <div class="btn" data-type="btn" data-feat="delete">静坐</div>
      </div>
      <script type="text/javascript">
        var n = 0
        document.getElementById('wrap').addEventListener('click', function(e) {
          var target = e.target;
          var type = target.dataset.type;
          var feat = target.dataset.feat;
    
          if (type == 'btn') {
            switch (feat) {
              case 'add':
                this.innerHTML += `<div class="btn" data-type="btn" data-feat="delete">静坐${n}</div>`
                n++
                return;
              case 'delete':
                target.parentNode.removeChild(target);
                return;
            }
          }
    
        }, false);
    </script>

### 6、封装DOM查询（面向对象） ###

function Elem(id){
      this.elem = document.getElementById(id)
    }
    
     Elem.prototype.html = function(val){
       var elem = this.elem
       if(val) {
         elem.innerHTML = val
         return this  //链式
       } else {
         return elem.innerHTML
       }
     }
    
     Elem.prototype.on = function(type,fn){
       var elem = this.elem
       elem.addEventListener(type, fn)
       return this  //链式
     }
    
    //调用
    var div = new Elem('id')
    div.html('<p>hello</p>').on('click',function(){
      console.log('suceess')
    })

### 7、DOM劫持 ###

function nodeToFragment (node) {
          var flag = document.createDocumentFragment();
          var child;
          // 首先，所有表达式必然会返回一个值，赋值表达式亦不例外
          // 理解了上面这一点，就能理解 while (child = node.firstChild) 这种用法
          // 其次，appendChild 调用以后 child 会从原来 DOM 中移除
          // 所以，第二次循环时，node.firstChild 已经不再是之前的第一个子元素了
          while (child = node.firstChild) {
            flag.appendChild(child); // 将子节点劫持到文档片段中
          }
          return flag
        }

### 8、添加className ###

// 为元素添加类名
    export function addClass(el, className) {
      // 先判断一下元素是否含有需要添加的类名，有则直接 return
      if(hasClass(el, className)) {
        return
      }
      // 把该元素含有的类名以空格分割
      let newClass = el.className.split(' ')
      // 把需要的类名 push 进来
      newClass.push(className)
      // 最后以空格拼接
      el.className = newClass.join(' ')
    }
    
    // 判断是否有要查看的 className，有则返回true，否则返回 false
    export function hasClass(el, className) {
      let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
    
      return reg.test(el.className)
    }

### 9、自动添加浏览器前缀 ###

let elementStyle = document.createElement('div').style
    // 主流浏览器内核
    let vendor = (() => {
      let transfromNames = {
        webkit: 'webkitTransform',
        Moz: 'MozTransform',
        ms: 'msTransform',
        O: 'OTransform',
        standard: 'transform'
      }
      for(let key in transfromNames) {
        if(elementStyle[transfromNames[key]] !== undefined) {
        
          return key
        }
      }
    
      return false
    })()
    
    // 添加样式的浏览器前缀
    export function prefixStyle(style) {
      if(vendor === false) {
        return false
      }
    
      if(vendor === 'standard') {
        return style
      }
    
      return vendor + style.charAt(0).toUpperCase() + style.substr(1)
    }

### 10、图片懒加载 ###

> 定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lazyload 1</title>
        <style>
            img {
            display: block;
            margin-bottom: 50px;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <img src="images/loading.gif" data-src="images/1.png">
        <img src="images/loading.gif" data-src="images/2.png">
        <img src="images/loading.gif" data-src="images/3.png">
        <img src="images/loading.gif" data-src="images/4.png">
        <img src="images/loading.gif" data-src="images/5.png">
        <img src="images/loading.gif" data-src="images/6.png">
        <img src="images/loading.gif" data-src="images/7.png">
        <img src="images/loading.gif" data-src="images/8.png">
        <img src="images/loading.gif" data-src="images/9.png">
        <img src="images/loading.gif" data-src="images/10.png">
        <img src="images/loading.gif" data-src="images/11.png">
        <img src="images/loading.gif" data-src="images/12.png">
      
        //对比一下上下两种代码，一个变量是全局变量，一个是函数的局部作用域，
        <script>
            function lazyload() {
                var images = document.getElementsByTagName('img');
                var len    = images.length;
                var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
                return function() {
                    var seeHeight = document.documentElement.clientHeight;
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    for(var i = n; i < len; i++) {
                        if(images[i].offsetTop < seeHeight + scrollTop) {
                            if(images[i].getAttribute('src') === 'images/loading.gif') {
                              images[i].src = images[i].getAttribute('data-src');
                            }
                            n = n + 1;
                         }
                     }
                 }
            }
            
            var loadImages = lazyload();
            
            loadImages();          //初始化首页的页面图片
            
            window.addEventListener('scroll', loadImages, false);
    </script>
    </body>
    </html>

jQuery

### 11、img加载图片失败时，使用默认图片 ###

*  img标签自带onError属性，当图片加载失败时，触发error事件：

*  jQuery的error事件

$('img').error(function(){
        $(this).attr('src',"http://ww.jpg");
    });

*  jquery的one绑定  
    使用`onerror`或者jQuery的`error`事件时，如果默认图片也发生加载失败，则会形成死循环，最好的办法是使用one绑定事件，只执行一次

$("img").one("error", function(e){
         $(this).attr("src", "http://ww.jpg");
    });

### 12、图片按比例响应式缩放、裁剪 ###

<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>
    
    .zoomImage{
        width:100%;
        height:0;
        padding-bottom: 100%;
        overflow:hidden;
        //padding为百分比的时候根据他父层的宽度来进行计算
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        //把背景图像扩展至完全覆盖背景区域
        background-size:cover;
    }

总结：你所需要的比例，就是width与padding-bottom的比例 。用的时候，直接把.zoomImage当成img标签来用就可以了。

扩展  
很多轮播的插件本来是响应式的， 但可能有两个问题：  
1.这个轮播图你必须要给他一个高度，但高度不是固定死的，是需要按比例的...  
2.轮播图里的图片不是需要的比例...  
所以我们可以用刚刚上面的padding方法  
拿swiper轮播图插件举例

原代码：

![Image 1][]

image.png

优化后：

![Image 1][]

image.png

详细可以看：[如何让图片按比例响应式缩放、并自动裁剪的css技巧][css]

### 13、选项卡切换 ###

//过程式的编程思想
    window.onload=function(){
        //获取元素
        var oParent=document.getElementById('div1');
        var btns=oParent.getElementsByTagName('button');
        var divs=oParent.getElementsByTagName('div');
        //通过循环给每个btn添加点击事件
        for (var i = 0; i < btns.length; i++) {
            btns[i].index=i;//存储当前btn的下标
            btns[i].onclick=function(){
                for (var i = 0; i < btns.length; i++) {
                    btns[i].className='';
                    divs[i].style.display='none';
                }
                this.className='active';
                divs[this.index].style.display='block';//让对应当前btn的div显示
            }
        }
    }

//面向对象
    window.onload = function(){
        var t1=new Tab();
        t1.init();
    };
        
     function Tab() {
         this.btns=oParent.getElementsByTagName('button');
        this.divs=oParent.getElementsByTagName('div');
     }
     
    Tab.prototype.init=function(){
        var This=this;
        for (var i = 0; i < this.btns.length; i++) {
            this.btns[i].index=i;
            this.btns[i].onclick=function(){
                This.change(this);
            }
        }
    }
    Tab.prototype.change=function(btn) {
        for (var i = 0; i < this.btns.length; i++) {
            this.btns[i].className='';
            this.divs[i].style.display='none';
        }
        btn.className='active';
        this.divs[btn.index].style.display='block';
    };

### 14、元素拖拽 ###

#div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    <body>
        <div id='div1'></div>
    </body>

//过程式的编程思想
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        
        var disX=0;
        var disY=0;
    
        oDiv.onmousedown=function(ev){
            var ev=ev || window.event;
            disX=ev.clientX-oDiv.offsetLeft;
            disY=ev.clientY-oDiv.offsetTop;
    
            document.onmousemove=function(ev){
                var ev=ev || window.event;
                oDiv.style.left=ev.clientX-disX+'px';
                oDiv.style.top=ev.clientY-disY+'px';
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
            return false;
        }
    }

//面向对象
    window.onload = function() {
      var d1 = new Drag('div1');
      d1.init();
    };
    
    function Drag(id) {
      this.oDiv = document.getElementById(id);
      this.disX = 0;
      this.disY = 0;
    }
    Drag.prototype.init = function() {
      var This = this;
      this.oDiv.onmousedown = function(ev) {
        var ev = ev || window.event;
        This.fnDown(ev);
        return false;
      };
    };
    
    Drag.prototype.fnDown = function(ev) {
      var This = this;
      this.disX = ev.clientX - this.oDiv.offsetLeft;
      this.disY = ev.clientY - this.oDiv.offsetTop;
    
      document.onmousemove = function(ev) {
        var ev = ev || window.event;
        This.fnMove(ev);
      };
      document.onmouseup = function() {
        This.fnUp();
      }
    };
    
    
    Drag.prototype.fnMove = function(ev) {
    
      this.oDiv.style.left = ev.clientX - this.disX + 'px';
      this.oDiv.style.top = ev.clientY - this.disY + 'px';
    };
    
    Drag.prototype.fnUp = function() {
      document.onmousemove = null;
      document.onmouseup = null;
    };

### 15、函数节流（throttle） ###

//fn 要执行的函数
    //delay 延迟
    //atleast  在time时间内必须执行一次
    function throttle(fn, delay, atleast) {
        var timeout = null,
             startTime = new Date();
        return function() {
            var curTime = new Date();
            clearTimeout(timeout);
             // 如果达到了规定的触发时间间隔，触发 handler
            if(curTime - startTime >= atleast) {
                fn();
                startTime = curTime;
            }else {
             // 没达到触发间隔，重新设定定时器
                timeout = setTimeout(fn, delay);
            }
        }
    }
        
    // 实际想绑定在 scroll 事件上的 handler
    function lazyload(event) {
      console.log('触发了')
    }

// 采用了节流函数
    window.addEventListener('scroll',throttle(lazyload,500,1000));

### 17、分时函数 ###

如果一次获得了很多数据(比如有10W数据)，然后在前端渲染的时候会卡到爆,所以在处理这么多数据的时候，我们可以选择分批进行。

### 18、惰性载入函数 ###

假如你要写一个函数，里面有一些判断语句

function foo(){
        if(a != b){
            console.log('aaa')
        }else{
            console.log('bbb')
        }
    }

如果你的a和b是不变的，那么这个函数不论执行多少次，结果都是不变的，但是每次执行还要进行if判断，这就造成了不必要的浪费。  
惰性载入表示函数执行的分支只会发生一次，这里有两种解决方式。

// 常见的例子
    if (window.addEventListener) {
        ele.addEventListener(type, fn, false);
    } else  if (window.attachEvent) {
        ele.attachEvent('on' + type, fn);
    }

在函数被调用时再处理函数

function foo(){
        if(a != b){
            foo = function(){
                console.log('aaa')
            }
        }else{
            foo = function(){
                console.log('bbb')
            }
        }
        return foo();
    }

这样进入每个分支后都会对foo进行赋值，覆盖了之前的函数，之后每次调用foo就不会再执行if判断

在声明函数时就指定适当的函数

var foo = (function foo(){
        if(a != b){
            return function(){
                console.log('aaa')
            }
        }else{
            return function(){
                console.log('bbb')
            }
        }
    })();

### 19、实现once函数 ###

### 20、requirejs架子 ###

require.js解决了两个问题

*  实现js文件的异步加载，避免网页失去响应
 *  管理模块之间的依赖性，便于代码的编写和维护

/** 网页中引入require.js及main.js **/
    <script src="js/require.js" data-main="js/main"></script>
    
    /** main.js 入口文件/主模块 **/
    // 首先用config()指定各模块路径和引用名
    require.config({
      baseUrl: "js/lib",
      paths: {
        "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
        "underscore": "underscore.min",
      }
    });
    // 执行基本操作
    require(["jquery","underscore"],function($,_){
      // some code here
    });

引用模块的时候，我们将模块名放在\[\]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块,那就需要将它们放在\[\]中作为define()的第一参数。

// 定义math.js模块
    define(function () {
        var basicNum = 0;
        var add = function (x, y) {
            return x + y;
        };
        return {
            add: add,
            basicNum :basicNum
        };
    });
    // 定义一个依赖underscore.js的模块
    define(['underscore'],function(_){
      var classify = function(list){
        _.countBy(list,function(num){
          return num > 30 ? 'old' : 'young';
        })
      };
      return {
        classify :classify
      };
    })
    
    // 引用模块，将模块放在[]内
    require(['jquery', 'math'],function($, math){
      var sum = math.add(10,20);
      $("#sum").html(sum);
    });

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

> 这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({
    　　　　shim: {
    　　　　　　'underscore':{
    　　　　　　　　exports: '_'
    　　　　　　},
    　　　　　　'backbone': {
    　　　　　　　　deps: ['underscore', 'jquery'],
    　　　　　　　　exports: 'Backbone'
    　　　　　　}
    　　　　}
    });

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义

shim: {
    　　　　'jquery.scroll': {
    　　　　　　deps: ['jquery'],
    　　　　　　exports: 'jQuery.fn.scroll'
    　　　　}
    }

require.js插件

require.js还提供一系列插件，实现一些特定的功能。domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc){
    　　// called once the DOM is ready
    });

text和image插件，则是允许require.js加载文本和图片文件。

define([
    　　'text!review.txt',
    　　'image!cat.jpg'
    　],
        function(review,cat){
    　　　　console.log(review);
    　　　　document.body.appendChild(cat);
    　　}
    　);

> 参考原文： [前端基本功-示例代码（一）][-]

作者：乐天派的普通人  
链接：https://www.jianshu.com/p/cad938020edb

[Fundebug]: https://www.fundebug.com/
[-_2.0]: https://www.jianshu.com/p/e37281affe87
[Image 1]: 
[css]: https://links.jianshu.com/go?to=http%3A%2F%2Fblog.csdn.net%2Foulihong123%2Farticle%2Fdetails%2F54601030
[-]: https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000017875258