真的要求这样可以更好地理解面向对象的javascript并发现一些针对此场景的最佳实践。我们假设我有一个javascript对象，例如：
SideSlider = {
rightArrow: '.controls i.right',
dot: '.controls .dot',
slide: '.slide',
init: function() {
$(this.rightArrow).click(this.nextSlide.bind(this));
$(this.leftArrow).click(this.prevSlide.bind(this));
$(this.dot).click(this.dotClick.bind(this));
},
nextSlide: function() {
var activeSlide = $('.slide.active-slide'),
firstSlide = $(this.slide).first(),
lastSlide = $(this.slide).last(),
nextUp = activeSlide.next(),
activeDot = $(".active-dot"),
nextDot = activeDot.next();
activeSlide.removeClass("active-slide");
nextUp.addClass("active-slide");
activeDot.removeClass("active-dot");
nextDot.addClass("active-dot");
$(this.leftArrow).removeClass("inactive");
if ( lastSlide.hasClass("active-slide")) {
$(this.rightArrow).addClass("inactive");
}
}
}
在多个DOM模块实例上使用此对象的正确方法是什么？换句话说，什么是最佳实践＆＃39;在两个幻灯片上使用此对象的功能的方法＆＃39;同一个DOM中的实例
答案 0 :(得分：1)
您可以为对象创建构造函数，然后将容器元素传递给该构造函数，因此它将仅作用于该DOM滑块。在您执行jQuery选择器以检索某些元素的任何地方，您应该将范围设置为给定的容器元素。您可以通过将该容器作为new SideSlider(container)的第二个参数提供。
使用function SideSlider(container) {
// Perform the jQuery selections with the second argument
// so that the selection returns only elements within the container:
this.$rightArrow = $('.controls i.right', container);
this.$dot = $('.controls .dot', container);
this.$slide = $('.slide', container);
this.container = container;
// ... etc
// Perform init-logic immediately
this.$rightArrow.click(this.nextSlide.bind(this));
this.$leftArrow.click(this.prevSlide.bind(this));
this.$dot.click(this.dotClick.bind(this));
// ... etc
}
// Define methods on the prototype
SideSlider.prototype.nextSlide = function() {
var activeSlide = $('.slide.active-slide', this.container),
firstSlide = $(this.slide, this.container).first(),
lastSlide = $(this.slide, this.container).last(),
nextUp = activeSlide.next(),
activeDot = $(".active-dot", this.container),
nextDot = activeDot.next();
activeSlide.removeClass("active-slide");
nextUp.addClass("active-slide");
activeDot.removeClass("active-dot");
nextDot.addClass("active-dot");
$(this.leftArrow, this.container).removeClass("inactive");
if (lastSlide.hasClass("active-slide")) {
$(this.rightArrow, this.container).addClass("inactive");
}
// ... etc
};
// Create & use the two objects:
var slider1 = new SideSlider($('#slider1'));
var slider2 = new SideSlider($('#slider2'));
// ...
slider1.nextSlide();
// ...etc.
创建对象实例。它可能看起来像这样：
class如果您有ES6支持，请使用class TCPClient {
public static void main(String argv[]) throws Exception {
byte[] sentence, textEncrypted;
String modifiedSentence;
String password;
BufferedReader inFromUser = new BufferedReader(new InputStreamReader(System.in));
Socket clientSocket = new Socket("localhost", 6789);
DataOutputStream outToServer = new DataOutputStream(clientSocket.getOutputStream());
password = "Passcode";
byte[] salt = new byte[64];
Random rnd = new Random();
rnd.nextBytes(salt);
byte[] data = deriveKey(password, salt, 64);
// BufferedReader inFromServer = new BufferedReader(new
// InputStreamReader(clientSocket.getInputStream()));
System.out.println("Enter the Data to be transmisted to server\n");
sentence = inFromUser.readLine().getBytes();
SecretKey desKey = SecretKeyFactory.getInstance("DES").generateSecret(new DESKeySpec(data));
Cipher cipher = Cipher.getInstance("DES/ECB/PKCS5Padding");
cipher.init(Cipher.ENCRYPT_MODE, desKey);
textEncrypted = cipher.doFinal(sentence);
outToServer.writeBytes(new String(textEncrypted) + '\n');
clientSocket.close();
}
public static byte[] deriveKey(String password, byte[] salt, int keyLen) {
SecretKeyFactory kf = null;
try {
kf = SecretKeyFactory.getInstance("PBKDF2WithHmacSHA1");
} catch (NoSuchAlgorithmException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
KeySpec specs = new PBEKeySpec(password.toCharArray(), salt, 1024, keyLen);
SecretKey key = null;
try {
key = kf.generateSecret(specs);
} catch (InvalidKeySpecException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return key.getEncoded();
}
}
表示法。
答案 1 :(得分：-1)
看起来你正在使用jQuery，我建议考虑将你的项目变成一个jQuery插件。这将允许您为每次使用分配代码，并且滑块的开发人员和其他各种JavaScript驱动的小部件经常使用它。 jQuery网站有一个关于如何实现这一目标的精彩教程，可以在这里找到：