查看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)
?
我想创建一个"记分卡"网格来输出一些数据.如果每个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)
从单个实例和多实例的角度来看,为什么我会在模块模式之后编写所有那些额外的代码行,而只是使用带有在构造函数体中定义的方法和属性的标准构造函数?
模块模式示例: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) 单击表单重置按钮时,Knockout不会更新observable.
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来查找表单内的所有输入并触发更改事件会很容易,但我们假设我们只有一个基于敲门的控制形式.
编辑:请参阅下面我自己的答案: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) 假设我有这样的数据结构:
{ 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) 在使用解构来设置传递给函数的对象的默认属性时,是否可以"深度扩展"对象?
例:
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) 我将从一个完全空白的页面(除了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) 我有两个数组,旧的和新的,在每个位置保存对象.我将如何同步或找到增量(即新数组与旧数组相比新增,更新和删除的内容)
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)
做三次这样的比较,找到新的,更新的和删除的?
在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值?
如果将参数或充满属性的对象传递给函数,则检查未定义的参数并为未定义的参数提供默认值非常有用。
如果不使用像 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 或“”
我一直在研究像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 ×8
css ×2
dot.js ×2
jquery ×2
canjs ×1
constructor ×1
css-float ×1
dust.js ×1
ecmascript-6 ×1
forms ×1
knockout.js ×1
performance ×1
rest ×1
sync ×1
templates ×1