Polande's Blog

保持好奇心；用行动去创造

js

JS-使用AOP思想实现统计函数时间

polandemecode， js， 前端

平时在做开发的时候，有的时候会看到介绍说这个方法没有那个方法效率性能高，那么到底怎么高呢，大多数只是猜猜或者看书上介绍的原理而已。但是我们如何做到定量统计某个函数或者方法的性能呢。

例如往页面中插入大量dom元素的时候，我们一般会用createElement然后再append，然后如果你查资料你会看到建议你使用createDocumentFragment， 因为这个是先见元素插入到内存你中，然后再一次性插入到dom中，避免了频繁重绘。按道理来说确实是这样，那我们怎么亲自见证一下呢。

所以有个方法就是统计函数的执行时间，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
function appendDom() {
var d = +new Date;
for(var i = 0; i < 100000; i++) {
var div = document.createElement('div');
div.className = "append";
div.setAttribute('index', i);
div.textContent = "dom" + i; //(text);
document.body.appendChild(div);
}
console.log((+new Date) - d + 'ms', 'appendDom');
}
 
appendDom();

最后可以得到函数的输出的时间，但是这种方法有个缺点就是侵入性太大了，用起来也不是太方便。总不能每个函数都要这样吧。

所以来正题了，使用aop的思想，aop又叫切面函数 Aspect-oriented programming  从侧面函数侧面出发，不去侵入函数内部，来做一些相应的统计或者非核心逻辑的功能。 继续阅读“JS-使用AOP思想实现统计函数时间”

使用RSA和AES加密传输数据 js到php

polandemejs， 加密， 好玩， 安全， 未分类使用RSA和AES加密传输数据 js到php有6条评论

感觉写这篇还挺是时候的，虽然本应该在上一篇之后就应该写这篇的。一直拖到现在，拖到了网易”被拖“。

上篇中说到使用aes加密，但是无论如何他还是很容易破解的，而且可以说无难度破解，首先如果想在传输过程中破解，就算你是传输的加密的数据，但是他只要同时劫持到你的js，看一下加密的方式，就可以反向破解出来，是没有任何难度，那么你加密不加密都是没有意义的。原因主要是因为aes本身采用的是对称加密方式，所以会产生上面的结果。所以我们使用rsa加密，但rsa加密过程计算量比较大，比较慢，可以用它来加密小量信息，所以我们可以用它来加密aes的key，然后在用aes加密，这样就算劫持到破解难度也增加到了破解rsa加密上去了，理论上还是很有难度的。如图：

继续阅读“使用RSA和AES加密传输数据 js到php”

使用AES加密传输数据 js到php

polandemejs， 加密， 安全， 密码学使用AES加密传输数据 js到php有1条评论

会写hello world 的都应该知道明文传输敏感信息是非常不好的一个习惯。这两天要做个东西，使用的是AES加密算法，但是遇到了一些坑。这里总结整理一下。

前端是用js，后台用php，分别使用的是：cryptoJs，mcrypt。

使用aes加密，所以考虑的加密解密一致性需要考虑的就有mode,和padding。 继续阅读“使用AES加密传输数据 js到php”

最近好懒

polandemejs， 项目最近好懒无评论

一直要总结一些东西，总是没有去整理总结，把这一段时间做的东西整理列出来，需要过段时间，一点点整理。

  1. canvas画图    主要技术事件监听、碰撞检测、边缘检测 演示地址                                                     (PS:除了效果和ys大神的一样，其他的每一个代码都是自己思路写的，一直想去对比，最近太懒啦 o(╯□╰)o);
  2. chrome显示豆瓣歌词插件 源码
  3. shareMe(hoho)     主要技术  angular + Express + mysql (路由及层次逻辑)  、socket  demo
  4. jsonp跨域、js事件机制
  5. promise规范、requireJs、hybrid开发，angularJs总结

大公司里怎样开发和部署前端代码？

polandemejs， 前端大公司里怎样开发和部署前端代码？无评论

