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

如何避免全局变量污染?

  1. 避免定义全局变量或全局函数
  2. 用一个变量进行封装,并返回外部需要访问的接口
    809384-20171121140303321-1477959848.png

如何写出高维护的js代码

  1. 配置数据和代码逻辑分离
    如:809384-20171121141718336-1730276881.png
    改成:809384-20171121141728399-852293044.png
    809384-20171121141737461-13301830.png
    ---
  2. 用js模板
  • mustache
  • handlebarsjs
  1. MVC的数据模式
    model:数据层
    view:用户表现层
    controller:用户交互控制层

  2. 模块化开发
    利用立即执行函数,可以在不暴露私有数据的情况下公开一些公共的接口
    809384-20171121144708899-884629258.png
    ···
    //全局变量jQuery和module2被传入module1中
    var module1=(function($,module2){})(jQuery,module2);
    ···

  3. 尽量不适用全局变量,因为全局变量在整个生命周期中不会被释放
  4. 确保解除不需要的事件监听
  5. 不要在闭包中返回外部不需要的对象

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

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

常见的web前端攻击方式

  1. XSS (Cross Site Scripting)跨站点脚本攻击,如:
    809384-20171121161407133-1435879951.png
    上述例子在chrome浏览器中会被拦截
    809384-20171121161547727-2120659017.png
    总结:XSS攻击的特点就是:尽一切办法在目标网站上执行非目标网上原有的代码
  2. CSRF(Cross Site Request Forgery):跨站请求伪造
    809384-20171121162031930-1656716515.png
    809384-20171121162051993-484495210.png
  3. 界面劫持
    809384-20171121162205805-2013887340.png

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

  • 更安全的使用Cookie

移动web前端开发

  1. 使用流式布局
  2. 借助css Media queries(媒体查询),如:
    809384-20171121165015211-733095837.png
    809384-20171121165112399-1568674461.png
  3. 使用响应式设计框架
  4. 利用工具检查移动设备兼容性 如:
    MobiReady
    howtogomo

开发移动web端的准备工作

  1. 确定支持的移动设备
  2. 处理和桌面端主网站的交互
    一些移动设备的开发库如下:
    Mobile-Detect
  3. 设置移动站点为单页模式不,避免 页面跳转,改成更友好的弹出层显示
  4. 选择合适的移动前端框架,如:
    jquerymobile
    sencha touch
    kendo
    ionic

一些定义解释

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

一些工具介绍

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

转载于:https://www.cnblogs.com/elian/p/7873433.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python入门笔记

Python变量和数据类型 数据类型 print语句 注释 Python的注释以 # 开头,后面的文字直到行尾都算注释 # 这一行全部都是注释... print hello # 这也是注释 什么是变量 定义字符串 字符串可以用或者""括起来表示。 如果字符串本身包含怎么办?比如…

如何保证input的输入值不会随着提交 而变空_如何对web界面的应用进行测试?

一、输入框:1、字符型输入框:(1)字符型输入框:英文全角、英文半角、数字、空或者空格、特殊字符“~!#¥%……&*?[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时&…

CentOS6.x下,tomcat - web项目部署

1. 安装tomcat tomcat安装方法&#xff1a;http://www.cnblogs.com/vurtne-lu/p/6478440.html 2. 配置tomcat 修改server.xml文件 <!-- 使用 80 端口 (也可以使用其它端口)--> <Connector port"80" protocol"HTTP/1.1"connectionTimeout"200…

使用地图触发功能处理相干事件

本文介绍如何通过使用映射触发器来处理一致性事件。 基本上&#xff0c;建议使用Oracle Coherence中的分布式数据管理来研究Oracle Coherence API的基本配置和实现。 映射触发器是Oracle Coherence提供最高度定制的缓存管理系统的最重要功能之一。 MapTrigger代表一个功能代理…

阿里云服务器mysql莫名丢失_mysql数据库丢失

