Think Like a Computer Scientist.

Welcome to the future.
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Web Client Guidance研究3

Posted on 2010-11-01 09:33  TerabyteX  阅读(308)  评论(0编辑  收藏  举报

1 使用window.location.hash而不是window.location.href
window.location.hash = stateData;
产生的链接结果如下
http://www.mycompany.com/mypage.aspx#someState


2 自动化脚本下载和并行下载,使用Ajax Library中的Sys.require方法
<script src="../Scripts/MicrosoftAjax/start.js" type="text/javascript"></script>
<script type="text/javascript">
Sys.require([Sys.scripts.jQuery, Sys.components.ApplicationServices], function () {
$('form#profile').bind('submit', SaveProfileWithAjax);
});

function SaveProfileWithAjax(event){
event.preventDefault();
// Post the data using an AJAX call
}
</script>


3 脚本延迟加载
<script src="../Scripts/MicrosoftAjax/start.js" type="text/javascript"></script>
<script src="../Scripts/RegisterAppScripts.js" type="text/javascript"></script>

<script type="text/javascript">
function SpellCheck() {
Sys.require([Sys.scripts.Spelling, Sys.scripts.Grammar], function () {
// Use the scripts to check spelling & grammar
}); }
</script>

<input type="button" onclick="SpellCheck()" value="Check Spelling & Grammar"/>

Sys.loader.defineScripts({
releaseUrl: "%/../Scripts/{0}.js",
debugUrl: "%/../Scripts/{0}.debug.js"
},
[
{ name: "Spelling",
executionDependencies: ["ApplicationServices"],
isLoaded: !!(window.MyApp && MyApp.Spelling)
}

{ name: "Grammar",
executionDependencies: ["ApplicationServices", "jQuery"],
isLoaded: !!(window.MyApp && MyApp.Grammar)
}
]
);


4 脚本依赖管理,使用Sys.loader
(function() {
function execute() {
// Put the script content here
}

if (window.Sys && Sys.loader) {
Sys.loader.registerScript("myScriptName", null, execute);
}
else {
execute();
}
})();


5 调试
Sys.debug = true;
默认为false


6 一些原则
(1) 必要的时候才使用ViewState

(2) 没必要不使用服务端控件

(3) 设置ScriptManager的LoadScriptsBeforeUI属性为False

(4) 在客户端可以使用JavaScript完成的操作,避免跟服务端往返交互

(5) 合并和压缩客户端脚本

(6) 如果可能的话使用ScriptService或者页面方法与UpdatePanel通信

(7) UpdatePanel里的内容尽量少

(8) 当使用自定义验证器时使用UpdatePanel


7 创建新模块
(1) 作为服务模块创建,实现IServicesSupplier接口
using Microsoft.Practices.Web.Modularity;

public class MyModuleServicesSupplier : IServicesSupplier
{
private readonly IUnityContainer container;

public MyModuleServicesSupplier (IUnityContainer container)
{
this.container = container;
}

public void ProfferServices()
{
this.container.RegisterType<IFormsAuthenticationService, FormsAuthenticationService>(
new ContainerControlledLifetimeManager());
this.container.RegisterType<IMembershipService, AccountMembershipService>();
}
}
我们也可以使用Castle的容器

(2) 作为路由模块创建,实现IRoutesSupplier接口
using Microsoft.Practices.Web.Modularity;

public class MyLibraryRoutesSupplier : IRoutesSupplier
{
public void RegisterRoutes(RouteCollection routeCollection)
{
var context = new AreaRegistrationContext("MyLibrary", routeCollection);
context.MapRoute("MyLibrary_default", "Library/{action}/{id}",
new { controller = "Library", action = "Index", id = "" });
}
}

(3) 作为初始化模块,实现IInitializable接口
using Microsoft.Practices.Web.Modularity;

public class ValidationAdapterInitializer : IInitializable
{
public void Initialize()
{
this.RegisterAdapterForDataAnnotationsModelValidatorProvider(
typeof(ClientSideRemoteValidationAttribute), typeof(ClientSideRemoteValidator));
this.RegisterAdapterForDataAnnotationsModelValidatorProvider(
typeof(EqualsFieldValidationAttribute), typeof(EqualsFieldValidator));
this.RegisterAdapterForDataAnnotationsModelValidatorProvider(
typeof(PasswordStrengthAttribute), typeof(PasswordStrengthValidator));
}

protected virtual void RegisterAdapterForDataAnnotationsModelValidatorProvider(
Type validationAttribute, Type validator)
{
DataAnnotationsModelValidatorProvider.RegisterAdapter(validationAttribute, validator);
}
}