处理javascript和css文件的最佳实践是什么

时间:2022-01-16 21:14:58

How do You manage all of Your .js and .css files in asp.net project. Especially when they have a lot of dependency between each other?

如何在asp.net项目中管理所有的.js和.css文件。特别是当他们之间有很多依赖关系的时候?

I've combined all script in one. But it's become weighty, and 90% of them were not used on particular pages. What I want is an instrument or guidence to manage all of those scripts, simple dependency management, that help to include on page only those JS and CSS that needed on this page.

我把所有的脚本合并在一起了。但它已经变得很有分量了,其中90%都没有在特定的页面上使用。我想要的是一种工具或指导来管理所有这些脚本,简单的依赖项管理,这些脚本可以帮助在页面上只包含本页面需要的JS和CSS。

Also used ScriptManager nut when You use a lot of controls it's very handy.... maybe I'm using it in wrong way.

也用ScriptManager螺母时使用了大量的控制非常方便....也许我用错了。

4 个解决方案

#1


0  

I prefer to divide my JS files based on their function - for instance, I could have a single JS file for all AJAX based interaction, one for all Validations and a common JS library for all functions that are common to the entire web application. Having a single file that combines the entire JS scripts into one would definitely slow down the application because each page would load the entire file, even though only a small portion might be relevant.

我更喜欢基于它们的函数来划分我的JS文件——例如,我可以有一个用于所有基于AJAX的交互的JS文件,一个用于所有验证,一个用于整个web应用程序常见的所有函数的通用JS库。将整个JS脚本合并到一个单独的文件肯定会减慢应用程序的速度,因为每个页面都将加载整个文件,即使只有一小部分可能是相关的。

For CSS files, I prefer to have a single common stylesheet that would contain the general styles available to the entire application. I might also create individual CSS files for pages that have a very specific layout structure.

对于CSS文件,我希望有一个通用样式表,其中包含整个应用程序可用的通用样式。我还可以为具有特定布局结构的页面创建单独的CSS文件。

I don't know of any tools that could handle this dependency automatically, but When you divide your files according to function, this becomes unnecessary in most cases.

我不知道有什么工具可以自动地处理这个依赖项,但是当您根据函数划分文件时,在大多数情况下这是不必要的。

#2


2  

On our projects, we tag the scripts and the CSS as resources for the class, and then register them during the page lifecycle, usually in PreRender().

在我们的项目中,我们将脚本和CSS标记为类的资源,然后在页面生命周期(通常在PreRender())中注册它们。

For example:

例如:

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

We then set the properties of each of our scripts and css files to be Embedded Resources.

然后,我们将每个脚本和css文件的属性设置为嵌入式资源。

This approach lets you keep your scripts seperate and targeted to individual UI components. You can register the same resources to multiple classes, and then ScriptManager will take care of making sure that the right resources show up on the page.

这种方法允许您将脚本分离,并针对单个UI组件。您可以将相同的资源注册到多个类,然后ScriptManager将负责确保在页面上显示正确的资源。

We then wrote a class at the HTTP handler level that handles compressing all the CSS resources into one file before it's streamed out, to make sure we didn't hit the 32 CSS file limit for IE6. It also strips out whitespace, comments, etc. from our scripts to optimize the javascript output.

然后,我们在HTTP处理程序级别上编写了一个类,该类在将所有CSS资源压缩到一个文件中之前,确保没有达到IE6的32个CSS文件限制。它还从脚本中删除空格、注释等,以优化javascript输出。

#3


1  

This is how I do it usually:

我通常是这样做的:

CSS: 5 files initially. reset.css (from YUI), structure.css, general.css (borders, backgrounds, z-index etc), typography.css and base.css which imports the 4 other css files.

CSS:5最初的文件。重置。从YUI css(),结构。css,将军。css(边框,背景,z-index等),排版。css和基地。它导入另外4个css文件。

Javascript: What I have done is taken the code behind idea of ASP.NET and applied it to my JS files in terms of naming. Example: page specific JS file for home.aspx is called home.aspx.js. Then I'll have separate JS files based on plugin or functionality and probably a common.js which will contain all the global vars.

Javascript:我所做的是使用ASP的代码。NET,并将它应用到我的JS文件中。示例:主页特定的JS文件。aspx叫做home.aspx.js。然后,我将根据插件或功能创建独立的JS文件,可能还有一个常见的文件。包含所有全局vars的js。

This may not be everyone's cup of tea, but I hope that gives you some ideas!

这可能不是每个人都喜欢的,但我希望这能给你一些建议!

#4


0  

I divide JS files by it's functionality.

我将JS文件除以它的功能。

Most common functions that used almost everywhere goes to one file,

几乎在任何地方使用的大多数常用函数都指向一个文件,

Other classes and methods goes to their own files.

其他类和方法会进入它们自己的文件。

For Css, I have one common file for whole site.

对于Css,我有一个用于整个站点的通用文件。

