发表于

@module声明模块

1
2
3
4
/**
* 模块说明
* @module 模块名
*/


@class声明类

1
2
3
4
5
/**
* 类说明
* @class 类名
* @constructor
*/


阅读全文 »

发表于

​ 网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置。

阅读全文 »

发表于

一、rem布局

rem布局解决了一个问题，让设计稿在不同设备上进行等比缩放。 

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
33
34
35
//媒体查询
@media screen and (max-width:359px) and (min-width:320px) {
    html,
    body {
        font-size: 50px !important;
    }
}

@media screen and (max-width:374px) and (min-width:360px) {
    html,
    body {
        font-size: 56.25px !important;
    }
}

@media screen and (max-width:413px) and (min-width:375px) {
    html,
    body {
        font-size: 58.5px !important;
    }
}

@media screen and (max-width:639px) and (min-width:414px) {
    html,
    body {
        font-size: 64.6px !important;
    }
}

@media screen and (min-width:640px) {
    html,
    body {
        font-size: 100px !important;
    }
}
1
2
3
4
5
6
7
8
// onload事件、onresize事件监听
function refreshRem() {
    let docEl = window.document.documentElement;
    let width = docEl.getBoundingClientRect().width;
    if (width > 640) { width = 640 }
    let rem = 100 * (width / 640);
    docEl.style.fontSize = rem + "px";
}

如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 \* (当前页面宽度 / 640)

注：如果字体大小也等比缩放，在大屏手机上会有一种老人机的视觉


阅读全文 »

发表于

一、XYZ轴

以屏幕为平面，X轴的方向为宽的方向，Y轴的方向为高的方向，Z轴的方向垂直于屏幕


阅读全文 »

发表于

一、路径问题

  • 当proxy_pass后有url时，则nginx不会把location中匹配的路径部分代理走
  • 当proxy_pass后没有url时，则会把匹配的路径部分也给代理走
1
2
3
location ^~ /static_js/ { 
    proxy_pass http://js.test.com/; 
}

如上面的配置，如果请求的url是 /static_js/test.html ，会被代理成 test.html。

1
2
3
location ^~ /static_js/ { 
    proxy_pass http://js.test.com;
}

则会被代理到 /static_js/test.htm 。

阅读全文 »

发表于

一、事件循环

  1. mocrotasks 队列的第一个任务取出,放到执行栈中，开始执行
  2. 执行直到当前 stack 为空，于是去检查 microtasks队列
  3. 依次执行microtasks 队列的所有任务，直到 microtasks 队列为空，转 1


注：

  • 如上循环中，注意到第 2 步中执行时可以向 microtasks 队列压入 microtask
  • 一个事件循环里，任务队列分为mocrotasks队列和microtasks队列
  • microtasks队列只有一个，mocrotasks队列可以有多个


二、Macrotask

  • setImmediate
  • setTimeout
  • setInterval


三、Microtask

  • process.nextTick
  • Promise
  • Object.observe
  • MutaionObserver


四、例子

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
33
34
35
36
37
38
39
40
41
42
43
// demo01
(function test() {
    // 1 task A 执行中
    // 2 tasks 队列压入新的 task B
    setTimeout(() => {
        // 9 microtasks 队列为空，于是检查 tasks 队列，取出 B并执行了
        console.log(4)
    }, 0)
    new Promise(resolve => {
            console.log(1)
            for (var i = 0; i < 10000; i++) {
                i == 9999 && resolve()
            }
            // 3 task A 继续执行
            console.log(2)
        })
        // 4 microtasks 队列压入 microtask a
        .then(() => {
            // 6 microtask a 执行中
            console.log(5)
            Promise.resolve(7)
                // 7 microtasks 队列压入 microtask b
                .then(v => console.log(v))
            // microtask a 执行完毕
        })
        // 8 microtasks 队列压入 microtask c
        // 这个 then 执行完后继续检查 microtasks 队列，并一次执行 b，c
        .then(() => {
            console.log(6)
        })
    // 5 task A 执行完毕，检查 microtasks 队列，发现非空，执行 microtasks 队列的第一个 microtask a
    console.log(3)
})();

/**
1
2
3
5
7
6
4
*/


阅读全文 »

发表于 
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
33
34
35
36
37
38
39
/**
 * @param base64Codes
 * 图片的base64编码
 */
function sumitImageFile(base64Codes) {
    var form = document.forms[0];
    //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
    var formData = new FormData(form);
    //convertBase64UrlToBlob函数是将base64编码转换为Blob
    //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
    formData.append("imageName", convertBase64UrlToBlob(base64Codes));

    //ajax 提交form
    $.ajax({
        url: form.action,
        type: "POST",
        data: formData,
        dataType: "text",
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头

        success: function(data) {
            window.location.href = "${ctx}" + data;
        },
        xhr: function() { //在jquery函数中直接使用ajax的XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    console.log("正在提交." + percentComplete.toString() + '%'); 
                }
            }, false);

            return xhr;
        }

    });
}
阅读全文 »

发表于

一、抛题

实现一个函数，运算结果可以满足如下预期结果：

1
2
3
add(1)(2) // 3
add(1, 2, 3)(10) // 16
add(1)(2)(3)(4)(5) // 15


阅读全文 »

发表于

一、使用on方法绑定事件

1
2
3
4
5
6
7
8
9
10
11
window.onload = function(){
    var box = document.getElementById("box")
    box.onclick = function(){
        console.log("我是box1")
    }
    
    box.onclick = function(){
        box.style.fontSize = "18px"
        console.log("我是box2")
    }
}
  • 第一个onclick回调函数会被第二个回调函数覆盖


阅读全文 »

发表于 
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html5桌面通知</title>
</head>

<body>
    <input type="button" value="开启桌面通知" onclick="showDeskTopNotice('','HTML5桌面消息');">
    <script>
    function showDeskTopNotice(title, msg) {
        var Notification = 
            window.Notification 
        || window.mozNotification 
        || window.webkitNotification;
        
        if (Notification) {
            Notification.requestPermission(function(status) {
                // status默认值'default'等同于拒绝 
                // 'denied' 意味着用户不想要通知 
                // 'granted' 意味着用户同意启用通知
                if ("granted" != status) {
                    return;
                } else {
                    var tag = "sds" + Math.random();
                    var notify = new Notification(
                        title, {
                            dir: 'auto',
                            lang: 'zh-CN',
                            //实例化的notification的id
                            tag: tag, 
                            //通知的缩略图
                            icon: 'http://www.yinshuajun.com/static/img/favicon.ico', 
                            body: msg //通知的具体内容
                        }
                    );
                    notify.onclick = function() {
                            //如果通知消息被点击,通知窗口将被激活
                            window.focus();
                        },
                        notify.onerror = function() {
                            console.log("HTML5桌面消息出错！！！");
                        };
                    notify.onshow = function() {
                        setTimeout(function() {
                            notify.close();
                        }, 2000)
                    };
                    notify.onclose = function() {
                        console.log("HTML5桌面消息关闭！！！");
                    };
                }
            });
        } else {
            console.log("您的浏览器不支持桌面消息");
        }
    };
    showDeskTopNotice("", "HTML5桌面消息")
    </script>
</body>

</html>