一、我们从哪里开始？

有这么一个，奇异地球

我们是 JavaScript，生活在 奇异地球 上的智人

要说我们的故事，就要从我们赖以生存的 大陆

—— 浏览器开始

合纵 - 史前时期 (约 1990 – 1996)

我们智人，JavaScript，1995 年，诞生于非洲板块，

Netscape Navigator 浏览器

1990 年底，Tim Berners-Lee 发明 WWW 万维网，

他成功利用互联网实现了 HTTP 客户端与服务器的第一次通讯，

最早的网页只能在操作系统的终端里浏览，用命令行来操作。

1994 年 10 月，NCSA 主要程序员联合风险投资家，成立 Mosaic 通信公司，

不久后改名为 Netscape，在 Mosaic 基础上，

开发面向普通用户的新一代浏览器，Netscape Navigator。

NN 1.0 市场份额当年超过 90%。

神说，要有光

东非

非洲板块

创世纪，TIMELINE

对不起，请你离开伊甸园

从大自然挣扎成长，成为了我们智人必须面临挑战：JavaScript，并不是没有竞争者

微软的 JScript，海德堡人

较大的脑容量，更发达的肌肉，

平均身高 1m8，甚是可怕

Adobe 的 ActionScript

智商高、友善、爱嬉闹，

普遍受智人的欢迎

无标本已灭绝

网页中的 Flash

时间表：大概 1990 - 1996 年
问题：万维网的诞生，浏览器的诞生
创新：万维网本身，浏览器本身
主导浏览器：Netscape Navigator

史前小结

二、我们怎么到了这里？

上

合纵

连横

历史时期

学科发展

合纵 - 农耕时期 (约 1996 – 2004)

我们学会了耕作土地，

JavaScript 学会了耕作 DOM

{{ AJAX，XHR }}

智人的肉体凡胎，是并不完善的存在

1995 年 5 月，Brendan Eich 只用了 10 天，就设计完成了这种语言的第一版。

它是一个大杂烩，语法有多个来源：

基本语法：借鉴 C 语言和 Java 语言。
数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。
正则表达式：借鉴 Perl 语言。
字符串和数组处理：借鉴 Python 语言。

1996 年 3 月，Navigator 2.0 浏览器正式

内置了 JavaScript 脚本语言。

C

ALGOL 60

插播，我们的祖辈

早期高级程式语言家族

CPL

BCPL

B

UNIX

20世纪

至今

1963

1967

1970

1972

1958

我们的大脑，ECMAScript 标准

1997 年 7 月，ECMAScript 1.0
1998 年 6 月，ECMAScript 2.0
1999 年 12 月，ECMAScript 3.0，成为 JavaScript 的通行版本，得到了广泛支持
2007 年 10 月，ECMAScript 4.0 草案，目标过于激进
2009 年 12 月，ECMAScript 5.0
2011 年 6 月，ECMAScript 5.1，成为 ISO 国际标准
2015 年 6 月，ECMAScript 6.0，大幅改版

2016 年 6 月，ECMAScript 7.0

2017 年 6 月，ECMAScript 8.0

诞生的意义在于，JavaScript，

离不开

DOM 和 BOM

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();

所以我们才说，

JavaScript = DOM +

BOM + ECMAScript

DOM BOM 为宿主

ECMAScript 为核心

DOM，大自然

BOM，浏览器母亲见证的爱情

ECMAScript，我们的智慧

最早贸易体系的建立， XHR 和 

XMLHttpRequest，一般等价物

AJAX，铜钱，实体

富 Web 应用

大前端

胖客户端

前后分离

IE 浏览器，奥斯曼帝国

Ajax = 异步 JavaScript + ( XML / JSON)

不要忘记，JavaScript 是单线程的

function Ajax (type, url, data, success, failed) {
    // 创建ajax对象
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
 
    var type = type.toUpperCase();
    // 用于清除缓存
    var random = Math.random();
 
    if (typeof data == 'object'){
        var str = '';
        for (var key in data){
            str += key+'='+data[key]+'&';
        }
        data = str.replace(/&$/, '');
    }
 
    if (type == 'GET') {
        if (data) {
            xhr.open('GET', url + '?' + data, true);
        } else {
            xhr.open('GET', url, true);
        }
        xhr.send();
    } else if (type == 'POST') {
        xhr.open('POST', url, true);
        // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
 
    // 处理返回数据
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200){
                success(xhr.responseText);
            } else {
                if (failed){
                    failed(xhr.status);
                }
            }
        }
    }
}

