Blog

概念

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢 的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。

设计原则（5个）

S – Single Responsibility Principle 单一职责原则

• 一个程序只做好一件事
• 如果功能过于复杂就拆分开，每个部分保持独立

O – OpenClosed Principle 开放/封闭原则

• 对扩展开放，对修改封闭
• 增加需求时，扩展新代码，而非修改已有代码

L – Liskov Substitution Principle 里氏替换原则

• 子类能覆盖父类
• 父类能出现的地方子类就能出现

I – Interface Segregation Principle 接口隔离原则

• 保持接口的单一独立
• 类似单一职责原则，这里更关注接口

D – Dependency Inversion Principle 依赖倒转原则

• 面向接口编程，依赖于抽象而不依赖于具
• 使用方只关注接口而不关注具体类的实现

设计模式的类型

如果从作用上来划分，JavaScript设计模式大概分为五种设计类型：

严格模式是ES5引入的，更好的将错误检测引入代码的方法。顾名思义，使得JS在更严格的条件下运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

变量必须先声明，再使用
function test(){
"use strict";
foo = 'bar'; // Error
}

不能对变量执行delete操作
var foo = "test";
function test(){}

delete foo; // Error
delete test; // Error

function test2(arg) {
delete arg; // Error
}
对象的属性名不能重复
{ foo: true, foo: false } // Error

禁用eval()

函数的arguments参数
setTimeout(function later(){
// do stuff...
setTimeout( later, 1000 );
}, 1000 );

禁用with(){}

不能修改arguments
不能在函数内定义arguments变量
不能使用arugment.caller和argument.callee。因此如果你要引用匿名函数，需要对匿名函数命名。

严格模式的优点：

1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

2. 消除代码运行的一些不安全之处，保证代码运行的安全；

3. 提高编译器效率，增加运行速度；

4. 为未来新版本的Javascript做好铺垫。

• 注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。我们知道在一个正方形内做一个面积最大的圆形，这个圆的半径就为正方形边长的一半。所

以border-radius为50%时，则会形成圆。那么可能有人就会问，border-radius为100%时，对应圆的半径长度不就是正方形的宽高么，这种情况下，为什么还是会

形成一个和值为50%一样的圆形呢？

A: “这个接口我传个 JSON 给你，格式是这样的 ‘[1, 2, 3]’”

B: “等下，这不是数组吗，JSON 应该有键啊，类似这样才行’{ “key”: [1, 2, 3] }’”

A: “不，这就是 JSON 格式的数据”

B: “啊，是吗？” 你是否也有这样的疑惑？ wappalyzer chrome网页分析插件

作为常用的跨域解决方案，怎么能不用原生实现一下呢！

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。 在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。 一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。补充一点，JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。

1
2
3
4
5
6
7
8
9

// 实现目标
JSONP(url, {
  data: {
    key1: value1
  },
  callback: function (data) {
    // data 是服务端返回的数据
  }
})

遇到的问题:

js的浮点数运算不准确，(a + b).toFixed(2)能解决一部分问题，但并不完美。

1
2
3
4
5
6
7
8

0.1 + 0.2 //0.30000000000000004
(0.1 + 0.2).toFixed(2) // 0.30
0.815 + 0.1 // 0.9149999999999999
(0.815 + 0.1).toFixed(2) // 0.91，错误！期望0.92
// toFixed并不是我们通常理解的“四舍五入”，而是“四舍六入五留双”
// 简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为奇应舍去，五前为偶要进一。
(0.225).toFixed(2) // 0.23
(0.235).toFixed(2) // 0.23，错误！期望0.24

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

注：用户代理头：user-agent header。

为什么要加loading的效果

一款好的产品，都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验，而且有效的消除了程序加载等待过程中的枯躁感。loading进度条更是对当前加载进度的一个良好反馈。从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面。带有进度条的loading界面在程序中并不罕见，但是在web中呢？到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度，所以无法直接、便捷的获得页面加载进度的反馈。

meta基础知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

1

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

ios竖屏拍照上传，图片被旋转问题

1
2
3
4
5
6
7

// 1.通过第三方插件exif-js获取到图片的方向
// 2.new一个FileReader对象，加载读取上传的图片
// 3.在fileReader的onload函数中，得到的图片文件用一个Image对象接收
// 4.在image的onload函数中，利用步骤1中获取到的方向orientation，通过canvas旋转校正，重新绘制一张新图
// 注意iPhone有3个拍照方向需要处理，横屏拍摄，home键在左侧，竖屏拍摄，home建上下
// 5.将绘制的新图转成Blob对象，添加到FormData对象中，然后进行校正后的上传操作
// 代码有点杂，待整理后上传，网上应该是可以找到的

ios：DOM元素固定一边，另一边滚动，滚动很卡的问题

1
2

// (横向滚动用的多些)简单粗暴的办法，样式添加如下属性
-webkit-overflow-scrolling: touch;

部分手机第三方输入法会将页面网上挤的问题

1
2
3
4
5
6

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

iPhoneX适配

1
2
3
4
5
6
7
8
9
10
11
12
13

// 1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加样式
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素，也增加上面样式
xxx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
}

某些机型不支持video标签的poster属性，特别是安卓

1
2
3

用图片元素 <img />来代替poster
播放前显示<img />，隐藏 <video />
播放后显示<video />，隐藏 <img />

CSS透明度颜色设置问题

1
2

Android部分不支持 hex写法，推荐用rgba的写法
#0000009c --> rgba(0, 0, 0, 0.61)

flex对低版本的ios和Android的支持问题

1
2
3
4
5
6
7
8

// 使用postcss的autoprefixer插件，自动添加浏览器内核前缀，
// 并且增加更低浏览器版本的配置，自动添加flex老版本的属性和写法
autoprefixer({
    browsers: [
        'iOS >= 6',     // 特殊处理支持低版本IOS
        'Safari >= 6',  // 特殊处理支持低版本Safari
    ],
}),

ios 页面回退到长列表出现灰色遮挡问题

1
2
3
4
5
6

方案1：对列表数据进行缓存，比如redux之类的用法。
方案2：回退时，跳到页面顶部。
const timer = setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
}, 0);

ios 日期转换NAN的问题

1
2

将日期字符串的格式符号替换成'/'。
栗子：'yyyy-MM-dd'.replace(/-/g, '/')

react未知错误异常，导致页面崩溃，空白

1
2

React 16.x 增加了componentDidCatch() 生命周期方法
捕获全局异常来进行页面的友好提示

移动端适配

• 媒体查询
• px2rem
• flexible
• flex
• grid
• 百分比

1. 正则(xxx?typeId=2)

   1 2 3 4 5 6 7 8 9 10

   function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { // return unescape(r[2]); // 中文会乱码 return decodeURI(r[2]); } return null; } getQueryString("typeId") // "2"