[Opensource] scriptloader V4: Dance with the component system to make the sharing clearer

Source: Internet
Author: User

Preface

Although the scriptloader component is generated in a component-based deployment system, it does not fully implement the pre-goal and can better coordinate with the platform system. this time, I used this component in another platform system under development, So I upgraded and improved the entire component to solve some of the original issues, some features are added. the new version can better coordinate the work between the platform and components.

 

Major updates

    1. Reduce the. NET Framework used from 3.5 to 2.0.
      Originally, 3.5 was used only to get lazy and some functions of LINQ were used, such as LINQ to XML and LINQ to object. in this way, some people must reorganize the entire component to apply it to their 2.0-based projects. in this upgradeCodeRewrite it and discard the use of the LINQ syntax.
    2. Implemented the function of loading multi-language resources (JS and JS variable resources.
    3. Added the custom namespace function, which is mainly used for class library differentiation between components to facilitate coordination between components and reduce the possibility of conflict.
    4. Add a custom request suffix to fix the httphanlder bug in. JS/. CSS that Asp.net cannot capture in some IIS sites.
    5. Modified some of the original bugs, such as monitoring file changes.

Function demonstration

  • 1. differentiate multiple languages for automatic loading of relevant JS and JS variable resources
    First look at the entire file organization

    There are several logical judgment points.
    1. When webform1.aspx is requested, it will automatically determine whether the current webform1.aspx. currentculture. js (webform1.aspx. zh-CN.js) exists, and load if yes.
    If no, determine whether webform1.aspx. js exists. If yes, load it.

    2. I named the extension. jsresx as JS variable resource, its loading mechanism and JS load is the same. First Judge webform1.aspx. zh-CN.jsresx existence, then judge webform1.aspx. zh-CN.jsresx existence.
    Jsresx is an XML file in the following format: <? XML version = "1.0" encoding = "UTF-8" ?>
    < Variables >
    < Lang > Chinese </ Lang >
    < Name > Prodigal Son </ Name >
    </ Variables >

    After loading the page, two variables are generated on the page. VaRLang='Chinese';
    VaRName='Prodigal Son';

    For how to configure to automatically associate pages with JS, please refer to previous relatedArticle[Opensource] scriptloaderv2: completely changing your programming habits or related Wiki pages on code.google.com

  • 2. configure a specified namespace for some JS
    1. A platform system may contain some JS class libraries, such as using jquery/prototype in a unified manner. In this way, there is no need to reload components in the component system.
    2. another scenario is that, as a component, you may also share some of the same JS class libraries with other systems, but they are not provided by the platform. in this way, when two components are merged to a page by the final user group, the JS will be loaded repeatedly.

    Scriptloader originally configured JS with only two files Lib. config and user. config. Obviously, each component requires these configuration files. During the release, the content needs to be integrated into the two files under the platform, JS also needs to be integrated into the scripts under the root directory. obviously, this is inconvenient for component deployment.

    In V4, this mechanism is modified to put the original fixed configuration file (Lib. config and user. config) is canceled and replaced. jsconfig is an XML file with the suffix. The configuration format is basically the same and only a small attribute is added.

    For example, it is better to understand

    Lib. jsconfig <? XML version = "1.0" encoding = "UTF-8" ?>
    < Scripts >
    < Script Name = "Jquery" Inherit = "Jquery. Min. js" >
    </ Script >
    </ Scripts >

    Scripts. jsconfig <? XML version = "1.0" encoding = "UTF-8" ?>
    < Scripts >
    < Script Name = "Myscript" Inherit = "Myscript1.js" >
    < References >
    < Reference Name = "Demo2" > </ Reference >
    </ References >
    </ Script >
    < Script Name = "Demo2" Inherit = "Demo2.js" >
    < References >
    < Reference Name = "Jquery" Namespace = "Lib" > </ Reference >
    </ References >
    </ Script >
    </ Scripts >

    In scripts. in jsconfig, demo2 references jquery JS, but jquery is defined in another jsconfig, And the jsconfig is placed under a folder named Lib. therefore, a namespace = "lib" must be added ". if this namespace is not added, the reference is a JS named jquery in the current jsconfig.

    This description is a bit difficult. however, we can see that namespace corresponds to the folder where jsconfig is located. when a jsconfig file is placed under a folder, The JS configured in this jsconfig file will be added with the name of this folder as a prefix namespace, for example, jquery is defined as Lib in the Lib folder. in jsconfig, when other jsconfig references it, it must be indicated as namespace = "lib", while in Lib. to reference jquery in jsconfig, you do not need to add this attribute. js in the same jsconfig is under the same namespace by default.
    However, in either case, the folder name is not automatically added as the namespace:
    1.ProgramRoot directory
    2. In the scrtipts folder, this is to be compatible with previous versions.

    The same is true for CSS loading. A folder is added to the name as a namespace, except for the root directory and styles folder. For example:

    The loaded code becomes Protected   Void Page_load ( Object Sender, eventargs E)
    {
    Langzi. scripts. scriptloader = Langzi. scripts. scriptloader. registerinstance ( This );
    Loader. loadstylesheet ( " Stylesheet1 " );
    Loader. loadstylesheet ( " Custom. stylesheet2 " );
    }

    With this namespace, we can easily differentiate each component. Each component uses its own folder with its own name, and there will be no conflicts in future deployment, while Lib is the same, even if a conflict occurs during the deployment, one of them will be ignored. or you can decide which one to discard Based on the depth of the folder. This is not implemented yet :)

    In fact, there is another important feature that is not implemented, that is, conflict isolation similar to jsi. Because the two frameworks have different concerns, scriptloader does not consider this feature for the time being, but if it is implemented, it will provide more robust protection for component deployment, and may wait for the next version :)

  • 3. Customize the request suffix
    Last time in a project, the boot. JS loading fails. In the end, I found that Asp.net didn't have a handle request to JS or CSS. I didn't find any problem with IIS. I changed the request suffix. aspx can be captured successfully. so this function is added. If you want to use a custom request suffix, you only need. config.
    The original configuration is < Httphandlers >
    < Add Verb = "Get" Path = "*. Js" Type = "Langzi. scripts. scriptloaderhandler, langzi. scriptloader" />
    < Add Verb = "Get" Path = "*. CSS" Type = "Langzi. scripts. scriptloaderhandler, langzi. scriptloader" />
    </ Httphandlers >

    You need to change the configuration as follows: <? XML version = "1.0" ?>
    < Configuration >
    < Appsettings >
    < Add Key = "Loadersuffix" Value = ". Aspx" />
    </ Appsettings >
    < System. Web >
    < Httphandlers >
    < Add Verb = "Get" Path = "*. Js. aspx" Type = "Langzi. scripts. scriptloaderhandler, langzi. scriptloader" />
    < Add Verb = "Get" Path = "*. CSS. aspx" Type = "Langzi. scripts. scriptloaderhandler, langzi. scriptloader" />
    </ Httphandlers >
    </ System. Web >
    </ Configuration >

    Note that if you manually register the boot. js import using the page, you need to change the Suffix in the script, as shown in figure < Script SRC = " Langzi. scripts. boot. js " Charset = " UTF-8 " Type = " Text/JavaScript " > < / SCRIPT>

    to change

    code highlighting produced by actipro codehighlighter (freeware)
    http://www.CodeHighlighter.com/

    --> script SRC = " langzi. scripts. boot. JS. aspx " charset = " UTF-8 " type = " text/JavaScript " > / SCRIPT>

    If you are using the Server registration method, you do not need to change the code. Protected VoidPage_load (ObjectSender, eventargs E)
    {
    Langzi. scripts. scriptloader=Langzi. scripts. scriptloader. registerinstance (This);
    }

  • Related Resources
    1. Some documents have been added to the wiki page of code.google.com. Other documents will be improved one after another. You are welcome to help improve them together. ^_^
    2. Related code can be obtained from the http://code.google.com/p/langzi/downloads/list

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.