function loadWechatUserInfo() {
    var sendData = {};
    // var imgLabel = document.getElementsByClassName("mUserPhoto")[0].lastElementChild;
    // console.log(imgLabel);

    Ajax('GET', 'xxx', sendData, function(data) {
        // imgLabel.src = "#";
        alert(resJSON[Object.keys(resJSON)[0]]);
    }, function(error){
        alert(error);
    });
}

农耕时期，TIMELINE

1997 年，DHTML 发布，标志着 DOM 模式正式应用。
1996 年，样式表标准 CSS 第一版发布。
1998 年，Netscape 公司开源了浏览器套件，这导致了 Mozilla 项目的诞生。
1999 年，IE 5 部署了 XMLHttpRequest 接口，允许JavaScript发出HTTP请求。
2001 年，Douglas Crockford 提出了 JSON 格式，用于取代 XML 格式，

    进行服务器和网页之间的数据交换。JavaScript 可以原生支持这种格式，

    不需要额外部署代码。
2002年，Mozilla 项目发布了它的浏览器的第一版，后来起名为 Firefox。
2003年，苹果公司发布了 Safari 浏览器的第一版。

2004 年 4 月 1 日，Google 公司发布了 Gmail，促成了互联网应用程序概念的诞生。

2004年，Dojo 框架诞生，为不同浏览器提供了同一接口，

    这标志着 JavaScript 编程框架的时代开始来临。

2005 年，Ajax 方法正式诞生，促成 Web 2.0 时代的到来。

农耕小结

时间表：大概1996 - 2004年

问题：浏览器的多样性，基本的 DOM 操作，用户交互

创新：JavaScript 本身，XHR 和 AJAX

主导浏览器：Netscape Navigator，Microsoft Internet Explorer

合纵 - jQuery 王朝 (约 2004 – 2010)

// 把某本书移出书车
function cancelShopping (biId) {
    var post_url = "xxx";
    var post_data = {
        "biId": biId
    };
    $.post(post_url, post_data, function (data, status) {
        // 移出书车成功，重新加载页面
        window.location.href = "borrow_cart.html";
    });
}

jQuery 王朝里的铜币

—— jQuery 封装的 AJAX 方法

// 给每个书籍旁的附属按钮绑定“移出书车”事件
function bindCancelShoppingEvent () {
    $(".mDeleteButton").each(function () {
    	$(this).click(function () {
    	    var biId = $(this).attr("biId");
            cancelShopping(biId);
    	});
    });
}

jQuery 绑定按钮点击事件

jQuery 王朝里的日常生活

2006 年 1 月，John Resig 国王宣布，

jQuery 王朝首都街上的公示牌

操作文档对象

选择文档对象模型元素

创建动画效果

处理事件

开发Ajax程序

对底层交互与动画

高级效果和高级主题化的组件进行抽象化

凡是王朝合法公民，都可以

专制王朝里的革命之光

TIMELINE

2004年，WHATWG组织成立，致力于加速HTML语言的标准化进程。

2005年，苹果公司在 KHTML 引擎基础上，建立了 WebKit 引擎。

2005 年，Apache 基金会发布了基于 JSON 格式的 CouchDB 数据库。

2006 年，Google 推出 GWT 项目，提供 Java 编译成 JavaScript 的功能，开创了将其他语言转为 JavaScript 的先河。
2007 年，Webkit 引擎在 iPhone 手机中得到部署，意味着 JavaScript 有可能写出在电脑和手机在都能使用的程序。
2007 年，Douglas Crockford 发表了名为《 JavaScript: The good parts 》的演讲，软件行业开始严肃对待 JavaScript 语言。

2008 年，开源 V8 编译器诞生并运行在 Chrome 浏览器上，它提高了JavaScript的性能，推动了语法的改进和标准化，

    改变外界对 JavaScript 的不佳印象。
2009年，Node.js 项目诞生，创始人为Ryan Dahl，它标志着 JavaScript 可以用于服务器端编程，从此网站的

    前端和后端可以使用同一种语言开发。

2009年，PhoneGap 项目诞生，它将 HTML5 和 JavaScript 引入移动设备的应用程序开发，使得

    JavaScript 可以用于跨平台的应用程序开发。
2009，Google 发布 Chrome OS，号称是以浏览器为基础发展成的操作系统，允许直接

    使用 JavaScript 编写应用程序。类似的项目还有 Mozilla 的 Firefox OS。
2010年，三个重要项目： NPM、BackboneJS 和 RequireJS，

    标志着 JavaScript 进入模块化开发的时代。

专制王朝里的革命之光

TIMELINE

王朝小结

时间表：大概 2004 - 2010 年
问题：增加站点复杂性，支持浏览器数量
创新：强大的 DOM 操作，早期单页应用程序
主导浏览器：Microsoft IE，Mozilla Firefox

二、我们怎么到了这里？

下

