• 例如：导入了jquery/bootstrap，bootstrap依赖了jquery，bootstrap不支持AMD规范，所以采用了shim

• 举例
  • cart.js依赖了product.js+shop.js
  • 在cart.js文件中，通过以下代码实现模块依赖

  define(["product","shop"],function(){})

• 1、事件回调函数有一个参数，表示事件对象(e)，通过e.preventDefault()实现
• 2、在事件回调函数最后：return false;

• a、把页面结构放到模板中，写arttemplate的语法
  • 。。。

  <script id="tplTeacherList">
              <table>
                  {{each result}}
                      //$value是数组中每一个元素
                      //要获取用户名：$value.tc_name
                      <tr>
                          <td>{{$value.tc_name}}</td>
                      </tr>
                  {{/each}}
              </table>
          </script>

• b、
  • i>通过ajax获取数据

    • $.ajax({ url:"/api/teacher",type:"get",success:function(res){ //res：接受了接口的返回值：响应的结果

      • ii>var html=template("script的id",res);

      • c、把html添加到页面中指定位置：$(".main .content-container").html(html); } })

1、找到功能的入口：点击注销/启用按钮

• 给按钮指定一个类名：btn-status
• 事件绑定在div.panel中，通过委托让按钮触发：

2、事件触发的时候

• a、修改服务器中该用户的状态值

    $.ajax({ url:"/api/teacher/handle" type:"post",data: {
        tc_id:按钮的父元素找到tc_id,
        tc_status:也在页面渲染的时候把tc_status保存起来然后再获取,
    },success:function(res){
            //res.result.tc_status：表示用户最新的状态值
            //把最新的状态值渲染到页面中
    } })

• b、修改表格中显示的文本

找到功能的入口：编辑讲师按钮：给按钮绑定单击事件

• 给每一个编辑按钮指定一个类名：btn-edit
• 事件绑定在div.panel中，通过事件委托让编辑按钮触发

事件触发的时候，弹出模态框

• 准备一个模态框的模板
• 通过text插件获取模板内容
• 通过ajax获取讲师原来的数据
  • url:/api/teacher/edit
  • type:get
  • data:{tc_id: 获取按钮的父元素中tc_id属性值 }
  • success:function(res){ }
• 把数据放到模板中：arttemplate编译模板传入数据，获取真实内容
  • var html=template.render(模板内容,数据)
• 把真实内容放到页面中，并且以模态框的形式呈现出来

点击模态框中的提交按钮，把数据提交到服务器中，提供成功刷新讲师列表

• 异步的提交-->把表单设置成异步的：给表单绑定submit事件，通过事件对象的e.preventDefault();
• 获取表单数据：
  • var formData=$(this).serialize(); //每一个表单具有指定的name属性

• 把数据通过ajax发送到服务器中

  $.ajax({
      url:"/api/teacher/update",
      type:"post",
      data:formData,
      success:function(res){
          //成功之后就刷新讲师列表
      }
  })

1、找到功能的入口：首页的分类列表菜单

• 给分类列表菜单绑定事件

2、事件触发的时候加载分类列表模块

• 准备一个category/list.js模块
• main.js中调用category/list.js模块

3、在分类列表模块中完成功能

• a、准备一个列表的模板文件
• b、通过text插件获取模板内容（没有数据）
• c、根据ajax请求获取数据
• d、把数据放到模板中-->template编译模板 var html=template.render(模板内容，数据);
• e、把html放到页面中的指定位置： $(".main .content-container").html(html);

1、找到功能的入口：添加分类按钮

• 给按钮绑定事件
  • 给按钮指定一个类名：btn-add
  • 把事件绑定在div.panel中，通过事件委托让btn-add触发

2、事件触发的时候，弹出一个模态框

• 准备一个模态框模板文件
• 通过text插件获取模板内容
• 通过ajax获取上级分类数据
• 把上级分类数据通过arttemplate编译到模板中
• 把编译后的结果放到页面中的指定位置，并且以模态框的形式呈现出来

3、点击提交按钮，提交表单

• 把同步的表单变成异步的表单
  • 给表单绑定submit事件，通过事件对象：e.preventDefault();
• 获取表单数据
  • 根据接口文档，看看文档需要哪些参数，找到对应的name值，把这些name值一一对应的写在表单中 var formData=$(this).serialize();
• 通过ajax请求把数据提交到服务器中
• 数据提交成功之后，需要隐藏模态框+刷新分类列表

• 给按钮绑定单击事件

• 准备一个模板文件
• 通过text插件获取模板内容
• 通过ajax获取数据
• 把数据通过arttemplate编译到模板中
• 把真实内容放到页面中的指定位置

找到功能的入口：添加课程按钮

• 给按钮绑定单击事件

事件触发之后，弹出模态框

• 准备一个模态框的模板
• 通过text插件获取模板内容
• 把模态框放到页面中，并且以模态框呈现出来
  • $.fn.myModal

提交表单

• 把表单变成异步的
  • 给表单绑定submit事件，在事件中：e.preventDefault();
• 获取表单数据
  • $(this).serialize(); //每一个表单的数据都应该具有name属性
• 通过ajax把数据提交到服务器中
  • $.ajax
• 数据提交成功之后
  • a、隐藏模态框
    • $("div.modal").modal("hide");
  • b、刷新课程列表
    • 找到课程管理按钮，trigger触发单击事件

• 给图片绑定事件
  • 事件绑定在容器中，通过事件委托让a触发
    • 注意：容器应该是一个会被删除的容器，千万不要绑定在body/.main

