This article explores the differences in the implementation of AngularJS and traditional JavaScript control DOM by implementing two simple business requirements, and tries to understand the programming ideas of frameworks like MVW in popular web front-end development.
This requirement is very common. For example, a two-level menu, when the first-level menu item is clicked, the corresponding submenu item should be displayed or hidden.
jQuery implementation:
The code copy is as follows:
<!-- html -->
<ul>
<li>
Item 1
<ul>
<li>Item child 1</li>
</ul>
</li>
</ul>
// javascript
$('li.parent_item').click(function(){
$(this).children('ul.child').toggle();
})
AngularJS implementation:
The code copy is as follows:
<!-- html -->
<ul>
<li ng-click="hide_child = !hide_child">
Item 1
<ul ng-hide="hide_child">
<li>Item child 1</li>
</ul>
</li>
</ul>
The traditional way of operating DOM will not be described in detail. The implementation of AngularJS requires much refinement of the code, only the HTML version is enough. The above code uses these knowledge points of AngularJS:
1.Directives
2.Expressions
ng-click and ng-hide are both Directives (instructions) that come with the framework. The former is equivalent to providing an Event Handler to the li tag. When the HTML element (li) is clicked, the expression hide_child = !hide_child will be executed. Let's first look at the ng-hide directive, which will control whether the HTML element is to be displayed (implemented through CSS) based on the expression result of the assignment (Bolean value). That is to say, if the hide_child variable is true, then ul will be hidden, otherwise the result will be the opposite.
Here hide_child is actually a variable on $scope. Changes to its value can also be implemented using the controller controller to wrap a method, but the current statement is relatively simple and is directly written in the instruction assignment.
Through the above simple code analysis, we can see two more obvious features of AngularJS:
1. The DOM operations are blocked through instructions and expressions, and the extra JavaScript code is saved by simply using simple code.
2. The application of directives and expressions is only directly nested in HTML, which is somewhat contrary to the code style of Unobtrusive JavaScript that jQuery pushes.
Let’s first look at another requirement and then explain the above conclusion in detail.
Requirement 2: By clicking on the div, triggering the selection of a radio button in the form
The traditional HTML Form element is not very friendly to operate on today's mobile devices. For example, the Radio button radio box requires precise positioning on the touch screen to control this component, but the manual designated position is very rough. A common practice is to add a corresponding Label control, but the screen-occupying ratio of the text itself is not ideal, and it does not have a clear information communication effect. Therefore, a div or li tag with a larger area is usually operated indirectly.
jQuery implementation:
The code copy is as follows:
<!-- html -->
<ul>
<li>
<input type="radio"
id="option1" />
<label for="option1">option 1</label>
</li>
</ul>
// javascript
$('li.selection').click(function(){
$(this).children('input[type="radio"]').click();
})
AngularJS implementation:
The code copy is as follows:
<!-- html -->
<ul>
<li ng-repeat="option in options"
ng-click="model.option = option.value"
ng-class="{active: model.option == option.value}" >
<input type="radio"
ng-model="model.option"
value="{{option.value}}"
id="option1" />
<label for="option1">option 1</label>
</li>
</ul>
In this solution, we also did not involve additional JavaScript code and used several additional instructions. For comparison and reference, we only care about the expressions of the two instructions ng-click and ng-model.
Let's first look at the ng-model directive of the input element. The assignment here means that we associate the input on the template with the option attribute of the $scope.model object. For a deeper understanding of data binding, you can refer to Data Binding. This specified association makes the template control directly bind to the data model, and this binding is bidirectional. This means that once the user modifies the value in the control (check radio input), the corresponding Model object will be reassigned (model.option); at the same time, if the value of the Model object changes, the input control in the template will also reflect the changes accordingly. And this is actually not achieved in the above-mentioned implementation of jQuery.
Therefore, through AngularJS data binding, clicking the li element to indirectly complete the process of triggering input is as follows:
1. Click the li tag to assign a value to model.option;
2. Modify the Model object and locate the corresponding input control (the value of the value is model.option);
3. Activate the checked property of the input control
Through the above two cases, we have a new understanding of the operation of the Web front-end.
First of all, in terms of technical implementation, by introducing new concepts such as instructions, expressions, data binding, etc., we can operate DOM in a completely new way, rather than just the implementation of JavaScript code that is interoperable with users and HTML components. This kind of change in thinking is huge.
Since the beginning of this century, the rise of dynamic web programming, server-side programming technology has been improving. From the beginning, CGI/PHP/ASP produced .NET vs. Java from the language and platform. Development efficiency and software processes promoted MVC framework/ORM/AOP, etc., and performance and big data brought NodeJS/NoSQL/Hadoop, etc., while the technical requirements of the browser front-end did not seem so radical. On the one hand, through the server side and the database, most of the business needs of the B/S model can be met; on the other hand, the browser itself has differences between different platforms, incompatibility with the standards of scripting language and rendering technology, as well as lack of computing power and security considerations.
In this case, most of the time, the browser needs only need to consider rendering pages and simple user interaction. HTML/DOM plus JavaSript/CSS thus accomplishes the main work of the front-end. So, there were no front-end workers in the past, only web designers were needed. Gradually, the requirements for the front-end have increased, and jQuery has become the most used package library for JavaScript operating DOM. At this stage, the main task of jQuery/JavaScript is still only a tool for presenting and interacting with the user's browser terminal.
After understanding the origin of jQuery, it is not difficult to find that some of the rules pursued in the past, such as Unobtrusive JavaScript, were limited to the means and methods of implementation at that time. In order to separate the DOM and JavaScript code logic, we preferred the method with higher maintenance. After the front-end demand for JavaScript increased, many front-end frameworks of MVC/MVP emerged, as well as AngularJS's so-called MVW (Model-View-Whatever), and JavaScript and DOM's one-size-fits-all approach have changed. Originally, we considered the direct operation of interface display and user interaction, but now we have client data binding, rich instructions, and dependency injection. What awaits us will be a brand new programming model and way of thinking.