小编nat*_*e75的帖子

如何使用空格分割字符串,并使用正则表达式将前导和尾随空格忽略为单词数组?

我通常在JavaScript中使用以下代码来按空格分割字符串.

"The quick brown fox jumps over the lazy dog.".split(/\s+/);
// ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]
Run Code Online (Sandbox Code Playgroud)

这当然可以在单词之间存在多个空白字符时起作用.

"The  quick brown fox     jumps over the lazy   dog.".split(/\s+/);
// ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]
Run Code Online (Sandbox Code Playgroud)

问题是当我有一个具有前导或尾随空格的字符串时,在这种情况下,生成的字符串数组将在数组的开头和/或结尾包含一个空字符.

"  The quick brown fox jumps over the lazy dog. ".split(/\s+/);
// ["", "The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog.", ""]
Run Code Online (Sandbox Code Playgroud)

消除这些空字符是一项微不足道的任务,但如果可能的话,我宁愿在正则表达式中处理这个问题.有谁知道我可以用什么正则表达式来实现这个目标?

javascript regex string whitespace removing-whitespace

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

是什么原因导致"用户代理样式表"使用"border-box"而不是"content-box"来进行大小调整?

我的印象是,浏览器(如Safari,Chrome和Firefox)中的用户代理样式表是浏览器内部的,无法直接修改(而是需要覆盖样式属性).

由于包括Mozilla在内的各种网站,Webkit和Mozilla 的box-sizing属性的默认值是"content-box",我也感觉不到.

我在各种浏览器中查看的相当简单的虚拟页面上测试了这个.

我的问题是,在我们的生产应用程序的两个页面上,默认属性是不同的,我们无法弄清楚为什么会这样.

在一页中,我们在Web Inspector或控制台中看到了"border-box"的box-sizing属性.它被分配给CSS选择器输入:not([type ="image"]),textarea.

在另一页上,没有提到Web Inspector或控制台中的box-sizing属性.

有没有人知道是否有某种方法直接影响特定页面的用户代理样式表中的box-sizing定义?也许有一个图书馆这样做?我们在应用程序中使用prototype.js和swfobject.js ......

更新:如果我在我的Web应用程序和每个"虚拟"页面中几乎每个页面都不清楚,我在box-sizing属性上测试过具有默认的"content-box"值.出于某种原因,我的Web应用程序中的一个特定页面在Web检查器中显示用户代理样式表(浏览器用于其默认值的样式表)已将该属性设置为"border-box".我无法为我的生活找出原因.我正在寻找可能导致Firefox更改其属性的默认值的任何内容.

css user-agent border-box

26
推荐指数
3
解决办法
6886
查看次数

是否更好地使用图像或CSS来保持网页或应用程序的性能尽可能高?

我的项目的创意设计师和我有一些友好的分歧,至于是否更好地使用他的comp的片段或依靠浏览器的渲染引擎来创建用户体验的某些方面.

一个具体的例子是水平"条形",它运行小部件的整个宽度.他创造了一个非常时髦的渐变,涉及不同颜色和不透明度的几个停顿,他觉得图像的小尺寸是优选的,或者至少可以与本地生成渐变所需的CSS代码的增加行相比.

我们已经在使用CSS精灵技术来减少从服务器返回的次数,这对我们来说不是问题.现在,它只是使用切片图像与使用CSS和HTML渲染的专业人士和概念.

是否存在关于图像需要多大才能成为两者"更糟糕"选项的明确规则?

更新:由于一些人已经提到梯度的复杂性作为一个因素,我将在这里介绍它:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));
Run Code Online (Sandbox Code Playgroud)

很复杂!;-)

css image linear-gradients css3

18
推荐指数
2
解决办法
7002
查看次数

使用此JavaScript编码模式定义构造函数有什么好处?

我倾向于以下列方式编写对象构造函数:

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function () {
    alert("Hello! My name is " + this.name + ".");
};
Run Code Online (Sandbox Code Playgroud)

我注意到一些JavaScript库和框架添加了一些额外的代码,如下所示:

var Person = (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.greet = function () {
        alert("Hello! My name is " + this.name + ".");
    };
    return Person;
})();
Run Code Online (Sandbox Code Playgroud)

