小编Aar*_*ius的帖子

使用RequireJS加载Backbone和Underscore

我正在尝试使用RequireJS加载Backbone和Underscore(以及jQuery).使用最新版本的Backbone和Underscore,看起来有点棘手.例如,Underscore自动将自己注册为模块,但Backbone假设Underscore在全球范围内可用.我还应该注意,Backbone似乎没有将自己注册为一个模块,这使得它与其他库不一致.这是我能想到的最好的main.js:

require(
{
    paths: {
        'backbone': 'libs/backbone/backbone-require',
        'templates': '../templates'
    }
},
[
    // jQuery registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',

    // Underscore registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {

    // These nested require() calls are just due to how Backbone is built.  Underscore basically says if require()
    // is available then it will automatically register an "underscore" module, but it won't register underscore
    // as a global "_".  However, Backbone expects Underscore to be a global variable.  To …
Run Code Online (Sandbox Code Playgroud)

javascript requirejs backbone.js underscore.js

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

在Karma + AngularJS测试中加载模拟JSON文件

我有一个使用Karma + Jasmine进行测试的AngularJS应用程序.我有一个我想要测试的函数,它接受一个大型JSON对象,将其转换为应用程序其余部分更易使用的格式,并返回该转换后的对象.而已.

对于我的测试,我希望你有单独的JSON文件(*.json)只有模拟JSON内容 - 没有脚本.对于测试,我希望能够加载JSON文件并将对象泵入我正在测试的函数中.

我知道我可以在这里描述的模拟工厂中嵌入JSON:http://dailyjs.com/2013/05/16/angularjs-5/但我真的希望JSON不包含在脚本中 - 只需直接JSON文件.

我尝试了一些东西,但我在这方面相当不错.首先,我设置我的Karma以包含我的JSON文件,看看它会做什么:

files = [
    ...
    'mock-data/**/*.json'
    ...
]
Run Code Online (Sandbox Code Playgroud)

这导致:

Chrome 27.0 (Mac) ERROR
Uncaught SyntaxError: Unexpected token :
at /Users/aaron/p4workspace4/depot/sitecatalyst/branches/anomaly_detection/client/anomaly-detection/mock-data/two-metrics-with-anomalies.json:2
Run Code Online (Sandbox Code Playgroud)

所以我把它改成只提供文件而不是"包含"它们:

files = [
    ...
    { pattern: 'mock-data/**/*.json', included: false }
    ...
]
Run Code Online (Sandbox Code Playgroud)

既然他们只是服务,我想我会尝试在我的规范中使用$ http加载文件:

$http('mock-data/two-metrics-with-anomalies.json')
Run Code Online (Sandbox Code Playgroud)

当我运行我收到的规范时:

Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json
Run Code Online (Sandbox Code Playgroud)

在我的理解中意味着它期望来自$ httpBackend的模拟响应.所以...在这一点上我不知道如何使用Angular实用程序加载文件,所以我想我会尝试jQuery,看看我是否至少可以让它工作:

$.getJSON('mock-data/two-metrics-with-anomalies.json').done(function(data) {
    console.log(data);
}).fail(function(response) {
    console.log(response);
});
Run Code Online (Sandbox Code Playgroud)

这导致:

Chrome 27.0 (Mac) LOG: { readyState: 4,
responseText: 'NOT FOUND',
status: 404,
statusText: 'Not Found' …
Run Code Online (Sandbox Code Playgroud)

angularjs karma-runner

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

使用RequireJS进行依赖注入

我可以伸展RequireJS为我的应用程序提供依赖注入多少?举个例子,假设我有一个我希望成为单身人士的模特.自执行getInstance()中不是单例 - 类型单例,而是上下文强制单例(每个"上下文"一个实例).我想做点什么......

require(['mymodel'], function(mymodel) {
   ...
}
Run Code Online (Sandbox Code Playgroud)

并让mymodel成为MyModel类的一个实例.如果我要在多个模块中执行此操作,我希望mymodel是相同的共享实例.

我已经通过制作mymodel模块成功完成了这项工作:

define(function() {
    var MyModel = function() {
        this.value = 10;
    }
    return new MyModel();
});
Run Code Online (Sandbox Code Playgroud)

这种用法是预期和常见的还是我滥用RequireJS?有没有更合适的方法可以使用RequireJS执行依赖注入?谢谢你的帮助.仍在努力抓住这一点.

javascript requirejs

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

在 JavaScript 错误上提供错误代码的最佳方法是什么?

我有一个抛出错误的库:

throw new Error('The connection timed out waiting for a response')

它可能会因多种不同的原因引发错误,并且用户很难以不同的方式以不同的方式处理错误而没有switching on error.message,这不是最佳的,因为该消息并不是真正用于编程决策。我知道很多人 subclass Error,但似乎过分了。相反,我正在考虑 (a)error.name用自定义名称覆盖:

const error = new Error('The connection timed out waiting for a response');
error.name = 'ConnectionTimeout';
throw error;
Run Code Online (Sandbox Code Playgroud)

或 (b) 设置error.code(不是标准属性):

const error = new Error('The connection timed out waiting for a response');
error.code = 'ConnectionTimeout';
throw error;
Run Code Online (Sandbox Code Playgroud)

有没有首选的方法?这些方法中的任何一种都令人不悦吗?这是我能找到的关于该主题的最接近的对话,但它似乎没有定论,并且可能与新约定过时了:https : //esdiscuss.org/topic/creating-your-own-errors

javascript error-handling

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

React JSX中的自定义HTML元素标记

我们正在使用一个使用自定义元素的组件库.这要求我们在JSX中使用自定义HTML标记.一个非常简单的例子:

var App = React.createClass({
   render: function() {
       return <niner/>;
   }
});

React.render(
        <App/>,
        document.getElementById('content')
);
Run Code Online (Sandbox Code Playgroud)

在这种特殊情况下,我只需要React输出一个niner标签,而不是试图做任何太特别的事情.我故意没有任何反应组件.

根据JSX的深入,

React的JSX使用大写和小写约定来区分本地组件类和HTML标记.

这使我相信ReactJS只会将其<niner/>视为常规HTML标记,而不是扼杀它.但是,当我运行上面的代码时,我收到以下错误:

Uncaught TypeError: Cannot read property 'replace' of undefined 10734305_1719965068228170_722481775_n.js:94
createSourceCodeErrorMessage 10734305_1719965068228170_722481775_n.js:141
transformCode 10734305_1719965068228170_722481775_n.js:187 
run 10734305_1719965068228170_722481775_n.js:242
check 10734305_1719965068228170_722481775_n.js:295
loadScripts 10734305_1719965068228170_722481775_n.js:324 
runScripts
Run Code Online (Sandbox Code Playgroud)

我需要做一些巫术才能让它发挥作用吗?谢谢.

javascript reactjs react-jsx

9
推荐指数
2
解决办法
8520
查看次数

使用webpack动态需要别名模块

我正在通过webpack配置一堆模块别名resolve.alias.然后,在我的应用程序代码中,我想要使用包含别名的变量来使用其中一个模块:

var module = require(moduleAlias);
Run Code Online (Sandbox Code Playgroud)

不幸的是,这会创建一个"上下文模块",其中包含脚本目录及其后代中的所有内容,这不是我在此特定情况下所追求的内容.此外,由于我的代码中没有任何地方我明确要求所有别名模块,它们不会内置到我的应用程序中.

两个问题:

  1. 如何确保所有别名模块与我的代码捆绑在一起?
  2. 如何使用包含别名的变量访问它们?

谢谢!

webpack

9
推荐指数
2
解决办法
3509
查看次数

在BackboneJS中调用render()的适当方法

在我看过的大多数BackboneJS示例中,父视图调用render()子视图上的函数.这对我来说有点奇怪.也许它完全用于优化或其他东西,但我不明白为什么优化不能在子视图本身内发生.儿童观点是否应该负责自己打电话render()?在我的所有观点中,我最终得到的结论如下:

initialize: function() {
    this.render();
}
Run Code Online (Sandbox Code Playgroud)

此外,如果我的父视图更新了子视图的model属性,那么孩子应该如何知道模型已更改(因此render()需要调用)?我假设在这种情况下,父母被迫打电话给孩子render().虽然有点推断,为什么父母需要知道孩子在模型改变时需要重新渲染?看起来调用子视图的render函数在父视图的域之外.

javascript backbone.js

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

$ compile内部的click handler不进行插值

我正在尝试设置一个指令,当单击其关联元素时,将编译一段HTML,并将结果添加为单击元素的子元素.

这是我的JS:

  var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
    })
    .directive('compileTest', function($compile) {
      return {
        link: function(scope, element, attrs) {
          element.bind('click', function() {
            var content = $compile('<div>Hello {{name}}</div>')(scope);
            element.append(content);  
          });
        }
      }
    });
Run Code Online (Sandbox Code Playgroud)

在这种情况下,{{name}}不会被插值.但是,如果我删除了单击侦听器并在调用链接时立即执行$ compile()和append(),则插值有效.我有什么误会?我认为以上应该有效.

这是插件:http://plnkr.co/edit/YEGCq6

谢谢!

angularjs

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