合纵 - 单页应用民主革命 (约 2010 - 2014)

民主进度条

TIMELINE

2011 年，Google 发布 Dart 语言，结束了 JavaScript 的垄断

2011 年，微软工程师 Scott Hanselman 提出，JavaScript将是互联网的汇编语言

2012年，AngularJS 1.0 和 Ember 1.0，单页面应用程序框架开始崛起

2012年，微软发布 TypeScript 语言，作为 JavaScript 的超集。

2012年，Mozilla基金会提出 asm.js 规格，使其他语言可以被编译成高效的 JavaScript 代码。

2013年，ECMA 正式推出 JSON 的国际标准

2013年5月，Facebook 发布 UI 框架库 React，引入了新的 JSX 语法。

2014年，微软推出 JavaScript 的 Windows 库 WinJS，从此 JavaScript 与 Windows 开始融合。

权利法案，《 JavaScript: The good parts 》

君主立宪，言论自由

2007 年，Douglas Crockford

民主革命小结

时间表：大概 2010 - 2014 年
问题：DHTML 过载，大规模数据操作，速度
创新：MVC 式框架，双向数据流，DOM“Automagic”

主导浏览器：

Google Chrome，Microsoft IE

Mozilla Firefox，Apple Safari

生存迫使我们不能局限地生存在 非洲板块

我们逐渐走向了更远的大陆

我们智人

IE 浏览器，阿拉伯板块

Chrome 浏览器，北美洲板块

Safari 浏览器，欧亚板块

FireFox 浏览器，澳洲板块

连横 - 生物学，浏览器与单地起源学说

为什么这样形容？

Chrome 的 V8 引擎，硅谷科技产业链

Safari 的 Webkit 引擎，西方殖民时代

IE 的 Trident 引擎，奥斯曼帝国

FireFox 的 Gecko 引擎，和平的澳大利亚

战争是文明之光的打火石

连横 - 军事学，两次浏览器大战概要

连横 - 经济学，前后分离的贸易体系

从 Ajax 到 Fetch API ，再到 Node HTTP Module

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

let myImage = document.querySelector('img');

fetch('flowers.jpg')
.then(function(response) {
    return response.blob();
})
.then(function(myBlob) {
    let objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
});

var http = require('http');

function getTestPersonaLoginCredentials(callback) {
    return http.get({
        host: 'personatestuser.org',
        path: '/email'
    }, function(response) {
        // Continuously update stream with data
        var body = '';
        response.on('data', function(d) {
            body += d;
        });
        response.on('end', function() {

            // Data reception is done, do whatever with it!
            var parsed = JSON.parse(body);
            callback({
                email: parsed.email,
                password: parsed.pass
            });
        });
    });
},

Node HTTP Module DEMO

不正是，铜钱 -> 纸币 -> 虚拟货币

连横 - 政治学，模块化与组件化的发展

import React from 'react'

const NotFound = () => (
    <div className='loginContainer'>
      <h1 style={{
        textAlign: 'center',
        fontSize: '10em',
        color: '#fff'
      }}>
        404
      </h1>
      <h2 style={{
        textAlign: 'center',
        fontSize: '2em',
        color: '#fff'
      }}>Oops, 页面没有找到...</h2>
    </div>
)

export default NotFound

Coursework-System

连横 - 哲学，构建工具下的世界观

仓库

汽车

道路

演讲，却并不冲突

Webpack，高铁，模块打包/加载

连横 - 火箭，让 Node.JS 有了人类足迹

var net = require('net')

var client = net.connect({port: 8124}, 
    function () {
        console.log('client connected')
        client.write('world!\r\n')
    }
)

client.on('data', function (data) {
    console.log(data.toString())
    client.end()
})

client.on('end', function () {
    console.log('client disconnected')
})

var net = require('net')

var server = net.createServer(function (socket) {
  // 新的连接
  socket.on('data', function (data) {
      socket.write('你好\n')
  })

  socket.on('end', function () {
      console.log('连接断开\n')
  })

  socket.write("欢迎光临《深入浅出 Node.js》示例：\n")
})

server.listen(8124, function () {
    console.log('server bound')
})

连横 - 科幻，或许机器人 Dart 将会取代我们

int fib(int n) => (n <= 1) ? n : (fib(n - 1) + fib(n - 2));

main(){
    print('fib(20) = ${fib(20)}');
}

连横 - 艺术，CSS，一路风景在陪伴

TIMELINE

1994 年 Håkon Wium Lie 提出 CSS 建议，与 Gijsbert (Bert) Bos 开始合作设计。

1996 年 12 月发表 CSS1.0。

1997 年初，W3C 内组织了专门管 CSS 的工作。

