Optimized! Optimized!

I saw an article on the Internet. Although it is about the internal method of a JS library, it is helpful for me to understand the MVC mode of JS. To prevent future access failures, copy it first:

$. Class simulates the inheritance implementation for Javascript. It connects jquery's function-oriented programming with object-oriented programming. $. The class is based on John resig's simple class library. Apart from prototype inheritance, it has other features: static inheritance, and introspection) namespace support, creation and initialization methods, and callback functions that are easier to create. The constructor lives a type in the following way: $. class ([name, static,] prototype)-> classname {optional: string}: If set, it will be used as the value of fullname and shortname, and add the corresponding namespace. Static {optional: Object object}: If set, static attributes and methods are added to the class. Prototype: {object}: add the attributes and methods of the prototype for the class. When the class is created, the static setup and init methods will be executed. Instantiate a type as follows, and the prototype setup and init methods will be executed in this process: New Class ([ARGs...]) -> before you start learning the class, it is important to clarify the differences between the static attributes and the prototype attributes. For example: // static myclass. staticproperty // shared property // prototype myclass = new myclass () myclass. prototypemethod () // The static and prototype attributes here are similar to those in C #. The static and prototype attributes in Java are used, but the implementation mechanism is different. Static attributes are attributes of class objects (rather than their instances. in class, we can use this. constructor. but in traditional JavaScript programming, only class is allowed. property access is like the previous example. The prototype property is inherited from the prototype chain, or has the instance object itself. The following example creates a class named Monster. $. Class ('monster',/* The static attribute is defined here */{count: 0},/* The prototype attribute is defined here */{init: function (name) {// Save the name variable to the name attribute of the Instance. This. name = Name; // set health to 10 this. health = 10; // use this. constructor. you can access static properties in XXX mode. Here, the value of the count attribute is increased from this. constructor. count ++;}, eat: function (smallchildren) {This. health + = smallchildren;}, fight: function () {This. health-= 2 ;}}); Hydra = new monster ('hybrid'); dragon = new Monster ('Dragon'); Hydra. name //-> Hydra monster. count //-> 2 monster. shortname/shortname is $. class comes with a static property-> 'monster' Hydra. eat (2); // health = 12 dragon. fight (); // health = 8 The init method in the prototype attribute is equivalent to the constructor, which will be executed when the object is instantiated this time. Inheritance when a class is extended by another class, all its static and prototype attributes will be inherited. When you override a function, you can use this. _ super () to access its implementation in the parent class. Create a new class seamonster: Monster ("seamonster", {eat: function (smallchildren) {This. _ super (smallchildren/2) ;}, fight: function () {This. health-= 1 ;}}); lockness = new seamonster ('lockness '); lockness. eat (4); // health = 12 lockness. fight (); // health = 11 static property inheritance you can achieve static property inheritance like this: $. class ("first", {staticmethod: function () {return 1 ;},{}) First ("second", {staticmethod: function () {return this. _ Super () + 1 ;}},{}) second. staticmethod () //-> 2 The namespace is a good thing. You can use it to separate your code by function and make the program architecture more reasonable; it also facilitates code porting to other places without worrying about exceptions. Javascript itself does not support namespaces, so there is only one alternative. For example, we can use the singleton mode. Below is $. example of using namespace in class: $. class ("mynamespace. myclass ",{},{}); New mynamespace. myclass () self-description (introspection) $. class provides the string name self-expression function for the class. See the following example: $. class ("myorg. myclass ", {},{}) myorg. myclass. shortname //-> 'myclass' myorg. myclass. fullname //-> 'myorg. myclass 'fullname includes namespaces, while shortname does not include namespaces. They are all static attributes. Creation and initialization Methods $. class provides static and prototype initialization methods to facilitate the creation of classes. They are setup and init. Setup will run before init. Generally, you do not need to use it, but when you need to do some complicated work for init, for example, you can use it to initialize the parameters required by init. $. Class ("myclass", {setup: function () {}// static setup init: function () {}// static constructor}, {setup: function () {}// prototype setup init: function () {}// prototype constructor}) 1. setup: setup is called before init. The static setup function passes the parameters of the base class to the extension class, and the prototype function passes the constructor parameters. If setup returns an array, the array will be used as a parameter of the init method. In this case, some default parameters can be passed to the init method. You can also place frequently-run code in setup. You do not need to override the setup method. $. Class ("jquery. controller ",{...}, {setup: function (El, options ){... return [$ (EL), $. extend (true, this. class. defaults, options | |{})] }}) 2. init: The init method runs after setup. They receive the result of setup as a parameter. $. Class ("foo", {init: function (arg1, arg2, arg3) {This. sum = arg1 + arg2 + arg3 ;}) var Foo = new Foo (1, 2, 3); Foo. sum //-> 6 the proxy is similar to the proxy method provided by jquery. It returns a callback function. This always points to the class or class instance. In the following example, this. Proxy is used to ensure that this. Name is directed to the todo instance, so that show can get the correct value. $. Class ("Todo", {init: function (name) {This. name = Name}, get: function () {$. get ("/stuff", this. proxy ('show')}, show: function (txt) {alert (this. name + txt) }}) new todo ("trash "). get ()

Getting started with javascriptmvc -- 3. jquerymx-> $. Class

Entry-level JS is a few scattered functions, and then creates a start (); method, which executes all the page loading internally and initializes the method to be executed.

Then some cool people like to encapsulate their code into reusable and even custom tags like plug-ins.

However, I think there is a misunderstanding: A Website Cannot be encapsulated plug-ins everywhere, and You encapsulate your own plug-ins, it does not mean that the scattered code of other parts can have no clear structure.

When I am reading code from a cool who is very fond of encapsulation, I often find that the code is encapsulated too much, which leads to the maintenance and modification problems in the future, even he often forgets what he meant...

So some strong people in the background told me that you cannot learn from him like this. You should go to the design pattern and learn MVC.

Although I have not read this book well, I have already begun to rebuild my Js by drawing samples.

Learn the structure of global. js written in p.r. May in the previous article:

Suli.init = function () {new Suli.Functioname();}

Suli.Functioname = function () { 　　
　　　api :{ 　　　　
　　　　   init = function (){
　　　　   }  　　  },　　  _fun = function ( ) {
     },     api = {          anything : function () {          },          dosomething : function () {     　　　},...return api.init();}

Put all related functions into a symbolic function. This function has an API object and executes sub-methods in the API init method. Return contains the object of the init method, this function is also called a constructor when it is instantiated.