Frontend Basics

Comments

jQuery

  • 为了简化JS开发的第三方库 （jQuery，Vue，AngularJS，React）
  • jQuery的核心是选择器，用于获取页面元素

选择器

基本选择器

语法 说明
$("#id") ID选择器，指定ID元素的对象
$("标签") 元素选择器，选择指定标签名的选择器
$(".class") 类选择器，选中拥有指定css类的元素
$("S1, S2, S3") 组合选择器，对元素进行组合

层叠选择器

  • 根据元素的位置关系来获取元素的选择器表达式
语法 说明
$("ancestor descendant") 后代选择器，选择父节点的所有后代子节点（包括后代的后代的后代。。。）
$("ancestor>descendant") 子选择器，只选择父节点的直接子节点
$("prev~siblings") 兄弟选择器，只会选择同级别的，在当前元素之后的兄弟元素

属性选择器

  • 属性选择器是根据元素的属性值来选择元素的选择器表达式
语法 说明
$("selector[attribute=value]") 选中属性值等于具体值得组件
$("selector[attribute^=value]") 选中属性值以某值开头得组件
$("selector[attribute$=value]") 选中属性值以某值结尾得组件
$("selector[attribute*=value]") 选中属性值包含某值得组件

位置选择器

语法 说明
$("selector:first") 获取第一个元素
$("selector:last") 获取最后一个元素
$("selector:even") 获取偶数位置的元素（从0开始）
$("selector:odd") 获取奇数位置的元素（从0开始）
$("selector:eq(n)") 获取指定位置的元素（从0开始）

表单选择器

  • 获取表单元素的简化形式
语法 说明
$("selector:input") 所有输入元素
$("selector:text") 获取文本框
$("selector:password") 获取密码框
$("selector:submit") 获取调教按钮
$("selector:reset") 获取重置按钮

操作元素

操作元素属性

  • .attr()
  • .removeAttr()

操作元素CSS样式

  • css() - 获取或者设置匹配元素的样式属性
  • addclass() - 为每个匹配的元素添加指定的类名
  • removeClass() - 从所有匹配的元素中删除全部或者指定的类

设置元素内容

  • val() - 获取或设置输入项的值
  • text() - 获取或设置元素的纯文本
  • html() - 获取或设置元素内部的HTML

jQuery事件处理方法

  • on("click", function) - 为选中的页面元素绑定单机事件
  • click(function) - 是绑定事件的简写形式
  • 处理方法中提供了event参数包含了事件的相关信息
1
2
3
4
$("p.myClass").on("click", function() {
    // $(this) 是指当前事件产生的对象，也就是p.myClass对象本身
    $(this).css("backgroung-color", "red");
});

Ajax

  1. 创建XMLHttpRequest对象
  2. 向服务器发送请求
  3. 服务器返回Response到JavaScript

jQuery对Ajax的支持

  • jQuery对Ajax进行了封装，提供了$.ajax()方法
    | 常用设置项 | 说明 |
    | url | 发送请求地址 |
    | type | 请求类型 get、post |
    | data | 向服务器传递的参数 |
    | dataType | 服务器响应的数据类型（text，json，xml，html，jsonp，script）|
    | success | 接受响应时的处理函数 |
    | error | 请求失败时的处理函数 |

过滤器

  • J2EE Servlet模块下的组件
  • Filter的作用是对URL进行统一的拦截处理
  • Filter通常用于应用程序层面进行全局处理

过滤器开发三要素

  • 任何过滤器都要实现javax.servlet.Filter接口
  • 在filter接口的doFilter()方法中编写过滤器的功能代码
  • 在web.xml中对过滤器进行配置，说明拦截URL的范围,那些请求会被拦截，那些请求不会被拦截

过滤器的生命周期

  • 初始化，Tomcat启动时 - Filter.init()
  • 提供服务 - Filter.doFilter()
  • 销毁 - 应用关闭或重启时 - Filter.destroy()

过滤器的特性

  • 过滤器对象在Web应用启动时被创建且全局唯一
  • 唯一的过滤器对象在并发环境中采用“单例多线程”提供服务
    • 过滤器会为每一个请求创建一个单独的线程

过滤器的配置形式

  • 所有的信息存放在web.xml中
