1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > web前端开发最佳实践--(笔记之JavaScript最佳实践)

web前端开发最佳实践--(笔记之JavaScript最佳实践)

时间:2023-03-02 04:39:27

相关推荐

web前端开发最佳实践--(笔记之JavaScript最佳实践)

如何避免全局变量污染?

避免定义全局变量或全局函数用一个变量进行封装,并返回外部需要访问的接口

如何写出高维护的js代码

配置数据和代码逻辑分离

如:

改成:

---用js模板mustachehandlebarsjs

MVC的数据模式

model:数据层

view:用户表现层

controller:用户交互控制层

模块化开发

利用立即执行函数,可以在不暴露私有数据的情况下公开一些公共的接口

···

//全局变量jQuery和module2被传入module1中

var module1=(function($,module2){})(jQuery,module2);

···

尽量不适用全局变量,因为全局变量在整个生命周期中不会被释放确保解除不需要的事件监听

不要在闭包中返回外部不需要的对象

使用事件托管方式绑定事件

//获取父节点并添加一个click事件document.getElementById("list").addEventListener("click",function(e){//检查事件源元素if(e.target&&e.target.nodeName.toUpperCase=="LI"){//针对子元素的处理}})

常见的web前端攻击方式

XSS (Cross Site Scripting)跨站点脚本攻击,如:

上述例子在chrome浏览器中会被拦截

总结:XSS攻击的特点就是:尽一切办法在目标网站上执行非目标网上原有的代码CSRF(Cross Site Request Forgery):跨站请求伪造

界面劫持

防范web前端攻击的最重要一个常识是:永远也不要轻易相信用户输入的数据。一定要针对用户输入做相关的格式过滤检查,防止任何可能的前端注入

更安全的使用Cookie

移动web前端开发

使用流式布局借助css Media queries(媒体查询),如:

使用响应式设计框架利用工具检查移动设备兼容性 如:

MobiReady

howtogomo

开发移动web端的准备工作

确定支持的移动设备处理和桌面端主网站的交互

一些移动设备的开发库如下:

Mobile-Detect设置移动站点为单页模式不,避免 页面跳转,改成更友好的弹出层显示选择合适的移动前端框架,如:

jquerymobile

sencha touch

kendo

ionic

一些定义解释

作用域链:多个函数嵌套定义时,就会形成作用域包含的关系,这个关系称为作用域链,在内部函数内调用外部对象会降低性能

一些工具介绍

picturefill 处理图片在不同设备上的显示问题 picturefill

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。