[0016] Specific embodiment, an efficient method for semantic front-end selection sub-scheme
[0017] 1. Propose the concept of S Selector. The Chinese name is S selector, or subordinate selector.
[0018] 2. An example of an html fragment and related css fragments, jquery fragments are as follows:
[0019] The example writes a very simple login component named login_box.
[0020] The following is the traditional way of writing.
[0021] code html
[0022]
[0023]
[0024]
[0025]
[0026]
[0027] Login
[0028] Register
[0029]
[0030] code css
[0031] login_box {
[0032] border: 1px solid grey;
[0033] padding: 10px;
[0034] }
[0035] login_box .lgbox-rectangle {
[0036] border: 1px solid blue;
[0037] padding: 10px;
[0038] }
[0039] login_box .lgbox-rectangle .lgbox-username {
[0040] width: 100%;
[0041] }
[0042] login_box .lgbox-rectangle .lgbox-username:focus {
[0043] color: blue;
[0044] }
[0045] login_box .lgbox-rectangle .lgbox-password {
[0046] width: 100%;
[0047] }
[0048] login_box .lgbox-rectangle .lgbox- password:focus {
[0049] color: blue;
[0050] }
[0051] login_box .lgbox-login {
[0052] width: 100%;
[0053] }
[0054] login_box .lgbox-register {
[0055] width: 100%;
[0056] }
[0057] code jquery
[0058] var bind_login = function(){
[0059] var self = $(‘login_box’);
[0060] var ball = {};
[0061] self.find(‘.lgbox-rectangle .lgbox-username’).bind(‘input’, function(){ball.username = $(this).val(); })
[0062] self.find(‘.lgbox-rectangle .lgbox-password’).bind(‘input’, function(){ball. password = $(this).val(); })
[0063] self.find(‘.lgbox-login’).click(function(){ do_login(ball); });
[0064] self.find(‘.lgbox-register’).click(function(){ goto_register(); });
[0065] };
[0066] B: The following is the wording using the s selector.
[0067] code html
[0068]
[0069]
[0070]
[0071]
[0072]
[0073] Login
[0074] Register
[0075]
[0076] code css
[0077] login_box {
[0078] border: 1px solid grey;
[0079] padding: 10px;
[0080] }
[0081] login_box ‘rectangle’ {
[0082] border: 1px solid blue;
[0083] padding: 10px;
[0084] }
[0085] login_box ‘rectangle/username’ {
[0086] width: 100%;
[0087] }
[0088] login_box ‘rectangle/username’:focus {
[0089] color: blue;
[0090] }
[0091] login_box ‘rectangle/password’ {
[0092] width: 100%;
[0093] }
[0094] login_box ‘rectangle/password’:focus {
[0095] color: blue;
[0096] }
[0097] login_box ‘login’{
[0098] width: 100%;
[0099] }
[0100] login_box ‘register’{
[0101] width: 100%;
[0102] }
[0103] code jquery
[0104] var bind_login = function(){
[0105] var self = $(‘login_box’);
[0106] var ball = {};
[0107] self.s(‘rectangle/username’).bind(‘input’, function(){ ball.username = $(this).val(); })
[0108] self.s(‘rectangle/password’).bind(‘input’, function(){ ball. password =$(this).val(); })
[0109] self.s(‘login’).click(function(){ do_login(ball); });
[0110] self.s(‘register’).click(function(){ goto_register(); });
[0111] };
[0112] C. You can see:
[0113] 1. In wording B, the selector is more concise and semantic. Help developers better grasp the semantic function of the component. Incidentally, the total number of characters has dropped from 115 to 106. This will become very obvious in the large-scale front-end engineering code base.
[0114] 2. The html expression is more concise, reduces redundancy, and makes the layout of the component itself clearer.
[0115] 3. The expression of css is more concise, reducing redundancy, and visually clearer.
[0116] 4. The expression of jquery code is more concise, reducing redundancy and making the logic clearer.
[0117] 5. At the same time, it can be noted that in the new selector, the S selector can be arranged in any combination with the original selector to form a more complex selector.
[0118] 6. The S selector itself can also be hierarchical. For example, the expression "rectangle/username".
[0119] achieve:
[0120] 1. html tag implementation
[0121] Direct processing
[0122] such as
[0123]
[0124] 1. Write the sname directly into the html tag as an attribute. sname is followed by the name you want to name semantically.
[0125] 2. Pay attention to a html component, such as this time Inside, each sname should not be repeated.
[0126] 3. However, the sname can be repeated within different components, because each component may have a similar internal semantic structure that needs to be expressed. This greatly improves the flexibility of expression.
[0127] Label implementation
[0128] such as:
[0129] A ‘some_name_1/some_name_2’ B{
[0130] some-property: some-value;
[0131] }
[0132] Interpreted as A [sname=’some_name_1’] [sname=’some_name_2’] B {
[0133] some-property: some-value;
[0134] }
[0135] 1. Read the css text into the preprocessor. Divide all css content into an array arr of key-value pairs of "path path: set content content".
[0136] 2. For each key-value pair item in the array arr,
[0137] 3. Perform the PathRewrite(path) operation on the path to get the new path path2. Rewrite item as "new path path2: set content content".
[0138] 4. For each key-value pair item in the array arr
[0139] 5. Rewrite the item into the text as part of the css text.
[0140] 6. Output the new css text.
[0141] Select sub-function implementation
[0142] 3.1 Rewrite jquery selection sub-function implementation
[0143] $("A ‘some_name_1/some_name_2’ B")
[0144] Interpreted as $("A [sname=’some_name_1’] [sname=’some_name_2’] B")
[0145] Perform the PathRewrite(path) operation on the path.
[0146] 3.2 Rewrite the find function on the jquery object.
[0147] $element.find("A ‘some_name_1/some_name_2’ B")
[0148] Interpreted as $element.find("A [sname=’some_name_1’] [sname=’some_name_2’] B")
[0149] Perform the PathRewrite(path) operation on the path.
[0150] 3.3 Added the s function on the jquery object.
[0151] $element.s( "some_name_1/some_name_2")
[0152] Interpreted as $element.find("[sname=’some_name_1’] [sname=’some_name_2’]")
[0153] Added the s function to the jquery object.
[0154] $.fn.s = function(path){
[0155] return $(this).find(PathRewrite(path));
[0156] };
[0157] Perform the PathRewrite(path) operation on the path.
[0158] 4. Algorithm: Select sub-rewrite PathRewrite(path) input:
[0159] 1. Select the subpath path
[0160] Preparation parameters:
[0161] 2. Subpath array arr
[0162] 3. Output subpath array arr2
[0163] 4. Output subpath path2
[0164] Step: 5. Parse path into an array arr according to the grammatical rules. Note that (1) The selectors such as "some_name_1/some_name_2" that have spaces on both sides and other parts need to be parsed out and placed into a single item in the array. (2) It is necessary to not parse the double-quoted string in the syntax of the selector itself such as [some_attr_name=”some_attr_value”] into a single item of the array.
[0165] 6. For each item in the array arr, if it is not a sname, that is, it is not a string enclosed in double quotes, directly put it into the output subpath array arr2; otherwise:
[0166] 7. Divide item from ‘/’ into a new array arr_item. (If there is no ‘/’, it will become an array arr2 with only one object)
[0167] 8. Rewrite each item2 of arr_item as item3 = "[sname=" + item2 +]", and put item3 into the output subpath array arr2.
[0168] 9. After all the above iterations are completed, the output sub-path array arr2 is combined into path2 string using join(‘ ‘).
[0169] Output:
[0170] 10. Output the subpath path2.
[0171] The present invention designs an efficient method of semantic front-end selection sub-scheme. This efficient method of semantic front-end selection sub-scheme adopts S selector as the semantic expression of the component in a specific front-end development scenario, through html Pre-compilation, css pre-compilation, and jquery optional rewriting can realize large-scale semantics of the entire development range, greatly reduce the complexity and redundancy of html template writing, and greatly reduce the overlap and degree of template css writing Redundancy, to a large extent, simplify the complexity and redundancy of the code that jquery describes the internal operations of the template; it provides a foundation for the generalization of front-end components, cross-project reuse, and semantic invocation. This is because the use of the S selector basically solves the problem of ambiguity in the internal elements of the template code. When the number of components reaches tens to hundreds, this problem becomes a problem that has to be paid attention to. Complexity will lead to a significant increase in the difficulty of development collaboration and the cost of internal team communication. At this time, handling the naming problem clearly and constructing semantic naming is the problem we solve; overall, reducing development time, reducing development costs, reducing team docking costs, improving team combat effectiveness, and improving overall efficiency of the development enterprise.
