发表于 
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
//防止多文件集成成一个文件后 前面的文件忘记写；的情况
;(function(factory) {
      var registeredInModuleLoader;
      if (typeof define === 'function' && define.amd) {
          console.log('a')
          define(factory);
          registeredInModuleLoader = true;
      }

      if (typeof exports === 'object') {
          console.log('b')
          module.exports = factory();
          registeredInModuleLoader = true;
      }

      if (!registeredInModuleLoader) {
          console.log('c')
          var OldCookies = window.Cookies;
          var api = window.Cookies = factory();
          api.noConflict = function() {
              window.Cookies = OldCookies;
              return api;
          };
      }
  }(function() { return { a: 1 } }));

发表于

​ 函数违反单一原则最大一个后果就是会导致逻辑混乱。如果一个函数承担了太多的职责。

不妨试下：函数单一原则 – 一个函数只做一件事 。


埋头就是干：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//图片预加载函数
let delayload = (function() {
    let img = document.querySelector("#img");
    img.src = "loading.gif";
    let newImg = document.createElement("img");
    newImg.onload = function() {
        img.src = newImg.src;
    }
    return function(src) {
        newImg.src = src;
    }
})();

delayload("jimmy.jpg");


遵循一个函数只做一件事后：
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
//将背景图设置，和图片加载的src修改分开
let delayload = (function() {
    let img = document.querySelector("#img");
     img.src = "loading.gif";
    return {
        setSrc: function(src) {
            img.src = src;
        }
    }
})();


let proxy = (function() {
    let img = document.createElement('img');
    img.onload = function() {
        delayload.setSrc(img.src);
    }
    return {
        setSrc: function(src) {
            img.src = src;
        }
    }
})();

proxy.setSrc("jimmy.jpg");

发表于

一、变量

1
2
3
4
5
6
7
8
9
10
11
12
$fontStack : Helvetica,sans-serif;
$primaryColor: #333;
body {
    font-family: $fontStack;
    color: $primaryColor;
}

/*编译结果*/
body {
    font-family: Helvetica, sans-serif;
    color: #333;
}


二、嵌套

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
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

/*编译结果*/
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}


阅读全文 »

发表于

金融有一个很重要的原则，应该是金融守恒，金融是一个守恒零和游戏。资金在流动的过程中，价值不会无缘无故产生，也不会无缘无故消失。真正产生价值的应该是制造业。只有实业，在生产经营的过程中才产生财富。因此，金融和实业之间的关系应该是，金融帮助实业提高效率，实业帮助金融创造价值。


将新投资人的钱向老投资者支付利息和短期回报以造成骗局赚钱的假象从而吸引更多投资者进入骗局


庞氏骗局，一般人说就是“拆东墙补西墙”。利用新投资人的钱来向老投资者支付利息和短期回报，以制造赚钱的假象进而骗取更多的投资。而这种拆东补西的做法，本身不一定是错的。因为这就是金融。


拿了钱却做不到这个承诺回报的收益，那就是骗局了。


是否骗局，最大的导向点在于最上线。最上线如果一直稳如泰山，那就不是骗局


庞氏骗局在中国又称“拆东墙补西墙”，“空手套白狼”。简言之就是利用新投资人的钱来向老投资者支付利息和短期回报，以制造赚钱的假象进而骗取更多的投资。


发表于

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将 prop 传递数据给子组件一样，传递到父组件：

1
2
3
<div class="child">
    <slot text="hello from child"></slot>
</div>

在父级中，具有特殊特性 slot-scope 的 

1
2
3
4
5
6
7
8
<div class="parent">
    <child>
        <template slot-scope="props">
            <span>hello from parent</span>
            <span>{{ props.text }}</span>
        </template>
    </child>
</div>

如果我们渲染上述模板，得到的输出会是： 

1
2
3
4
5
6
<div class="parent">
    <div class="child">
        <span>hello from parent</span>
        <span>hello from child</span>
    </div>
</div>

发表于

一、实现原理

