Book to front< From the beginning of the front and back end separation [VUE 2.0 +. Net core 2.1] 14 ║ VUE plan & a brief history of my front and back end development >, yesterday we talked about several stages of web development experience explained by my experience, and also the knowledge points that Vue series need to talk about. Today, Code officially starts. Of course, today's Code is very simple. I hope you can learn slowly. Today, we mainly talk about JS advanced - about object-oriented syntax.

Before writing this article or Vue, of course, I was thinking about where to start and how to write, because you must know a part of the whole stack of engineers, so you can write at a glance without looking at the code, and some of them are still focused on the back end. The front end is just going to do some Dom with some Javascript, or Jquery Operation and so on. Finally, there are some small partners developed in CS mode. I've learned something about our QQ group. So, I'll go to various platforms to see how you talk about Vue, or about the separation of the front and back ends of MVVM. Well, I can understand them, but I just don't want to be the same as them ], of course, it doesn't mean that I write well, because many people start with Vue cli as soon as the article comes up, directly start with Hello world, and then start with a TodoList. Basically, it's over. I feel that since it's written, it's going to start with basic writing, so I want to start with JS object-oriented, make a foreshadowing and give you a buffer. Don't worry, Vue cli, Vue router, Axios, Vuex, etc. we all have them, and hello world, hahahaha!

<script>
  import myHeader from '../components/header.vue'
  import myFooter from '../components/footer.vue'
  export default {
    components: {myHeader, myFooter},
    data() {
      return {
        id: this.$route.params.id,
        dat: {},
        isShow: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        var that = this
        this.$api.get('Blog/Get/' + this.id, null, r => {
          r.data.bCreateTime = that.$utils.goodTime(r.data.bCreateTime)
          this.dat = r.data
          this.isShow = false
        })
      }
    },
    watch: {
      '$route'(to, from) {
        this.dat={}
        this.isShow = true
        this.id = to.params.id
        this.getData()
      }
    }
  }
</script>

/ / this is a direct function declaration method
　　var id=9;
　　var brandid=1;

　　GetGoods();

　　GetDetail();

　　GetUsers();

    function GetGoods() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }
    function GetDetail() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }
    function GetUsers() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }

//This is a way of writing objects
Object.defineProperties(a, {
  "property": {
    set property(newValue) {
      console.log("set property");
      return this._property = newValue;
    },
    get property() {
      console.log("getgsd property");
      return this._property;
    },
    enumerable: true,
    configurable: true
  },
  "name":{
    value: "maotr",
    writable: true,
    enumerable: true,
    configurable: true
  }
});

var obj=new Object();

obj.Name='blog';

obj.address='beijing';

　　 var obj = {
            name: 'blog',
            address: 'beijing',
            say: function () {
                alert("hello world");
            }
        }

//Function declaration (no priority between definition and use)
function obj(){
    alert('hi,I am a function declaration');
}

//Function expression (declaration must be defined before use)
var obj=function(){
　　 //other things...
    alert(
'hi,I am a function expression method')
}

        function Blog(title,font) {
            this.title = title,
            this.font = font,
            this.read = function () {
                    alert('Hi ,Blog');
                }
        }
        var blog1 = new Blog('JS Study', 100);
        alert(blog1.title);
        blog1.read();

//Constructor
function Egperson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
var person = new Egperson('mike','18'); //this-->person
person.sayName();  //'mike'


//Ordinary function
function egPerson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
egPerson('alice','23'); //this-->window
window.sayName();  //'alice'

1. In terms of naming rules, constructors are generally capitalized, and ordinary functions follow the small hump naming method

2. This in the constructor refers to the newly created person instance, while this in the normal function refers to the object calling the function (if there is no object call, the default is window)

3. An instance will be created inside the constructor, and a new object will not be created when a normal function is called

function foo() {
    var f2 = new foo2();
    console.log(f2);    //{a: 3}
    console.log(this); //window
    return true;
}
function foo2() {
    console.log(this); //foo2 Object of type is not foo2 function
    return { a: 3 };
}
var f1 = foo();
console.log(f1); // true

1. f1 calls foo(), then foo(), and instantiates the object foo 2. Therefore, f2 is an object of foo 2 (), which is printed out;

2. Then foo2() returns an object {a:3}, which is assigned to f2 and printed out;

3. this is the caller, that is, window;

4. At this time, the return value of foo() is true, assigned to f1, and printed out;

　　var name = 'blog.vue';

      function showName(){
        return this.name;
    }
    alert(showName()); //blog.vue

1. The function name is a pointer to the function.
2. Function execution environment (when is this initialized): when a function is called for the first time, an execution environment will be created and the active object of the function will be initialized with the value of this/arguments and other named parameters.
3. Who to initialize: in Javascript, this keyword always points to the owner of the function (method).

var name = 'The window';
            var object = {
                name:'The object',
                getNameFunc:function(){
                    return object1.getNameFunc();
                }
            };
            var object1 = {
                name:'The object1',
                getNameFunc:function(){
                    return this.name;
                }
            };
            alert(object.getNameFunc());//The object1

1. Ordinary function call

2. Call as a method

3. Call as constructor

4. Use the apply and call methods to call

5.Function.prototype.bind method

6.es6 arrow function

Remember that this keyword points to whoever calls this function or method.

var obj = {
    data: {
        books: "",
        price: 0,
        bookObj: null
    },
    init: function () {
        this.bind();
        this.popup();
        this.show();

    },
    show: function () {
        $(".content-title").html("");
        $(".content-title").html(this.data.books);
        $(".content-price").html(this.data.price);
    },
    bind: function () {
        var that = this;
        $(".content .content-list ").hover(function () {
            $(this).find(".see").show();
        }, function () {
            $(this).find(".see").hide();
        });

        $(".see").click(function () {
            $(".bg,.popupbox").show();
            that.data.bookObj = $(this);
        });

        $(".btn3,.cancel").click(function () {
            $(".bg,.popupbox").hide();
        });

        $(".ok").click(function () {
            var bookItem = that.data.bookObj;
            var _parice = $(bookItem).data("price");
            var _book = $(bookItem).data("book");
            that.data.books += _book + ",";
            that.data.price += parseInt(_parice);
            that.show();
        });
    },
    popup: function () {
        var box = $(".popupbox");
        var _width = document.documentElement.clientWidth;
        var _height = document.documentElement.clientHeight;
        var $width = (_width - box.width()) / 2;
        var $height = (_height - box.height()) / 2;
        box.css({ "left": $width, "top": $height });
    },
    watch: {

    }
};

$(function () {
    obj.init();
});