分类
javascript 总结

约定俗成写代码守则

关于数据字典

数据字典的数据可以先用async获取,方便后面使用

数据字典前端要传后端code,后端不能存name,而是利用code获取name再传给前端

关于流程

如果写流程类的代码,就有节点的概念,每个节点都会有表单操作,每个节点都有它的特殊性去展示不同的页面,因此,节点不能写死,像1,2,3,4,5这样就写死了,建议1,3,5,7,9

关于echarts

记得合并模式,基础配置使用普通合并,后台传过来的数据用代替合并

定义一个resize监听器,改监听器可以用debounce,当监听到时更改resize:true,再监听resize,当它为true时给echars修改this.chart.resize({width: null})最后把resize改成false,resize这个值可放到公共store

每个图标一定要单独做成组件,组件里有一个config.js配置,这样容易复制,要是做在一起,这酸爽。。。。

关于公共组件

适合抽离的公共组件有1.上传 2.找人等常用又容易修改的组件3.严重占据代码量的组件

关于css

写好css很重要,知道在哪写css更重要,曾经在一个流程的vue文件下写css,后来这个流程复制了5遍。。。

css尽量别嵌套太深,不然找都不好找

关于用户体验

弹出框:点击按钮弹出,点击外部框消失或者点击按钮框消失

选择框:可搜索,可删除

分类
svg

Webpack Plugins 构造组件库使用的API

webpack-node-externals

const nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};

组件库内不包含node_modules,减少组件体积

VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin');
 module: {
    rules: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: config.jsexclude,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      }
    ]
  },
  plugins: [
    new ProgressBarPlugin(),
    new VueLoaderPlugin()
  ]

没有使用vue-cli创建项目时又要用到vue需要此plugin

terser-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin');
optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false
          }
        }
      })
    ]
  },

压缩js代码并去掉注释

分类
nodejs

NodeJs 构造组件库使用的API

path

const path = require(‘path’);

path.resolve(‘a’); // 获取当前地址/a

__dirname:指向当前执行文件的绝对路径-代码存放的位置

process.cwd(); // 当前工作目录-当前node命令执行时所在的文件夹目录

path.resolve(__dirname,’a’);

https://www.runoob.com/nodejs/nodejs-path-module.html

fs

文件系统

http://nodejs.cn/api/fs.html#fs_fs_statsync_path_options

fs.statSync

检索路径的<fs.Stats>

fs.mkdirSync

同步创建目录 fs.mkdirSync(path.resolve(__dirname,’../index.js’))

fs.readFilsSync 同步读取文件内容

fs.readdir(path,(err,files) => {}); 异步读取文件名

分类
javascript

javascript中的继承与原型链

原型链继承

 // 原型链继承
    // 父类元素新增原型方法、原型属性,子类都能访问到
    // 简单,易于实现
    // 缺点:1.无法实现多继承,2.来自原型对象的所有属性被所有子类共享。3.要创建子类实例时,无法向父类构造函数传参
    // 4. 要想为子类新增属性和方法,必须要在Student.prototype = new Person() 之后执行,不能放到构造器中
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.play = [1,2,3];
        this.setName = function(name) {
            this.name = name;
        };
    }
    Person.prototype.setAge = function(age) {
        this.age = age;
    }
    function Student(price) {
        this.price = price;
        this.setScore = function() {}
    }
    Student.prototype = new Person();
    var s1 = new Student(15000);
    var s2 = new Student(14000);
    s1.setName('zhuishao');
    s1.setAge(24);
    console.log(s1, s2);
qi ye wei xin jie tu 16230327418073 1 - javascript中的继承与原型链

Student.prototype = new Person() 等价于

  • Student.prototype.constuctor = Person;
  • Student.prototype.__proto__=Person.prototype

注意:Student.prototype !== Student.prototype.__proto__ 因为他们指向的地址是不同的

借用构造函数继承

// 借用构造函数继承
    // 解决了原型链继承中子类实例共享父类引用属性的问题
    // 创建子类实例时,可以向父类传递参数
    // 可以实现多继承
    // 缺点1. 实例不是父类的实例,只是子类的实例 2.只能继承父类的属性和方法,不能继承父类的原型属性和方法
    // 3.无法实现函数的复用,每个子类都有父类实例函数的副本,影响性能
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.setName = function() {}
    }
    Person.prototype.setAge = function() {}
    function Student(name, age, price) {
        Person.call(this, name, age);
        this.price = price
    }
    var s1 = new Student('Tom', 20, 15000);
qi ye wei xin jie tu 16230344824716 - javascript中的继承与原型链

原型链+借用构造函数的组合继承

// 原型链+借用构造函数的组合继承
    // 可以继承实例属性/方法,也可以继承原型属性/方法
    // 不存在引用属性共享问题
    // 可传参,函数可复用

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.setName = function() {}
    }
    Person.prototype.setAge = function(age) {
        this.age = age;
    }
    function Student(name, age, price) {
        Person.call(this, name, age);
        this.price = price
    }
    Student.prototype = new Person();
    Student.prototype.constructor = Student;

    var s1 = new Student('Tom', 20, 15000);
qi ye wei xin jie tu 16230344824716 1 - javascript中的继承与原型链

组合继承优化

 // 组合继承优化
    // 不会初始化两次实例方法/属性,避免的组合继承的缺点
    // 缺点:没办法辨别实例时子类还是父类创造的,子类和父类的构造函数指向同一个
    function Person(name, age) {
        this.nam = name;
        this.age = age;
        this.setAge = function() {}
    }
    Person.prototype.setAge = function() {
        console.log('111');
    };
    function Student(name, age, price) {
        Person.call(this, name,age);
        this.price = price;
        this.setScore = function() {}
    }
    Person.prototype.sayHello = function() {
        console.log('hello');
    }
    Student.prototype = Person.prototype;
    var s1 = new Student('Tom', 20, 15000);
    console.log(s1);
qi ye wei xin jie tu 16230344824716 2 - javascript中的继承与原型链

组合继承优化2,最完美

function Person(name, age) {
        this.name = name,
            this.age = age
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    function Student(name, age, price) {
        Person.call(this, name, age)
        this.price = price
        this.setScore = function () {}
    }
    Student.prototype = Object.create(Person.prototype)//核心代码
    Student.prototype.constructor = Student//核心代码
    var s1 = new Student('Tom', 20, 15000)
    console.log(s1 instanceof Student, s1 instanceof Person) // true true
    console.log(s1.constructor) //Student
    console.log(s1)
qi ye wei xin jie tu 16230344824716 3 - javascript中的继承与原型链

注意:Object.create是创建了只包含原型链不包含对象this的一个对象,所以需要Person.call获取对象本身的方法与属性