JavaScript component journey (I) Analysis and Design _ javascript skills

Without a doubt, JavaScript is a very flexible scripting language, and sometimes it is like a tough Wild Horse-you benefit from its flexibility at the same time, we also need to be careful when it becomes out of control. On the other hand, because JavaScript is usually closely integrated with the host environment (such as a browser), it lacks powerful and easy-to-use development tools. In such an environment, developing components or frameworks becomes a challenging task.
This time, we will take a simple JavaScript component development as an opportunity to gradually expand component analysis, design, implementation, construction and testing tasks, and explore all aspects involved in the component development process. These discussions will be posted in four articles one after another (the links will be updated after being posted ):

1. Analysis and design components
2. Coding implementation and Algorithm
3. Build components with Ant
4. Test JavaScript Components

Now, let's design and implementQueue Management ComponentFirst let's get to know the queue:

Queue

The image is from Wikipedia.

A queue is a "first-in-first-out" (FIFO) data structure. It can only be used to append an item to its tail, this rule will be applied to the components we are discussing. For queues, I believe that students who have studied the C or data structure courses already know about the queue. If you have returned it to the teacher, please use the search engine to learn about the queue.

The queue management component must implement the following functions: it is a task manager that maintains three Task queues at high, medium, and low priorities. The customer (User) you can add the task to be executed to a queue at any time. You can specify the context of the task and transmit the necessary data to it. The customer can also run this queue at any time, and the tasks in the queue run in proper order according to the specified dependency.

In order not to make the component too simple but not practical, we specifically added some "sugar" to it: priority, incoming context and data, and processing dependencies. If we understand the above section as a requirement, We need to extract the most important keywords from it, which directly determines how the component should be designed:

• Queue
• Priority
• Dependency

Then, we extract the objects involved:

• Task Manager): According to the current requirements, it only needs one instance.
• Queue): Each priority corresponds to a queueTaskManagerManage these threeQueueInstance.
• Task): Description of the added task, which is placed in the corresponding priorityQueue.
• Dependency): Describe a single dependency, that isTask1DependencyTask2Obviously,TaskIt may have multiple dependencies.

Its object model can be roughly expressed as follows:

Initial design object Diagram

NotesDependencyIn fact, there is nothing to do, andQueueThe two methods can be handed overTaskManager&Task. Which object is responsible for a method is a topic that is easily controversial and not within our scope of discussion. This time, we will focus on using JavaScript to implement this component. Combined with the unique language features of JavaScript, we envision the implementation of the above four objects:

• TaskManagerIt is implemented directly through an Object. In the JavaScript world, objects can be used as natural static classes-you can directly"ClassObjectDefine the attribute MethodpropertyAnd reference it as a static class.CassObject.property.
• QueueIn the form of an Array,TaskEach item in the array. PairQueueSome instance methods must be defined in prototype. Because each Queue instance is a native arrayArray.prototype, We can consider defining these methodsTask.prototype-- Transfer the responsibility to the task.
  SetQueueArrays are combined to form a "large array" to represent three Queues with different priorities. This large array can be usedTaskManager.
• The core of a task is a function, which can be used to represent a task directly. However, considering that a task has its own unique attributes (priority, dependency, and so on ), it is also the most frequently operated object and may be extended in the future, so we decided to define it as an object separately.
• Dependencies are directly in the form of arrays.TaskA Property --TaskAdd multiple other DependenciesTaskThe identifier is placed in this array and is not defined separately.

After analysis, the situation becomes clearer-we need to simplify the four objects into two:TaskManager&TaskThe other two objects are implemented using native Arrays:

Simplified Object Model

It is also noted that the array is implemented multiple times, and the array traversal and search operations are involved in the encoding process. JavaScript 1.6 has already implemented these Array Operations for us. To fully utilize the built-in native methods of arrays and run them in older browsers, we use Eric's code. In this way, we can directly useforEach/indexOfMore focus on the implementation of components, and achieve better performance in modern browsers.

~~~~~~~~~~~~~ Gossip line ~~~~~~~~~~~~~

Well, after seriously analyzing the component design, we have to embark on a happy coding implementation journey. Don't worry,TaskManagerIt seems cheesy: it is not enough to express a task queue with priority and dependency management, and it is possible to use it as a namespace to conflict with other code. Okay, this component is calledSmart QueueIt's loud and unique. ^

The analysis is well designed, and the name is also available. I want to know the specific implementation process and listen to the next decomposition.