從JSFiddle移動到實際可用代碼

我發現了一個非常有用的網站，名爲jsfiddle.net，我正在玩弄它以瞭解不同的代碼段如何工作。特別是，我發現this code：從JSFiddle移動到實際可用代碼

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

是困惑我雖然是它分裂了CSS，HTML

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); 
    }); 
    }; 
}

一件事，和JavaScript。我的理解是，這些組件都是在一個代碼塊中一起工作的組件，而不是單獨的文件。實際上是否存在像JSFiddle一樣提供代碼的開發環境？這僅僅是爲了教學目的，沒有別的？謝謝。

來源

2014-11-04 Max Power

很多**每個**開發環境都將單獨的東西保存在單獨的文件中。 – Nit 2014-11-04 22:02:08

將單獨的東西分解成單獨的文件是適當的。如果您將所有樣式信息保存在單獨的.css文件中，並將該.css文件包含在HTML中，那麼更改所有樣式都意味着對.css文件進行單一更改，並且更改將會有一個影響包含它的每個HTML文件。保持這一切意味着你必須編輯每一個HTML文件來做出相同的改變。 – 2014-11-05 17:54:34

這是我的理解，這些組件都是在一個代碼塊中將合併在一起，而不是在單獨的文件中。

如果您打算重新使用Javascript和樣式，那麼它們最好分解爲單獨的文件，因此您不必多次重新編寫相同的代碼。

我一直認爲最好的做法是將html，css和js分隔成不同的文件，並根據需要將它們包含到您的HTML中。

來源

2014-11-04 21:59:21

您可以將/show添加到JSFiddle URL的末尾以獲取組合了所有代碼的獨立頁面。

Here它是你的代碼

的jsfiddle把他們分開，因爲這使得它更容易劃分代碼。即所有的CSS都進入CSS部分。

你可以隨時把Javascript和CSS放在他們自己的文件中，並將它們添加到HTML頁面，但它沒有任何區別。

來源

2014-11-04 21:54:58 Bijan

太好了，非常感謝。 – 2014-11-04 22:50:20

從JSFiddle移動到實際可用代碼

回答

相關問題