我知道自执行匿名函数的作用和用途.我目前未能看到的是,在定义构造函数及其原型时,它提供了哪些优势或好处.

编辑#1:

我知道模块模式及其优点,并且在我的编码中经常使用它.我在沟通中的错误并不清楚我的第一个代码示例不应该在全球范围内.我总是将所有外部JavaScript文件包装在一个自执行的匿名函数中,以强制执行代码的本地范围.

例如:

;(function ( window, undefined ) {
    var p = function (name) {
        this.name;
    };
    p.prototype.greet = function () {
        alert("Hello! My …
Run Code Online (Sandbox Code Playgroud)

javascript constructor anonymous-function function-prototypes module-pattern

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

如何使用jQuery的css方法将background-image属性设置为线性渐变?

当我在我的页面上使用它时,不会出现背景渐变(我现在只担心Safari和Firefox):

$("#myElement").css({
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
    backgroundImage: "-moz-linear-gradient(top, black, white)"
});
Run Code Online (Sandbox Code Playgroud)

我尝试在适当的浏览器中使用其中一个,但在那里没有运气.

我可以在我的代码中为元素使用内联样式属性,但如果有一种方法可以使用jQuery的API,我宁愿不这样做.

jquery linear-gradients css3

7
推荐指数
1
解决办法
4319
查看次数

Apollo Client 将具有相同 id 和不同值的对象数组替换为第一个对象的副本数组

我们的 GraphQL 服务器使用包含对象数组的数据响应查询,每个对象id对于不同的键共享相同和不同的值。例如,我们可能有一个如下所示的数组:

[
  { id: 123, name: 'foo', type: 'bar', cost: 5 },
  { id: 123, name: 'foo', type: 'bar', cost: 6 },
  { id: 123, name: 'foo', type: 'bar', cost: 7 },
  { id: 123, name: 'foo', type: 'bar', cost: 8 }
]
Run Code Online (Sandbox Code Playgroud)

我们可以在“网络”选项卡中看到服务器的响应中包含正确的数据。然而,当它通过 Apollo 客户端模块处理时,数组已经转换成如下所示:

[
  { id: 123, name: 'foo', type: 'bar', cost: 5 },
  { id: 123, name: 'foo', type: 'bar', cost: 5 },
  { id: 123, name: 'foo', type: 'bar', cost: 5 …
Run Code Online (Sandbox Code Playgroud)

javascript graphql apollo-client

7
推荐指数
1
解决办法
2541
查看次数

如何将光标设置到 Internet Explorer 中文本 INPUT 字段的字符串值中的特定位置?

我已经在 Firefox、Safari 和 Chrome 中使用了它。

我希望能够以编程方式在 Internet Explorer 的 INPUT 字段中设置文本光标的位置。

我在各种网站上查找了这个主题,通常发现了相同的技术:

var el = document.getElementById("myTextField");
var pos = 6;

if (document.selection) {
    el.focus();
    var selection = document.selection.createRange();
    selection.moveStart("character", -el.value.length);
    selection.moveStart("character", pos);
    selection.moveEnd("character", 0);
    selection.select();
}
Run Code Online (Sandbox Code Playgroud)

问题是,当我尝试执行此操作时,无论我提供什么位置,光标始终会移动到值的末尾。

我是否误解了人们一直在使用的技术?我在某处错过了什么吗?这有点令人沮丧,但这当然是使用这些不同浏览器进行 Web 开发的本质。

在此先感谢您的帮助。

javascript internet-explorer cursor selection textinput

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

如何防止iOS 5中touchmove事件的默认行为?

我有一个基于Web的应用程序,其中包含一个用户可以用手指向上和向下滚动的组件.我使用事件的preventDefault方法来防止触摸移动在iOS设备上移动整个屏幕的默认行为.

不幸的是,这似乎不再适用于iOS 5,我刚刚升级到今天早上.我不得不假设这在iOS 5中完全不同,但我还没有能够找到提供指令的资源.

谢谢!

更新#1:我无法找到我的具体问题的答案,但我能够调整我的代码以使用-webkit-overflow-scrolling样式(设置为"touch"的值)并实现时髦的惯性滚动功能(内容滚动得更快,取决于你的滑动速度,如果碰到边界,"橡皮筋反弹"会回来.看起来很酷......

更新#2:我现在有另一个奇怪的问题.由于某些奇怪的原因,溢出滚动行为有时会混淆,因此您必须在包含元素上左右拖动手指才能使其内容上下移动.我还没弄清楚为什么会发生这种情况 - 有没有人有任何想法?

javascript javascript-events preventdefault ios5

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

使用John Resig的"简单JavaScript继承"如何在方法中调用超级方法PLUS额外代码?

我决定尝试JavaScript天才John Resig的"简单JavaScript继承",详见本博客页面:

http://ejohn.org/blog/simple-javascript-inheritance/

我很好奇如何使用调用super方法的代码覆盖方法.换句话说,假设我从Person类开始:

var Person = Class.extend({
    init: function ( name, age ) {
        this.name = name;
        this.age = age;
    }
});
Run Code Online (Sandbox Code Playgroud)

我扩展了Person类来创建一个新的类Worker:

var Worker = Person.extend({
    init: function ( name, age, occupation ) {
        this.name = name;
        this.age = age;
        this.occupation = occupation;
    }
});
Run Code Online (Sandbox Code Playgroud)

在两个版本的init方法中重复了代码.无论我使用哪个类,都会执行以下两行:

this.name = name;
this.age = age;
Run Code Online (Sandbox Code Playgroud)

好像我应该能够调用人员类的初始化从内法英雄类的初始化方法,然后在代码与额外的行抛出的职业属性.

但是,我不能用Resig先生的代码那样做.以下不起作用:

var Worker = Person.extend({
    init: function …
Run Code Online (Sandbox Code Playgroud)

javascript inheritance resig class extend

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

为什么NVD3.js行加条形图示例呈现两个图表而不是一个?

我根据NVD3团队在图书馆官方网站提供的示例代码汇总了以下测试代码.出于某种原因,我总是看到页面上绘制了两个图表:一个在两个Y轴上有适当的标签,在X轴上有正确的标签,而第二个在垂直方向上压缩得更多,在Y上没有任何标签-axes并且在X轴上具有似乎是数据数组索引.

下面的代码假定D3和NVD3的最新版本,尽管即使使用网站链接到的旧版本D3,这种行为仍然存在.

在此先感谢您对此问题的任何帮助和见解.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Line + Bar Chart | NVD3.js</title>
    <link rel="stylesheet" href="nv.d3.css"/>
    <style>
        #chart svg {
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart">
        <svg></svg>
    </div>
    <script src="d3.js"></script>
    <script src="nv.d3.js"></script>
    <script>
        var data = [
            {
                'key': 'foo',
                'bar': true,
                'color': 'skyblue',
                'values': [
                    [1431993600000, 31.6882],
                    [1432080000000, 76.1706],
                    [1432166400000, 76.2297],
                    [1432252800000, 75.1944],
                    [1432339200000, 75.1536],
                    [1432425600000, 74.528],
                    [1432512000000, 75.7265],
                    [1432598400000, 75.8659],
                    [1432684800000, 74.6283],
                    [1432771200000, 73.3533]
                ]
            },
            {
                'key': 'bar',
                'color': 'steelblue',
                'values': [ …
Run Code Online (Sandbox Code Playgroud)

javascript charts d3.js nvd3.js

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

在关于Git命令的命令行调用中,反引号 - " - 做了什么?

无论如何,我不是一个"命令行"的人.我在整个职业生涯中都是一个前端开发人员,几乎没有与命令行交互,而是尽可能地使用应用程序GUI,所以这对许多人来说可能是一个相当基本的问题.

尝试使用Git时,我遇到了一个小问题.我包含了-m消息标志并尝试了类似于"示例添加功能"的消息,其中"添加"一词被"反引号符号"包围(不能在此处显示,因为这样做会显示单词作为代码,我不知道如何在这个编辑器中逃避它.

我收到了错误: -bash: add: command not found

我过去使用反引号多次围绕函数名称与Git没有任何问题.我假设这里有某种保留关键字,特别是Git或只是Linux中的命令行,但我想知道具体情况是什么,所以我可以理解将来如何避免它.

谢谢.

linux bash command-line backticks

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