根据用户设置的字体将某一个字符绘制在canvas上（fillText()），并提取像素信息（getImageData()），然后和默认字体进行比对，如果像素不一致，说明字体生效，说明字体不生效。

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
let isSupportFontFamily = function(fontFamily) {
    if (typeof fontFamily !== 'string') {
        return false;
    }


    let defaultFontFamily = 'Arial';
    if (fontFamily.toLowerCase() === defaultFontFamily.toLowerCase()) {
        return true;
    }


    let defaultLetter = 'a';
    let defaultFontSize = 100;


    // 使用该字体绘制的canvas
    let width = 100;
    let height = 100;
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;


    // 全局一致的绘制设定
    context.textAlign = 'center';
    context.fillStyle = 'black';
    context.textBaseline = 'middle';


    let getFontData = function(fontFamily) {
        context.clearRect(0, 0, width, height);
        context.font = defaultFontSize + 'px ' + fontFamily + ', ' + defaultFontFamily;
        context.fillText(defaultLetter, width / 2, height / 2);
        let data = context.getImageData(0, 0, width, height).data;
        return [].slice.call(data).filter(function(value) {
            return value !== 0;
        });
    };

    return getFontData(defaultFontFamily).join('') !== getFontData(fontFamily).join('');
};

发表于

一、利用canvas标签

一般情况下，网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体，这样可以通过收集这些个体的数据，通过分析后更加精准的去推送广告（精准化营销）或其他有针对性的一些活动。

Cookie技术是非常受欢迎的一种。当用户访问一个网站时，网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符（UUID）的信息，并通过这个信息将用户所有行为关联起来。

帆布指纹识别使用到了HTML5标签的一个特点：在绘制canvas图片时，同样的canvas绘制代码，不同机器和浏览器绘制的图片特征是相同并且独一无二的，这样以来，提取最简单的md5值便可以唯一标识和跟踪这个用户。

1
2
3
4
5
6
7
8
9
10
11
12
13
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var txt = 'http://security.tencent.com/';
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.textBaseline = "tencent";
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText(txt, 4, 17);
var b64 = canvas.toDataURL().replace("data:image/png;base64,","");


阅读全文 »

发表于

事务控制语句

  • BEGIN或START TRANSACTION；显式地开启一个事务；
  • COMMIT或COMMIT WORK，COMMIT提交事务，并使已对数据库进行的所有修改称为永久性的；
  • ROLLBACK或ROLLBACK WORK，结束用户的事务，并撤销正在进行的所有未提交的修改；
  • SAVEPOINT identifier；SAVEPOINT允许在事务中创建一个保存点，一个事务中可以有多个SAVEPOINT；
  • RELEASE SAVEPOINT identifier；删除一个事务的保存点，当没有指定的保存点时，执行该语句会抛出一个异常；
  • ROLLBACK TO identifier；把事务回滚到标记点；
  • SET TRANSACTION；用来设置事务的隔离级别。InnoDB存储引擎提供事务的隔离级别有READ UNCOMMITTED、READ COMMITTED、REPEATABLE READ和SERIALIZABLE。


阅读全文 »

发表于

REGEXP 操作符

模式 描述
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配'\n'或'\r' 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$也匹配 '\n'或'\r'之前的位置。
. 匹配除"\n"之外的任何单个字符。要匹配包括 '\n'在内的任何字符，请使用象 '[.\n]'的模式。
[...] 字符集合。匹配所包含的任意一个字符。例如， '[abc]'可以匹配 "plain"中的'a'。
[^...] 负值字符集合。匹配未包含的任意字符。
* 匹配前面的子表达式零次或多次。例如，zo* 能匹配"z"以及 "zoo"。* 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，'zo+'能匹配 "zo"以及"zoo"，但不能匹配 "z"。+ 等价于{1,}。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob"中的 'o'，但是能匹配 "food" 中的两个 o。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。 
1
2
-- 查找name字段中以元音字符开头或以'ok'字符串结尾的所有数据
SELECT name FROM person_tbl WHERE name REGEXP '^[aeiou]|ok$';

发表于 
1
select _column,_column from _table [where Clause] [limit N][offset M]
  • limit N : 返回 N 条记录
  • offset M : 跳过 M 条记录, 默认 M=0
  • limit N offset M :从第 M条记录开始, 返回N 条记录
  • limit M,N : 相当于 limit N offset M , 从第 M 条记录开始, 返回 N 条记录