Question

我找到了一个名为jsfiddle.net的非常有用的网站，我正在玩它以了解不同的代码片段是如何工作的。特别是，我找到了this code：

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

的Javascript

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

让我感到困惑的一件事是它分裂了CSS，HTML和JavaScript。我的理解是，这些组件在一个代码块中而不是在单独的文件中一起工作。是否有实际的开发环境以JSFiddle的形式呈现代码？它只是出于教学目的而没有别的吗？感谢。

Answer 1

您可以将/show添加到JSFiddle URL的末尾，以获得包含所有代码的独立页面。

Here这是您的代码

JSFiddle将它们分开，因为它可以更容易地划分代码。即所有的CSS都会进入CSS部分。

你总是可以将Javascript和CSS放在他们自己的文件中并将它们添加到HTML页面中，但它没有任何区别。

Answer 2

我的理解是这些都是有效的组件在一个代码块中而不是在单独的文件中。

如果您要重复使用Javascript和样式，那么最好将它们分解为单独的文件，这样您就不必多次重写相同的代码。

我一直认为最好将html，css和js分成单独的文件，并根据需要将它们包含在HTML中。

从JSFiddle迁移到实际可用代码

2 个答案: