发表于   |  
  • 隐藏内部实现

  • 依靠你能控制的对象，好过依靠你不能控制的对象，以免日后受他控制

  • 类

  • 单一权责原则：只有一条修改理由
  • 开放-闭合原则：只许扩展，不许修改
  • 低耦合高内聚原则
  • 依赖倒置原则：依赖于抽象，而不是具体实现细节
  • 并发基础定义
  • 限定资源， 并发环境中有着固定尺寸或数量的资源
  • 互斥，每一时刻仅有一个县城能访问共享数据或共享资源
  • 线程饥饿，一个或一组线程在很长时间内或永久被禁止
  • 死锁 两个或多个线程互相等待执行结束
  • 活锁 执行次序一致的线程，每个都想要起步，但发现其他线程已经“在路上”
  • 并发模型
  • 生产者-消费者模型
  • 读者-作者模型
  • 宴席哲学家
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
//两点触控旋转角度和方向求解代码
//这两个方法属于向量计算，具体原理请阅读本文最后的参考文献

_getRotateDirection(vector1,vector2) {

	return vector1.x * vector2.y - vector2.x * vector1.y;

}  

_getRotateAngle(vector1,vector2) {

	let direction = this._getRotateDirection(vector1,vector2);

	direction = direction > 0 ? -1 : 1;

	let len1 = this._getDistance(vector1.x,vector1.y);

	let len2 = this._getDistance(vector2.x,vector2.y);

	let mr = len1 * len2;

	if(mr === 0) return 0;

	let dot = vector1.x * vector2.x + vector1.y * vector2.y;

	let r = dot / mr;

	if(r > 1) r = 1;

	if(r < -1) r = -1;

	return Math.acos(r) * direction * 180 / Math.PI;

}

发表于   |  

参考自github/umdjs

  • UMD (Universal Module Define) ，即通用模块定义。目前已有的模块定义规范有commonJS,Node,AMD,CMD,全局挂载等方式，如何同时适配两种或多种，做到一劳永逸是有套路的，具体尝试如下：

  • A:基于AMD和全局挂载的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    (function(root, factory){
    	if(typeof define === 'functon' && define.amd){
    		define(['b'], factory);
    	}
    	else {
    		root.amdWeb = factory(root.b);
    	}
    }(this, function(b){
    	return {}
    }))

  • 在A的基础上挂载全局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /*当你使用AMD模式的时候，有些脚本还是
    要去加载全局变量，这时需要在AMD模式尾巴上挂载全局变量*/
    (function(root, factory){
    	if(typeof define === 'function' && define.amd){
    		define(['b'], function(b){
    			//do something
    			return (root.amdWebGlobal = factory(b))
    		})
    	}
    	else {
    		root.amdWebGlobal = factory(root, b)
    	}
    }(this, function(b){
    	return {}
    }))
阅读全文 »

发表于   |  

介绍node环境下可执行的command

  • –version, -v, 当前Node版本
  • –help, -h, 罗列可执行命令
  • –eval, -e, 执行
  • –print, -p, 执行并返回
  • –check, -c, 不执行脚本，语法检测
  • –interactive, -i
  • –require module, -r, 预加载模块，module模块名或者路径
  • –no-deprecation, 不提示弃用提示
  • –trace-deprecation, 跟踪弃用信息
  • –throw-deprecation, 抛出弃用信息
  • –no-warning, 打印警告提示(v6)
  • –trace-warning, 跟踪警告(v6)
  • –throw-warning, 抛出警告(v6)
  • –trace-sync-io, 异步执行出错时打印栈
  • –zero-fill-buffers
  • –preserve-symlinks

发表于   |  
  • javascript运行在宿主环境中，浏览器、node都是宿主。
  • javascript中常用debugger断点查看脚本运行状态，在浏览器环境下(这里以Chrome为例，其他高级浏览器雷同)按F12键可以看到调试工具栏，选择Sources标签栏，左侧是页面引入的资源列表，中间是对应源码，右侧就是调试界面，右侧最顶部的按钮依次是：脚本暂停，跳过下一个执行阶段，进入下一个执行阶段，跳出当前方法，阻止断点，异常暂停。
  • 按钮下面提供Watch(监听)、Call Stack(调用栈)、Scope(作用域)、Breakpoints(断点记录)、DOM Breakpoints、XHR Breakpoints(XHR断点)、EventListener Breakpoints(事件断点)等信息。关于按钮之下的信息在这里不扩开讲，自己可以尝试一下，对于查错很有帮助。这里主要讲下在node环境中，怎么像浏览器环境调试javascript一样调试nodejs代码。
    阅读全文 »