1998 年 5 月 W3C 发表了 CSS2.0。

CSS 3 呈开放性，一直在发展中。

没有正交，CSS 更多的是艺术，而非科学

连横 - 工程学，逐步贯穿软件工程全实践

• 掌握持续集成、持续交付、持续部署相关编程能力
• 拥有良好的代码规范、代码质量、代码注释能力
• 拥有良好的版本控制、项目管理意识
• 拥有良好的代码审查、代码重构能力
• 拥有抓写良好软件工程文档的能力
• 掌握软件测试相关能力

三、我们现在在哪里？

合纵 - 五彩缤纷的当代(约 2014 至今)

这是最好的时代，也是最坏的时代。

TIMELINE

2015年3月，Facebook 发布 React Native，将 React 框架移植到了手机端，可以用来开发手机 App。

2015年4月，Angular 框架宣布，2.0版 将基于微软公司的 TypeScript 语言开发。

2015年5月，Node 模块管理器 npm 超越 CPAN，标志着 JavaScript 成为世界上软件模块最多的语言。

2015年5月，Google 的 Polymer 1.0 发布，目标是生产环境可以使用 WebComponent 组件。

2015 年 6 月，ECMAScript 6 正式发布，这时 JavaScript 语言从诞生至今也已经 20 年了。

2015 年 6 月，Mozilla 在 asm.js 的基础上发布 WebAssembly 项目，JavaScript 二进制包软件在路上。

2016年6月，《 ECMAScript 2016 标准 》发布。与前一年发布的版本相比只增加了两个较小的特性。

三大主流框架下的前端工程化

一个简易的 React 项目示例

├── LICENSE
├── README.md
├── assets
├── package.json
├── src
│   ├── components
│   ├── entry.ejs
│   ├── index.js
│   ├── mock
│   ├── models
│   ├── public
│   ├── router.js
│   ├── routes
│   ├── services
│   ├── svg
│   ├── tests
│   ├── themes
│   └── utils
├── theme.config.js
├── version.js
└── webpack.config.js

时间表：大概 2014 年至今
问题：速度，应用程序复杂性增加，可靠性
创新：虚拟 DOM，单向数据流，类型，UI 测试，软件工程实践
主导浏览器：Google Chrome，Apple Safari

类型，PropTypes，TypeScript

当代小结

Vanilla JS，我们的双手

最牛逼之处在于其实你早就知道它了，只是你不知道你早就知道它了。

实验室前端成果有什么——畅校园主站

实验室前端成果有什么——西邮导航

• 东区导航
• 实验室博客
• 畅校园宣讲会
• 图书查询
• 西邮百盘

以及更多

你需要怎么准备这次前端纳新？

let Fun1 = () => {
    let i = 0
    return () => { console.warn(++i) }
}

let Fun2 = (start, end, Fun) => {
    if (parseInt(start) !== start) return
    if (parseInt(end) !== end) return
    for (let i = start; i < end; i++) Fun()
}

let Fun3 = () => {
    console.warn('one')
    setTimeout(function () {
        console.warn('two')
    }, 5)
}

let f1 = Fun1()
let f2 = Fun1()
f1(), f1(), f2()
Fun2(0, 6, Fun3)

// ~/main.js
let math = require('./math')
console.warn(math.increment(1))
console.warn(math.decrement(1))

// ~/math.js
exports.increment = (val) => { return val + 1 }
exports.decrement = (val) => { return val - 1 }

// terminal
node ~/main.js

let obj1 = { color: "red" }
let obj2 = { color: "red" }

let Fun4 = (obj) => { obj.color = "blue" }
let Fun5 = (obj) => { obj = {color:"blue"} }

Fun4(obj1)
Fun5(obj2)
console.warn(obj1.color)
console.warn(obj2.color)

1. 谈谈你对 HTML5、CSS3、ECMAScript6 的理解。

2. 说说 cookies、localStorage、sessionStorage 的应用场景。

3. 如何更好的理解前端模块化开发和组件化开发？

4. 对比 Ajax 与 Fetch API，都有哪些相同与不同之处？

5. 尝试说明 JavaScript 事件捕获和事件冒泡的区别。

CreatShare 前端题 2017 前五道

并不需要全做完

这些年，有些人加了，又退了

但留下来的，都是厉害的

前端组小要求

• 坚持学习技术，热爱分享
• 拥有团队意识，不忘初心
• 每周一封总结邮件
• 每周四晚上实验室开会
• 每周最少来四次来实验室

加入进来能带给你的成长

• 熟练掌握 HTML5、CSS3、ES6
• 熟练掌握前端主流框架
• 熟练掌握前端工程化开发
• 深入了解 Node.JS 全栈开发
• 完美体验软件开发全阶段