CN109508181A - A kind of method of efficient semantization front end selection subscheme - Google Patents
A kind of method of efficient semantization front end selection subscheme Download PDFInfo
- Publication number
- CN109508181A CN109508181A CN201710829136.7A CN201710829136A CN109508181A CN 109508181 A CN109508181 A CN 109508181A CN 201710829136 A CN201710829136 A CN 201710829136A CN 109508181 A CN109508181 A CN 109508181A
- Authority
- CN
- China
- Prior art keywords
- array
- semantization
- subpath
- name
- selection
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computing Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The present invention relates to programmatics field more particularly to a kind of methods of efficient semantization front end selection subscheme.The present invention devises a kind of method of efficient semantization front end selection subscheme in a specific front end exploitation scene, son is selected to express as the semantization of component using S, pass through html precompile, css precompile, jquery selection is rewritten, the extensive semantization of entire Exploitation Scope may be implemented, largely reduce complexity and redundancy that html template is write, the registration and redundancy that template css writes largely are reduced, the complexity and redundancy of the code operated inside jquery description template are largely simplified；Generally, the development time is reduced, reduces development cost, reduced team and dock cost, promote team's fighting capacity, improve exploitation enterprise's whole efficiency.
Description
Technical field
The present invention relates to programmatics fields more particularly to a kind of efficient semantization front end to select subscheme
Method.
Background technique
It is a kind of grammer that element is selected in the DOM Tree of html that front end, which selects sub- selector,.It can be according to member
The assembled arrangement of the type of element, id, class, attribute, children, sequence and these parameters selects element.Selection result
For the set of one or more elements.But the foundation of these selections does not reach complete semantization.So that our front ends
Have to provide many class on html label to realize the choosing for html component internal element when selection exploitation
It selects.This scheme for carrying out inner element selection using class may face class and name too long, too long, the class of css writing
The problem of repeating, the philosophical works selected to write redundancy.Meanwhile when component count reach tens it is up to a hundred after, the versatility of inter-module, mutually grasp
The problem of thinking little of must not just become in the property made, name.Complexity will lead to exploitation collaboration difficulty and team's internal communication cost
It is substantially increased.At this time, processing understands Naming Problems, constructs the name of semantization, just very crucial.We provide one kind
The selection sub-solution of semantization, so that the above problem is well solved.
In order to solve the above-mentioned technical problem, the present invention devises a kind of side of efficient semantization front end selection subscheme
Method, the method for the efficient semantization front end selection subscheme select son to make in a specific front end exploitation scene using S
It is expressed for the semantization of component, by html precompile, css precompile, jquery selection is rewritten, and may be implemented entirely to develop model
The extensive semantization enclosed largely reduces complexity and redundancy that html template is write, largely reduces mould
The registration and redundancy that plate css writes largely simplify the complexity of the code operated inside jquery description template
And redundancy；For generally applicableization of front end assemblies, the multiplexing of spanned item mesh, semantization calling provides the foundation.This is because being selected using S
Selecting subbase, originally to solve the problems, such as that template code inner element refers to unclear.When component count reach tens it is up to a hundred after, this
Problem must not just become the problem of thinking little of.Complexity will lead to exploitation collaboration difficulty and team's internal communication cost substantially on
It rises.At this time, processing understands Naming Problems, constructs the name of semantization, is exactly the problem of we are solved；Generally, subtract
Few development time, development cost is reduced, reduce team and dock cost, promote team's fighting capacity, improves exploitation enterprise's whole efficiency.
Summary of the invention
In order to overcome defect present in background technique, the technical solution adopted by the present invention to solve the technical problems is:
A kind of method of efficient semantization front end selection subscheme, it is characterised in that the steps include:
1. selecting subpath path；
2. subpath array arr；
3. exporting subpath array arr2；
4. exporting subpath path2；
5. path is resolved to array arr according to syntax rule, at this point, (1) needs to have both sides into space region and other parts point
Open " the such selection subsolution of some_name_1/some_name_2 " separates out and is put into independent one of array；(2) needing cannot
It will select the double quotation marks word of the such the inside [some_attr_name=" some_attr_value "] in sub grammer itself
Symbol string resolves to independent one of array；
6. each single item item inside couple array arr is not the character string that double quotation marks brackets if it is not sname,
It is directly placed into output subpath array arr2；Otherwise:
7. item is divided into new array arr_item from according to '/'；
8. by each single item item2 of arr_item, it is re-written as item3=" [sname="+item2+] ", by item3
It is put into output subpath array arr2；
After 9. all of above iteration is completed, output subpath array arr2 using join (' ') is merged into path2 character
String.
10. exporting subpath path2.
A kind of method that the present invention devises efficient semantization front end selection subscheme, the efficient semantization front end choosing
The method of subscheme is selected in a specific front end exploitation scene, selects son to express as the semantization of component using S, passes through
Html precompile, css precompile, jquery selection are rewritten, and the extensive semantization of entire Exploitation Scope, very great Cheng may be implemented
Complexity and redundancy that html template is write are reduced on degree, largely reduce registration and redundancy that template css writes
Degree largely simplifies the complexity and redundancy of the code operated inside jquery description template；For front end assemblies can
Generalization, the multiplexing of spanned item mesh, semantization calling provide the foundation.This is because originally solving template code using S selection subbase
Inner element refers to unclear problem.When component count reach tens it is up to a hundred after, this problem, which must not just become, to be thinked little of
The problem of.Complexity will lead to exploitation collaboration difficulty and team's internal communication cost is substantially increased.At this time, the clear name of processing
Problem constructs the name of semantization, is exactly the problem of we are solved；Generally, reduce the development time, reduce exploitation at
This, reduces team and docks cost, promote team's fighting capacity, improves exploitation enterprise's whole efficiency.
Specific embodiment
Specific embodiment, a kind of method of efficient semantization front end selection subscheme
1. proposing the concept of S Selector, Chinese name selects son S, or says subordinate selection.
2. one html segment of example and relevant css segment, jquery segment are as follows:
Example writes the very simple login component answered, and is named as login_box.
It is traditional literary style below.
code html
<login_box>
<div class=’lgbox-rectangle’>
<input class=’lgbox-username’ type=”text”/>
<input class=’lgbox-password’ type=”password”/>
</div>
<btn class=’lgbox-login’>Login</btn>
<btn class=’lgbox-register’>Register</btn>
</login_box>
code css
login_box {
border: 1px solid grey;
padding: 10px;
}
login_box .lgbox-rectangle {
border: 1px solid blue;
padding: 10px;
}
login_box .lgbox-rectangle .lgbox-username {
width: 100%;
}
login_box .lgbox-rectangle .lgbox-username:focus {
color: blue;
}
login_box .lgbox-rectangle .lgbox-password {
width: 100%;
}
login_box .lgbox-rectangle .lgbox- password:focus {
color: blue;
}
login_box .lgbox-login {
width: 100%;
}
login_box .lgbox-register {
width: 100%;
}
code jquery
var bind_login = function(){
var self = $(‘login_box’);
var ball = {};
self.find(‘.lgbox-rectangle .lgbox-username’).bind(‘input’, function(){
ball.username = $(this).val(); })
self.find(‘.lgbox-rectangle .lgbox-password’).bind(‘input’, function(){
ball. password = $(this).val(); })
self.find(‘.lgbox-login’).click(function(){ do_login(ball); });
self.find(‘.lgbox-register’).click(function(){ goto_register(); });
};
B: being the literary style using s selection below.
code html
<login_box>
<div sname=’rectangle’>
<input sname=’username’ type=”text”/>
<input sname=’password’ type=”password”/>
</div>
<btn sname=’login’>Login</btn>
<btn sname=’register’>Register</btn>
</login_box>
code css
login_box {
border: 1px solid grey;
padding: 10px;
}
login_box ‘rectangle’ {
border: 1px solid blue;
padding: 10px;
}
login_box ‘rectangle/username’ {
width: 100%;
}
login_box ‘rectangle/username’:focus {
color: blue;
}
login_box ‘rectangle/password’ {
width: 100%;
}
login_box ‘rectangle/password’:focus {
color: blue;
}
login_box ‘login’{
width: 100%;
}
login_box ‘register’{
width: 100%;
}
code jquery
var bind_login = function(){
var self = $(‘login_box’);
var ball = {};
self.s(‘rectangle/username’).bind(‘input’, function(){ ball.username = $
(this).val(); })
self.s(‘rectangle/password’).bind(‘input’, function(){ ball. password =
$(this).val(); })
self.s(‘login’).click(function(){ do_login(ball); });
self.s(‘register’).click(function(){ goto_register(); });
};
C. it can be seen that
1. selecting sub more succinct, semantization in literary style B.Facilitate the semantic function that developer preferably holds component.
Subsidiary, total number of characters falls below 106 from 115.This point can become apparent from extensive front end engineering code library.
2. the expression of html is more succinct, reduce redundancy, so that the layout of component itself is more clear.
3. the expression of css is more succinct, reduce redundancy, it is visually apparent.
4. the expression of jquery code is more succinct, reduce redundancy, so that logic is more clear.
5. simultaneously it is noted that in new selection, S selects son that can carry out any combination row with original selection
Column constitute more complicated selection.
6. S selection hierarchical can also act on itself.Such as representation as ' rectangle/username '.
It realizes:
1. html label is realized
Directly handle
Such as
<input sname=’username’ type=”text”/>
1. html label directly is written using sname as an attribute.The name that you want semantization to name is connected behind sname.
2. paying attention to a html component, such as<login_box>at this time internal, each sname not repeated.
3. still, different component internal, sname is recursive, because each component may expression in need
Similar internal semantic structure.This just greatly improves the flexibility of expression.
Label is realized
Such as:
A ‘some_name_1/some_name_2’ B{
some-property: some-value;
}
Be construed to A [sname=' some_name_1 '] [sname=' some_name_2 '] B
some-property: some-value;
}
1. css text is read in preprocessor.It is " path path: set content content " by all css division of teaching contents
Key-value pair array arr.
2. for each key-value pair item in array arr,
3. executing PathRewrite (path) operation for path, new path path2 is obtained.Item is rewritten as " new road
Diameter path2: set content content ".
4. for each key-value pair item in array arr
5. item is re-write text, a part of content as css text.
6. exporting new css text.
Subfunction is selected to realize
3.1, which rewrite jquery selection subfunction, realizes
$(“A ‘some_name_1/some_name_2’ B”)
It is construed to $ (" A [sname=' some_name_1 '] [sname=' some_name_2 '] B ")
PathRewrite (path) operation is executed for path.
3.2 rewrite the find function on jquery object.
$element.find(“A ‘some_name_1/some_name_2’ B”)
It is construed to $ element.find (" A [sname=' some_name_1 '] [sname=' some_name_2 '] B ")
PathRewrite (path) operation is executed for path.
S function on 3.3 newly-increased jquery objects.
$element.s( “some_name_1/some_name_2”)
It is construed to $ element.find (" [sname=' some_name_1 '] [sname=' some_name_2 '] ")
Increase s function newly on jquery object.
$.fn.s = function(path){
return $(this).find(PathRewrite(path));
};
PathRewrite (path) operation is executed for path.
4. algorithm: selection rewrites PathRewrite (path) input:
1. selecting subpath path
Prepare parameter:
2. subpath array arr
3. exporting subpath array arr2
4. exporting subpath path2
Step: path is resolved to array arr according to syntax rule by 5..Note that (1) needs both sides having space region and other
Part separates " the such selection subsolution of some_name_1/some_name_2 " separates out and is put into independent one of array.(2) it needs
It cannot will select the double of the such the inside [some_attr_name=" some_attr_value "] in sub grammer itself
Quotation marks character string parsing is independent one of array.
6. each single item item inside couple array arr is not the character that double quotation marks brackets if it is not sname
String is directly placed into output subpath array arr2；Otherwise:
7. item is divided into new array arr_item from according to '/'.If (be free of '/', it is right to will become only one
The array arr2 of elephant)
8. by each single item item2 of arr_item, it is re-written as item3=" [sname="+item2+] ", by item3
It is put into output subpath array arr2.
After 9. all of above iteration is completed, output subpath array arr2 using join (' ') is merged into path2 character
String.
Output:
10. exporting subpath path2.
A kind of method that the present invention devises efficient semantization front end selection subscheme, the efficient semantization front end choosing
The method of subscheme is selected in a specific front end exploitation scene, selects son to express as the semantization of component using S, passes through
Html precompile, css precompile, jquery selection are rewritten, and the extensive semantization of entire Exploitation Scope, very great Cheng may be implemented
Complexity and redundancy that html template is write are reduced on degree, largely reduce registration and redundancy that template css writes
Degree largely simplifies the complexity and redundancy of the code operated inside jquery description template；For front end assemblies can
Generalization, the multiplexing of spanned item mesh, semantization calling provide the foundation.This is because originally solving template code using S selection subbase
Inner element refers to unclear problem.When component count reach tens it is up to a hundred after, this problem, which must not just become, to be thinked little of
The problem of.Complexity will lead to exploitation collaboration difficulty and team's internal communication cost is substantially increased.At this time, the clear name of processing
Problem constructs the name of semantization, is exactly the problem of we are solved；Generally, reduce the development time, reduce exploitation at
This, reduces team and docks cost, promote team's fighting capacity, improves exploitation enterprise's whole efficiency.
Obviously, the above embodiments are merely examples for clarifying the description, and does not limit the embodiments.It is right
For those of ordinary skill in the art, can also make on the basis of the above description it is other it is various forms of variation or
It changes.There is no necessity and possibility to exhaust all the enbodiments.And it is extended from this it is obvious variation or
It changes still within the protection scope of the invention.
Claims (1)
1. a kind of method of efficient semantization front end selection subscheme, it is characterised in that the steps include:
(1) selects subpath path；
(2) subpath array arr；
(3) exports subpath array arr2；
(4) exports subpath path2；
(5) path is resolved to array arr according to syntax rule by, at this point, (1) needs both sides having space region and other parts
Separating " the such selection subsolution of some_name_1/some_name_2 " separates out and is put into independent one of array；(2) it needs not
It can will select the double quotation marks of the such the inside [some_attr_name=" some_attr_value "] in sub grammer itself
Character string parsing is independent one of array；
(6) is to each single item item inside array arr, if it is not sname, i.e., is not the character string that double quotation marks brackets,
It is directly placed into output subpath array arr2；Otherwise:
(7) item is divided into new array arr_item from according to '/' by；
(8) is by each single item item2 of arr_item, is re-written as item3=" [sname="+item2+] ", it will
Item3 is put into output subpath array arr2；
(9) after all of above iteration of is completed, output subpath array arr2 using join (' ') is merged into path2 character
String；
(10) exports subpath path2.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710829136.7A CN109508181A (en) | 2017-09-14 | 2017-09-14 | A kind of method of efficient semantization front end selection subscheme |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710829136.7A CN109508181A (en) | 2017-09-14 | 2017-09-14 | A kind of method of efficient semantization front end selection subscheme |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109508181A true CN109508181A (en) | 2019-03-22 |
Family
ID=65744592
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710829136.7A Pending CN109508181A (en) | 2017-09-14 | 2017-09-14 | A kind of method of efficient semantization front end selection subscheme |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109508181A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101763425A (en) * | 2010-01-12 | 2010-06-30 | 苏州阔地网络科技有限公司 | Universal method for capturing webpage contents of any webpage |
| CN103500118A (en) * | 2013-10-24 | 2014-01-08 | 北京奇虎科技有限公司 | Method and device for optimizing cascading style sheet |
| CN104050037A (en) * | 2014-06-13 | 2014-09-17 | 淮阴工学院 | Implementation method for directional crawler based on assigned e-commerce website |
| US20170091157A1 (en) * | 2014-06-30 | 2017-03-30 | Salesforce.Com, Inc. | Fast css parser |
| CN107015839A (en) * | 2016-09-27 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of method and device for realizing front end event agent |
-
2017
- 2017-09-14 CN CN201710829136.7A patent/CN109508181A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101763425A (en) * | 2010-01-12 | 2010-06-30 | 苏州阔地网络科技有限公司 | Universal method for capturing webpage contents of any webpage |
| CN103500118A (en) * | 2013-10-24 | 2014-01-08 | 北京奇虎科技有限公司 | Method and device for optimizing cascading style sheet |
| CN104050037A (en) * | 2014-06-13 | 2014-09-17 | 淮阴工学院 | Implementation method for directional crawler based on assigned e-commerce website |
| US20170091157A1 (en) * | 2014-06-30 | 2017-03-30 | Salesforce.Com, Inc. | Fast css parser |
| CN107015839A (en) * | 2016-09-27 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of method and device for realizing front end event agent |
Non-Patent Citations (4)
| Title |
|---|
| NEUQZXY: ""CSS属性选择器"", 《HTTPS://BLOG.CSDN.NET/U012834856/ARTICLE/DETAILS/17754229?》 * |
| SHIXIAOGUO90: ""几个常用的Javascript字符串处理函数 spilt(),join(),substring()和indexof()"", 《 HTTPS://BLOG.CSDN.NET/SHIXIAOGUO90/ARTICLE/DETAILS/20133819?》 * |
| WEIXIN_34009794: ""jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析"", 《HTTPS://BLOG.CSDN.NET/WEIXIN_34009794/ARTICLE/DETAILS/90165722？》 * |
| XIAO TOBEY: ""Xpath基本用法详解"", 《HTTPS://BLOG.CSDN.NET/CRBRAVE/ARTICLE/DETAILS/49252693?》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Atkinson et al. | Melanie: Multi-level modeling and ontology engineering environment | |
| CN107273117B (en) | Programming-friendly agile code automatic generation system | |
| CN106648662B (en) | Report generation device and method based on project cost calculation description language BCL | |
| US8930919B2 (en) | Modernization of legacy software systems based on modeled dependencies | |
| Kutter et al. | Montages Specifications of Realistic Programming Languages. | |
| Blanchette et al. | Soundness and completeness proofs by coinductive methods | |
| CN105531672A (en) | Parser generation | |
| CN104820393B (en) | One kind is based on PLC ladder diagram matrix compiling and interpreting methods | |
| Near et al. | An imperative extension to Alloy | |
| Urbán et al. | Self-describing Operations for Multi-level Meta-modeling. | |
| Ranjan et al. | JavaScript for modern web development: building a web application using HTML, CSS, and JavaScript | |
| CN107247587A (en) | A kind of web page template generation method and device | |
| CN103176778A (en) | Method and device for webpage development | |
| CN110460461B (en) | Mapping method and system from YANG mode language to command line | |
| Roldán | React Design Patterns and Best Practices: Design, build and deploy production-ready web applications using standard industry practices | |
| Zhao et al. | Pattern-based design evolution using graph transformation | |
| van Amstel | Assessing and improving the quality of model transformations | |
| Jackson et al. | Automatically reasoning about metamodeling | |
| CN109508181A (en) | A kind of method of efficient semantization front end selection subscheme | |
| Zambon | Abstract Graph Transformation-Theory and Practice | |
| Parent | A possible future for software development | |
| Steenken | Verification of infinite-state graph transformation systems via abstraction. | |
| Besova et al. | Grammar-based model transformations: Definition, execution, and quality properties | |
| Zaytsev | Software Language Engineering by Intentional Rewriting | |
| Simpson | You Don't Know JS Yet: Get Started |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190322 |
|
| WD01 | Invention patent application deemed withdrawn after publication |