这是一篇来自知乎@张云龙前百度工程师，曾负责百度 前端集成解决方案 的核心设计与开发工作的回答，原文请见大公司里怎样开发和部署前端代码？  和他私聊了一会感觉很热心的回答了我很多小白问题，而且答案真的很有帮助，是他所说的“细思极恐”。

下面是原文：

我现在称这个领域为【前端工程】。没错，这是我最爱唠叨的问题域。
这是一个非常有趣的 非主流前端领域，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。 继续阅读“大公司里怎样开发和部署前端代码？”

两行代码实现tab标签

polandemejs， 前端两行代码实现tab标签无评论

这次写words这个demo的时候用到一个导航想用tab标签加ajax实现，所以就写了一个tab标签：写的很简单，不过原理都实现了。写面贴出来一下

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
<!doctype html>
<head>
<mete charset="utf-8">
<title >tab 标签 </title>
<style>
ul li {
float: left;
margin: 20px;
}
.box {
width: 100px;
height: 100px;
display: none;
border: 1px solid gray;
}
.show {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li>list0</li>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
<div class="wrap">
<div class="box show">000000000000000000</div>
<div class="box">1111111111111111</div>
<div class="box">222222222222222222</div>
<div class="box">33333333333333</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var li = $("nav li");
li.click(function(){
var boxInd = $(this).index();
$(".box").removeClass("show").eq(boxInd).addClass("show");
});
</script>
</body>
</html>

其实道理却是很简单，就是找到当前点击的li的索引，然后显示box的这个索引让其显示。

js代码规范

polandemejs， 前端js代码规范无评论

大括号

尽量使用大括号，甚至实在可选的情况下，都使用大括号。很多情况下如果只有一条语句可以省略大括号，但是为了一致性和更方便升级，最好都使用大括号。
例如：

1
2
3
4
//不提倡  
for (var i = 0; i &lt; 10; i += 1)
    alert(i);
 

但是如果以后想要在这个循环中增加就会出现：

1
2
3
4
for （var i = 0; i &lt; 10; i += 1)
    alert(i);
    alert(n);
 

这样就不是不规范了，而是错误了，所以无论何种情况都一直使用大括号：

1
2
3
4
5
//提倡
for (var i = 0; i &lt; 10; i += 1) {
    alert(i);
}  
 

大括号位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    //提倡
    function foo() {
        return {
            name: "polande";
        }
    }
 
    if (a &gt; b) {
        return a;
    } else {
        return b;
    }
 
 

因为js会默认为语句末尾添加分号这样有时就会出现问题

空格

使用空格比较好的位置：

  • 在分开for循环的各个部分的分号之后: 例如， for (var i = 0; i < 10; i += 1)
  • 在for循环初始化的多个变量中：for (var i = 0, max = 10; i < 10; i += 1)
  • 在限定数组项的逗号后面: var a = [1, 2, 3];
  • 对象属性的逗号之后和将属性名和属性值分开的冒号之后: var o = {a: 1, b: 2};
  • 分开函数中各个参数的逗号之后: myFun(a, b, c)
  • 在函数声明的大括号之前: muFun() {}
  • 在匿名函数表达式之后: var myFun = function () {};
  • 分隔操作符和操作例如在 +, -, *, /, <, >, +=, >=, <=, ===, &&, ||, 等之后使用
  • 可以使用空行来分隔不同的单元

命名约定

  • 构造函数首字母大写
    var admin = new Person();
  • 单词组合形式的:
    • 构造函数使用大驼峰式: MyFun();
    • 函数名和方法名使用小驼峰: myFun();
    • 非函数的变量使用: fist_name;

注释

注释要适当，不要太多
单行注释 // 注释符前留有一个空格
多行注释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*  
* 星号对齐    
*/  
 
函数和方法注释:  
 
/**
* 方法说明
* @method 方法名
* @for 所属类名
* @param {参数类型} 参数名 参数说明
* @return {返回值类型} 返回值说明
*/
 

<<<<<<< HEAD