s

发表于 | 分类于 ， ，

React 的实践从去年在 PC QQ家校群开始，由于 PC 上的网络及环境都相当好，所以在使用时可谓一帆风顺，偶尔遇到点小磕绊，也能够快速地填补磨平。而最近一段时间，我们将手Q的家校群重构成 React，除了原有框架上存在明显问题的原因外，选择React也是因为它确实有足够的吸引力以及优势，加之在PC家校群上的实践经验，斟酌下便开始了，到现在已有页面在线上正常跑起。


由于移动端上的网络及环境迥异，性能偏差。所以在移动端上用 React 时，遇到了不少的坑点，也花了一些力气在上面。关于在移动端上的优化，可看我们团队的另一篇文章的 React移动端web极致优化


一提到优化，不得不提直出

关于这块可以查看 Node直出理论与实践总结，这篇文章较详细的分析直出的概念及一步步优化，也结合了 手Q家校群使用快速的数据直出方式来优化性能的总结与性能数据分析


一提到 React，不得不提同构

同构基于服务端渲染，却不止是服务端渲染。


阅读全文 »

发表于 | 分类于 ，

背景


随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。

前端安全


近几年，美团业务高速发展，前端随之面临很多安全挑战，因此积累了大量的实践经验。我们梳理了常见的前端安全问题以及对应的解决方案，将会做成一个系列，希望可以帮助前端同学在日常开发中不断预防和修复安全漏洞。本文是该系列的第二篇。
今天我们讲解一下 CSRF，其实相比XSS，CSRF的名气似乎并不是那么大，很多人都认为“CSRF不具备那么大的破坏性”。真的是这样吗？接下来，我们还是有请小明同学再次“闪亮”登场。

CSRF攻击


CSRF漏洞的发生


相比XSS，CSRF的名气似乎并不是那么大，很多人都认为CSRF“不那么有破坏性”。真的是这样吗？
阅读全文 »

发表于

一、prototype

proto是每个对象都有的一个属性，而prototype是函数才会有的属性!!!
使用Object.getPrototypeOf()代替proto!!!

几乎所有的函数（除了一些内建函数）都有一个名为prototype（原型）的属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。prototype是通过调用构造函数而创建的那个对象实例的原型对象。hasOwnProperty()判断指定属性是否为自有属性；in操作符对原型属性和自有属性都返回true。
示例：自有属性&原型属性

1
2
3
4
5
var obj = {a: 1};
obj.hasOwnProperty("a"); // true
obj.hasOwnProperty("toString"); // false
"a" in obj; // true
"toString" in obj; // true12345

示例：鉴别原型属性

1
2
3
function hasPrototypeProperty(obj, name){
    return name in obj && !obj.hasOwnProperty(name);
}
阅读全文 »

发表于 | 分类于 ，

概述

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

　　为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密

HTTP和HTTPS的基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

　　HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

　　HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

阅读全文 »

发表于 | 分类于 ，

压缩方式

前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webpack，这些压缩也很重要，基本上能压缩50%以上，下面我们对压缩文件来个对比，如图所示，这是未压缩的

这是压缩后的

阅读全文 »

发表于 | 分类于

参考 https://stenciljs.com/docs/introduction

重新渲染整个组件，如React。当组件中的状态发生改变时，在内存中计算出（新的）DOM 结构后与已有的 DOM 结构进行对比。实际上，这是非常昂贵的。因而采取（将真实 DOM）映射为虚拟 DOM ，通过对比状态变化前后虚拟 DOM 的不同，计算出变化后再改变真实 DOM 结构。这个过程称为调和（reconciliation）。

通过（添加）观察者监测变化，如 Angular 和 Vue.js。应用中状态的属性会被监测，当它们发生变化时，只有依赖了（发生变化）属性的 DOM 元素会被重新渲染。

阅读全文 »

发表于 | 分类于 ，

小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。

经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统HTML5还是有明显的区别，主要区别在于：


1、开发工具不同；

区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。

2、开发语言不同；

小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。

3、组件封装不同；

小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。


阅读全文 »

发表于 | 分类于 ， ，

基础调用

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
 const  myScroll = new IScroll("#wrapper",{
        probeType: 3,
//      momentum: false,//关闭惯性滑动
        mouseWheel: true,//鼠标滑轮开启
        scrollbars: true,//滚动条可见
        fadeScrollbars: true,//滚动条渐隐
        interactiveScrollbars: true,//滚动条可拖动
        shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩
        useTransform: true,//CSS转化
        useTransition: true,//CSS过渡
        bounce: true,//反弹
        freeScroll: false,//只能在一个方向上滑动
        startX: 0,
        startY: 0,
//      snap: "li",//以 li 为单位
    });
    myScroll.on('scroll',function(){});
    myScroll.on("scrollEnd",function(){});
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
阅读全文 »