• 1、页面的结构
  • 准备一个课程图片的模板文件，通过text插件获取模板内容
• 2、页面的数据
  • 通过ajax获取相应的接口
    • 参数：cs_id
• 3、把数据放到页面中：使用arttemplate编译模板，获取真实内容
• 4、把真实的内容渲染到页面指定位置

需求：选择第一个下拉框里面的某一项，从而改变第二个下拉框中的内容

事件绑定：给第一个分类的下拉框绑定change事件

根据选中的该项的内容决定第二个下拉框的内容

• 获取该项的内容：$(this).val();
• 如何根据该项的内容获取第二项的内容(数据-->服务器)：
  • ajax请求：/api/category/child

把第二项的内容更新到页面中

• 动态拼接DOM元素

找到功能的入口：点击退出按钮

• 给按钮绑定单击事件
  • 按钮是在index.html直接渲染的，所以js代码应该写在main.js中

事件触发的时候：

• 清除session-->发送ajax请求
• 清除cookie-->jquery.cookie.js：$.removeCookie
• 页面跳转 location.href="login.html";

表格布局中

• <td rowspan="5">111</td> 表示该列跨了5行
• <td colspan="3">555</td> 表示该列跨了5列

在bootstrap中给一个标签设置一个类名为text-center就可以自动实现：文字水平居中

按钮

• 给一个按钮设置一个btn-success -->按钮呈现绿色的背景
• 。。。。。。。。。btn-block -->按钮的宽度=容器的宽度

面板

• $.cookie(键,值) -->值应该是一个字符串类型或者数字类型

• $.cookie(键,值,{ expires:数字类型或者是日期类型的（过期时间） })

• $.cookie(键)

• $.removeCookie(键)

保存一些需要在多个页面中访问的数据(>=2个页面)

• 对于一些有效性要求很高的数据不能使用cookie存储，比如：表格中的数据
• 可以保存当前登陆用户的一些信息：用户的头像、用户名、用户id，可能会在多个页面中访问

不能保存安全性较高的内容

保存的数据大小也是有限制的(不要保存数据太大的内容)

后端：session 用来保存登录状态

用户的id来进行判断当前用户是谁

• 日常没有requirejs，如果是全局函数作为功能的入口，那么如果该模块支持了AMD规范，那么一定是有返回值的，返回值就是那个全局函数
  • 例子：jquery/echarts/arttemplate
• 第三方模块，不支持AMD规范，肯定没有返回值
• 第三方模块，支持了AMD规范，但是它的入口是其他文件提供的，那么该模块也没有返回值，
  • jquery.cookie $.cookie 入口就是：$，$是jquery贡献出来的，
  • bootstrap.js $().modal() 入口就是：$

get请求的参数

• 在页面跳转的时候，把要传递的参数作为url请求路径的一部分 location.href="index.html?id=666&age=18";

• 在目标页面，通过location.search到相关参数 location.search-->"?id=666&age=18"

h5中新增了本地存储技术：localStorage/sessionStorage

• sessionStorage是会话级的存储时间 / localStorage永久存储

• 存储数据：localStorage.setItem("键","值")

  • 切记：所有的值都应该是一个字符串类型的值，如果不是字符串类型，方法内部会把该值转换为字符串类型存储
    • 特殊情况：传递数字也可以 100-->"100" "100"-->"100"

cookie

• 前提：必须要在同一个域名下面的不同页面

• cookie的2种类型：

  • 会话cookie：cookie会在每一次会话之后之后删除
  • 长期cookie：cookie保存一段时间

• 原生JS：

  • 设置一个会话cookie：document.cookie="id=888";
  • 设置一个长期cookie：document.cookie="name=ccc;expires="+new Date("2017-09-12 08:00:00");
  • 获取cookie：document.cookie：获取到当前域名下面的所有cookie值

• jquery.cookie.js操作cookie

  • jquery.cookie.js依赖于jquery
  • 设置一个会话cookie:$.cookie("键","值")
  • 设置一个长期cookie：$.cookie("键","值",{ expires:日期类型或者数字类型 })
  • 获取cookie：$.cookie("键")
  • 移除一个cookie：$.removeCookie("键")

服务器端：session

• 所有的企业级项目都必须登录才能访问

get请求的参数作为url地址的一部分

get请求相对不太安全，常用于传入一些安全性不高的参数(id)

get请求的地址受制于url长度的限制，参数大小有一定的限制

post请求的参数作为请求报文的一部分

post请求相对比较安全，常用语传入一些安全性较高的数据(密码、账号)

post请求的参数大小几乎没有限制

• http://www.baidu.com?name=ccc&id=666-->"?name=ccc&id=666"

• http://www.baidu.com#ccc -->"#ccc"

• http://www.baidu.com -->"http:"

异步刷新-->实现页面的局部刷新-->只刷新页面的一部分内容

  - 减少了资源的重复加载
      - 1、页面响应速度有一定的提升(提升了用户体验)
      - 2、降低了服务器的压力(最重要)

• 不能跨域 -->现在有了一些手段支持跨域：jsonp/反向代理/window.name
• 对SEO不友好 SEO：搜索引擎优化
  • 百度是如何收录你的网站的？
  • 如果通过搜索一个标题就能看到你网站指定内容
    • 网络爬虫搜索某个网站的时候，不会执行任何JS代码-->ajax自然也不会执行
• 不能进行页面导航( <- ->)