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,一经查实,立即删除!

相关文章

yum mysql5.7位置_CentOS yum 安装 Mysql5.7

1 Steps for a Fresh Installation of MySQL# wget https://dev.mysql.com/get/mysql57-community-release-el6-9.noarch.rpm# yum localinstall mysql57-community-release-el6-9.noarch.rpm以上步骤其实是把 MySQL Yum repository 添加到了系统的 repository list 里去了。ll…

HTML/CSS基础知识(四)

WEB标准和W3C的理解与认识 Web标准是一系列标准的集合。 网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。 对应的标准也分三方面:结构化标准语言主要包…

python做一个系统代码_python初学者,用python3实现基本的学生管理系统代码实例...

这篇文章分享了管理系统,python学生管理系统的使用,这篇文章非常详细地介绍了通过示例代码实现的学生管理系统,该系统对每个人的研究或工作都有一定的参考学习价值。 这个是用python实现的基本的增删改查的学生管理系统吧,其中主要…

Python入门笔记

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

1058. 选择题(20)

原题: https://www.patest.cn/contests/pat-b-practise/1058 思路: 本题主要就是怎么读取数据的问题, 一定要注意scanf函数匹配到 空格或者回车会结束当前变量的赋值, 并且会丢弃这个空格或回车. 关于如何判断一项答题是否正确, 可以采用循环一个一个判断, 也可拼成 字符串用st…

使用Spring和Hibernate进行集成测试有多酷

我有罪,直到现在才写集成测试(至少针对数据库相关事务)。 因此,为了消除内感,我阅读了如何在周末以最少的努力实现这一目标。 提供了一个小示例,描述了如何使用Spring和Hibernate轻松实现这一目标。 通过集…

假设mysql数据表t1有字段_使用ROMA Connect集成数据

概述ROMA Connect支持接入多种类型的数据源,并通过数据集成任务实现源端到目标端的数据集成转换。ROMA Connect支持相同结构数据之间进行集成转换,也支持异构数据之间进行集成转换。本章节通过完成一个SQL Server到MySQL的数据集成配置样例,帮…

vue-wechat-title

html中的title安装:npm install vue-wechat-title --save1.在mian.js中//网页titleimport VueTitle from vue-wechat-title Vue.use(VueTitle);2. 路由中加下 title { path: /, component: Index, meta: { title: 首页 } }3. 在app.vue 中修改 router-view &a…

如何保证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…

dedecms列表页面随机缩略图调用

如果要利用dedecms制作扁平化主题&#xff0c;大概也能够遇到相似的问题&#xff0c;那就是dedecms的缩略图机制&#xff0c;在没有缩略图的情况下显示单一的默认图片&#xff0c;如果是wordpress可以很方便的定义函数调用随机的缩略图&#xff0c;即便是在没有设置缩略图并且文…

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

本文介绍如何通过使用映射触发器来处理一致性事件。 基本上&#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;让您像使用水、电、天然气等公共资源一样便捷、高…

01-HTML深入

1.1 浏览器的工作原理 把一些标签解析成用户可视化的页面 1.2 HTML中的标签与元素 在HTML中以<xx>开始&#xff0c;以</xx>结束&#xff0c;比如<html></html>等。 标签和其内容统称为元素&#xff0c;比如&#xff1a;<xx>h5</xx> 元素…

gitlab使用_使用 Docker 部署 Gitlab

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

js--webSocket入门

Websocket 1.websocket是什么&#xff1f; WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接&#xff0c; 此后服务端与客户端通过此TCP连接进行实时通信。 2.websocket的优点 以前我们实现推送技术…

node.js继承

person.js module.exports function(){   this.name "person";   this.sleep function(){     console.log("sleep in the night");   }   this.eat function(){     console.log(eat food);   }} student.js var util require(&qu…

研究死锁–第5部分:使用显式锁定

在我的上一个博客中&#xff0c;我研究了使用Java的传统synchronized关键字和锁排序来修复破碎的&#xff0c;死锁的余额转移示例代码。 但是&#xff0c;有一种替代方法称为显式锁定。 这里&#xff0c;将锁定机制称为显式而非隐式的想法是&#xff0c; 显式表示它不是Java语…

mysql 经典入门教程_MySQL 经典入门教程

MySQL 经典入门教程1 定义数据库中的表&#xff1a;一行叫一条记录。每一列叫一个属性&#xff0c;或一个字段。主键&#xff1a;表中的某个特殊字段&#xff0c;具有唯一的确定的值&#xff0c;可以根据该字段唯一的确定一条记录外键&#xff1a;表中的某个字段的值为另一张表…

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

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