网易云音乐

用例图

用例图专门需求分析/产品经理分析用户需求的最常用的图
用例图-普通用户
用例图-管理员

线框图

架构图

系统架构图

命令行npm init创建package.json
命令行git init创建.git

根目录创建.gitignore，进入配置需要屏蔽上传到github的文件

ACL(Access Control Layer)访问控制层

SDK(Software Development Kit)软件开发套件，一套API

URL/URI 不能包含汉子，特殊字符 http://x.com/你好 不合语法用encodeURI转换一下

encodeURI 和 encodeURIComponent 的区别

encodeURI 如果你认为这就是一个完整的网址，你想转义，就用encodeURI
encodeURIComponent 如果你想把这个东西作为查询参数或网址后面的一部分，你想转义，就用encodeURIComponent，可以保证作为一个整体变成查询参数

《写给大家的设计书》墙裂推荐

css

text-decoration 属性规定添加到文本的修饰。
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令3. 浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
flex-grow 属性用于设置或检索弹性盒的扩展比率。flex-grow: number|initial|inherit;number:一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用
cursor 属性规定要显示的光标的类型（形状）。pointer：光标呈现为指示链接的指针（一只手）；wait：此光标指示程序正忙（通常是一只表或沙漏）
input[type=text] 选择器：type为text的input
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 flex-end; 项目位于容器的结尾。
calc() 用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
上下左右居中

使用@keyframes规则，你可以创建动画。0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 必需的。定义animation的名称。

keyframes-selector 必需的。动画持续时间的百分比。

css-styles 必需的。一个或多个合法的CSS样式属性

animation:alternate-reverse; 交替重复（比如从大到小，然后从小到大）
visibility: hidden和display: none 的区别
visibility: hidden—-将元素隐藏，但是在网页中该占的位置还是占着。
display: none—-将元素的显示设为无，即在网页中不占任何的位置。
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。none元素永远不会成为鼠标事件的target。除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。CSS3 filter(滤镜) 属性

背景图片模糊，不能在当前元素加filter:blur(5px),应该在伪元素或新建个div加背景图片和模糊

//伪元素实现背景模糊
.page{display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
}
.page::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background:transparent url(folder) no-repeat center;
    filter: blur(5px);
    background-size: cover;
    z-index: -1;
}

//新建div实现背景模糊
.page{display: flex;
flex-direction: column;
height: 100vh;
position: relative;
}
.bg{
	height:100%;
	text-align: center;
	width: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}

background-size: cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
jQuery offset() 方法设置或返回被选元素相对于文档的偏移坐标。$(selector).offset({top:value,left:value})当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。

MVC

{
    let view={
        el:'.page>main',
        template:`
        `,
        render(data){
            $(this.el).html(this.template)
        }
    }
    let model={}
    let controller={
        init(view,model){
            this.view=view
            this.model=model
            this.view.render(this.model.data)
        }
    }
    controller.init(view,model)
}

eventHub
订阅发布模式

如果用户没有传data或传的data是undefined，那么默认执行data={}

1
2
3

render(data={}){
            $(this.el).html(this.template)
        }

1	let needs=['name','singer','url'] <===> let needs='name singer url'.split(' ')

ES6语法

Object.assign(this.data,{ //把右边的值赋给左边
                    id:id,
                    name:attributes.name,
                    singer:attributes.singer,
                    url:attributes.url
                })
//等同于

this.data.id=id
this.data.name=attributes.name,
this.data.singer=attributes.singer,
this.data.url=attributes.url

//ES6语法

Object.assign(this.data,{ //把右边的值赋给左边
                    id，
                    ...attributes， //把attributes所有属性赋给右边
                })

深拷贝

1 2	let string=JSON.stringify(this.model.data) let object=JSON.parse(string) //深拷贝

lock

用一个变量来表示状态，默认this.model.data.status=’open’,如果事件正在发生，就锁住this.model.data.status=’close’，在锁的时候再来就return false，事件结束this.model.data.status=’open’
前端一般喜欢用return false来表示我要阻止后面发生的事情

原生js引入模块

let script1=document.createElement('script')
script1.src='./js/index/page-1-1.js' //相对于html
script1.onload=()=>{
                console.log('加载模块1成功')
            }
document.body.appendChild(script1)

window.location.search获取url查询参数
substring() 方法用于提取字符串中介于两个指定下标之间的字符。

stringObject.substring(start,stop)

start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

array.filter((v=>v)) 过滤v，v是真值就要，不是真值就过滤
jQuery.offset()

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

如何调试手机页面？

将手机连接到PC的同一个网络
用手机访问PC提供的 HTTP 服务

log 大法调试

用于手机没有 console，所以我们使用 alert 调试,在有问题的代码上下加alert(1),alert(2)

用户手机没用 console，所以我们自己造一个 console（如腾讯的 vConsole）

  <div id="consoleOutput" style="position:fixed;width:100%;left:0;bottom:0;height:100px;border:1px solid black;background-color:red;overflow:auto;"></div>
<script>
  window.console={
    log(x){
      let para=document.createElement('p')
      para.innerText=x
      consoleOutput.appendChild(para)
    }
  }
  console.log('york is best')
</script>

自己造一个 console

监听 window.onerror 有奇效只要页面中出现脚本错误，就会产生 onerror 事件。
window.onerror = function(message, file，row， source, lineno, colno, error) { … }
message：错误信息（字符串）。可用于HTML onerror=””处理程序中的event。
file:发生错误的文件
row：发生错误的行数
source：发生错误的脚本URL（字符串）
lineno：发生错误的行号（数字）
colno：发生错误的列号（数字）
error：Error对象（对象）

用例图

线框图

架构图

css

ES6语法

深拷贝

lock

原生js引入模块

getBoundingClientRect获取元素位置

如何调试手机页面？

Comments