JavaScript自建组件（一）

1.javaScript组件基本入门

写一个入门例子

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.HECORE = {})));
}(this, (function (exports){
//插件构造
'use strict';
/**
listense:
http://www.apache.org/licenses/LICENSE-2.0
**/
//声明插件对象
var REVISION = 'hecore_dev';
//定义一个类
function Scene() {
//声明基础属性
this.type = 'Scene';
this.background = null;
this.fog = null;
this.overrideMaterial = null;
this.autoUpdate = true; // checked by the renderer
}
//声明一个常态对象
const object1 = {
  a: 1,
  b: 2,
  c: 3
};
//prototype就是“一个给类的对象添加方法的方法”，
//Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Scene.prototype = Object.assign( object1 , {
constructor: Scene,
copy: function ( source, recursive ) {
Object3D.prototype.copy.call( this, source, recursive );
if ( source.background !== null ) this.background = source.background.clone();
if ( source.fog !== null ) this.fog = source.fog.clone();
if ( source.overrideMaterial !== null ) this.overrideMaterial = source.overrideMaterial.clone();
this.autoUpdate = source.autoUpdate;
this.matrixAutoUpdate = source.matrixAutoUpdate;
return this;
},
toJSON: function ( meta ) {
var data = "";
return data;
}
} );
//对外暴露插件
exports.REVISION = REVISION;
exports.Scene = Scene;
})));

2.说明

使用：浏览器中访问输入

HECORE.REVISION

    显示  hecore_dev

输入

HECORE.Scene

          显示

ƒ Scene() {
this.type = 'Scene';
this.background = null;
this.fog = null;
this.overrideMaterial = null;
this.autoUpdate = true; // checked by the renderer
}

小结：

核心是封装和暴露

        封装为内部变量和类，通过对外暴露的方式展示。