JavaScript 已經成為現代Web應用程序的核心語言。它是一種強大的、運行在客戶端的腳本語言，它可以改變網頁行為、響應用戶交互、動態更新HTML和CSS。作為一種流行的編程語言，JavaScript已經產生了許多主要的框架，這些框架對JavaScript的開發越來越重要，因為它們可以讓開發工作變得更加容易和高效。本文將為您介紹一些主流框架。
1. AngularJS
AngularJS是一個開源的Web應用程序框架，它由Google維護和支持。它可以使用HTML作為模板語言，并擴展了HTML詞匯以表示應用程序的組件和數據綁定。它還使用依賴注入和模塊化，以使組件相互獨立和可重用。下面是一個簡單的AngularJS應用程序：
<html ng-app>
<head>
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="firstName">
<p>Hello {{firstName}}!</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
});
</script>
</body>
</html><html>
<head>
<title>React Example</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick() {
this.setState(state =>({
count: state.count + 1
}));
}
render() {
return (
<div>
<button onClick={() =>this.handleClick()}>
Click me! ({this.state.count})
</button>
</div>
);
}
}
ReactDOM.render(
<ClickCounter />,
document.getElementById('root')
);
</script>
</body>
</html><html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>