区域大数据大屏总结（echarts、自适应、模块化、代码规范/优化）

好久没写总结了，自从4月底辞职到5月初换公司上班才真正的进入加班狗行业，笔记本上零零散散记了很多，今天就大概写下最近做区域大数据页面的学习和总结，若有不当，请指正

1. echarts图表插件

echarts官网

demo是散点图，看菜单有很多图的种类可以选择，还能自定义自己的风格的图表，详情见官网；
这里主要是推荐下插件，适当的场景用比较省时省力，另外就是API比较多，建议大致浏览一类，举一反三，在需要某种属性、样式、效果等等可以查api或者百度echarts有没有这种属性或方法。demo入手比较快。

2. 自适应

responsive.less
横向转化百分比，纵向转化rem，px转rem公式：

.px2percent(@atr,@px,@base-width:0) when( @base-width > 0) and (@cssType = "fix"){
    @{atr}: @px;
}

.px2percent(@atr,@px,@base-width:0) when( @base-width > 0) and (@cssType = "responsive"){
    @{atr}: percentage(@px / @base-width);
}

.px2percent(@atr,@px,@base-width:0) when( @base-width = 0) and (@cssType = "fix"){
    @{atr}: @px;
}

.px2percent(@atr,@px,@base-width:0) when( @base-width = 0) and (@cssType = "responsive"){
    @{atr}: percentage(@px / @baseWidth);
}

在写css的less前面@import 'responsive.less';

3. 模块化

Java里面有很多这个包那个包，需要哪个包的属性或者方法可以在头部import进来，
JavaScript的基础写法是封装一个函数对象，写成立即执行函数，

var myModule = (function(){
    //加一个初始化方法
    myModule.init = function(){
        ...
    }
    return myModule;
})();

这样就写成了一个有单独作用域的模块。

CommonJS

我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。
一，定义模块:
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
二，模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象。 三，加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。 看个例子：

var name = 'Byron';

function printName(){
    console.log(name); }

function printFullName(firstName){
    console.log(firstName + name); }

module.exports = {
    printName: printName,
    printFullName: printFullName } ``` 然后加载模块，

    var nameModule = require('./myModel.js');
    nameModule.printName();

不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）。

common.js此段摘自前端网-前端模块化
AMD ==》 RequireJS
CMD ==》 Sea.js
还有AMD CMD之间的区别参考以上链接

4. 代码规范及写法优化

1.添加注释
以前是高兴写就写两行，不高兴写，回头我自己都看不懂（夸张点，哈哈），现在基本养成了一个随手加注释的好习惯了，不是每行，是每个模块、每个函数。 不仅方便同事查看也方便后面自己查看修改。

2.class/id/变量/函数名等命名
我的习惯 class: class_name

       id: idNameNameName
       变量、函数名同驼峰规则。

之前写class是连字符- class-name 但是双击只会选中一个不能整个class一起复制，我就开始写成 _ 了 calss_name 双击，复制（爽歪歪）；
还有就是命名语义化 比如func hideDOM(){ DOM.show() },这就很尴尬了
超棒的前端开发规范==》Github地址-前端开发规范手册
1.存储常用DOM
这也是最近偷师偷来的，现在想想道理其实很简单，就看你有没有去想或者想得到，要不就去捡别人现成的，反正有进步就是好的。

var elements = {};
var initElements = function(){
    elements.newDomName = document.qs('#id');
}

后面就可以直接使用存储的DOM而不需要再去搜寻目标DOM了，对性能优化有一定帮助。

---

题外话：其实还有一点，感觉还是蛮重要的，就是程序员对于业务的理解，通过对于产品需求的分析，整理出产品的业务逻辑，再到代码中实现需求，绝对需要一定的理解能力和分析能力，另外还要有跟产品撕的魄力，不合理的地方万一实现不了到时候还得背锅，所以酌情撕。以前野生的时候，真的全靠自己瞎几把乱看乱学了，现在好了，有偷师对象了，哈哈哈，就是加班太多了 手动[/允悲]。 下阶段webpack+vue+es6，还好webpack自学过做过demo,加油吧，程序员！

声明：本文若有不当，欢迎指正。转载请注明出处~