ES5 Way

Question

我在我的JS代码结构中苦苦挣扎，这在我的单元测试尝试中变得明显。我已经习惯了班级结构，但我在JS世界中有点失落，那里没有任何课程。我正在寻找一种在传统的类/构造函数体系结构中组织代码的方法。这就是我所拥有的：

function ddGridSelector(primaryId, templateDefault, gridObj) {
    //set the variables
    this.primaryId = primaryId,
    this.defaultTemplate = templateDefault,
    this.gridObj = gridObj,
    this.gridObj.searchVal = '',

    this.init = ddgs_init
}

function ddgs_init(ddgs_obj) {
    ddgs_setDefaultTemplate(ddgs_obj);
    ddgs_initGrid(ddgs_obj);
    ddgs_initKendoWindow(ddgs_obj);
    ddgs_initKendoButton(ddgs_obj);
    ddgs_initResetButton(ddgs_obj);
    ddgs_addGridEventListener(ddgs_obj);
}

function ddgs_setDefaultTemplate(ddgs_obj) {
    //doing stuff
}

function ddgs_initGrid(ddgs_obj) {
    //more stuff
}

要拨打其中任何一个......

var ddGridSelector_new = new ddGridSelector('PrimaryIdentifier', templateDefault, gridObj);

ddGridSelector_new.init(ddGridSelector_new);

将我的对象传递给我在构造函数中指定的函数似乎真的很多，所以我确定我在这里遗漏了一些明显的东西。真的希望得到关于此事的一些指导。我想我已经走上了一条好路。

Answer 1

ES5 Way

你可以做＆＃34;功能课＆＃34;像这样，这是非常自我解释的：

function User(name) {
  // name is thus "private" here because it's
  // not put under "this.name"

  this.sayHi = function() {
    alert(name);
  };
}

let user = new User("John");
user.sayHi(); // John

还有原型类模式：

function User(name, birthday) {
  this._name = name;
}

User.prototype.sayHi = function() {
  alert(this._name);
};

let user = new User("John");
user.sayHi(); // John

Source/Tutorial with the examples listed here

ES6 + Way

在ES6中，您可以以更像传统编程语言的方式声明类：

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }
}

let user = new User("John");
user.sayHi(); // John

但是，如果您的目标是IE（所有版本），Opera Mini和Android浏览器等平台，则需要使用Babel或Typescript这样的转发器将其编译为Web兼容代码（ 4.4.x，~16% of all Android versions in the field）（web compat sources），或旧iOS设备上的Cordova之类的东西（＆lt; 10，UIWebView等）。

Node.js应该支持4.8.4（！）及以上的类，令人惊讶的是（source）。

Answer 2

但我在没有任何课程的JS世界中有点迷失。

但是......有！

class ddGridSelector {
    constructor(primaryId, templateDefault, gridObj) {
        //set the variables
        this.primaryId = primaryId,
        this.defaultTemplate = templateDefault,
        this.gridObj = gridObj,
        this.gridObj.searchVal = '',
     }

     init() {
        this.setDefaultTemplate();
        this.initGrid();
        this.initKendoWindow();
        this.initKendoButton();
        this.initResetButton();
        this.addGridEventListener();
    }

    setDefaultTemplate() {
        //doing stuff
    }

    initGrid() {
        //more stuff
    }
}

Answer 3

当我想避免新功能时，我倾向于喜欢这种类似布局的结构。它为您提供了一个私有作用域，您可以根据需要对函数和共享变量进行扩展，并允许您分离出构造函数＆＃34;和原型上的公共方法。

var MyType = (function () {
    function MyType() {
        //My Constructor
    }

    MyType.prototype = {
        constructor: MyType,
        publicMethod: privateMethod
    };

    function privateMethod() {
        ...
    }

    return MyType;
}());

外部作用域立即运行并保持全局名称空间清洁。我们使用原型实例方法扩充私有函数，定义任何＆＃34; private＆＃34;需要的方法，并在安装后返回私有类型。这使您可以像正常一样实例化一个类并调用任何方法。

var example = new MyType();
example.publicMethod();

如何将我的JS代码正确组织成更传统的类结构？

3 个答案:

ES5 Way

ES6 + Way