发表于   |  
  • 编写静态HTML页面的时候时不时会遇到空格对其的情况，比如Form表单的title对其，因为中文字体不同宽度不同，完美处理要搞事。
  • 在HTML中有5种空格实体。他们拥有不同的宽度，经常使用的是”&nbsp;”，这个大家都熟悉，是由空格键输入的结果。除了这个，其他还有（&ensp;&emsp;&thinsp;&zwnj;&zwj;）

    &nbsp;

  • 全称No-Break Space，占据宽度受字体影响明显。

    &ensp;

  • 半角空格，全称En Space，占据宽度1/2中文宽度，基本上不受字体影响。

    &emsp;

  • 全角空格，全称Em Space，占据宽度1/1中文宽度，基本上不受字体影响。

    &thinsp;

  • 窄空格，全称Thin Space，占据1/6 em宽度。

    &zwnj; &zwj;

  • 零宽不连字和零宽连字，多用于打印排版

    其他

  • 空格(&#x0020;)、制表位(&#x0009;)、换行(&#x000A;)和回车(&#x000D;)(&#12288;)等；

发表于   |  

不足之处

  • 初始化之后无法取消
  • 不设置回调函数，Promise内部抛出错误，不会反应到外部
  • 处于Pending状态时，不清楚具体处于开始阶段还是即将结束阶段

    用武之地

  • 内部状态不受外部干扰
  • 避免无限套回调函数

发表于   |  

内容来源：码农网

  • 常用命令

    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
       	console.log('hello');
       	console.info('信息');
       	console.error('错误');
       	console.warn('警告');
    </script>

  • 信息分组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
    	console.group("第一组信息");
    		console.log("第一组第一条:我的博客(http://www.ido321.com)");
    		console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
    　　console.groupEnd();
    	console.group("第二组信息");
    		console.log("第二组第一条");
    		console.log("第二组第二条:欢迎你加入");
    	console.groupEnd();
    </script>
阅读全文 »

发表于   |  

内容主要来源于网络文章4byte

  • 文章主旨是为了进一步理解闭包如果运作，最好是先自己动脑想一下答案再看解题思路
  • 直接抛题
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function func(closure, more){
        log(more);
        return {
            func: function(innerClosure){
                return func(innerClosure, closure);
            }
        };
    }
    function log(s){
        var _d = document.createElement('div');
        _d.innerHTML = s;
        document.body.appendChild(_d);
    }
    var temp = func(0);
    temp.func(1);
    temp.func(2);
    temp.func(3);
    var temp2 = func(0).func(1).func(2).func(3);
    var temp3 = func(0).func(1);
    temp3.func(2);
    temp3.func(3);
    //Question: 以上函数执行后出现在body上的结果是什么？
阅读全文 »

发表于   |  
  • javscript集合对象：Array,Object,Set,Map
  • 遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
  • Iterator的作用有三个：
    • 为各种数据结构提供一个统一的、简便的访问接口
    • 数据结构的成员能够按某种次序排列
    • ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。
  • Iterator的遍历过程：
    • 创建一个指针对象，指向当前数据结构的起始位置。本质是一个指针对象。
    • 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
    • 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
    • 不断调用指针对象的Next方法，直到它指向数据结构的结束位置。
    • 每次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
  • 自定义实现一个拥有Iterator接口的对象，必须要在Symbol.iterator的属性上部署遍历器生成方法(原型链上也可以)
    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
    class RangeIterator{
    	constructor(start, stop){
    		this.value = start;
    		this.stop = stop;
    	}
    	[Symbol.iterator](){ return this;}
    	next(){
    		var value = this.value;
    		if(value < this.stop){
    			this.value++;
    			return {done:false,value: value};
    		} else {
    			return {done: true}
    		}
    	}
    }
    //原型链
    function Obj(value){
    	this.value = value;
    	this.next = null;
    }
    Obj.prototype[Symbol.iterator] = function(){
    	var iterator = {
    		next : next
    	}
    	var current = this;
    	function next(){
    		if(current){
    			var value = current.value;
    			current = current.next;
    			return {
    				done: false,
    				value: value
    			}
    		} else {
    			return {done: true}
    		}
    	}
    	return iterator;
    }

    var one = new Obj(1);
    var two = new Obj(2);
    var three = new Obj(3);

    one.next = two;
    two.next = three;
    for(var i of one){console.log(i)}//1 2 3

发表于   |  

部分内容参考w3ctech

预加载

  • 设定图片自定义属性放置图片真实的URL，src放置默认打底图片

  • 获取图片元素相对顶部的高度imageClientTop，如果滚动高度接近imageClientTop ，则设置图片的src属性为自定义属性的值，在图片onload时去除打底，展示真正的图片

  • 在未知预加图片宽高时，要想办法获取图片的真实宽高，有两种方案：支持H5 naturalHeight的和不支持的

  • 支持的

    1
    2
    3
    4
    // 注意,这里也要在img onload状态后才能获取naturalWidth，动态插入直接读该属性可能返回0
    var 
      nWidth = document.getElementById('example').naturalWidth,
      nHeight = document.getElementById('example').naturalHeight;

  • 不支持的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function getNatural (el) {
      var img = new Image();
      img.src = el.src;
      return {width: img.width, height: img.height};
    }

    var 
    natural = getNatural(document.getElementById('example')),
    nWidth = natural.width,
    nHeight = natural.height;
阅读全文 »