weixin_39647787
2020-12-08 23:55 阅读 0

大前端的技术原理和变迁史

大前端的技术原理和变迁史

本文适合前端新手入门,阅读人群最好是前端新手或者后台开发人员,因为我不敢保证对前端老司机有太多收获。

通过阅读本文,你将会大致了解前端这些年发生的事情,以及一些前端当前主流技术的简单原理介绍。所有涉及的内容,都是尽可能的让你捅破这层窗户纸,知道其大致的玩法。

目录

  1. 前端技术发展轨迹
  2. 角色架构发展史
  3. 前端技术发展史
  4. ECMAScript语法发展史
  5. Ajax技术发展史
  6. 当前主流技术原理介绍
  7. SPA 单页面应用原理
  8. Node.js 服务器端JS运行原理
  9. SSR 服务器端渲染原理
  10. Vue MVVM原理
  11. Webpack 打包原理
  12. Sass CSS编译原理
  13. 一些新技术探索
  14. TypeScript
  15. PWA
  16. GraphQL
  17. Flutter
  18. 两个流行的概念解答
  19. 什么是大前端
  20. 什么是前端工程化

一、前端技术发展轨迹

本节知识点:

  • 角色架构发展史
  • 前端技术发展史
  • ECMAScript语法发展史
  • Ajax技术发展史

1.1 角色架构发展史

https://i.imgur.com/4eQJC7G.png

Web1.0 到 Web2.0过渡的标志,就是Ajax的出现(2005年)。

1.2 前端技术发展史

https://i.imgur.com/uoh8Hbn.png

1.3 ECMAScript语法发展史

1.4 Ajax技术发展史

AJAXAsynchronous JavaScript and XML(异步的 JavaScript 与 XML 技术)。

STEP1:XMLHttpRequest 原生对象

js
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

STEP2:$.ajax 操作

js
$.ajax({
    type: 'GET',
    url: '/my/url',
    data: data,
    success : function(result){
        //TODO RESULT
    }
});

STEP3:Promise 操作

js
let getData = function (url) {
    return new Promsie(function (resolve, reject) {
        $.ajax({
            type: 'GET',
            url: url,
            success: function (data) {
                resolve(data);         
            },
            error: function (err) {
                reject(err);
            }
        });
    });
};

var data = getData('/my/url').then(function (data) {
     //TODO DATA
});

STEP4:生成器 Gererator

Js
let it = null;
let ajax = function(url,data){
    $.ajax({
       type: 'GET',
       url: url,
       data: data || {},
       success : function(result){
            it.next(result);
       }
    });
};

function *getData(){
    var data = yield ajax('/my/url');
    console.log('data=',data);
};

it = getData();
it.next(); 

STEP5:Async/Await 高级操作

js
let ajax = function(url,data){
    return $.ajax({
       type: 'GET',
       url: url,
       data: data || {}
    });
};

async function getData(){
    var data = await ajax('/my/url');
    console.log('data=',data);
};

getData();

Ajax的相关背景资料:

1999年,微软公司发布IE浏览器5.0版,第一次引入新功能:允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Map发布,才引起广泛重视。

2005年2月,AJAX这个词第一次正式提出,指围绕这个功能进行开发的一整套做法。从此,AJAX成为脚本发起HTTP通信的代名词,W3C也在2006年发布了它的国际标准。

二、当前主流技术原理介绍

本节知识点:

  • SPA 单页面应用原理
  • Node.js 服务器端JS运行原理
  • SSR 服务器端渲染原理
  • Vue MVVM原理
  • Webpack 打包原理
  • Sass CSS开发原理

2.1 SPA 单页面应用原理

什么是SPA? SPA 即单页面,就是页面整体不刷新,不同的页面只改变局部的内容的一种实现方式。

一个完整的URI有以下几部分组成:


scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

浏览器的URL也遵循以上规则,而对于以上规则中,只有 # 后面的 fragment 发生改变时,页面不会重新请求,其它参数变化,均会引起页面的重新请求,而在Js中恰恰还有事件 window.onhashchange 能监听到 fragment 的变化,于是就利用这个原理来达到一个修改局部内容的操作。

#fragment 部分就是对应到Js中的 location.hash 的值。

直接上代码描述:

html

    
        <script type="text/javascript">
            window.onhashchange = function(){
                var page = location.hash;
                if(page === '#home'){
                    document.getElementById('main').innerHTML = '这是首页';
                    return;
                };

                if(page === '#help'){
                    document.getElementById('main').innerHTML = '这是帮助页面';
                    return;
                };

                document.getElementById('main').innerHTML = '404';
            }
        </script>
    
    
        <header>
            <a href="#home">首页</a>
            <a href="#help">帮助</a>
        </header>
        <article id="main"></article>
    

该提问来源于开源项目:sunmaobin/sunmaobin.github.io

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • weixin_39852276 weixin_39852276 2020-12-08 23:55

    写的很棒

    点赞 评论 复制链接分享
  • weixin_39647787 weixin_39647787 2020-12-08 23:55

    感谢支持~

    点赞 评论 复制链接分享
  • weixin_39667652 weixin_39667652 2020-12-08 23:55

    写得不错

    点赞 评论 复制链接分享
  • weixin_39573781 weixin_39573781 2020-12-08 23:55

    不错

    点赞 评论 复制链接分享

相关推荐