in real development, basically do not write an object, encapsulate properties and methods, basically write logical code (write click events, ajax requests and so on are the most). What are the scenarios in which object-oriented writing is actually used? And ask all the bosses to give us some advice.
suppose you have an asynchronous list on your page, whose main functions include 1, asynchronously requesting data, 2, rendering the corresponding data to the page. In this case, there is nothing wrong with writing the logic of the code directly on the page. After
, you need to add an asynchronous list to the page, and you will find that the codes of the two lists are similar, except that the request address or parameters are different. You can copy the code of the first list and change it.
once there is more use of this list, so does the copy of the list code. One day I suddenly found that there was a bug, in the first list, and then there were n bug in the n copy after that. If you change it, you will get dark circles under your eyes.
at this time, the advantage of object-oriented comes out. All lists have the same behavior: request data and render data are implemented by object methods. The difference: request addresses or parameters are saved with properties used by object objects to distinguish differences, so there is an asynchronous list class:
//
class AsyncList {
url,
params
getData(),
renderData(),
}new every place you use:
var list1 = new AsyncList(/* */);
var list2 = new AsyncList(/* ... */);
// ...later related maintenance only needs to be modified AsyncList .
to sum up:
when your code reaches a certain size and finds that there are a lot of code that needs to be encapsulated and reused, the use of object-oriented in this scenario can reduce the complexity of code organization to a certain extent.
object-oriented still depends on the scene, not object-oriented for the sake of object-oriented
Yes, you are right, as long as we use off-the-shelf libraries, we will lose the motivation to think.
it is recommended that you watch JavaScript Design patterns and Development practices, which will tell you about object-oriented applications.
for example, it is necessary to provide some interfaces for writing a plug-in. For example, simple carousel may provide a play method to allow images to be rotated, and parameters for users to configure, such as the speed of speed, and so on.
for example, in the question of Baidu Front-end College, several character models are built. At this time, object-oriented
is a common problem in front-end learning. In fact, it is not necessary to find it so difficult. It is that you sort out your thinking, which is originally process-driven. We think of these things in advance, decompose each action in place, like the movement of a small ball, we move the ball may involve the action, attribute decomposition, attribute corresponding to the possible change to position, etc., the action corresponds to an execution process, so we only need to tell the ball what action to perform, or when to perform what action, in order to change the attribute.
1. This still depends on the size of the main project. If the subject is a small project done by himself, the logic is simple, and it is no problem to write the logic code directly.
2. If the project host company wants to do a medium-and large-scale project, multi-person cooperative development, and the later demand is generally increasing, your project product will continue to iterative development, the code will be written more and more, tens of thousands of lines of code will be written in a JS file, and the coupling is too high. I don't know if the subject will feel a headache, whether it is convenient to debug BUG, and whether it is fast to find a way. To add a new requirement, you have to change the code in several methods in the document, and it takes a long time for newcomers to make logic.
this involves code maintainability, opening and closing principles, express debugging and positioning, BUG repairing BUG and other problems, so it is necessary to use software engineering methods and object-oriented ideas to develop projects, including MVC,MVVM and other patterns, as well as publish subscription, command patterns and other design patterns to achieve project maintainability, scalability, and write new code when needed. Ensure that the minimum changes and newcomers take over know the basic ideas followed by the project, facilitate handover, and so on.
3. With so many frameworks and design patterns, you can also improve the ability to install B
if you have studied the source code of some frameworks or plug-ins in depth, you will find a different world.
when you find that something is big and you need a better design to manage it
you package all the code you write into plug-ins according to business requirements, and then keep tuning.
write frames, libraries, or write your own Mini Game.
very simply, when you have more function names in a js file, you will want to wrap these functions, so you think of "object-oriented".
of course, if you're used to naming functions like aaaba_sfdsf_csfs_wefwf (), you don't have to be object-oriented.
Encapsulation of the jquery plug-in
you can take a look at the wheel of one of my jquery business packages address
.javascriptobjectfunctionNothingnessHTMLJSONjQueryCSSVBSvar a = {
html: none,
JSON: true,
jQuery: true,
CSS: alert("Hi!"),
};JSA big project, when you need the same component in many places, it's an object-oriented process when you want new to come in instead of pasting it in.
various methods have been tried, including the simplest way to disable the thouchmove event directly. Has the Wechat browser under ios been unable to stop the rebound? ...
In the vue-cli project, I directly introduced the particls library into index.html, and the related files are placed in the static directory . <div id="particles-js">< div> <script type="text javascript" src="s...
I am a novice. At present, I have encountered some confusion when learning set data types in Es6, as follows: in the Es6 about Ruan Yifeng, it is mentioned that set types can be used to intersect and judge sets, but I have tried it unsuccessfully. ...
the article on Wechat s official account crawled through python at the backend found that the video in the article could not be played, and the video was nested in iframe, as shown in <iframe class="video_iframe" data-vidtype="2"...
currently working on a saas platform what kind of architecture can meet the following requirements: Separation of front and rear ends flexible selection of front-end technology, less historical burden, convenient maintenance, and organizational n...
read what a big guy wrote: Function.prototype.bind = Function.prototype.bind || function (context) { var me = this; var args = Array.prototype.slice.call(arguments, 1); var F = function () {}; F.prototype = this.prototype; var bound...
the text matched by the search box above an article is highlighted to realize the idea. ...
want to use vue2.0 to develop a small web application for the company, running on the mobile side. How can the above functions be achieved? ...
A quick implementation is generally as follows: Function.prototype.bind = function (context) { var me = this; var argsArray = Array.prototype.slice.call(arguments); return function () { return me.apply(context, argsArray.slice(1)) ...
as shown in the picture, after clicking the button, you append a new button in document.body. How did the new button be updated to the page? will the original button be rendered again? ...
I just got in touch with Mini Program developer and recently encountered this problem when I wrote the demo, of a music player. After I returned to the list page from the playback page (or to the home page), I entered the playback page from the entrance...
const obj = { name: " jsCoder", skill: ["es6", "react", "angular"], say: function () { for (var i = 0, len = this.skill.length; i < len; iPP) { setTimeout(function(){ ...
as shown in the figure above, use css to make a magnification effect when a mouse passes over a square, but as soon as you enlarge a square, the square next to it will be squeezed out or squeezed into the next row. Is there any way to fix the enlarge...
there is a bypass Filter in proxyTable. How do I use it? Is it the return path? Or return true false ...
there is such a requirement, as shown in the figure are four menu buttons. The four menu icons here are not vector icons similar to Font Awesome, but pictures in png format, namely f.png, u.png, s.png, and p.png. demand: clicking on the correspondi...
1. At the beginning, it was 2. . Why is this? ...
how do Vue projects built with Nuxt.js share header and footer files? only files with section contents are placed in the page directory. Navigation bars and footers and every time you jump to a new route, navigation doesn t have to be reloaded. Gods, ...
I have a vegetable chicken at the front end. Recently, there is a new demand for the company s project, which has been maintained by others before. the front end uses a framework built by pHp and uses the memcached plug-in. After the project runs, ,...
In the case of MDN, the local operation does not print the geographical location, nor does it report an error. Why? Ask for instructions at the beginning, the PC side has been returning a timeout. It may be because the PC side does not support it. Afte...
there is a benchmarks directory in some open source projects, such as vue , which is very popular now. The literal translation of benchmark means benchmark test. It seems that some functional performance tests can be done. given that there is a test di...