Javascript templates and the logic separation of data

Source: Internet
Author: User

The Requirement Description table of the project database describes 70-1 20 questions, which may change. You should select or fill in blank questions based on the data description in the database, the total number of questions, etc. The question content is rendered conditionally, and can be saved back to the database and printed out. Previously, the backend (structs2 + spring + ibaties) queries and throws JSON. The front-end is an endless if and switch. Once there is a need for modification, We need to vomit blood, and we do not know how many places to change. We can define a rule by combining our own regular expressions and HTML knowledge, to associate JSON with HTML, the HTML will be changed in JSON, And the HTML changes will be generated when the requirement changes-> database changes-> Generate JSON changes-> Generate HTML changes, the entire project is much easier to maintain. Therefore, a Javascript template is formed. JSON Data Interpretation var subject = {"subjectAttr": "JD-SUB-3", // JD-SUB-1 fill-in question, JD-SUB-3 choice question "remark": "", // note "score ":"", // The score of the blank question "subjectContent": "Please refer to these missing items", // the content of the question "selectTypeValue ": "***", // question importance, * the more important the more "pkAnswer": "1", // JD-SUB-3 category question answer (single choice ), "subjectType": "SUB-AVAIL-2", // required. SUB-AVAIL-1 is not required. "pkCase ":"", // JD-SUB-8 category question answer, result is UUID "td4BizAnsweritemList": [{// option for multiple choice question "content": "no", // option body "id ": "6BA 95898E82B41DF947D14603C4743CF "// CODE of the Option}, {// another option}] The sample CODE generates the corresponding HTML based on the preceding JSON. The core code idea is to use regular expressions to split data and use the replace function to match and generate HTML. I only need to configure the subjectAttr attribute in the JSON content, and its representation changes naturally with my data, other logics do not need to be repeated. The demo code self-review template is designed for project requirements and easyui components. It may be highly restrictive and inefficient, however, this simple template improves code reusability, reduces the coupling between program data and control logic, and improves maintainability. This theory is further improved by MVC, and the front-end also has a lot of excellent music videos * (MVC, MVP, MVVM) frameworks. First, there are practices, and then the source code is used to learn excellent frameworks, is a common way to improve yourself. It is very simple to briefly describe the data model principles of my JS template. JSON and HTML are two different formats, an abstract controller converts data between them (mainly JSON2HTML and HTML2JSON have ready-made serialize functions ). When I suddenly want to make some changes on the view, such as JD-SUB-3 multiple choice questions, no longer in a single pull, but "yes" two single radio, then I just need to change the template in jsParser, see the difference between JD-SUB-31 and JD-SUB-3. If there is another if/else or switch, there will also be a lot of repeated features in the condition. These functions can be abstracted using js templates to achieve the goal of thinking and improvement.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.