Tag: design patterns

有人能告诉我制作一个jQuery插件的好处吗？: 有什么好处？这似乎是一种过于复杂的处理方式，为什么不会只采用一种简单的方法来构建这样的插件，就像jQuery插件文档中记录的一样？请看这里： http ： //jsfiddle.net/e2aYH/11/ 相比.. jQuery.fn.placeKitten = function( options ) { // default settings: var defaults = { … }; var settings = $.extend( {}, defaults, options ); return this.each(function() { // Plugin code to produce kitten image would go here… }); }; 这项工作的作者也开始说他不会打扰jQuery插件，他们永远不应该使用它们，而是让你的代码“模块化”。无论如何不通过jQuery插件意味着什么？如果它意味着根本不使用jQuery，我在利用jQuery时会看到一系列的好处和效率，所以我也不理解这句话。

用jQuery编写OO Javascript: 我来自Prototype JS背景，其中通过使用Class.create()鼓励使用OO Javascript。现在我正在做一些JQuery工作，我正在尝试编写一些结构合理的JQuery代码，例如，我可以从两个不同的单击事件处理程序调用相同的对象函数。这是Prototype中的代码： document.observe(“dom:loaded”, function() { // create document APP.pageHelper = new APP.PageHelper(); }); // namespace our code window.APP = {}; // my class APP.PageHelper = Class.create({ // automatically called initialize: function(name, sound) { this.myValue = “Foo”; // attach event handlers, binding to ‘this’ object $(“myButton”).observe(“click”, this.displayMessage.bind(this)) }, displayMessage: function() { console.log(“My value: […]

通过Javascript不断查询服务器 – 好主意？: 我有一个小网站，大约有5-10名管理员。我已将其设置为监视每个管理员正在做什么（添加项目，删除项目等）。我的管理面板中有一个列表，显示集体管理部门执行的前10个活动。今天，我决定每30秒进行一次自我更新。我的问题很简单：这样做有什么问题吗？我正在为每个请求调用一小段文本，并且请求可能一次只能在3台或4台计算机上运行（反映登录的并发管理员数量）。 $(document).ready(function(){ setInterval(“activity()”, 30000); }); function activity() { $(“#recent_activity”).load(“../home/login #recent_activity .data”); } 每个请求生成以下（或类似 – 仅10行）。 jsampson logged out 28 minutes 27 seconds ago jdoe logged in 29 minutes 45 seconds ago

JavaScript / jQuery中的这种设计模式是什么？: 我正在查看SlickGrid的JavaScript源代码。我注意到slick.grid.js具有以下结构： (function($) { // Slick.Grid $.extend(true, window, { Slick: { Grid: SlickGrid } }); var scrollbarDimensions; // shared across all grids on this page //////////////////////////////////////////////////////////////////////////// // SlickGrid class implementation (available as Slick.Grid) /** * @param {Node} container Container node to create the grid in. * @param {Array,Object} data An array of objects for databinding. […]

在JavaScript中创建命名空间/类类型结构的最优雅方式: 我试图找到一种方法，它将为我提供在Namespace / Unit中包装代码的最优雅方式。例如Google Maps API的var a = Google.Maps.Foo(); ，我认为看起来很干净。我希望它包含 jQuery No Conflict $符号（如果这是正确的术语）。到目前为止我很喜欢： // Top level container for sub objects var myApp = myApp || {}; // An object to be held in myApp (function( skillet, $, undefined ) { //Private Property var isHot = true; //Public Property skillet.ingredient = “Bacon Strips”; […]

如何在一个真实的例子中使用javascript模块模式？: 我想了解JavaScript模块模式。我已经看到它应该是什么样子的例子，但我不明白如何使用它。例如，这里发生了一些事情： $(‘input#share’).on(“click”, function() { $(‘.loading’).html(”); var message = $(“.wallmessage”).val(); if (message == “”){ $(“#messageempty”).jmNotify(); $(‘.remove_loading’).remove(); } else { addMessage(message); } return false; }); function addMessage(message) { $.ajax({ url: ‘/test’, type: ‘POST’, dataType: “json”, data: {‘message’ : message}, success: function(data) { … }, error: function() { … } }); } 我如何使用上面的例子： var myTest = […]

了解JS Module Pattern的工作原理: 我正在尝试理解jQuery中使用的js模块模式。我已经编辑了几次，并试图在我的技能水平上做一个很好的练习（几个月新鲜的jquery）。这篇文章没有直接的问题。我更瞄准如何在大型网站中正确使用模块模式（以及jquery）的反馈和输入。更新：我添加了一些示例，以便全面了解所有编写内容的方法，并尝试覆盖任何陷阱。 /* Not all browsers works with console.log, so we want to make sure that console.log is defined. This defines the consol.log and send the messages into an alert. */ if(!window.console) console = { log: function(s) { alert(s); // alert since we dont have the firebug console } }; // […]

Javascript揭示模块模式，公共属性: 我试图在javascript中绕过揭示模块模式。我对以下代码片段的两件事感到困惑。 var Child = function () { var totalPoints = 100; addPoints = function (points) { totalPoints += points; return totalPoints; }; getPoints = function () { return totalPoints; }; return { points: totalPoints, addPoints: addPoints }; }; $(function () { var george = Child(); console.log(george.points); console.log(george.addPoints(50)); console.log(george.points); }); 这里写入控制台的三个值是100,150,100。这告诉我，当我用值调用“addPoints”时，totalPoints变量不会更新。如果我检查addPoints函数中totalPoints的值，它已正确递增。这是怎么回事？如果我使用控制台来检查window.addPoints或window.getPoints，我可以看到，因为我没有在函数声明前面使用“var”它们已被添加到全局范围。那不是吗？ […]

我应该使用哪种jQuery插件设计模式？: 我需要构建一个jQuery插件，它将为每个选择器id返回一个实例。该插件应该并且将仅用于具有id的元素（不可能使用与许多元素匹配的选择器），因此它应该像这样使用： $(‘#element-id’).myPlugin(options); 我需要能够为插件提供一些私有方法以及一些公共方法。我可以实现这一点，但我的主要问题是每次调用$（’＃element-id’）。myPlugin（）时我想得到相同的实例。我希望有一些代码只应在第一次为给定ID（构造）初始化插件时执行。应该首次为构造提供options参数，之后我不希望执行构造，这样我就可以像$（’＃element-id’）一样访问插件.myPlugin（）该插件应该能够在同一页面上使用多个元素（通常最多2个）（但是每个元素都需要自己的配置，它们将通过ID初始化，例如，不是常见的类选择器）。上面的语法只是举例 – 我对如何实现该模式的任何建议持开放态度我对其他语言有很多OOP经验，但对javascript的知识有限，我真的很困惑如何正确。编辑详细说明 – 这个插件是一个GoogleMaps v3 API包装器（帮助器）来帮助我摆脱代码重复，因为我在许多地方使用谷歌地图，通常使用标记。这是当前的库（删除了大量代码，只剩下最重要的方法）： ;(function($) { /** * csGoogleMapsHelper set function. * @param options map settings for the google maps helper. Available options are as follows: * – mapTypeId: constant, http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId * – mapTypeControlPosition: constant, http://code.google.com/apis/maps/documentation/javascript/reference.html#ControlPosition * – mapTypeControlStyle: constant, […]

JavaScript本机Promise（）没有回调: 看看这个jQuery代码： var promise = new Deferred(), some; some = function(promise) { // do cool things promise.resolve(); }; promise.then(/* callback cool things */); // init everything some(promise); 我不确定这种方法的架构正确性，但我用了很长时间，对我来说很方便。在本机JavaScript中，我不能使用这种方法。构造函数new Promise()需要一个回调参数，所以我不能将Promise实例作为参数传递。所以我的问题是：我如何预定义JavaScript原生承诺，将其作为参数传递给函数和解决方案？