小编Fer*_*gal的帖子

归还这个|| (0,EVAL)( '这');

查看doT.js源代码:

https://raw.github.com/olado/doT/master/doT.js

这是做什么的?

(function(){ return this || (0,eval)('this'); }()).doT = doT;
Run Code Online (Sandbox Code Playgroud)

对我来说,看起来它正在创建一个全局变量,window.doT.如果这就是它的全部,那么为什么不呢:

window.doT = doT;
Run Code Online (Sandbox Code Playgroud)

javascript dot.js

42
推荐指数
1
解决办法
5538
查看次数

CSS浮动,清除浮动元素的"行"

我想创建一个"记分卡"网格来输出一些数据.如果每个div.item中的数据都是相同的高度,那么每个div.item上留下一个简单的浮点数会提供一个漂亮的均匀布局,可以根据浏览器大小很好地扩展和缩小.

但是,如果数据是可变的,每个div中的行数不同,那么元素浮动的方式会产生不均匀且混乱的输出.请参阅下面的代码示例 如果您使用以下内容创建页面,请将浏览器的大小调整为大约800px宽,以便框1,2和3在顶部创建"行",然后是4,5和6.如何将7下拉到下一行所以它创建一行以及8和9?

显然,如果你调整浏览器的大小以便每行显示4个div,则数字9是我想要在5以下分解的元素.有什么明显的东西我缺少或者我需要使用一些Javascript来实现这一点吗?

div.item{
  float:left;
  width:220px;
  background-color:#DBDBDB;
  margin:8px;
}

h1, p{
  padding:4px;
  margin:0;
}
Run Code Online (Sandbox Code Playgroud)
<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>
Run Code Online (Sandbox Code Playgroud)

css css-float

16
推荐指数
1
解决办法
2万
查看次数

JavaScript模块模式与使用构造函数中定义的方法的构造函数

从单个实例和多实例的角度来看,为什么我会在模块模式之后编写所有那些额外的代码行,而只是使用带有在构造函数体中定义的方法和属性的标准构造函数?

模块模式示例:http://jsfiddle.net/T3ZJE/1/

var module = (function () {
    // private variables and functions
    var foo = 'bar';

    // constructor
    var module = function () {
    };

    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };

    // return module
    return module;
})();

var my_module = new module();

console.log(my_module)
Run Code Online (Sandbox Code Playgroud)


构造函数示例:http://jsfiddle.net/EuvaS/2/

function Module(){

    // private variables and functions
    var foo = 'bar';

    //public methods
    this.something = function () {

    }        
}

var my_module …
Run Code Online (Sandbox Code Playgroud)

javascript constructor module-pattern

10
推荐指数
1
解决办法
1万
查看次数

输入类型=重置和淘汰赛

单击表单重置按钮时,Knockout不会更新observable.

http://jsfiddle.net/nQXeM/

HTML:

<form>
    <input type="text" data-bind="value: test" />
    <input type="reset" value="reset" />
</form>
<p data-bind="text: test"></p>
Run Code Online (Sandbox Code Playgroud)

JS:

function ViewModel() {
    this.test = ko.observable("");
}

ko.applyBindings(new ViewModel());
Run Code Online (Sandbox Code Playgroud)

很明显,输入框的更改事件没有被触发,正如jQuery测试所示:http: //jsfiddle.net/LK8sM/4/

如果重置按钮没有触发更改事件,我们如何强制强制所有可以形成输入的observable更新而不必手动指定它们?

使用jQuery来查找表单内的所有输入并触发更改事件会很容易,但我们假设我们只有一个基于敲门的控制形式.

forms knockout.js

9
推荐指数
1
解决办法
2688
查看次数

IE点击子节点不焦点父节点,父节点有tabindex = 0

编辑:请参阅下面我自己的答案:https://stackoverflow.com/a/25953721/674863

演示:http: //jsfiddle.net/fergal_doyle/anXM3/1/

我有一个tabindex = 0的div和一个固定宽度的子div.当我点击子div时,我希望外部div能够获得焦点.这适用于Firefox和Chrome,并且仅当子div没有应用宽度时才适用于Internet Explorer(7到10).

使用宽度,单击子(白色)div不会将焦点放在外部div上,如果外部的焦点与之前有焦点,则单击子项会导致外部模糊,这对我想做的事情来说很痛苦.

