项目123

珍妮王小钰

lesson 19

珍妮王小钰

Lesson 19 JavaScript(AJAX & Project)AJAXWhat is AJAX? AJAX = Asynchronous JavaScript （发送）And XML（data格式，发送数据载体，现在是json）. AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally common to transport data as plain text or JSON text.


AJAX request：
google 大量交互（request）；随时发随时拿到新的内容，

How to use AJAX

The keystone of AJAX is the XMLHttpRequest object.

1. creating an XMLHttpRequest object

var xhttp = new XMLHttpRequest();

2. send a request to a server, we use the open() and send() methods of the XMLHttpRequest object

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

密码： 1111 2222

珍妮王小钰

lesson 27
推荐系统 + big data processing；data infra 目前
spark processing engine ---》 后端（ recommendation 基于spark 作为语言）
scala 是基础；

autigers

楼主真棒，你是已经上岸了吗？

珍妮王小钰

autigers 发表于 2019-10-8 03:39
楼主真棒，你是已经上岸了吗？

没有 转码还在水中，，

autigers

珍妮王小钰 发表于 2019-10-8 03:52
没有 转码还在水中，，

哈哈，我也是。。。好难

珍妮王小钰

autigers 发表于 2019-10-8 08:24
哈哈，我也是。。。好难

呀 没事 可以一起交流讨论

珍妮王小钰

#理论+ coding 去面试
1. Product Design - SNAKE原则 2. Web三剑客：HTML, CSS, JS 3. JavaScript Callback and Promise 4. Responsive Web Design: Bootstrap 5. Synchronous and Asynchronous 6. Node.js Architecture and Application 7. Express.js 8. Angular2+ Architecture 9. Process & Threads
#工业界


● Design of Collaborative Online Judge Project ；# 系统设计！
SNAKE Fundamentals ；Project Design
● Web Basics；#网络编程/
Front-end basic elements: HTML, CSS；
Responsive Web Design； JavaScript basics
● Node.js Architecture and Application ；Node.js Asynchronous event driven JavaScript runtime； Express.js introduction
#系统设计（&项目）
Crack a design in 5 steps #1，2input   3 output
•1.Scenario: case （#用例usecase场景）/ interface（#  API#小的模块，外界交互要遵守什么协议）  •2.Necessary: constraint#限定条件 / hypothesis 假设（#budget多少条件+假设：多少用户）
3•Application: service / algorithm #output
宏观ly系统设计出来有哪些服务/模块（Uber：location和payment的模块）（这些模块提供哪些service，它们如何协作完成整体的功能）//微观ly设计小feature：小的系统需求来考虑算法：（ex：tiny url把长链接变成小链接（里面存整数）or用hash等算法；处理后output就是一个具体的算法）
•Kilobit: data（#数据：number of 机器用户；系统保存了多少数据/每天需要产生多少数据；系统运行的时候有多少数据需要被传输；若传输的数据量大做vedio（网络延时需要关注）；如果存的数据多要用分布式的数据库；同时在线的用户请求非常多的话，一个serverhandle 不了，系统中需要用到多个；对data的估计～～；调整设计update： evolve： 增加新的feature，data 的handle能力，其他用户更新）
•Evolve


1. Scenario
● Problems #题目说画怎样的图？
○ CRUD （create 增加，read查，update改，delete删）#必要的功能
● Editing of Code#绘图编辑器 写code
○ Collaborative#google doc
● Submit Code
○ Execute Code ○ Show Graph

2. Necessary
● Daily active user ○ 100,000  # 问面试官： 限定条件：what is the expected DAU？ （假设一下）
● Lookup（查 userbase） problems ○ Per day: 100,000 * 100% (function usage) * 3 (function frequency) = 300,000 ○ Per second: 300,000 / 86400 = 3.5 ○ Peak per second: 3.5 * 10 = 35
● Editing ○ Average concurrent users: 100,000 * 60 * 60 / 86400 = 4166 ○ Per second: 4000 * 50% (function usage) * 10 (function frequency) = 20,000 ○ Peak per second: 20,000 * 10 = 200,000
● Submit Code ○ Per second: 4000 * 1% (function usage) * 1 (function frequency) = 40 ○ Peak per second: 40 * 10 = 400SQL
#web 端Web Browser (Angular)
#Backend: Nginx; NodeServer;Redis
#Online Graphing :Nginx; Executor &Graphing .                                                                                                                        
     Kilobit - Data
● Editing #要去发送信息○ Per second: 4000 * 50% (function usage) * 10 (function frequency) = 20,000○ Data Size: 20,000 * 1KB = 20MB       假设KB
● Submit Code○ Per second: 4000 * 1% (function usage) * 1 (function frequency) = 40○ Data Size: 40 * ???                 


Evolve – Follow Up #增加新feature之类
● Can everyone add problem? #证明你是谁？有什么权限 增加系统的功能● What if people are changing one place at the same time?#协作编辑（一个用户编辑同一位置） ● Easier idea?● Faster on storing the doc?● How to isolate?● How to scale up?● Fail and stop?、
Design of Collaborative Online Graphing ProjectSNAKE FundamentalsProject Design
● Web BasicsFront-end basic elements: HTML, CSSResponsive Web DesignJavaScript basics
● Node.js Architecture and ApplicationNode.js Asynchronous event driven JavaScript runtimeExpress.js introduction

珍妮王小钰

,

珍妮王小钰

浏览器显示代码 运行我们写的代码。3.3 Web 标准构成

构成： 主要包括结构（Structure网页元素：图片链接文字）、表现（Presentation改颜色CSS）和行为（Behavior）三个方面

标准

说明

备注

结构结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript 理想状态我们的源码： .HTML      .css      .js web标准小结

• web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）  
• 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
• 理想状态下，他们三层都是独立的， 放到不同的文件里面