前端JS封装、git及Promise

客户端前端开发项目 web前端企业项目开发 前端项目开发的功能点和模块
封装思路
所有dom的操作 都是根据 自己封装的一个对象 去调用
如果 想封装 一个可以去操作dom方法的对象 这个对象就必须包含dom
对象 -> dom -> css、event、append…
通过函数 创建 对象
Function $$ (){
Return 对象
}
自定义一个类
通过这个类 创建包含dom元素的对象
在封装好包含dom的类上 添加事件
目的:为了方便开发人员 -> 给每一个选择上的dom元素 都添加事件
git for windows的使用方法:
1.把代码仓库中的项目迁到本地;
命令:cd 切换到指定的文件夹的位置->希望下载到的位置;
cd+空格+指定的位置
2.git clone 代码仓库的地址;
需要输入用户名、密码 -> 下载到本地;
3.添加代码;
git add. 要添加的文件(提交一个不用加点) /git add. 添加全部文件;
4.git commit -m “提示信息”,可以在每次提交的记录里面显示;
5.git push 推送到远程代码仓库(把本地代码上传到远程代码仓库);
6.git pull(每天到公司的第一步,把远程仓库的代码同步到本地);
markdown 的语法:
#
##
###
####
#####
#表示标题的大小:h1~h5;从大标题到小标题
引用的内容,使用 > 表示,如果引用文件里面,又继续有其他引用文件使用多个
>
列表:
数字.空格
error:不是远程代码仓库的目录
项目:商城项目
书写面向对象代码
1.先用 面向过程 去实现 (了解写的内容的功能)
2.面向对象 考虑整体 -> 细节
> 考虑整体的所需功能
> 可以拆开那些功能 (可以单独拿出来 使用 或者不去使用)-> 链式函数
> 对外公开的 属性 -> 设置某个属性会不会 对对象里面的功能有影响
> 写框架 -> 不写具体逻辑
> 先写核心 再去写周边
HTML5
语义化标签:
header:头部
nav:导航
aside:除了主体内容,不太重要的内容(广告、小文章、推荐)
section:段落、一块、章节
footer:底部、
address:地址
article:文章
time:表示时间、日期
mark:标记
data:数据
input: ①:image:<input type=”image” src=”” width=”” height=””>
②:number:<input type=”number” value=”5″>
③:range:<input type=”range” min=”0″ max=”100″ value=”50″>
④:color:<input type=”color”> 颜色选择器
⑤:date:<input type=”date”> 日期选择器
⑥:url:
⑦:email:
⑧:week
⑨:year
⑩:tel
https://developer.mozilla.org/zh-CN/search?q=input&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=canvas&topic=svg&topic=webgl&topic=mobile&topic=webdev&topic=http&topic=webext
output:在表单中,通过oninput监听input的值
progress:进度条<progress max=”100″ value=”40″></progress>
meter:可以设置最低最高值的区间:
<meter value=”50″ min=”0″ max=”100″ low=”60″
high=”100″>123123</meter>
low:设置必须max值得大于50%:低于最低范围:绿色
高于最低范围,不超过最高范围:黄色
high:超过最高范围:红色
blockquote:引用
<blockquote>31232</blockquote>
details:详细内容,可以通过open控制展开或者隐藏内容
<details open>dsadasdsadasdsadsadad<br>dsadsadsadsa</details>
多媒体:
object:
embed:
audio:
属性:
①:src:音频的路径
②:controls:音频的控制界面
③:autoplay:自动播放
https://developer.mozilla.org/zh-CN/docs/web/html/Element/audio
④:loop:循环播放
⑤:muted:设置是否静音(默认为false)
⑥:volum:设置音频音量,值 0-1.0
事件:
⑦:oncanplay:加载完元数据,至少有一帧可以播放。
⑧:canplaythrough:与canplay差不多,已经加载到足够的数据
⑨:ondurationchange:持续时间被
改变的时候调用
⑩:timeupdate:当前播放的时间被改变的时候调用
⑩①:pause:暂停
⑩②:play:播放
⑩③:ended:停止
⑩④:error:错误
函数function:
pause() 暂停
play()播放
1.prototype是什么,他是怎么使用的?
①是一个原型对象,所有的函数都具备这个原型对象,是一个共享的空间;
②可以通过原型对象,可以给某个类扩展方法或者属性,可以通过改变原型对象,
实现继承。
https://github.com/liuyujing/2017-7-31-jsTest
.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
浏览器兼容:
HTML5属性:
语义化标签:
video:
poster:
sourse:
webAPI获取摄像头及mic
navigater -> mediaDevices( MediaDevices) -> getUserMedia()
可以通过mediaDevices 获得视频或者音频流(MediaStream)
getUserMedia({video:true,audio:true}) -> promise
Then(function(stream){})-> 视频流或者音频流
Audio/video标签 不可以直接播放 MediaStream这种格式的数据 -> 转换
为URL -> URL.createObjectURL(MediaStream);
Promise方法
Promise : 承诺、许诺
执行状态:可以去做 -> 有然后 -> then();(方法) -> then(function(){ 然后发生的事儿 })
也可以不去做->没有然后 -> catch();(方法) -> catch(function(){ 理由 })
创建Promise方法:
可以替代callback
Promise对象的
第一个参数(是函数):
去做的参数-> 如果调用第一个函数(函数),
会执行then里面的回调函数;
第二个参数(是函数):
不去做的参数-> 如果调用第二个函数(函数),
会执行catch里面的回调函数;
new Promise(function (do,reject) {
})
/什么时候不能使用Promise?
//需要多次执行某个回调的时候,不能使用Promise,因为只能执行一次
//就使用callback
MediaRecoder方法:
// MediaRecoder:既可以录音频也可以录视频
//
// 具体录制的是音频还是视频,是根据传入的MediaStream决定是视频还是音频;
//
// 在创建对象的时候,需要传入媒体流 new MediaRecorder(媒体流对象);
固定写法
// 类名
// 函数名
// 属性名
// 监听事件的名字
//
// 可以随便写的
// 形参
// 自己定义的变量
var promise = navigator.mediaDevices.getUserMedia({})pp
promise.then(function (stream) {
}).catch(function (error) {
});
做前端开发工作待遇如何 前端、后端开发工作 前端开发工作内容描述
» 本文来自:前端开发者 » 《前端JS封装、git及Promise》
» 本文链接地址:https://www.rokub.com/38155.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!