1
2
3
4
5
6
7
8
<filter>
    <filter-name>MyFirstFileter</filter-name>
    <filter-class>com.yuan.filter.MyFirstFileter</filter-class>
</filter>
<filter-mapping>
    <filter-name>MyFirstFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

过滤器的注解形式

1
2
3
4
@WebFilter(filterName = "MyAnnoationFilter", urlPatterns="/*")
public class MyAnnotationFilter implements Filter {
    ...
}

配置与注解如何选择

  • 配置形式维护性更好，适合应用全局过滤
  • 注解形式开发体验更好，适用于小型项目敏捷开发
  • 注解形式每次过滤器的改变都需要重新编译、

过滤器参数化

  • 过滤器为了增强灵活性，允许配置信息放在web.xml
  • 在web.xml中配置<init-param>设置过滤器参数
1
2
3
4
<init-param>
    <param-name>encoding</param-name>
    <param-value>UTF-8</param-value>
</init-param>
  • 在Filter类中的init方法取得配置信息中的参数
1
private String encoding = filterConfig.getInitParameter("encoding");

过滤链

  • 每一个过滤器应具有单独的功能
  • 过滤器执行顺序以<filter-mapping>为准
  • 调用chain.doFiler()将请求向后传递·

监听器 - Listener

  • 对Web应用对象的行为进行监控
  • Listener是J2EE Servlet模块下的组件
  • Listener的作用是对web应用对象的行为进行监控
  • 通过监听自动触发指定的功能代码

监听对象

  • ServletContext - 对全局context及其属性监听
  • HttpSession - 对用户会话及其属性监听
  • ServletRequest - 对请求及其属性监听

监听器和过滤器的区别

  • 过滤器的职责是对URL进行过滤拦截，是主动的进行
  • 监听器的职责是对web对象进行监听，是被动触发

开发监听器三要素

  1. 实现Listener接口，不同接口对应不同的监听对象
  2. 实现每个接口中独有的方法，实现触发监听后续操作
  3. 在web.xml中配置<listener>使监听器生效

六种常用监听接口

  1. ServletContextListener
  2. HttpSessionListener
  3. ServletRequestListener

属性监听接口

  1. ServletContextAttributeListener - 监听全局属性操作
  2. HttpSessionAttributeListener - 监听用户会话属性操作
  3. ServletRequestAttributeListener - 监听请求属性操作

模板引擎

什么是模板引擎

  • 数据 + 模板 = 结果
  • 将数据与展现有效的解耦

Freemarker

  • 脚本为Freemarker template language
  • 提供了大量内建函数来简化开发

FTL取值

  • ${attribute} - 取值，可对属性进行计算
  • ${attribute!default} - 使用默认值
  • ${attribute?string} 格式化输出

分支判断

  • if else
1
2
3
4
5
6
7
<#if computer.state == 1>
    State: using
<#elseif computer.state == 2>
    State: idle
<#elseif computer.state == 3>
    State: finished
</#if>
  • switch
1
2
3
4
5
6
7
8
9
10
11
12
13
<#switch computer.state>
    <#case 1>
        State: using
        <#break>
    <#case 2>
        State: idle
        <#break>
    <#case 3>
        State: finished
        <#break>
    <#default >
        State: not exist
</#switch>
  • check if value is null
1
2
3
<#if computer.user??>
    User: ${computer.user}
</#if>

list迭代列表

1
2
3
<#list students as stu>
    <li>${stu_index}-${stu.name}</li>
</#list>

list迭代Map

1
2
3
<#list map?keys as key>
    ${key}:${map[key]}
</#list>

内建函数

  • lower_case/upper_case
  • cap_first
  • index_of
  • length
  • round/floor/ceiling
  • size
  • first/last
  • sort_by

MVC模式

Model

  • 负责生产业务需要的数据

Controller

  • 接受来自web的请求
  • 调用service进行处理
  • 将数据放入request
  • 跳转界面

View

  • 用于展示最终结果
  • 通常使用模板引擎展示

MVC优点

  • 软件团队分工合作，成员各司其职
  • 分层开发，显示与数据解耦，便于维护
  • 组件可灵活替代，互不影响

Yuan ChengSoftware Engineer

Wait and see