If I have sections that is visually different that others, I seperate css files to per section. Also I have a tabbed div control, it has a separate css file. I do not mix the files.

如果我有与其他部分在视觉上不同的部分,我将css文件分割到每个部分。我还有一个标签div控件,它有一个单独的css文件。我不混合文件。

For components, embedding resources is looks good, but sometimes it's good to fix bugs with only deploying JS files.

对于组件来说,嵌入资源看起来不错,但是有时候只部署JS文件就可以修复bug。

#1


0  

I prefer to divide my JS files based on their function - for instance, I could have a single JS file for all AJAX based interaction, one for all Validations and a common JS library for all functions that are common to the entire web application. Having a single file that combines the entire JS scripts into one would definitely slow down the application because each page would load the entire file, even though only a small portion might be relevant.

我更喜欢基于它们的函数来划分我的JS文件——例如,我可以有一个用于所有基于AJAX的交互的JS文件,一个用于所有验证,一个用于整个web应用程序常见的所有函数的通用JS库。将整个JS脚本合并到一个单独的文件肯定会减慢应用程序的速度,因为每个页面都将加载整个文件,即使只有一小部分可能是相关的。

For CSS files, I prefer to have a single common stylesheet that would contain the general styles available to the entire application. I might also create individual CSS files for pages that have a very specific layout structure.

对于CSS文件,我希望有一个通用样式表,其中包含整个应用程序可用的通用样式。我还可以为具有特定布局结构的页面创建单独的CSS文件。

I don't know of any tools that could handle this dependency automatically, but When you divide your files according to function, this becomes unnecessary in most cases.

我不知道有什么工具可以自动地处理这个依赖项,但是当您根据函数划分文件时,在大多数情况下这是不必要的。

#2


2  

On our projects, we tag the scripts and the CSS as resources for the class, and then register them during the page lifecycle, usually in PreRender().

在我们的项目中,我们将脚本和CSS标记为类的资源,然后在页面生命周期(通常在PreRender())中注册它们。

For example:

例如:

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

We then set the properties of each of our scripts and css files to be Embedded Resources.

然后,我们将每个脚本和css文件的属性设置为嵌入式资源。

This approach lets you keep your scripts seperate and targeted to individual UI components. You can register the same resources to multiple classes, and then ScriptManager will take care of making sure that the right resources show up on the page.

这种方法允许您将脚本分离,并针对单个UI组件。您可以将相同的资源注册到多个类,然后ScriptManager将负责确保在页面上显示正确的资源。

We then wrote a class at the HTTP handler level that handles compressing all the CSS resources into one file before it's streamed out, to make sure we didn't hit the 32 CSS file limit for IE6. It also strips out whitespace, comments, etc. from our scripts to optimize the javascript output.

然后,我们在HTTP处理程序级别上编写了一个类,该类在将所有CSS资源压缩到一个文件中之前,确保没有达到IE6的32个CSS文件限制。它还从脚本中删除空格、注释等,以优化javascript输出。

#3


1  

This is how I do it usually:

我通常是这样做的:

CSS: 5 files initially. reset.css (from YUI), structure.css, general.css (borders, backgrounds, z-index etc), typography.css and base.css which imports the 4 other css files.

CSS:5最初的文件。重置。从YUI css(),结构。css,将军。css(边框,背景,z-index等),排版。css和基地。它导入另外4个css文件。

Javascript: What I have done is taken the code behind idea of ASP.NET and applied it to my JS files in terms of naming. Example: page specific JS file for home.aspx is called home.aspx.js. Then I'll have separate JS files based on plugin or functionality and probably a common.js which will contain all the global vars.

Javascript:我所做的是使用ASP的代码。NET,并将它应用到我的JS文件中。示例:主页特定的JS文件。aspx叫做home.aspx.js。然后,我将根据插件或功能创建独立的JS文件,可能还有一个常见的文件。包含所有全局vars的js。

This may not be everyone's cup of tea, but I hope that gives you some ideas!

这可能不是每个人都喜欢的,但我希望这能给你一些建议!

#4


0  

I divide JS files by it's functionality.

我将JS文件除以它的功能。

Most common functions that used almost everywhere goes to one file,

几乎在任何地方使用的大多数常用函数都指向一个文件,

Other classes and methods goes to their own files.

其他类和方法会进入它们自己的文件。

For Css, I have one common file for whole site.

对于Css,我有一个用于整个站点的通用文件。

If I have sections that is visually different that others, I seperate css files to per section. Also I have a tabbed div control, it has a separate css file. I do not mix the files.

如果我有与其他部分在视觉上不同的部分,我将css文件分割到每个部分。我还有一个标签div控件,它有一个单独的css文件。我不混合文件。

For components, embedding resources is looks good, but sometimes it's good to fix bugs with only deploying JS files.

对于组件来说,嵌入资源看起来不错,但是有时候只部署JS文件就可以修复bug。