HTML:

<div tabindex="0" id="test">
    <div>Click</div>
</div> 
Run Code Online (Sandbox Code Playgroud)

CSS:

div {
    border:1px solid #000;
    padding:20px;
    background-color:red;
}
div div {
    padding:8px;
    background-color:#FFF;
    cursor:default;
    width:200px;
}
Run Code Online (Sandbox Code Playgroud)

JS:

var $div = $("#test"),
    $inner = $("#test > div");

$div.on("blur", function (e) {
    console.log("blur");
})
    .on("focus", function (e) {
    console.log("focus")
});
Run Code Online (Sandbox Code Playgroud)

javascript css jquery internet-explorer

7
推荐指数
2
解决办法
5591
查看次数

使用doT.js递归

假设我有这样的数据结构:

{ list: [ {
         name: "1",
         children: [{
               name: "1.1",
               children: []
            },
            {
               name: "1.2",
               children: [{
                     name: "1.2.1",
                     children: []
                  }
               ]
            }
         ]
      },
      {
         name: "2",
         children: [{
               name: "2.1",
               children: [{
                     name: "2.1.1",
                     children: []
                  },           
                  {
                     name: "2.1.2",
                     children: []
                  },               
                  {
                     name: "2.1.3",
                     children: []
                  }
               ]
            },
            {
               name:  "2.2",
               children: []
            },
            {
               name: "2.3",
               children: []
            }
         ]
      },
      {
         name: "3",
         children: [{
               name: "3.1",
               children: []
            } …
Run Code Online (Sandbox Code Playgroud)

javascript templates dot.js

6
推荐指数
1
解决办法
2497
查看次数

将对象作为函数参数进行深度扩展

在使用解构来设置传递给函数的对象的默认属性时,是否可以"深度扩展"对象?

例:

function foo({
  foo = 'foo',
  bar = 'bar',
  baz = {
    propA: 'propA',
    propB: 'propB'
  }
} = {}) {
  console.log(foo);
  console.log(bar);
  console.log(baz);
}

foo({
  foo: 'changed',
  baz: {
    propA: 'changed'
  }
});
Run Code Online (Sandbox Code Playgroud)

这输出:(巴兹被覆盖)

changed
bar
{
  "propA": "changed"
}
Run Code Online (Sandbox Code Playgroud)

是否存在扩展baz对象的语法,以提供输出:

changed
bar
{
  "propA": "changed",
  "propB": "propB"
}
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6

6
推荐指数
3
解决办法
154
查看次数

jQuery DOM操作效率 - 使用JavaScript构建整个页面

我将从一个完全空白的页面(除了html,head和body之外没有其他元素)开始,然后使用jQuery构建页面.页面内容将采用AJAX请求中的JSON格式.JSON中的内容不会包含任何HTML.将根据JSON对象的结构为页面的不同部分构建包含内容的HTML.

此页面将包含各种滑块,模态和其他"动态"内容.

我的问题是,它是否会更快(让IE7作为最低标准)将HTML构建为一个大字符串(使用比标准连接快得多的字符串构建器)并以批量方式将其注入到正文中,即

var html = "<div id='content'><p>All markup required for the page, built from the contents of the JSON object</p></div><div id='slider'>...</div>...etc."
$("body").html(html)
Run Code Online (Sandbox Code Playgroud)

然后当它在DOM中时,使用jQuery查找并将插件应用于各种动态部分,即

$("#slider").sliderPlugin(options);
Run Code Online (Sandbox Code Playgroud)

要么

将每个元素(或某些元素)创建为变量,然后附加到正文会更好吗?即

var content = $('<div/>', {id: "content"})
var slider =  $('<div/>', {id: "slider", html="<ul><li>...</li></ul>"}).appendTo(content);
$('body').append(content)
Run Code Online (Sandbox Code Playgroud)

然后使用这种方法我不必查询DOM,我只需要这样做:

slider.sliderPlugin(options);
Run Code Online (Sandbox Code Playgroud)

performance jquery

5
推荐指数
1
解决办法
3408
查看次数

JavaScript同步两个(对象)数组/查找delta

我有两个数组,旧的和新的,在每个位置保存对象.我将如何同步或找到增量(即新数组与旧数组相比新增,更新和删除的内容)

var o = [
    {id:1, title:"title 1", type:"foo"},
    {id:2, title:"title 2", type:"foo"},
    {id:3, title:"title 3", type:"foo"}
];

var n = [
    {id:1, title:"title 1", type:"foo"},
    {id:2, title:"title updated", type:"foo"},
    {id:4, title:"title 4", type:"foo"}
];
Run Code Online (Sandbox Code Playgroud)

使用上述数据,使用id作为键,我们发现id = 2的项目具有更新的标题,id = 3的项目被删除,id = 4的项目是新的.

是否存在具有有用功能的现有库,或者是循环和内循环的情况,比较每一行......例如

for(var i=0, l=o.length; i<l; i++)
{   
    for(var x=0, ln=n.length; x<ln; x++)
    {
        //compare when o[i].id == n[x].id    
    }  
}
Run Code Online (Sandbox Code Playgroud)

做三次这样的比较,找到新的,更新的和删除的?

javascript sync

5
推荐指数
1
解决办法
5533
查看次数

当前用户的SharePoint 2010 REST筛选器

在SharePoint 2010中使用REST,如何选择/过滤属于当前登录用户的列表行(无论是通过作者,编辑者还是按人员字段过滤的情况)

例如

http://myserver/_vti_bin/ListData.svc/Test?$filter=Author eq Me
Run Code Online (Sandbox Code Playgroud)

我知道在SP2007中,使用caml可以使用表示当前用户值的UserID元素.

编辑:Humm,似乎作者,编辑和任何其他人员字段存储为Ints并重命名为CreatedById和ModifiedById.如果你查询一个列表,你得到的就是

<d:CreatedById m:type="Edm.Int32">1</d:CreatedById>
Run Code Online (Sandbox Code Playgroud)

如果我想取回用户的NT名称该怎么办?我是否必须在某处进行另一个查询以获取特定用户的Int值?

rest sharepoint-2010

4
推荐指数
1
解决办法
5878
查看次数

Javascript 最短的可能检查未定义(如果分配了默认值)

如果将参数或充满属性的对象传递给函数,则检查未定义的参数并为未定义的参数提供默认值非常有用。

如果不使用像 jQuery 范围这样的库函数,执行这种分配默认值的最短代码是什么?

这是我能想到的最短的:

var test;
var output = (typeof test != "undefined") ? test : "Default";
Run Code Online (Sandbox Code Playgroud)

在有人建议之前:

var test;
var output = test || "Default";
Run Code Online (Sandbox Code Playgroud)

这不适用于 false、0 或“”

javascript

3
推荐指数
1
解决办法
9732
查看次数

JavaScript模板,为什么这么棒?

我一直在研究像temp.js这样的JavaScript模板库以及像canJS这样的其他更广泛的库

在我工作的地方,我们在客户端做了近99%的任何应用程序/站点.目前我只是构建html字符串,注入dom,监听点击/操作,执行ajax,从结果中构建更多html字符串并注入dom等等.

如果你采用这个简单的例子.

//stringbuilder
function StringBuilder(e){this.strings=new Array("");this.append(e)}StringBuilder.prototype.append=function(e){if(e){this.strings.push(e)}};StringBuilder.prototype.clear=function(){this.strings.length=1};StringBuilder.prototype.toString=function(){return this.strings.join("")}

var data = {
    fname: "Joe",
    lname: "Doe",
    occupation: "Developer",
    things: ["some", "list", "of", "things"]
}

var sb = new StringBuilder();

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

$("#output").html(sb.toString());
Run Code Online (Sandbox Code Playgroud)

以什么方式可以通过模板改进?从我所看到的,我将不得不适应特定的模板语法,这种语法不比上面更容易阅读或维护.那么复杂的布局,或者你有递归的场景(列表中的列表,而不知道它可能有多少级别).在某些情况下,我觉得模板语法/引擎是限制因素.

我想把这个html完全从JS中拉出来很好,但是让我们说使用HTML中的模板语法的脚本标签不在桌面上,我不特别希望模板作为外部文件我需要执行额外的请求读.

请教育我!

javascript dust.js canjs

0
推荐指数
1
解决办法
1362
查看次数