Giter VIP home page Giter VIP logo

front-end-coding-military-regulations's Introduction

前端编码军规

一:永远把安全放在第一位。

  1:对于ES5,请使用严格模式"use strict"
  2:注意var、const和let的使用
  • ES5中永远不要漏掉var
  • ES6中能使用const的尽量使用const,定义了不在改变了就使用const
  3:永远不要相信用户输入的东西

对于用户输入要做好必要的校验,数据类型、长度、格式(邮箱、手机号、座机号)、特殊字符串(是否需要转移)等的校验,不但前端做好校验,后端也需要校验。

  4:对于使用的变量在处理或者使用的时候在入口处进行合法性判断
  • 对字符串或者数字类型操作的时候,是否需要判空?
  • 对数字类型的变量操作的时候,是否进行类型判断?或者大于零的判断?
  • 对数组类型在操作的时候,是否进行类型的判断?长度的判断?
  • 对对象操作的时候,是否需要类型的判断?是否为空的判断?属性是否存在的判断?
  • 对函数类型的操作时候,是否类型为函数类型?

二:时刻考虑性能的问题。

  1:减少http(s)的请求次数
  • 合并CSS文件、Javascript文件。
  • 对于小图标采用雪碧图的方式
  • 对于大的图标可以采用分割为几张小的图片加载(具体多大以上,具体自己定义)
  2:能用局部变量解决的问题,尽量用局部变量

在一个函数中尽量使用局部变量替换全局对象来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。

  3:学会释放
  • 释放javascript对象
    随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。 对象:obj = null 对象属性:delete obj.myproperty 数组item:使用数组的splice方法释放数组中不用的item

  • 释放dom元素占用的内存
    将dom元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。在rich应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的dom元素使用的内存。

  • 注销事件监听、定时器setTimeout和setInterval
    对于已经没用的事件监听和定时器在没用的情况下要及时注销,特别是现代框架在组件中定义的事件定时器在组件注销的时候要注销掉事件和定时器

  3:赋值运算或者定义变量的时候,把相关关联的变量可以定义在一起(一个对象下面或者数组里面),下面的例子:
Good code

var personal = {
   name: 'Tom',
  age: 30,
  sex: 'male'
} 
Bad code

var personalName = 'Tom' 
var personalAge = 30 
var personalSex = 'male' 

三:让你的代码或者团队的代码保持格式统一。

每个人都可能有自己的代码风格和格式,但如果一个项目中的所有人都遵循同一风格的话,这个项目就能更顺利地进行。每个人未必能同意每一处格式规则,而且其中的不少规则需要一定时间的适应,但整个项目服从统一的编程风格是很重要的,只有这样才能让所有人轻松地阅读和理解代码。

  1:使用同一种编辑器或者同一套格式化代码规则
  2:遵守同一套编码规范

四:一个操作如果有较长时间的停顿,考虑添加过渡行为。

front-end-coding-military-regulations's People

Contributors

shizigou9000 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.