JavaScript Component Tour (i) analysis and design _javascript skills

On the other hand, because JavaScript is often tightly integrated with host environments such as browsers, there is a lack of powerful and easy-to-use development tools. In such an environment, developing a component or framework is a challenging task.
This time, we will take the opportunity to develop component analysis, design, implementation, build, and test, and explore all aspects of the component development process with a simplified JavaScript component development. These discussions will be posted in 4 pieces (links will be updated after posting):

1. Analyze and Design components
2. coding implementation and algorithms
3. Building Components with Ant
4. Testing JavaScript Components

Now, suppose we're going to design and implement a queue management component from the beginning, let's get to the queue:

Queue

The pictures come from Wikipedia.

A queue is a "first-in first Out" (FIFO) data structure that can only append items to its tail, and items are removed from the head, and the rule is applied to the component we are discussing. For the queue, believe that the C or data structure of the students have learned the course, if you have to give it to the teacher, please use the search engine to understand the queue knowledge.

The specific features that this queue management component will implement are: it is a task manager that maintains three task queues at high, medium, and low priority, and the customer (the consumer) can at any time add the task they want to perform to a queue, specify the context in which the task runs, and pass the necessary data to it. Customers can also run this queue at any time, and the tasks in the queue are run in a reasonable way in accordance with the specified dependencies.

In order not to make the component too simple and impractical, we specifically added "sugar" to it: prioritization, incoming contexts and data, processing dependencies. If the above paragraph is understood as a requirement, then first of all, we need to extract the most important keywords, which directly determine how the component should be designed:

• Queue
• Priority level
• Dependency relationships

Then, we extract the objects involved:

• Task Manager (TaskManager): From the current requirements, it only needs one instance.
• queues (queue): Each priority corresponds to a queue, TaskManager managed by these three Queue instances.
• Tasks: Describes the tasks that are added, and puts them in the appropriate priority Queue .
• dependency (Dependency): Describes a single dependency, that Task1 is Task2 , a dependency, which obviously Task may have multiple dependencies.

Its object model can be roughly represented as follows:

The object map of the initial design

Notice that Dependency there is actually nothing to do, and that Queue the two methods can be assigned to TaskManager & respectively Task . Which object is responsible for a method is an easily contentious topic, not within the scope of our discussion. This time, our focus is on using JavaScript to implement this component, combining JavaScript's unique language features, and we envision the implementation of these four objects:

• TaskManagerImplemented directly through objects (object). In the JavaScript world, objects can be used as natural static classes-you can define attribute methods directly in "Class" ClassObject property and refer to them as static classes CassObject.property .
• QueueExpressed as an array, Task each item in the array is stored. To Queue do the operation is bound to define some instance methods in its prototype, because each Queue instance is a native array, in order to reduce the Array.prototype intrusion, we can consider to define these methods Task.prototype on--Transfer responsibility to the task.
  The three Queue arrays are assembled together to form a "large array" to represent three different priority queues, which can be used as TaskManager properties.
• The core of a task is a function that can be used directly to represent a task, but considering that it has its own unique attributes (precedence, dependencies, and so on), and that it is the most frequently manipulated object that may be extended later, we decided to define it individually as an object.
• Dependencies exist directly as an attribute of an array- Task -placing Task other multiple identifiers that are dependent Task on the array, no longer defining the object separately.

Analyzed, the situation became clear--we needed to simplify four objects to two: TaskManager & Task , and two other objects to be implemented in native arrays:

A simplified object model

Also note that this is done many times in the array, and encoding process must involve the array of traversal, lookup and other operations, JavaScript 1.6 has been implemented for us these array operations. To take advantage of the native methods built into the array and run in older browsers, we used Eric's code . In this way, we can directly use methods such as forEach / indexOf , more attention to the function of the component implementation, and in the modern browser to achieve better performance.

~~~~~~~~~~~~~ Gossip split Line ~~~~~~~~~~~~~

Well, after a serious analysis of component design, it's time to embark on a happy coding journey. Don't worry, it TaskManager 's tacky. One thing: Not enough to express a prioritized, dependent task queue, and use it to make namespaces with other code conflicts. Well, this component is called Smart Queue , loud and unique. ^^

The analysis design is good, the name also has, wants to know the concrete realization process, and listens to the Let's.