During web development, many plug-ins, such as text boxes, drop-down trees, and drop-down boxes, are required. The same plug-in may be used in developed web pages to satisfy various complex business logic, such as a simple drop-down tree. In some cases, Drag and Drop sorting is required, in some cases, fuzzy search and permission control are required. If it is used only once, you can write a plug-in that meets your needs.
However, when you need to use it in many places, you will find that you will constantly copy some of the code you have written. The more frequently you use, the more you copy. When a code has a bug, all the places where the code has been copied need to perform the same maintenance. I firmly resist copying code, which is definitely a big taboo in the code field. When we need to copy code, what we need to do more is to think deeply.For example, to build a structure that can be expanded continuously, the controls of the same class will have a set of structures that will gradually accumulate, A wide range of controls are combined to form a scalable framework, which is collectively referred to as the UI framework. Common ones include jquery's official jqueryui, smartui, easyui, extjs, and so on. In view of this, as the number of plug-ins does not increase, we will gradually hope to write a framework to compete with these big frameworks.
Therefore, an important element in the framework must be an independent plug-in. When we write a plug-in, how can we make its scalability meet almost all business logic? This is a question worth thinking about.
Recently, I came across a very good pull-down tree control ztree. I have to say that it is really excellent. For the first time, you can familiarize yourself with all the APIs and use them flexibly within 10 minutes. Performance, interaction, and scalability are almost impeccable. I have traversed all the code twice and benefited a lot from it. At the same time, I gradually developed my own habit of writing extended plug-ins. Of course, there must be many shortcomings, after all, if your framework is used for your own purposes, there will be definitely some shortcomings if you are uncomfortable with it. Let's discuss with you what are worth learning:
- Standard API interface function and attribute configuration.
This greatly reduces the learning cost of API usage. For example, all event-class functions start with "ON". Each event has three types: onbefore (before the event), on (when the event occurs), and onafter (after the event. Attribute configuration also has certain naming rules. "is" indicates whether "," has "indicates whether" exists or not.
- Meaningful pass-In return values.
This is also very important. When many people write JavaScript Functions, they like to write a function to the end, without returning values or passing parameters. In fact, this is worse. I once did not agree, but later I found that such a function is almost no different from the code written in the place where the function is called, the only difference is that it looks fresh or can be extended. In fact, such a function is quite uncomfortable for people not familiar with this code. There is one more meaningful return value, such as boolean type, whether the function operation is successfully executed, and so on. Several more parameters are passed into the function, in this way, we can feel that this function is actually processing some specific data, and the passed parameters also allow us to quickly understand how the function processes data.
- Incorrect English word.
Word: "No ". (Every coder is an artist and we do not allow flaws)
- Distinguish private and public.It is better to write open API functions together in a concentrated manner, while name them in private ways as much as possible, such as adding an underscore to the front.
- Simplified annotations.Comments are not for you to read. A product code may be 80% square meters. Developers and maintainers are not the same person. to reduce costs, as developers, we need to provide maintainers with a maintenance environment. Is to give a valid comment where necessary. This greatly enhances readability.
- The standard use of CSS.
Many people ignore CSS, and the coverage and weight issues often make us unable to get what we want. Most of the time, I think that CSS is okay as long as the current page is viewed in the past. However, plug-ins for writing framework classes cannot think about the problem in this way, and CSS will also pollute the global situation. It is not enough to use the unique class name. A better method is to write a drop-down tree control. The drop-down tree has a base class fr-combotree. The CSS of all the drop-down trees should start with. fr-combotree, and then select them one by one. In this way, mutual influence can be effectively avoided.
- Time complexity.
The maximum value is O (n²) and optimized to O (n) or O (logn) as much as possible. If the limit is exceeded, there must be a problem.
- API documentation.
It is very important. It is essential for any excellent framework. When we finish writing a rough framework, we hope to have a perfect doc document for your convenience. We recommend extjs jsduck.
- IE compatibility.
The compatibility of frameworks is an important basis for the development of many enterprise-level applications.
- Performance optimization.
The performance of the Web end also needs to be paid attention to, otherwise it will seriously affect the user experience. See: http: // 115.29.194.184 /? P = 311
The following are some notes for compatibility between IE6 and IE6:
- Do not use pseudo classes in CSS. Only the label can use: hover,: Link,: active,: visited.
- Compatibility issues must be considered when using animation effects. Slidedown slideup fadein fadeout can be considered for use.
- The new date function can only use new date (year, month, day, hour, minute, second) or new date (millisecond)
- Do not use the string [Index] method. Use string. charat (index)
- Change $ ('<form/>') to $ ('<form> </form> ')
- . Text(between watermark and .html (). Do not assign values to the control using Dom text or HTML, because text () merges spaces and is inaccurate.
- When the word in IE6 is too long, the ellipsis overflow must be used with width. For details, refer to: http: // 115.29.194.184 /? P = 107
- Display: inline-block IE8, some can be solved using display: inline and Zoom: 1
- Image transparency. See http: // 115.29.194.184 /? P = 98
- Only entity characters of html3.2 and below can be used
