小编vsy*_*ync的帖子

将html模板文件合并到一个JS文件中

  1. 我有HTML模板文件(下划线模板语法)
  2. 这些文件以HTML格式保存,因此易于编辑(IDE语法高亮显示)
  3. 我不想用ajax获取它们,而是将它们全部组合起来并将它们作为js文件包含在内.
  4. 使用GULP作为我的任务运行器,我希望以某种方式将所有 HTML 组合成这样的东西,作为我可以包含在我的BUILD过程中的javascript文件:

template_file_name 是HTML文件名.

var templates = {
   template_file_name : '...template HTML string...',
   template_file_name2 : '...template HTML string...',
   template_file_name3 : '...template HTML string...'
}
Run Code Online (Sandbox Code Playgroud)

我真的不知道如何处理这个,以及如何从所有文件创建这样的文本..我可以将每个单独的文件转换为字符串,但我怎么能把它放在一个对象中?


更新 - 10月25日,15日 - ES6模块:

对于那些希望您的模板作为ES6模块的人,我创建了gulp-file-contents-to-modules

演示输出:

export var file_name = "This is bar.";
export var file_name2 = "This is foo.\r\n";
export var my-folder__file_name = "This is baz.\r\n";
Run Code Online (Sandbox Code Playgroud)

我的所有NPM包都与使用gulp组合模板文件有关:

  1. https://www.npmjs.com/package/gulp-file-contents-to-keys
  2. https://www.npmjs.com/package/gulp-file-contents-to-modules
  3. https://www.npmjs.com/package/gulp-template-compile-es6

javascript underscore.js gulp underscore.js-templating

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

使用适当的GC删除DOM节点(无泄漏)

问题

添加节点,同时从DOM中删除旧节点,不会丢弃内存中的旧节点.(至少不是所有人,没有明显的理由).

如何看待这种情况

(你已经知道了,但无论如何..)
右键单击输出区域并使用Chrome 开发人员工具进行检查.单击时间轴选项卡,然后单击左上角的圆圈(点)开始录制.

现在点击body元素,它将每隔300ms 开始添加和删除项目
(删除的节点应该被垃圾收集).

停止录制,将数据采样区域扩展到最大,您将在屏幕的下半部分看到绿色的节点.预期的图形将上下移动(其中下降意味着GC已正确丢弃节点).

测试页面

这2个测试页面非常原始.当然,在现实生活中,开发人员使用生成大量文本的模板,这些模板应转换为DOM并注入页面,因此内存中的实时DOM节点数应保持较低,并且必须丢弃已删除的节点.

与jQuery - http://jsbin.com/lamigucuqogi/2/edit - 大约40秒后,GC变得疯狂并停止收集被删除的节点,这会导致通货膨胀.

在此输入图像描述

朴素的方式 - http://jsbin.com/riref/2/edit - 似乎节点没有以令人满意的速度被移除,并且数量不断增长和增长...

在此输入图像描述

为什么会发生这种情况,如何正确地删除NODES以便不会发生通货膨胀?

javascript garbage-collection memory-leaks google-chrome-devtools

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

使用jQuery中的延迟对象处理多个ajax调用的不同成功和失败状态

$.when 为同时查询的所有多个ajax调用返回Deferred对象.

如果一切都成功.done()执行,并且任何一个url .fail()执行失败.

如何处理部分成功状态?(即)如果传递5个url $.when,如果3个成功,我们需要处理成功状态,并且2失败,我们需要处理失败状态.

$.when($.getJSON(headerUrl), $.getJSON(tasksUrl), $.getJSON(testingTrackerUrl), $.getJSON(highlightsUrl)))
    .then(function(headerData, tasksData,testingTrackerData,highlightsData) {
        printData(headerData, tasksData,testingTrackerData,highlightsData);
    })
    .fail(function(data, textStatus, jqXHR) {
        console.error('Got error in '+jqXHR);
});
Run Code Online (Sandbox Code Playgroud)

jquery deferred

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

浏览器中撤消事件侦听器

为了提供上下文,我的团队正在浏览器中构建一个富文本编辑器,它需要在会话之间将状态保存到服务器。编辑器的状态显然可以从包含 keydown 事件的文档更新中更改,但我们还应该考虑由撤消/重做事件触发的编辑器阶段的更新

不幸的是,浏览器没有本机撤消/重做事件参考)。一项提议的黑客似乎是除了禁用上下文菜单之外,还停止传播映射到撤消键盘快捷键的按键事件。然而,这仍然为用户提供了直接导航到Edit -> Undo应用程序菜单栏的能力,这将直接触发document.execCommand('undo')而不触发事件。因此我们不知道要向服务器发送更新。

这是关于此问题的W3C线程。截至撰写本文时,解决方案似乎仍在制定中......