mysql数据库丢失云服务器(Elastic Compute Service&#xff0c;简称ECS)是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS(Infrastructure as a Service)级别云计算服务。云服务器ECS免去了您采购IT硬件的前期准备&#xff0c;让您像使用水、电、天然气等公共资源一样便捷、高…

gitlab使用_使用 Docker 部署 Gitlab

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务&#xff0c;具有wiki和issue跟踪功能。GitLab是当前应用非常广泛的源代码管理系统。1. 安装docker引擎并启动2. 获取gitlab镜像包查看下载好的镜像3. 在…

druid连接池初始化慢_7、SpringBoot -连接池(Durid)

一导入相关核心包<dependencies>二 在application.ymlspring三、配置Druid Datasource(可选)Configuration五、监控访问 http://localhost:8080/druid&#xff0c; 使用上面配置的账号密码。四、自动配置原理源代码Configuration说明DataSourceProperties 配置相关 首先找…

使用工厂方法模式设计最佳实践

在前面的“设计模式”示例中&#xff0c;我们解释了当今常用的“工厂”模式。 在本节中&#xff0c;我们将了解具有更多抽象的更高级的解决方案。 该模式称为工厂方法设计模式。 定义&#xff1a; Factory方法模式提供了一种用于创建对象的方法&#xff0c;但是将对象创建委托…

qt绘制一圈圆_Qt绘制圆

最近开始折腾Qt了&#xff0c;手头上的一个项目需要用到Qt来绘制一些简单图像。记录下Qt绘制圆的过程&#xff1a;对于以A为圆心&#xff0c;半径为R的圆&#xff0c;外部有一个外切的正方形&#xff0c;正方形上有B点。如下图所示&#xff1a;对于void QPainter::drawArc(int …

前端基础之HTML

HTML介绍 Web服务本质 import socketsk socket.socket()sk.bind(("127.0.0.1", 8080)) sk.listen(5)while True:conn, addr sk.accept()data conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.secd(b"<h1>Hello world!</h1&g…

指令引用了 内存 该内存不能为read 一直弹窗_【翻译】使用Rust测试ARM和X86内存模型

原文标题: The Story of Tail Call Optimizations in Rust 原文标题: Examining ARM vs X86 Memory Models with Rust原文链接: https://www.nickwilcox.com/blog/arm_vs_x86_memory_model/公众号&#xff1a; Rust碎碎念苹果公司最近宣布&#xff0c;他们将要把笔记本和桌面电…

npm升级依赖包_Taro跨端开发之依赖管理

昨天跑的好好项目,今天跑不起来我们在开发周期比较长的前端项目的时候,必然会遇到依赖管理的问题. 我们在开发项目的时候,我们用了大量的三方库.这些三方的依赖库时不时的会更新自己的代码.第三方依赖库的代码更新会很容易造成代码运行的不稳定, 比如昨天还跑的好好的项目,另一…

设计模式 建造者模式 与 Spring Bean建造者 BeanDefinitionBuilder 源码与应用

建造者模式 定义: 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示主要作用: 在用户不知道对象的建造过程和细节的情况下就可以直接创建复杂的对象如何使用: 用户只需要给出指定复杂对象的类型和内容, 建造者模式负责按顺序创建复杂对象…

java 布隆过滤器_什么是布隆过滤器(Bloom Filter)?

在日常工作中&#xff0c;有一个比较常见的需求&#xff0c;就是需要判断一个元素是否在集合中。例如以下场景&#xff1a;给定一个IP黑名单库&#xff0c;检查指定IP是否在黑名单中&#xff1f;在接收邮件的时候&#xff0c;判断一个邮箱地址是否为垃圾邮件&#xff1f;在文字…

STM32上使用JSON

一、STM32工程中添加JSON 最近在一网2串项目&#xff0c;串口和网口之间可能需要定义一下简单的通信协议&#xff0c;而通信协议上则需要去定义一下通信的数据格式&#xff0c;上次听剑锋说要用Json来定义&#xff0c;目前查了下资料具体如何去应用还不 会。因为最新的KEIL上支…

Flex 学习

Flex案例一&#xff1a; 1 <html>2 <head>3 <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> 4 <title>无标题</title>5 <style type"text/css">6 body,h1,h2,h3,h4,…

Cocos2d-X中实现自己定义菜单处理事件

当用户点击再松开后才会响应菜单事件&#xff0c;而在游戏中有些游戏须要玩家点击后就处理事件。如玩坦克大战的时候&#xff0c;玩家是点击一下就发射子弹。并是点击松手后发射子弹&#xff0c;在Cocos2d-X中没有这样的消息。以下就通过自己定义的方式实现当用户点击后就调用处…

java linkedhashset_java之LinkedHashSet

LinkedHashSet是Set集合的一个实现&#xff0c;具有set集合不重复的特点&#xff0c;同时具有可预测的迭代顺序&#xff0c;也就是我们插入的顺序。并且linkedHashSet是一个非线程安全的集合。如果有多个线程同时访问当前linkedhashset集合容器&#xff0c;并且有一个线程对当前…

Jmeter 场景设计

今天的业务场景是&#xff1a; 1.管理员登录后台---登录成功后添加一个某类型的产品---产品添加成功后&#xff0c;再为该产品添加10个排期。 2.管理员登录后台--登录成功后添加多个不同类型产品---产品全部添加完成后&#xff0c;依次为所有产品添加10个排期。 这是两种不同的…

Android IPC机制(五)用Socket实现跨进程聊天程序

1.Socket简介 Socket也称作“套接字“&#xff0c;是在应用层和传输层之间的一个抽象层&#xff0c;它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信。它分为流式套接字和数据包套接字&#xff0c;分别对应网络传输控制层的TCP和UDP协议。TCP协…