Various writing methods of javaScript encapsulation

This article mainly introduces the various writing methods of javaScript. It introduces several JavaScript encapsulation formats in detail by listing the advantages, disadvantages and usage scenarios. Friends who are interested in JavaScript can refer to this article. Article

In the world of JavaScript, writing is a magical phenomenon. It is really open to all schools of thought! Every time I see js components written by foreigners, the ideas and writing methods are weird, but I have never seen a code with basically the same js structure. Today, I will talk about how to write js. I also wrote several methods during the development process. In terms of performance, if the code structure or logic is not written well, it will cause the computer CPU to increase the operation and reduce the running performance. The way js is written is also crucial to the performance.

Usually those who write js components will use anonymous function to encapsulate an object and form a closure scope with the outside world. (I won’t say much about the inheritance and polymorphism of js here. Senior programmers should have this knowledge. If you have also done Java development, this concept is too familiar.)

Mainly for encapsulation Research, because both the front and backends involve the concept of object-oriented, which is an important concept for encapsulation, how to encapsulate, the performance of encapsulation, etc. Encapsulation (the first concept in the programming world, I personally think) is everywhere in the world. JQuery, EXT and Prototype.js encapsulate javascript, jQuery uI and jQuery mobile encapsulate jQuery, and JDBC in java is in spirng, Hibernate and other frameworks encapsulate it. Here are a few examples, but there are many more that I will not introduce one by one.

Back to the topic of javaScript encapsulation writing, let’s take a look at a simple

function hello(){
 var a = 'hello';
 alert(a);
}

js function is the most primitive and basic encapsulation. It is easy to understand js at a glance. If your page does not require a lot of js For interactive operations, you can use this simple method. If you like to use JQuery, you need to write it like this

$(function(){
 $('#id').click(function(){
 alert('hello');
 })
});

If you use Node.js, it is more complicated, because Node.js needs to load an HTTP module. The writing method is as follows

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

If we encapsulate the writing method in a deeper level, if we encounter a large number of js operations, each small function alone cannot satisfy it, because they exist in a common domain, and the writing methods are many and scattered. It easily causes many bug factors and needs to be corrected. The creator of js provides us with a function called anonymous function. As the name suggests, an anonymous function is a function without an actual name. It comes in many formats! function(){}(),(function(){})(),(function(){}()),new function(){},void function(){}();JQuery.js is an anonymous Function encapsulation, first look at the most commonly used

 (function(){
 star.init = (function(name){
 var e = new Editor(name, Data.toolbarData);
 });
 })();

If you develop some js components, you can firstcreate an object, give this objectproperties and methods, let this Objects can be operated independently and cooperate with other objects

var klm = klm || {};
 klm = (function(){
 //第一个写法
 klm.init = function(){
  alert('hello');
 }

 //第二个写法
  klm.browser = (function(ua){
  var b = {
  msie:/msie/.test(ua) && !/opera/.test(ua),
  opera:/opera/.test(ua),
  safari:/webkit/.test(ua) && !/chrome/.test(ua),
  firefox:/firefox/.test(ua),
  chrome:/chrome/.test(ua)
  };
  })(window.navigator.userAgent.toLowerCase());
  //将其定义方法以接口方式返回给外界引用
  return{
  init: klm.init,
  browser:klm.browser 
  }
 })();

                                                                                                                                    Out Out Out Out Out Out Out In Its Out in Hand in in - In in 1 In One in One in There in Instruction in Instruction in Instruction in Instruction in Instruction in Instruction in Do Not About in Do Not Want to Do””””” . A small operation is encapsulated into attributes, init and closeWindow, and then it can be initialized and loaded such as my.init(); it can also be bound to an operation event such as $("#contact").add(my.closeWindow() );These packages are created in one go.

Also define a single attribute encapsulation

var myOpinion = myOpinion || {};
 myOpinion.prototype={
 init:function(obj,i){
  alert('hello');
  },
  closeWindow:function(obj,d){
  obj.click(function(){
  d.hide();
  });
  }
 }
 $(function(){
  var my = myOpinion.prototype;
  my.init($(".z-sidebar li em"),$("#contact")); 
  $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));
 });

Here I create a create attribute to encapsulate a piece of HTML code in the form of an anonymous function, and bind a click event to this HTML code.

List the above several js encapsulation forms, but Xiaosheng is still researching them. These types can achieve the same operation, but there are some differences in writing methods. Anyone who has better insights on performance can comment on me and communicate with me. .

Related recommendations:

Two methods for JavaScript to parse URLs into json format

5 JavaScript algorithms for deleting duplicate elements from arrays

Detailed explanation of throttling and anti-shake debounce of javascript function

The above is the detailed content of Various writing methods of javaScript encapsulation. For more information, please follow other related articles on the PHP Chinese website!