当另一个浏览器文本编辑器Quill遇到这个问题时,他们的团队似乎建议:“禁用本机撤消/堆栈”,这正是 Facebook 的Draft.js实际所做的。鉴于这似乎是我们正在处理的问题,有谁知道如何禁用/替换浏览器的本机撤消/重做堆栈?显然,这是一个积极的解决方案,但是,在撰写本文时,这似乎是唯一的选择。

与此同时,这个问题的答案可能隐藏在草案代码的某个地方。如果没有人击败我的团队,我会报告选秀的情况。认为至少值得记录这个问题。

javascript events dom undo dom-events

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

获取重试请求(失败时)

我正在使用浏览器的本机提取API来处理网络请求.此外,我正在使用whatwg-fetch polyfill用于不支持的浏览器.

但是,如果请求失败,我需要重试.现在我找到了这个npm包whatwg-fetch-retry,但他们没有解释如何在他们的文档中使用它.有人可以帮我这个或建议我另类吗?

javascript polyfills fetch-api

7
推荐指数
4
解决办法
6751
查看次数

将 head 行添加到 Antd 表格组件

我想在 Antd 表组件中添加另一行,所以它看起来像这样:

在此输入图像描述

我无法将该行添加为一行,<tbody>因为它将与其余数据一起进行过滤和排序。我希望它成为表数据的外部部分。

将输入放在已经存在的<th>单元格中远不是一个令人满意的解决方案,因为我需要对 CSS 进行大量修改才能使其工作,并在此过程中丢失一些 LESS 变量。

这是我当前的尝试,第一个中包含表单元素thead > th

在此输入图像描述

为了仅将背景保留在表单行上,我需要将其与第一个(也是唯一的)thead<tr>元素分离到它自己的“自定义”行。

有谁知道如何用 Antd 实现这个设计<Table>


我希望最终结果如下所示:(通过检查员修改)

在此输入图像描述

reactjs antd

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

::选择动画

为什么animation属性不适::selection用于CSS中的选择器?

演示页面

@keyframes frames{ 
  50%{ color:red } 
}
@-webkit-keyframes frames{ 
  50%{ color:red } 
}

::selection        { background:#EEE;         animation:0.4s frames infinite; }
::-moz-selection   { background:#EEE;         animation:0.4s frames infinite; }
::-webkit-selection{ background:#EEE; -webkit-animation:0.4s frames infinite; }
Run Code Online (Sandbox Code Playgroud)

css css-animations

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

prototype:访问实例范围的"this"深度范围

如何才能缓存最顶层的范围,以便以后在原型中更深入地使用,如下所示:

var Game = function(id){
   this.id = id;
};

Game.prototype = {
  board : {
    init: function(){
       // obviously "this" isn't the instance itself, but will be "board"
       console.log(this.id);
    }
  }
}

var game = new Game('123');
game.board.init(); // should output "123"
Run Code Online (Sandbox Code Playgroud)

更新:

那么现在我考虑一下,我可以使用apply/ call并传递上下文...

game.board.init.apply(game);
Run Code Online (Sandbox Code Playgroud)

javascript prototype

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

如何方便地分发我的小书签?

我刚刚写了我的第一个书签。它是简单的 js 代码,它获取当前页面的 URL 并执行 POST 请求以将其提交到另一个页面。

问题是我需要在不允许 HTML 的博客平台 (quora.com) 上共享此内容。因此,我需要在另一个网站上发布指向我的书签的链接,并提供指向该书签的链接。我希望能够提供一个链接,人们可以将其拖动到书签栏。

这是书签代码。

javascript:(function() {
    var msg = window.jQuery.ajax({url:'https://www.quora.com/api/logged_in_user',async:false,type:'GET'});
    var username = undefined;
    if (msg) {
        username = window.jQuery.parseJSON(msg.responseText.replace('while(1);',''));
    window.jQuery.post('https://my-website',
        {'answer_1':window.location.href,'submitter':username.name});
    alert (username.name + ' nominates  ' + window.location.href);
}})();
Run Code Online (Sandbox Code Playgroud)

javascript bookmarklet quora

6
推荐指数
0
解决办法
2133
查看次数

Redux中的动作应始终唯一吗?

在此示例中,我使用名为ADD_TODO的操作

import { createStore, combineReducers } from 'redux';

function todos(state, action) {
    state = state || [];
    switch (action.type) {
        case 'ADD_TODO':
            return state.concat([ action.text ]);
        default:
            return state;
    }
}

function counter(state, action){
    state = state || 0;
    switch (action.type){
        case 'INCREMENT':
            return state+1;
        case 'DECREMENT':
            return state-1;
        case 'ADD_TODO':
            return state+100;
        default:
            return state;
    }
}

var app = combineReducers({
    todos: todos,
    counter: counter
});

var store = createStore(app);
store.dispatch({ type: 'ADD_TODO': text: 'buy eggs' }); …
Run Code Online (Sandbox Code Playgroud)

redux

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