发表于 | 分类于 ， ，

自定义变量

1
2
3
4
$color:pink;
.test1{
    background-color:$color;
}

插入一个变量

1
2
3
4
$right:right;
.test2{
    border-#{$right}:1px solid #000;
}

子元素书写

1
2
3
4
5
.text3{
    .text33{
        border:1px solid;
    }   
}

样式的加减乘除

1
2
3
4
5
6
$paramer:3;
.text4{
    height:(1px+3px);
    width: (96px/6);
    right: $paramer*4;
}
阅读全文 »

发表于 | 分类于 ，

html

1
2
3
4
<div class="container">
    <div class="wrapper">
    </div>
</div>

main

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
 * options
 * 1. container
 */
let config = {
    parent:'.container',
    ele:'.wrapper',
    scrollX:true,
    scrollY:true
}
class touchmove{
    constructor(options){
        this.options = $.extend({},true,config,options)
        this.target = document.querySelector(this.options.ele)
        this.init()
    }
}
touchmove.prototype = {
    init(){
        var _this = this,
        // 开始的偏移
        startY = 0,
        startX = 0,
        // 保存的偏移
        translateY = 0,
        translateX = 0,
        // 手指坐标
        startFingerX = 0,
        startFingerY = 0,
        maxHeight =  this.target.offsetHeight - (document.documentElement.offsetHeight - this.target.offsetTop),
        maxWidth = this.target.scrollWidth - (document.querySelector(this.options.parent).scrollWidth),
        lastTime = 0; //按下的时间
        _this.target.addEventListener('touchstart',function (e) {
            e.stopPropagation();
            if(_this.options.scrollY){
                startFingerY = e.changedTouches[0].clientY;
                _this.target.style.WebkitTransition = _this.target.style.transition = '';
                startY = translateY;
            }
            if(_this.options.scrollX){
                startFingerX = e.changedTouches[0].clientX;
                _this.target.style.WebkitTransition = _this.target.style.transition = '';
                startX = translateX;
            }
            lastTime = Date.now();
            // console.log(lastTime);
        });
        _this.target.addEventListener('touchmove',function (e) {
            e.stopPropagation();
            if(_this.options.scrollY){
                var nowFinger = e.changedTouches[0].clientY,
                    distance = nowFinger - startFingerY;
                translateY = distance + startY;
                // 弹性
                if(translateY > 0 ){ //拖动系数. 拉力的感觉
                    translateY *= 0.4;
                }else if( translateY < -maxHeight){  //最后.
                    translateY = distance*0.4 + startY;
                }
            }
            if(_this.options.scrollX){
                var nowFinger = e.changedTouches[0].clientX,
                    distance = nowFinger - startFingerX;
                translateX = distance + startX;
                // 弹性
                if(translateX > 0 ){ //拖动系数. 拉力的感觉
                    translateX *= 0.4;
                }else if( translateX < -maxWidth){  //最后.
                    translateX = distance*0.4 + startX;
                }
            }
            _this.shift(translateX,translateY);
            e.preventDefault()
        })
        _this.target.addEventListener('touchend',function (e) {
             /*
                惯性原理:
                产生的速度 = 移动距离 / 移动时间
                距离 = 松开的坐标 - 上次的坐标  (距离差)
                时间 = 松开的时间 - 按下的时间  (时间差)
             */
            if(_this.options.scrollY){
                var nowFinger = e.changedTouches[0].clientY,
                    distance = nowFinger - startFingerY,  //距离差
                    timeDis = Date.now() - lastTime,  //时间差
                    speed = (distance / timeDis)*100;
                // console.log(speed);  //很小 *倍数
                // 惯性
                translateY += speed;
                // 边界 ,弹回去
                if(translateY > 0){
                    translateY = 0;
                }else if(translateY < -maxHeight){
                    translateY = -maxHeight;
                }
            }
            if(_this.options.scrollX){
                var nowFinger = e.changedTouches[0].clientX,
                    distance = nowFinger - startFingerX,  //距离差
                    timeDis = Date.now() - lastTime,  //时间差
                    speed = (distance / timeDis)*100;
                // console.log(speed);  //很小 *倍数
                // 惯性
                translateX += speed;
                // 边界 ,弹回去
                if(translateX > 0){
                    translateX = 0;
                }else if(translateX < -maxWidth){
                    translateX = -maxWidth;
                }
            }
            // 添加贝塞尔曲线
            _this.target.style.WebkitTransition = _this.target.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
            _this.shift(translateX,translateY);
        })
    },
    shift(x,y){
        this.target.style.WebkitTransform = this.target.style.transform = 'translate('+x+'px,'+y+'px)';
    }
}