Java网页页面的设计工具5

JavaScript对象分类

• 内置对象: 包括string undefined numberundefinedboolean等

• BOM: 浏览器对象模型

• DOM: 文档对象模型

BOM

• Browser Object Model: 浏览器对象模型undefined 包含和浏览器相关的内容.

• window对象: 此对象里面的属性和方法称为全局属性和全局方法undefined 访问时可以省略window.

• window中常见的方法:

  • isNaN(); 判断变量是否是NaN

  • parseInt()/parseFloat(); 将字符串转成整数或小数undefined 还可以将小数转成整数

  • alert(); 弹出提示框

  • confirm();弹出确认框 在括号中输入想问的语句

  • prompt(); 弹出文本框

  • let timer = setInterval(方法undefined时间间隔); 开启定时器

  • clearInterval(timer); 停止定时器

  • setTimeout(方法undefined时间间隔); 开启只执行一次的定时器

• window中常见的属性:

• location: 位置

  • location.href 获取和修改浏览器的请求地址

  • location.reload() 重新加载/刷新

• history: 历史

  • history.length 得到历史页面数量

  • history.back() 返回上一页面

  • history.forward() 前往下一页面

DOM

• Document Object Model 文档对象模型undefined 包含和页面相关的内容

1. 通过选择器找到页面中的元素对象

let 元素对象 = document.querySelector("选择器");

1. 获取和修改元素的文本内容

元素对象.innerText = "xxxx"; 修改

元素对象.innerText 获取

1. 获取和修改控件的值

文本框对象.value = "xxx"; 修改

文本框对象.value 获取

1. 创建元素对象

let 元素对象 = document.createElement("标签名");

1. 添加元素对象

已经在页面中显示的元素对象.append(元素对象);

1. 获取页面body元素对象

document.body

前端MVC设计模式

• MVC设计模式就是将实现一个业务的所有代码划分为3部分.

• M: Model 模型undefined 数据模型 指和数据相关的代码

• V:View 视图undefined 指和页面相关的代码

• C:Controller控制器undefined 指将数据展示到页面中的过程代码

• MVC设计模式的Controller中需要频繁的进DOM操作(查找页面中元素undefined创建元素等)undefined会浪费资源undefinedMVVM设计模式可以解决此问题

前端MVVM设计模式

• MVVM设计模式也是将实现一个业务的所有代码划分为3部分.

• M:Model 模型undefined 数据模型 指和数据相关的代码

• V:View 视图undefined 指和页面相关的代码

• VM: 视图模型undefined 负责将页面中可能发生改变的元素和变量在内存中进行绑定undefined 当需要改变页面中元素时undefined只需要修改变量undefined 视图模型会不断监听变量值的改变undefined 当值发生改变时会从内存中找到对应元素让其跟着改变

VUE

• 目前最流行的前端框架undefined 此框架基于MVVM设计模式

• 两种使用方式:

  • vue.js文件引入html页面中使用

  • 脚手架环境下使用

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

l  Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

l  unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

l  cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• 引入外部的js文件两种方式:

  • 把js文件下载到本地 然后引入的到自己的页面中

• 直接引入一个CDN服务的地址