前端入门

前端开发必备技能：

• HTML5：菜鸟教程

• CSS：菜鸟教程

• Javascript：菜鸟教程、《JavaScript高级程序设计(第3版)》、阮一峰博客、MDN Web Document

• AnjularJS：菜鸟教程、W3赵巍凯的AnjularJS培训系列课程

• JQuery：菜鸟教程、阮一峰博客

可选技能：

• svg：web绘制库

开发工具：

• VSCode：IDE

• Chrome：调试工具

• 打包工具：grunt/maven

调试工具的使用：

• Elements页签：查看当前页面的html代码。Ctrl+Shift+C查看dom元素对应的html代码；或右键检查也是可以看到。样式、事件监听、Dom对象属性等。

• Console页签：web项目的控制台。除了打印程序运行输出外，还具备python交互式控制台的功能.

• Sources页签：web项目代码查看和调试。打断点、调试按钮、鼠标移动到变量上即可查看值等.

• Network页签：查看请求与响应。

• Performance页签和Memory页签：测试程序的性能和内存消耗。

• Application页签：可以查看LocalStorage、SessionStorage和Cookies等值。

项目运行：

• 项目打包好后，配置WEB-INF目录，拷贝到Tomcat下运行。

• 修改代码，清空缓存重新加载即可，无需重新打包；修改配置文件，直接重新加载即可。

H5本地存储技术：

• sessionStorage（会话存储）

  后端里有Session即“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

  • 生命周期：浏览器打开到关闭的过程

  • 大小：5M

  • 保存的位置：浏览器端

  • setItem(‘key‘, value)

  • getItem(‘key‘)

  • removeItem(‘key‘)

• localStorage（永久存储）

  • 生命周期：永久，除非人为删除

  • 大小：5M甚至更大

  • 保存的位置：浏览器端

  • setItem(‘key‘, value)

  • getItem(‘key‘)

  • removeItem(‘key‘)

• cookie

  • 作用：Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，实际上Cookie是服务器在本地机器上存储的一小段文本，并随着每次请求发送到服务器。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

  • 特点:

    • 大小：4kb

    • 每次发送请求都携带。导致占用带宽

    • 保存在浏览器端

    • cookie容易被截获，不安全

    • 生命周期：

    • 会话周期：浏览器打开到关闭的过程

    • 人为设置cookie的时间

• 区别：
  

•  

•  

• 应用场景：

  • 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

  • 而另一方面 localStorage 接替了 Cookie 管理用户在电商网站的购物车信息的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。

  • 如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

详见：

https://jerryzou.com/posts/cookie-and-web-storage/

https://juejin.im/post/5aa783b76fb9a028d663d70a

AngularJS：动态WEB应用设计的MVC js框架(Model-View-Controller).

• Model：数据

• View：Dom文档

• Controller：JS控制逻辑，视图和数据的桥梁

AngularJS五个特性：

• MVC

• 依赖注入：完成某个特定的功能需要某个对象才能实现。单例模式，Java中也存在.

• 模块化：结合依赖注入，实现低耦合高复用.

• 双向绑定

• 语义化标签(指令)：自定义html标签.eg：TinyUI

单向绑定：jQueryUI、BackBone

• 开发者需要指定Model数据和视图View绑定的对应关系

• 每次修改数据均需要重新加载渲染整个页面
  
  

双向绑定：

• View和Model之间的互动将由AngularJS完成

• 修改数据均需加载渲染修改的部分

• View变化将改变Model数据

• Model数据变化将改变View
  
  

URL解析：

AngularJS项目是单页面应用(SPA)，视图切换都是通过路由实现。SPA是指浏览器只在初始时加载一次HTML页面，后边所有的操作只是改变视图部分的内容，不会重新加载HTML页面。

单页面视图特点：URL地址中锚 部分（#号开始）改变，视图内容发生改变。

例如：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name 从上面的URL可以看出，一个完整的URL包括以下几部分：

• 1）协议部分：该URL的协议部分为“http：”；

• 2）域名部分：该URL的域名部分为“www.aspxfans.com”；

• 3）端口部分：8080

跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符；

• 4）虚拟目录部分：/news/

从域名后的第一个“/”开始到最后一个“/”为止。

• 5）文件名部分：index.asp

从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。

• 6）锚部分：#name

资源中的一种"书签"(即路由部分)，从“#”开始到最后，都是锚部分。锚部分改变，不会重新加载HTML页面。

• 7）参数部分：?boardID=5&ID=24618&page=1

从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

前端入门

原文：https://www.cnblogs.com/luckyboylch/p/12330364.html