首页
关于
Search
1
实习日记 03 写下拉多选组件
10 阅读
2
less
10 阅读
3
实习日记02 看项目首页源码
9 阅读
4
时间复杂度与空间复杂度
8 阅读
5
链表
8 阅读
默认分类
实习
相关学习
算法
前端
登录
Search
Typecho
累计撰写
22
篇文章
累计收到
1
条评论
首页
栏目
默认分类
实习
相关学习
算法
前端
页面
关于
搜索到
6
篇与
的结果
2022-06-13
HTML
问题Label标签的作用?Html如何上传文件?HTML5新特性?MVC与MVVM的理解?commonjs规范、ES6 module、AMD、CMD?答案Label标签的作用Label标签一般和input配合使用,当用户点击label标签内容的时候会自动聚焦到和该标签关联的控件上。在input里加上id的属性,label里加for的属性进行连接。就能够点击字体勾选勾选框了Html上传文件将input中的type指定为file就可以上传文件了,上传多文件的话需要在给标签添加multiple。要读取file对象的话需要监听change事件。首先document.getElementByid(‘xx’)获取实例,然后给其添加监听addEventListener(‘change’,(event) => { const files = event.target.files}; log(‘files’,files))语义化标签Header 头部 main主体 nav代表超链接区域 article 可以表示文章、博客等内容 section章节页眉等区域 asdie通常表示侧边栏或者嵌入内容 footer 尾部语义化的优点代码结构清晰,便于维护。 方便其他设备解析。 有利于搜索引擎优化,爬虫会根据不同标签赋予不同权重增强型表单邮箱类型、数值范围、文件导入、图片按钮、颜色选择、日期选择、搜索框、手机号输入框、网址输入框 新增表单元素datalist下拉框(option是选项) progress进度条(设置value控制) meter刻度值新的表单属性 placeholder-默认显示 required-输入框不能为空 aotufocus-自动聚焦 autocomplete-提示写过的信息,默认on,且必须有name属性。Email默认off patten属性,校验正则匹配是否通过minlength和max视频和音频(共同的有src,controls,autoplay,loop)--好像都是共同的Video 方法play()pause()load()加载 属性width,height,controls像素或者宽高,播放条(写上就有播放条了) document.getElementsById(“”)Audio 方法类似 属性autoplay(true) controls() loop()循环播放 muted()静音播放 poster()音频封面Canvas画图和svg绘图Canvas是选定一个区域做画布,然后通过js动态的在这个区域中绘图Svg基于xml可以操作dom,渲染速度慢Svg不容易失帧,更加稳定,容易编程Svg每个形状被当作一个对象,canvas是一像素一像素的进行渲染,两者改变都会重绘地理位置 必须得到用户允许GetCurrentPositon()方法获取定位 可以实现位置距离的计算拖放APIDraggable 为true时开启拖放拖放事件原对象:dragstart 开始拖放 drag拖放中 dragend 拖放结束过程对象:dragenter 源对象开始进入过程对象范围内 dragover 在过程对象范围内移动Dragleave 源对象离开过程对象WebworkerJs是单线程任务,一次只能做一件事。单线程无法发挥cpu优势并且速度较慢阻塞浏览器执行,Webworker会为js创建多线程环境,js在主线程执行,new一个子线程在后台执行,完成计算后会返回给主线程,提高效率。缺点:兼容性不高Webworker的限制1 必须同源 2 dom限制,因为是在子线程,所以无法读取window,parent等主线程页面中的dom对象 3 主线程和子线程无法直接通信,不在一个环境 4 不能alert和conform但是可以使用XMLhttprequest对象发出ajax请求 5 子线程不能读取本地文件,加载的脚本必须来源于网络XMLhttprequest?用户在后台和服务器交换数据的对象XMLhttprequest功能?不重新加载页面就可以获取数据,在页面加载后从服务器请求数据WebstroageLocalstroage和sessionstroage方法 setItem(key,value) getItem(key) clear() removeItem(key)WebSocket是客户端和服务端数据交换的方式,允许服务端主动向客户端推送数据,并且只需要握手一次,就可以创建持久性的连接进行双向数据传输。是浏览器通过js给服务器发送建立WebSocket的请求,连接建立后就可以通过tcp连接直接交换数据。属性:WebSocket.readyState(连接状态) 0未连接1连接建立可以通信2连接正在关闭3关闭了WebSocket事件:Socket.onopen Socket.onmessage Socket.onerror Socket.onclose 分别是连接建立的时候触发,客户端收到服务端数据的时候触发,通信错误触发,关闭的时候触发方法:Socket.send()使用连接发送数据 Socket.close() 关闭连接Commonjs规范Commonjs规范加载模块是同步的,只有加载完成,才能执行后面的操作Module--每个文件就是一个模块,有自己的作用域。Module代表当前模块,是一个对象。Export--该属性是对外输出的接口,其他文件加载该模块就是读取module.exports变量Require--用于加载模块文件导入用require,导出用module.exports,导出的对象需要注意如果是静态的且非常量,后期可能会改动的,要使用函数动态获取。导入的参数可以随意修改module.exports = exports = {} 导出的对象Es6 module和Commonjs module区别导入导出不同,Commonjs使用exports和require es6使用import和export因为Commonjs的require是同步的,所以Commonjs模块规范只适合在服务端,es6无论浏览器还是服务端都可以Commonjs模块输出的是一个值的拷贝,会对加载结果进行缓存,内部再修改这个值则不会同步到外部。es6模块输出的是值的引用(拷贝不同于引用)Commonjs模块是加载时执行,es6是输出接口,使得能够对js模块进行静态分析Commonjs遇到循环依赖的时候,只输出已经执行的部分,后续的输出不会影响已经输出的变量。Es6使用import加载一个变量,变量不会被缓存,取值的时候直接取到最终值Commonjs顶层,this指向当前模块,es6模块this指向undefinedEs6支持加载Commonjs模块,Commonjs不能加载es6模块Es6 module和Commonjs module循环引用的问题循环加载就是a脚本运行依赖b,b脚本执行也依赖aCommonjs是加载时执行,出现循环加载的话只输出已经执行的部分,没有执行的不会输出。Es6对导出模块,变量,对象都是动态引用,遇到import的时候不去执行模块,只是生成一个指向被加载模块的引用。Commonjs一般用于后端nodejs,前端一般是es6的模块规范Commonjs为什么适用于服务端服务端加载模块直接是从硬盘读取,很快,浏览器的话还需要发请求浏览器如果用Commonjs模式的require加载模块,而这个模块需要http请求服务器去拿,并且因为Commonjs是同步的,所以就比较慢,会阻塞后面代码的运行AMD 异步模块定义指模块和模块的依赖可以异步加载,他们的加载不会影响后面语句的运行。AMD一般指requireJS,通过define将代码定义成模块,通过require实现代码模块加载。优缺点:执行早可以发现错误,异步。执行早浪费资源,开发成本高,麻烦难懂。CMD规范专门用于浏览器端的,模块加载是异步的,模块使用的时候才会执行。优缺点:依赖就近,延迟执行,容易在nodejs中运行。依赖spm打包,模块加载逻辑重。MVC与MVVM的理解MVC 是模型,视图,控制器的缩写,是最常见的软件架构之一。其中M是应用程序中用于管理数据的部分,通常就是从后端传过来的数据。V是管理页面的,控制应用数据显示的部分。C是管理和控制页面和数据的、处理用户交互的,将model的数据渲染到view视图中。MVC是单向通信的,m和c必须通过v来承上启下。MVVM:VM是MVVM模式的核心,连接了M与V,是双向数据绑定的,既能够将数据转换成我们看到的页面,也能将页面的数据转化为后端的数据,实现方式是通过dom的监听,通常是利用ViewModel实现了一个observer观察者,监听数据的变化并及时更新。区别:单向与双向 MVC中的Controller变成了viewModel MVVM通过数据来显示视图层而不是节点操作 MVVM主要解决了MVC中大量的DOM操作,提高了性能
2022年06月13日
2 阅读
0 评论
0 点赞
1
2