前端开发必备技能:
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
从 "?" 开始到 "#" 为止之间的部分为参数部分, 又称搜索部分, 查询部分. 参数可以允许有多个参数, 参数与参数之间用 "&" 作为分隔符.
前端入门
来源: http://www.bubuko.com/infodetail-3445523.html