设计模式学习之八-中介者模式

var testCurried = function ( a ) {
	return function ( b ) {
		return function ( c ) {
			return function ( d ) {
				console.log( a + b + c + d );
			}
		}
	}
}

testCurried( 1 )( 2 )( 3 )( 4 );  // 10

如果要锁定前三个参数，第四个参数灵活化，那就把前三个方法的调用赋值给一个方法：

1
2
3

var test1 = testCurried( 1 )( 2 )( 3 ); // 返回的是个方法

test1( 4 ); // 10

对于最后一层调用函数来说，前三个函数形成了闭包，把参数这个变量传递给了最内层函数，test1是testCurried( 1 )( 2 )( 3 )的执行结果。

以上便是自己对函数柯里化的简单理解。

（完）

js深拷贝

发表于 2018-03-31 |

前言

js数据类型分为基本数值类型（Undefined，Boolean，number, string）和引用类型(array,object,null)，基本数值类型是在栈中的，引用类型是在堆中的，因此对象是在堆中占据内存的，因此对象的改变，其实是指针指向的对象的改变，因此引用这个对象的对象都会改变。

代码

const obj1 = {
	name: 'sam',
	sex: 'man',
	love: [ '1', '2', '4' ]
};

// const deepCopy = function ( obj ) {
// 	let newobj;
//
// 	console.log( typeof obj );
// 	switch ( typeof obj ) {
// 		case 'undefined':
// 			break;
// 		case 'string':
// 			newobj = obj + '';
// 			break;
// 		case 'number':
// 			newobj = obj - 0;
// 			break;
// 		case 'boolean':
// 			newobj = obj;
// 			break;
// 		case 'object':
// 			if ( obj === null ) {
// 				newobj = null;
// 			} else {
// 				if ( obj instanceof Array ) {
// 					newobj = [];
// 					for ( let i = 0; i < obj.length; i++ ) {
// 						newobj.push( deepCopy( obj[ i ] ) );
// 					}
// 				} else {
// 					newobj = {};
// 					for ( let key in obj ) {
// 						newobj[ key ] = deepCopy( obj[ key ] );
// 					}
// 				}
// 			}
// 			break;
// 		default:
// 			newobj = obj;
// 	}
//
// 	return newobj;
// };

const deepCopy = function ( obj ) {
	return JSON.parse( JSON.stringify( obj ) );
};

const obj2 = deepCopy( obj1 );

console.log( obj2 );

obj2.love.push( '3', '3' );

console.log( obj1 );

以上是深拷贝方法，对象复制后，新对象的改变不会相互影响。

（完）

H5小游戏分享

发表于 2018-02-21 |

项目背景

本文记录自己在公司内部前端组关于h5小游戏的分享。

特点

轻量，简单，基于js+canvas

1.页面适配布局

由于各个小游戏框架库都是基于canvas,当中的元素坐标基于px,所以rem方案不适用，而是按照640的屏幕去写页面，然后再等比缩放，这样其中的元素该位移多少还是位移多少，不同屏幕下，他的位移值是一样的，只不过视觉上经过放大缩小后，就适配了布局。

a.
横屏或竖屏布局后，当监测到用户手机为非期望屏幕方向时，弹层提示。

b.
写2套css,分别为元素横屏和竖屏布局，然后屏幕旋转时，暂停游戏，切换布局，再把当前数据套进去。

2.js游戏引擎

a.
createjs，pixijs，phaser
2D,支持canvas，webGL

createjs，pixijs两个元素结构 stage-container-sprite

b.
egret,LayaAir,cocos2D-js,three.js
2D,3D等中大型游戏

3.工具
制作雪碧图-texturePckageGUI
生成雪碧图+json,json中包含各个图的位置信息

骨骼动画-dragonbonesPro

4.碰撞检测
https://aotu.io/notes/2017/02/16/2d-collision-detection/

5.源码网
http://www.codefans.net/jscss/sort/list_7_1.shtml

（完）

gulp 构建总结

发表于 2018-01-21 |

项目背景

本文记录下自己使用gulp构建的配置。

代码配置

var gulp = require( 'gulp' );
var htmlmin = require( "gulp-htmlmin" );
var uglify = require( 'gulp-uglify' );
var livereload = require( 'gulp-livereload' );
var babel = require( 'gulp-babel' );
var browserify = require( 'browserify' );
var source = require( 'vinyl-source-stream' );
var postcss = require( 'gulp-postcss' );
var autoprefixer = require( 'autoprefixer' );
var cssnano = require( 'cssnano' );
var less = require( 'gulp-less' );

//  压缩HTML
gulp.task( 'minify-html', function () {

  var options = {
    removeComments: true,  //清除HTML注释
    collapseWhitespace: true,  //压缩HTML
    collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
    removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
    minifyJS: true,  //压缩页面JS
    minifyCSS: true  //压缩页面CSS
  };
  gulp.src( '*.html' )
    .pipe( htmlmin( options ) )
    .pipe( gulp.dest( 'dist' ) )
    .pipe( livereload() );

} );

//  把图片放到dist中
gulp.task( 'img', function () {
  return gulp.src( 'img/*' )
    .pipe( gulp.dest( "dist/img" ) );
} )

//  给css使用自动加前缀插件，并压缩css，插件来源于postcss
gulp.task( 'css', function () {
  var plugins = [
    autoprefixer( { browsers: [ 'last 2 version', '> 0.1%' ] } ),
    cssnano()
  ];

  return gulp.src( 'style/*' )
    .pipe( less() )
    .pipe( postcss( plugins ) )
    .pipe( gulp.dest( 'dist/style' ) );
} );

//  给js使用babel,并压缩
gulp.task( 'script', function () {
  gulp.src( 'js/*.js' )
    .pipe( babel( {
      presets: [ 'env' ]
    } ) )
    .pipe( uglify() )
    .pipe( gulp.dest( 'dist/js' ) )
    .pipe( livereload() );
} )

// browserify预编译，打包js
gulp.task( "browserify", function () {
  var b = browserify( {
    entries: "./dist/js/main.js"
  } );

  return b.bundle()
    .pipe( source( "bundle.js" ) )
    .pipe( gulp.dest( "dist/js" ) );
} );

//  监听代码热更新并重新执行任务
gulp.task( 'watch', function () {
  livereload.listen({port: 12345});
  gulp.watch( 'style/*', [ 'css' ] );
  gulp.watch( 'wxphp/*', [ 'wxphp' ] );
  gulp.watch( 'wxshare/*', [ 'wxshare' ] );
  gulp.watch( 'js/*', [ 'script', 'browserify' ] );
  gulp.watch( 'index.html', [ 'minify-html' ] );
  gulp.watch( 'cj.html', [ 'cj' ] );
} )

gulp.task( 'default', [ 'css', 'script', 'minify-html', 'img', 'browserify', 'watch' ] );

（完）