Common js code encapsulation methods 2023.10.30
need
In order to showcase their own technologies, many corporate technical teams and individual developers encapsulate the source code of technology and algorithm implementation and thenClass libraries and SDKs is provided to customers for use, which is also regarded as a solution. At the same time, the encapsulated 类库或SDK can also be customized for demanders, distributed on demand, called on a per-time basis, or Periodic billing has given rise to a modern, convenient, pluggable, and highly coupled service provision and response model.
1. Advantages and disadvantages of js code encapsulation
Just astechnology is a double-edged sword,Naturally, while js code encapsulation brings advantages, it will inevitably be accompanied by some disadvantages. The balance between the two depends on the ease of use, efficiency, convenience and version upgrades of the supply side and the demand side.isotropic可接受度sum极限容忍度.
js代码封装的优点如 Next:
(1) The amount of code becomes smaller;
(2) Increase the network transmission speed of js library code files;
(3) Protect the intellectual property rights or labor results of the code provider;
(4) Enhance the protection of source code, which can improve security to some extent.
js代码封装的缺点如下:
(1) The readability becomes worse;
(2) Regular maintenance or upgrading of the updated version is required to add new functions. This results in users being passively upgraded in order to use new functions;
(3) SDK or class library upgrades should be compatible with previously released versions;
(4) Friendliness needs to be provided Easy-to-understand API call manuals and documentation for users' reference.
2. js code encapsulation method
Usually, 一个功能或一组属性及方法的封装皆可采用function（函数）和class（类）来实现, but it is worth noting: An important difference between function declaration and class declaration is that although functions can Called in code that appears before definition, but the class must be defined before construction. If you are interested in relevant theoretical knowledge, it is recommended to read relevant specifications and official documents. You can refer toECMAScript Language Specification
2.1 Method 1: function function declarations
2.1.1 Example
function square(number) {
return number * number;
}
const square = function (number) {
return number * number;
}
const x = square(4); // x gets the value 16
const factorial = function fac(n) {
return n < 2 ? 1 : n * fac(n - 1);
}
console.log(factorial(3))
function map(f, a) {
const result = new Array(a.length);
for (let i = 0; i < a.length; i++) {
result[i] = f(a[i]);
}
return result;
}
const f = function (x) {
return x * x * x;
}
const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
// A nested function example
function getScore() {
const num1 = 2;
const num2 = 3;
function add() {
return `${
name} scored ${
num1 + num2}`;
}
return add();
}
getScore(); // Returns "Chamakh scored 5"
function addSquares(a, b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
const a = addSquares(2, 3); // returns 13
const b = addSquares(3, 4); // returns 25
const c = addSquares(4, 5); // returns 41
function A(x) {
function B(y) {
function C(z) {
console.log(x + y + z);
}
C(3);
}
B(2);
}
A(1); // Logs 6 (which is 1 + 2 + 3)
const pet = function (name) {
// The outer function defines a variable called "name"
const getName = function () {
// The inner function has access to the "name" variable of the outer function
return name;
}
return getName; // Return the inner function, thereby exposing it to outer scopes
}
const myPet = pet('Vivie');
myPet(); // Returns "Vivie"
const createPet = function (name) {
let sex;
const pet = {
// setName(newName) is equivalent to setName: function (newName)
// in this context
setName(newName) {
name = newName;
},
getName() {
return name;
},
getSex() {
return sex;
},
setSex(newSex) {
if (typeof newSex === 'string' &&
(newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
sex = newSex;
}
}
};
return pet;
}
const pet = createPet('Vivie');
pet.getName(); // Vivie
pet.setName('Oliver');
pet.setSex('male');
pet.getSex(); // male
pet.getName(); // Oliver
const a = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
const a2 = a.map(function(s) {
return s.length; });
console.log(a2); // [8, 6, 7, 9]
const a3 = a.map((s) => s.length);
console.log(a3); // [8, 6, 7, 9]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
const multiply = new Function('x', 'y', 'return x * y');
function multiply(x, y) {
return x * y;
} // there is no semicolon here
const multiply = function (x, y) {
return x * y;
};
const multiply = function funcName(x, y) {
return x * y;
};
foo(); // Logs "FOO!"
function foo() {
console.log('FOO!');
}
// function declaration
function foo() {
}
// function expression
(function bar() {
})
// function expression
x = function hello() {
}
if (x) {
// function expression
function world() {
}
}
// function declaration
function a() {
// function declaration
function b() {
}
if (0) {
// function expression
function c() {
}
}
}
'use strict';
function f() {
return 1;
}
{
function f() {
return 2;
}
}
f() === 1; // true
// f() === 2 in non-strict mode
// This function returns a string padded with leading zeros
function padZeros(num, totalLen) {
let numStr = num.toString(); // Initialize return value as string
const numZeros = totalLen - numStr.length; // Calculate no. of zeros
for (let i = 1; i <= numZeros; i++) {
numStr = `0${
numStr}`;
}
return numStr;
}
if (typeof window.noFunc === 'function') {
// use noFunc()
} else {
// do something else
}
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static displayName = "Point";
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.hypot(dx, dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance; // undefined
p2.displayName; // undefined
p2.distance; // undefined
console.log(Point.displayName); // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755
2.2 Method 2: class
For a class, there is only one constructor,
Static initialization blocks
Prototype methods
2.2.1 class declarations
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Rectangle {
height = 0;
width;
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Rectangle {
#height = 0;
#width;
constructor(height, width) {
this.#height = height;
this.#width = width;
}
}
class Polygon {
constructor(...sides) {
this.sides = sides;
}
// Method
*getSides() {
for (const side of this.sides) {
yield side;
}
}
}
const pentagon = new Polygon(1,2,3,4,5);
console.log([...pentagon.getSides()]); // [1,2,3,4,5]
2.2.2 Class expressions
// unnamed
let Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name); // "Rectangle"
// named
Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name); // "Rectangle2"
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${
this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // call the super class constructor and pass in the name parameter
}
speak() {
console.log(`${
this.name} barks.`);
}
}
const d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${
this.name} makes a noise.`);
}
class Dog extends Animal {
speak() {
console.log(`${
this.name} barks.`);
}
}
const d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
const Animal = {
speak() {
console.log(`${
this.name} makes a noise.`);
}
};
class Dog {
constructor(name) {
this.name = name;
}
}
// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);
const d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${
this.name} makes a noise.`);
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(`${
this.name} roars.`);
}
}
const l = new Lion('Fuzzy');
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.
2.3 Variable + function
var r = function () {
function e(e, t) {
for (var i = 0; i < t.length; i++) {
var a = t[i]; a.enumerable = a.enumerable || !1, a.configurable = !0, "value" in a && (a.writable = !0),
Object.defineProperty(e, a.key, a)
}
}
return function (t, i, a) {
return i && e(t.prototype, i), a && e(t, a), t
}
}();
Cesium.ViewShed3D = function () {
function e(t, i) {
n(this, e), t && (i || (i = {
}),
this.viewer = t,
this.cameraPosition = Cesium.defaultValue(i.cameraPosition, c.cameraPosition),
this.viewPosition = Cesium.defaultValue(i.viewPosition, c.viewPosition),
this._horizontalAngle = Cesium.defaultValue(i.horizontalAngle, c.horizontalAngle),
this._verticalAngle = Cesium.defaultValue(i.verticalAngle, c.verticalAngle),
this._visibleAreaColor = Cesium.defaultValue(i.visibleAreaColor, c.visibleAreaColor),
this._hiddenAreaColor = Cesium.defaultValue(i.hiddenAreaColor, c.hiddenAreaColor),
this._alpha = Cesium.defaultValue(i.alpha, c.alpha),
this._distance = Cesium.defaultValue(i.distance, c.distance),
this._frustum = Cesium.defaultValue(i.frustum, c.frustum),
this.calback = i.calback,
this.cameraPosition && this.viewPosition ? (this._addToScene(), this.calback && this.calback()) : this._bindMourseEvent())
}
return r(e, [{
key: "_bindMourseEvent",
value: function () {
var e = this,
t = this.viewer,
i = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
i.setInputAction(function (i) {
var a = Cesium.getCurrentMousePosition(t.scene, i.position);
a && (e.cameraPosition ? e.cameraPosition && !e.viewPosition && (e.viewPosition = a,
e._addToScene(), e._unbindMourseEvent(), e.calback && e.calback()) : e.cameraPosition = a)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK),
i.setInputAction(function (i) {
var a = Cesium.getCurrentMousePosition(t.scene, i.endPosition);
if (a) {
var n = e.cameraPosition; n && (e.frustumQuaternion = e.getFrustumQuaternion(n, a),
e.distance = Number(Cesium.Cartesian3.distance(n, a).toFixed(1)))
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE),
this._handler = i
}
}, {
key: "_unbindMourseEvent",
value: function () {
null != this._handler && (this._handler.destroy(), delete this._handler)
}
},
2.4 Variables + closures + anonymous functions
//获取高程
var TerrainToolCopy = (
function () {
var terrainLevel = 14;//数据等级14
function _() {
}
//传入lonlat数组 角度制的lon lat
_.LonlatPointsTerrainData = function (terrainProvider,lonlats, callback) {
var pointArrInput = [];
for (var i = 0; i < lonlats.length; i++) {
pointArrInput.push(Cesium.Cartographic.fromDegrees(lonlats[i].lon, lonlats[i].lat));
}
var promise = Cesium.sampleTerrain(terrainProvider, terrainLevel, pointArrInput);//pointArrInput
Cesium.when(promise, function (updatedPositions) {
callback(updatedPositions);
});
};
//传入Cartographic类型数组 弧度制经纬度
_.CartographicPointsTerrainData = function (terrainProvider,Cartographics, callback) {
if (Cartographics.length && Cartographics.length > 0) {
} else {
return; }
var promise = Cesium.sampleTerrain(terrainProvider, terrainLevel, Cartographics);//pointArrInput
Cesium.when(promise, function (updatedPositions) {
callback(updatedPositions);
});
};
return _;
}
)();
2.5 Closure function
(function () {
function n(t, e) {
e = e || {
},
r = t.scene.globe.ellipsoid,
this._geometry = null,
this._angle = e.angle,
this._radius = e.radius ? e.radius : 5,
this._position = e.position,
this._rotation = e.rotation ? e.rotation : {
heading: 0,
pitch: 0,
roll: 0
},
this._trackedEntity = e.trackedEntity,
this.defaultColor = e.color ? e.color : Cesium.Color.YELLOW,
this.defaultLineColor = e.lineColor ? e.lineColor : this.defaultColor,
this._show = Cesium.defaultValue(e.show, !0),
this._outline = Cesium.defaultValue(e.outline, !1),
this._topShow = Cesium.defaultValue(e.top, !0),
this._topOutline = Cesium.defaultValue(e.topOutline, !0),
this._modelMatrix = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY),
this._quaternion = new Cesium.Quaternion,
this._translation = new Cesium.Cartesian3,
this._scale = new Cesium.Cartesian3(1, 1, 1),
this._matrix = new Cesium.Matrix4,
this._inverseMatrix = new Cesium.Matrix4,
this._positionCartographic = new Cesium.Cartographic,
this._positionCartesian = null,
this._drawCommands = [],
this._outlinePositions = [],
this.viewer = t,
this.viewer.scene.primitives.add(this),
this.updateGeometry(),
this._groundArea = Cesium.defaultValue(e.groundArea, !1),
this.addGroundAreaEntity(this._groundArea)
}
Object.defineProperty(Cesium, "__esModule", {
value: !0
}),
Cesium.RadarPrimitive = void 0;
var r;
Object.defineProperties(n.prototype, {
trackedEntity: {
get: function () {
return this._trackedEntity
},
set: function (t) {
this._trackedEntity = t
}
},
color: {
get: function () {
return this.defaultColor
},
set: function (t) {
this.defaultColor = t
}
},
lineColor: {
get: function () {
return this.defaultLineColor
},
set: function (t) {
this.defaultLineColor = t
}
},
show: {
get: function () {
return this._show
},
set: function (t) {
this._show = t
}
},
outline: {
get: function () {
return this._outline
},
set: function (t) {
this._outline = t, this.updateGeometry()
}
},
top: {
get: function () {
return this._topShow
},
set: function (t) {
this._topShow = t, this.updateGeometry()
}
},
topOutline: {
get: function () {
return this._topOutline
},
set: function (t) {
this._topOutline = t, this.updateGeometry()
}
},
groundArea: {
get: function () {
return this._groundArea
},
set: function (t) {
this._groundArea = t, this.addGroundAreaEntity(this._groundArea)
}
},
angle: {
get: function () {
return this._angle
},
set: function (t) {
this._angle = t, this.updateGroundCircleRadius(), this.updateGeometry()
}
},
radius: {
get: function () {
return this._radius
},
set: function (t) {
this._radius = t, this.updateGroundCircleRadius(), this.updateGeometry()
}
},
heading: {
get: function () {
return this._rotation.heading
},
set: function (t) {
this._rotation.heading = t
}
},
pitch: {
get: function () {
return this._rotation.pitch
},
set: function (t) {
this._rotation.pitch = t
}
},
roll: {
get: function () {
return this._rotation.roll
},
set: function (t) {
this._rotation.roll = t
}
},
position: {
get: function () {
return this._position
}, set: function (t) {
this._position = t
}
}
}),
n.prototype.updateGroundCircleRadius = function () {
this._ground_radius = this._radius * Math.cos(Cesium.Math.toRadians(this._angle))
},
n.prototype.addGroundAreaEntity = function (t) {
if (t && !this.groundAreaEntity) {
var e = this;
this.updateGroundCircleRadius(),
this.groundAreaEntity = viewer.entities.add({
position: this._position,
ellipse: {
show: 0 === this._rotation.pitch && 0 === this._rotation.roll,
semiMinorAxis: new Cesium.CallbackProperty(function (t) {
return e._ground_radius
}, !1),
semiMajorAxis: new Cesium.CallbackProperty(function (t) {
return e._ground_radius
}, !1),
material: this.defaultColor
},
polyline: {
show: this._trackedEntityPosition && (0 !== this._rotation.pitch || 0 !== this._rotation.roll),
positions: new Cesium.CallbackProperty(function (t) {
return e._trackedEntityPosition ? Cesium.Cartesian3.distance(e._position, e._trackedEntityPosition) > e._radius ? [] : [e._position, e._trackedEntityPosition] : []
}, !1),
followSurface: !1,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN
}),
width: 1
}
})
}
};
var l = new Cesium.Cartesian3;
n.prototype.computeMatrix = function (t, e) {
if (this._positionCartesian || (this._positionCartesian = new Cesium.Cartesian3), this.position instanceof Cesium.Cartesian3 ? this._positionCartesian = this.position : "function" == typeof this.position.getValue ? this._positionCartesian = this.position.getValue(t) : this.position._value && this.position._value instanceof Cesium.Cartesian3 && (this._positionCartesian = this.position._value), this._trackedEntity && this._trackedEntity.position) {
var i = this._positionCartesian,
n = Cesium.Property.getValueOrUndefined(this._trackedEntity.position, t, l);
if (n) {
this._trackedEntityPosition = n;
var o = mars3d.matrix.getHeadingPitchRollForLine(i, n, r);
this._rotation.heading = o.heading, this._rotation.pitch = o.pitch, this._rotation.roll = o.roll
}
}
return this._modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(this._positionCartesian, r, this._modelMatrix),
this._positionCartographic = Cesium.Cartographic.fromCartesian(this._positionCartesian, r, this._positionCartographic),
Cesium.Transforms.eastNorthUpToFixedFrame(this._positionCartesian, r, this._modelMatrix),
Cesium.Quaternion.fromHeadingPitchRoll(this._rotation, this._quaternion),
this._matrix = Cesium.Matrix4.fromTranslationQuaternionRotationScale(this._translation, this._quaternion, this._scale, this._matrix),
Cesium.Matrix4.multiplyTransformation(this._modelMatrix, this._matrix, this._matrix),
Cesium.Matrix4.inverseTransformation(this._matrix, this._inverseMatrix),
this._matrix
},
n.prototype.getTopGeometry = function () {
for (var t = this.radius, e = [], i = [], n = [], r = [], o = 90 - parseInt(this.angle), s = o < 1 ? o / 8 : 1, l = 2 * Math.PI / 127, h = 0, d = this.angle; d < 91; d += s) {
var m = Cesium.Math.toRadians(d < 90 ? d : 90);
m = Math.cos(m) * t;
for (var f = [], p = 0; p < 128; p++) {
var c = l * p,
_ = m * Math.cos(c),
g = m * Math.sin(c),
v = Math.sqrt(t * t - _ * _ - g * g);
e.push(_, g, v),
i.push(1, 1),
f.push(h++)
}
r.push(f)
}
for (var d = 1; d < r.length; d++)
for (var p = 1; p < r[d].length; p++) {
var y = r[d - 1][p - 1],
C = r[d][p - 1],
w = r[d][p], x = r[d - 1][p];
n.push(y, C, w),
n.push(y, w, x)
}
e = new Float32Array(e),
n = new Int32Array(n),
i = new Float32Array(i);
var A = {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3, values: e
}),
st: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT, componentsPerAttribute: 2, values: i })
},
b = Cesium.BoundingSphere.fromVertices(e),
M = new Cesium.Geometry({
attributes: A,
indices: n,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: b
});
return (0, Cesium.computeVertexNormals)(M), M
},
n.prototype.getTopOutlineGeometry = function () {
for (var t = this.radius, e = [], i = [], n = [], r = [], o = 90 - parseInt(this.angle), s = o < 1 ? o / 8 : 1, l = 2 * Math.PI / 127, h = 0, d = this.angle; d < 91; d += s) {
var m = Cesium.Math.toRadians(d < 90 ? d : 90);
m = Math.cos(m) * t;
for (var f = [], p = 0; p < 128; p++) {
var c = l * p, _ = m * Math.cos(c), g = m * Math.sin(c), v = Math.sqrt(t * t - _ * _ - g * g);
e.push(_, g, v), i.push(1, 1), f.push(h++)
}
r.push(f)
}
for (var d = 1; d < r.length; d++)
for (var p = 1; p < r[d].length; p++) {
var y = r[d - 1][p - 1], C = r[d][p - 1], w = r[d][p]; r[d - 1][p];
p % 8 == 1 && n.push(y, C), d % 8 == 1 && n.push(C, w)
}
e = new Float32Array(e), n = new Int32Array(n), i = new Float32Array(i);
var x = {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: e
}),
st: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 2, values: i
})
},
A = Cesium.BoundingSphere.fromVertices(e),
b = new Cesium.Geometry({
attributes: x,
indices: n,
primitiveType: Cesium.PrimitiveType.LINES,
boundingSphere: A
});
return (0, Cesium.computeVertexNormals)(b), b
},
n.prototype.updateGeometry = function () {
this._geometry = Cesium.CylinderGeometry.createGeometry(new Cesium.CylinderGeometry({
topRadius: this._radius * Math.cos(Cesium.Math.toRadians(this.angle)),
bottomRadius: 0,
length: this._radius * Math.sin(Cesium.Math.toRadians(this.angle))
})),
this._topGeometry = this.getTopGeometry(),
this._topOutlineGeometry = this.getTopOutlineGeometry(),
this._outlineGeometry = Cesium.CylinderGeometry.createOutlineGeometry(new Cesium.CylinderGeometry({
topRadius: this._radius * Math.cos(Cesium.Math.toRadians(this.angle)),
bottomRadius: 0,
slices: 128,
length: this._radius * Math.sin(Cesium.Math.toRadians(this.angle))
})),
this._positions = new Float32Array(this._geometry.attributes.position.values.length);
for (var t = 0; t < this._positions.length; t++)this._positions[t] = this._geometry.attributes.position.values[t];
this._drawCommands && this._drawCommands.length && (this._drawCommands.forEach(function (t) {
t.vertexArray = t.vertexArray && t.vertexArray.destroy()
}),
this._drawCommands.splice(0, this._drawCommands.length))
},
n.prototype.update = function (t) {
if (this._show) {
this.computeMatrix(t.time);
t.mode === Cesium.SceneMode.SCENE3D ? (this._geometry.boundingSphere = Cesium.BoundingSphere.fromVertices(this._geometry.attributes.position.values), this._drawCommands && this._drawCommands.length || (this._drawCommands.push(this.createDrawCommand(this._geometry, t)), this._outline && this._drawCommands.push(this.createDrawCommand(this._outlineGeometry, t)), this._topShow && (this._drawCommands.push(this.createDrawCommand(this._topGeometry, t)),
this._topOutline && this._drawCommands.push(this.createDrawCommand(this._topOutlineGeometry, t)))), this._drawCommands.forEach(function (e) {
t.commandList.push(e) }), this.groundAreaEntity && (this.groundAreaEntity.ellipse.show = this._groundArea && 0 === this._rotation.pitch && 0 === this._rotation.roll, this.groundAreaEntity.polyline.show = !1)) : (this.groundAreaEntity || this.addGroundAreaEntity(!0), this.groundAreaEntity.ellipse.show = 0 === this._rotation.pitch && 0 === this._rotation.roll, this.groundAreaEntity.polyline.show = this._trackedEntityPosition && (0 !== this._rotation.pitch || 0 !== this._rotation.roll))
}
},
n.prototype.getFragmentShaderSource = function (t) {
return "\nvarying vec3 v_position;\nvarying vec3 v_normal;\nuniform float picked;\nuniform vec4 pickedColor;\nuniform vec4 defaultColor;\nuniform float specular;\nuniform float shininess;\nuniform vec3 emission;\nvarying vec2 v_st;\nuniform bool isLine;\nuniform float glowPower;\nvoid main() {\n vec3 positionToEyeEC = -v_position; \n vec3 normalEC =normalize(v_normal);\n vec4 color=defaultColor;\n if(picked!=0.0){\n color = pickedColor;\n }\n //if(v_st.x<0.5){\n // color.a =0.75-v_st.x; \n //}\n //else {\n // color.a =v_st.x-0.25; \n //}\n czm_material material;\n material.specular = specular;\n material.shininess = shininess;\n material.normal = normalEC;\n material.emission =emission;//vec3(0.2,0.2,0.2);\n material.diffuse = color.rgb ;\n if(isLine){\n material.alpha = 1.0; \n }\n else{\n material.alpha = color.a; \n }\n //float glow = glowPower / abs(v_st.t ) - (glowPower / 0.5); \n // \n //material.emission = max(vec3(glow - 1.0 + color.rgb), color.rgb); \n //if(isLine)\n // material.alpha = clamp(0.0, 1.0, glow) * color.a; \n \n if(v_st.x==0.0){ \n gl_FragColor =color ;\n }else { \n gl_FragColor = czm_phong(normalize(positionToEyeEC), material) ; \n } \n}"
},
n.prototype.getVertexShaderSource = function (t) {
return "\n#ifdef GL_ES\n precision highp float;\n#endif\n\nattribute vec3 position;\nattribute vec2 st;\nattribute vec3 normal;\nuniform mat4 modelViewMatrix;\nuniform mat3 normalMatrix;\nuniform mat4 projectionMatrix;\nvarying vec3 v_position;\nvarying vec3 v_normal;\nvarying vec2 v_st;\n\nvarying vec3 v_light0Direction;\n\nvoid main(void) \n{\n vec4 pos = modelViewMatrix * vec4( position,1.0);\n v_normal = normalMatrix * normal;\n v_st = st;\n v_position = pos.xyz;\n v_light0Direction = mat3( modelViewMatrix) * vec3(1.0,1.0,1.0);\n gl_Position = projectionMatrix * pos;\n}"
},
n.prototype.createDrawCommand = function (t, e, i) {
var n = e.context, r = new Cesium.Cartesian3; Cesium.Matrix4.multiplyByPoint(this._matrix, t.boundingSphere.center, r);
var o = new Cesium.BoundingSphere(r, t.boundingSphere.radius), s = new Cesium.DrawCommand({
modelMatrix: i || this._matrix,
owner: this,
primitiveType: t.primitiveType,
pass: Cesium.Pass.TRANSLUCENT,
boundingVolume: o
}),
u = this, l = Cesium.GeometryPipeline.createAttributeLocations(t);
return s.vertexArray = Cesium.VertexArray.fromGeometry({
context: n,
geometry: t,
attributeLocations: l,
bufferUsage: Cesium.BufferUsage.STATIC_DRAW
}),
s.vertexArray._attributeLocations = l,
s.shaderProgram = Cesium.ShaderProgram.replaceCache({
context: n,
vertexShaderSource: this.getVertexShaderSource(t),
fragmentShaderSource: this.getFragmentShaderSource(t),
attributeLocations: l
}),
s.renderState = Cesium.RenderState.fromCache({
blending: Cesium.BlendingState.ALPHA_BLEND,
depthTest: {
enabled: !0,
func: Cesium.DepthFunction.LESS
},
cull: {
enabled: !1,
face: Cesium.CullFace.BACK
}
}),
s.uniformMap = {
}, s.uniformMap.projectionMatrix = function () {
return e.context.uniformState.projection
},
s.uniformMap.modelViewMatrix = function () {
return e.context.uniformState.modelView
},
s.uniformMap.shininess = function () {
return u.shininess || (u.shininess = 0), u.shininess
},
s.uniformMap.emission = function () {
return u.emission || (u.emission = new Cesium.Cartesian3(.2, .2, .2)), u.emission
},
s.uniformMap.specular = function () {
return u.specular || (u.specular = 0), u.specular
},
s.uniformMap.isLine = function () {
return t.primitiveType == Cesium.PrimitiveType.LINES || t.primitiveType == Cesium.PrimitiveType.LINE_STRIP
},
s.uniformMap.defaultColor = function () {
return t.primitiveType == Cesium.PrimitiveType.LINES || t.primitiveType == Cesium.PrimitiveType.LINE_STRIP ? (u.defaultLineColor || (u.defaultLineColor = new Cesium.Color(1, 1, 0, 1)), u.defaultLineColor) : (u.defaultColor || (u.defaultColor = new Cesium.Color(1, 0, 0, 1)), u.defaultColor)
},
s.uniformMap.picked = function () {
return u.picked || (u.picked = 0), u.picked
},
s.uniformMap.pickedColor = function () {
return u.pickedColor || (u.pickedColor = new Cesium.Color(1, 1, 0, 1)), u.pickedColor
},
s.uniformMap.normalMatrix = function () {
return e.context.uniformState.normal
},
s.uniformMap.glowPower = function () {
return .25
},
s
},
n.prototype.remove = function () {
this.viewer.scene.primitives.remove(this), this.groundAreaEntity && this.viewer.entities.remove(this.groundAreaEntity)
},
n.prototype.addToScene = function () {
this.viewer.scene.primitives.add(this), this.groundAreaEntity && this.viewer.entities.add(this.groundAreaEntity)
},
n.prototype.destroy = function (t) {
t && (this.viewer.scene.primitives.remove(this), this.groundAreaEntity && this.viewer.entities.remove(this.groundAreaEntity), this._drawCommands.forEach(function (t) {
t.vertexArray = t.vertexArray && t.vertexArray.destroy()
}), this._drawCommands = [])
},
Cesium.RadarPrimitive = n
})()
2.6 Variable + closure + internal variable function
var EllipseGeometryLibraryEx = (function () {
var EllipseGeometryLibrary = {
};
var rotAxis = new Cesium.Cartesian3();
var tempVec = new Cesium.Cartesian3();
var unitQuat = new Cesium.Quaternion();
var rotMtx = new Cesium.Matrix3();
function pointOnEllipsoid(theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, result) {
var azimuth = theta + rotation;
Cesium.Cartesian3.multiplyByScalar(eastVec, Math.cos(azimuth), rotAxis);
Cesium.Cartesian3.multiplyByScalar(northVec, Math.sin(azimuth), tempVec);
Cesium.Cartesian3.add(rotAxis, tempVec, rotAxis);
var cosThetaSquared = Math.cos(theta);
cosThetaSquared = cosThetaSquared * cosThetaSquared;
var sinThetaSquared = Math.sin(theta);
sinThetaSquared = sinThetaSquared * sinThetaSquared;
var radius = ab / Math.sqrt(bSqr * cosThetaSquared + aSqr * sinThetaSquared);
var angle = radius / mag;
// Create the quaternion to rotate the position vector to the boundary of the ellipse.
Cesium.Quaternion.fromAxisAngle(rotAxis, angle, unitQuat);
Cesium.Matrix3.fromQuaternion(unitQuat, rotMtx);
Cesium.Matrix3.multiplyByVector(rotMtx, unitPos, result);
Cesium.Cartesian3.normalize(result, result);
Cesium.Cartesian3.multiplyByScalar(result, mag, result);
return result;
}
var scratchCartesian1 = new Cesium.Cartesian3();
var scratchCartesian2 = new Cesium.Cartesian3();
var scratchCartesian3 = new Cesium.Cartesian3();
var scratchNormal = new Cesium.Cartesian3();
/**
* Returns the positions raised to the given heights
* @private
*/
EllipseGeometryLibrary.raisePositionsToHeight = function (positions, options, extrude) {
var ellipsoid = options.ellipsoid;
var height = options.height;
var extrudedHeight = options.extrudedHeight;
var size = (extrude) ? positions.length / 3 * 2 : positions.length / 3;
var finalPositions = new Float64Array(size * 3);
var length = positions.length;
var bottomOffset = (extrude) ? length : 0;
for (var i = 0; i < length; i += 3) {
var i1 = i + 1;
var i2 = i + 2;
var position = Cesium.Cartesian3.fromArray(positions, i, scratchCartesian1);
ellipsoid.scaleToGeodeticSurface(position, position);
var extrudedPosition = Cesium.Cartesian3.clone(position, scratchCartesian2);
var normal = ellipsoid.geodeticSurfaceNormal(position, scratchNormal);
var scaledNormal = Cesium.Cartesian3.multiplyByScalar(normal, height, scratchCartesian3);
Cesium.Cartesian3.add(position, scaledNormal, position);
if (extrude) {
Cesium.Cartesian3.multiplyByScalar(normal, extrudedHeight, scaledNormal);
Cesium.Cartesian3.add(extrudedPosition, scaledNormal, extrudedPosition);
finalPositions[i + bottomOffset] = extrudedPosition.x;
finalPositions[i1 + bottomOffset] = extrudedPosition.y;
finalPositions[i2 + bottomOffset] = extrudedPosition.z;
}
finalPositions[i] = position.x;
finalPositions[i1] = position.y;
finalPositions[i2] = position.z;
}
return finalPositions;
};
var unitPosScratch = new Cesium.Cartesian3();
var eastVecScratch = new Cesium.Cartesian3();
var northVecScratch = new Cesium.Cartesian3();
/**
* options.semiMinorAxis：短半轴
* options.semiMajorAxis：长半轴
* options.rotation：旋转角度 弧度
* options.center：中心点 笛卡尔坐标
* options.granularity：粒度 弧度
addFillPositions：是否插值
addEdgePositions：是否添加端点
* Returns an array of positions that make up the ellipse.
* @private
*/
EllipseGeometryLibrary.computeEllipsePositions = function (options, addEdgePositions) {
var semiMinorAxis = options.semiMinorAxis;
var semiMajorAxis = options.semiMajorAxis;
var rotation = options.rotation;//法线
var center = options.center;
var granularity = options.granularity && (typeof options.granularity === "number") ? options.granularity : (Math.PI / 180.0);// 角度间隔
if (granularity > Math.PI / 12.0) {
granularity = Math.PI / 12.0; }
if (granularity < Math.PI / 180.0) {
granularity = Math.PI / 180.0; }
var aSqr = semiMinorAxis * semiMinorAxis;
var bSqr = semiMajorAxis * semiMajorAxis;
var ab = semiMajorAxis * semiMinorAxis;
var mag = Cesium.Cartesian3.magnitude(center);//模
var unitPos = Cesium.Cartesian3.normalize(center, unitPosScratch);
var eastVec = Cesium.Cartesian3.cross(Cesium.Cartesian3.UNIT_Z, center, eastVecScratch);
eastVec = Cesium.Cartesian3.normalize(eastVec, eastVec);
var northVec = Cesium.Cartesian3.cross(unitPos, eastVec, northVecScratch);
var numPts = 1 + Math.ceil(Cesium.Math.PI_OVER_TWO / granularity);
var deltaTheta = Cesium.Math.PI_OVER_TWO / (numPts - 1);
var theta = Cesium.Math.PI_OVER_TWO - numPts * deltaTheta;
if (theta < 0.0) {
numPts -= Math.ceil(Math.abs(theta) / deltaTheta);
}
var positions = new Array((numPts + 1) * 3);
var positionsdown = new Array((numPts + 1) * 3);
var positionIndex = 0;
var positionsdownIndex = 0;
var position = scratchCartesian1;
var reflectedPosition = scratchCartesian2;
var outerPositionsLength = (numPts * 4) * 3;
var outerRightIndex = outerPositionsLength - 1;
var outerLeftIndex = 0;
var outerPositions = (addEdgePositions) ? new Array(outerPositionsLength) : undefined;
var i;
var j;
var numInterior;
var t;
var interiorPosition;
theta = Cesium.Math.PI_OVER_TWO;
position = pointOnEllipsoid(theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, position);
positions[positionIndex++] = position.x;
positions[positionIndex++] = position.y;
positions[positionIndex++] = position.z;
if (addEdgePositions) {
outerPositions[outerRightIndex--] = position.z;
outerPositions[outerRightIndex--] = position.y;
outerPositions[outerRightIndex--] = position.x;
}
theta = Cesium.Math.PI_OVER_TWO - deltaTheta;
for (i = 1; i < numPts + 1; ++i) {
position = pointOnEllipsoid(theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, position);
reflectedPosition = pointOnEllipsoid(Math.PI - theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, reflectedPosition);
positionsdown[positionsdownIndex++] = position.x;
positionsdown[positionsdownIndex++] = position.y;
positionsdown[positionsdownIndex++] = position.z;
positions[positionIndex++] = reflectedPosition.x;
positions[positionIndex++] = reflectedPosition.y;
positions[positionIndex++] = reflectedPosition.z;
if (addEdgePositions) {
outerPositions[outerRightIndex--] = position.z;
outerPositions[outerRightIndex--] = position.y;
outerPositions[outerRightIndex--] = position.x;
outerPositions[outerLeftIndex++] = reflectedPosition.x;
outerPositions[outerLeftIndex++] = reflectedPosition.y;
outerPositions[outerLeftIndex++] = reflectedPosition.z;
}
theta = Cesium.Math.PI_OVER_TWO - (i + 1) * deltaTheta;
}
for (i = numPts; i > 1; --i) {
theta = Cesium.Math.PI_OVER_TWO - (i - 1) * deltaTheta;
position = pointOnEllipsoid(-theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, position);
reflectedPosition = pointOnEllipsoid(theta + Math.PI, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, reflectedPosition);
positionsdown[positionsdownIndex++] = position.x;
positionsdown[positionsdownIndex++] = position.y;
positionsdown[positionsdownIndex++] = position.z;
positions[positionIndex++] = reflectedPosition.x;
positions[positionIndex++] = reflectedPosition.y;
positions[positionIndex++] = reflectedPosition.z;
if (addEdgePositions) {
outerPositions[outerRightIndex--] = position.z;
outerPositions[outerRightIndex--] = position.y;
outerPositions[outerRightIndex--] = position.x;
outerPositions[outerLeftIndex++] = reflectedPosition.x;
outerPositions[outerLeftIndex++] = reflectedPosition.y;
outerPositions[outerLeftIndex++] = reflectedPosition.z;
}
}
theta = Cesium.Math.PI_OVER_TWO;
position = pointOnEllipsoid(-theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, position);
var r = {
};
positionsdown[positionsdownIndex++] = position.x;
positionsdown[positionsdownIndex++] = position.y;
positionsdown[positionsdownIndex++] = position.z;
r.positions = positions;
r.positionsdown = positionsdown;
r.numPts = numPts;
if (addEdgePositions) {
outerPositions[outerRightIndex--] = position.z;
outerPositions[outerRightIndex--] = position.y;
outerPositions[outerRightIndex--] = position.x;
r.outerPositions = outerPositions;
}
return r;
};
/**
* options.semiMinorAxis：短半轴
* options.semiMajorAxis：长半轴
* options.rotation：旋转角度 弧度
* options.center：中心点 笛卡尔坐标
* options.granularity：粒度 弧度
* Returns an array of positions that make up the ellipse.
* @private
*/
EllipseGeometryLibrary.computeEllipseEdgePositions = function (options) {
var semiMinorAxis = options.semiMinorAxis;
var semiMajorAxis = options.semiMajorAxis;
var rotation = options.rotation;//法线
var center = options.center;
var granularity = options.granularity && (typeof options.granularity === "number") ? options.granularity : (Math.PI / 180.0);// 角度间隔
if (granularity > Math.PI / 12.0) {
granularity = Math.PI / 12.0; }
if (granularity < Math.PI / 180.0) {
granularity = Math.PI / 180.0; }
var aSqr = semiMinorAxis * semiMinorAxis;
var bSqr = semiMajorAxis * semiMajorAxis;
var ab = semiMajorAxis * semiMinorAxis;
var mag = Cesium.Cartesian3.magnitude(center);//
var unitPos = Cesium.Cartesian3.normalize(center, unitPosScratch);
var eastVec = Cesium.Cartesian3.cross(Cesium.Cartesian3.UNIT_Z, center, eastVecScratch);
eastVec = Cesium.Cartesian3.normalize(eastVec, eastVec);
var northVec = Cesium.Cartesian3.cross(unitPos, eastVec, northVecScratch);
var numPts = Math.ceil(Cesium.Math.PI * 2 / granularity);
var deltaTheta = granularity;
var theta = 0;
var position = scratchCartesian1;
var i;
var outerIndex = 0;
var outerPositions = [];
for (i = 0; i < numPts; i++) {
theta = i * deltaTheta;
position = pointOnEllipsoid(theta, rotation, northVec, eastVec, aSqr, ab, bSqr, mag, unitPos, position);
outerPositions[outerIndex++] = position.x;
outerPositions[outerIndex++] = position.y;
outerPositions[outerIndex++] = position.z;
}
var r = {
};
r.numPts = numPts;
r.outerPositions = outerPositions;
return r;
};
return EllipseGeometryLibrary;
})();
3. Anonymous functions indirectly call execution methods
At the same time, in order to prevent users from searching or locating the code location based on the API function name, the encapsulated js code has anonymous functions to help solve this problem. Anonymous functions are also called nameless functions. Gu Mingsiyi does not need to name the function, so it has It has the characteristics of high concealment, difficult positioning, limited scope, and strong closure. In addition, anonymous functions can be nested layer by layer and are difficult to capture, which is beneficial to the protection of code security to a certain extent.
(function (){
console.log('jjg')}())
!function(a,b){
console.log(a+b);}('hello','world')
eval('function print(a){console.log(a);}\x20print(`jjg`)')
(function(){
console.log('jing_zhong')})()
4. Summary
The dead pass away like this, the sun and the moon fly by. In the blink of an eye, I have been in contact with FrontEnd and WebGIS development for more than a year. I have been in contact with many skilled and experienced seniors. I have deep admiration and deep feelings. In the face of When undertaking complex, tedious, and large-scale practical project page application development tasks, in addition to looking for relevant information and code examples from blog posts on the Internet, I also learned more from themFacing problems Be calm, calm and unhurried, not afraid of danger, make difficulties easy, explain things in simple terms, and respond skillfully. In fact, many challenges can often be easily solved. Being good at asking for help is the behavior of a strong person. Open and equal communication can actively promote Dialogue, and then mutual discussion, understanding, and joint thinking. When everyone adds fuel to the flames, happiness alone is not as good as happiness among others. Actively sharing knowledge, technology, experience and skills with like-minded friends and similar interests is really a great joy in life. As the saying goes知音难觅，知己难求, in today's materialistic and rapidly developing society, I hope that everyone can find their own good news, support each other, and stay together for life. (Note:Although this article introduces several methods of js encapsulation that I have seen, it is intended to discuss and share with the majority of developers and technology enthusiasts. It is strictly prohibited to use it for commercial purposes! ! ! The author loves and promotes open source from the bottom of his heart. He hopes to contribute a small amount to open source. Being closed will inevitably lead to backwardness and arrogance. Open source represents open cooperation and knowledge sharing. Great human beings live in the global village and are a community with a shared future. We should work together. , complement each other's advantages, learn from each other's strengths, make progress together, and continuously promote the progress and prosperity of mankind.）
与此同时，不免感慨，不禁赞叹：正如高手在民间一样，真正的强者从来都会大隐于市，不抱怨环境，逆境生长，谦虚低调，更加善于从文学、艺术、歌舞等身边事物汲取精神养料，陶冶情操，追求乐观豁达、自然洒脱的心境，敢于接受自我的渺小和平凡。天地之大，万类霜天竞自由，适者生存，物竞天择，无外乎天外有天、山外有山、人外有人，愿自己能够不忘初心，坚定脚步，砥砺前行，始终坚信美好新鲜的事物即将发生，永远感恩父母、热爱生活、热爱人民、热爱世界。