谈谈原生 JS

现在的前端开发，大部分人一上手，就是去用 jquery,zepto,更有就是vue. 而react或者 NG对初学者来说，还是有些门槛。

既然这些库这么好用，还有必要去学习原生JS吗？

原生 JS可以认为是砖块，要构建一个成功的项目或者产品，要求开发人员对数据结构，模块划分，函数划分，异步调用等知识能够真正的从系统设计，软件工程的角度去思考。可是行业发展太快，供不应求，所以一些框架及时出现，降低了开发的门槛。满足了业务需要。

那是不是满足业务需要就够了呢？ 其实主要还是看你自己，如果你要做业务专家，那可以主要精力聚焦业务模型，把实现交给他人。

而如果你要做技术专家，那么原生JS还是要精进的，毕竟通过原生JS,你对于DOM,原型， 闭包，立即执行函数，高阶函数，异步通信机制，才能有更加深刻学些和掌握。

通过原生JS，可以让你真正掌握JS这门语言。

(function(global) {
    // body...
    

   function hello() {
    // body...
    console.log("hello");
    alert("hello");
   }

   var data= [
          {id:1,name:"one",price:100},
           {id:1,name:"one",price:100},
            {id:1,name:"one",price:100},
             {id:1,name:"one",price:100},
              {id:1,name:"one",price:100},
               {id:1,name:"one",price:100},
                {id:1,name:"one",price:100}
      ];


      function initPage() {
        // body...
        var ul = createElement("ul");
        ul.className = "list";
         var fragment = document.createDocumentFragment();
        for(var i=0;i<data.length;i++){
          var li = createElement("li");
          li.className = "item";
          var nameEl = createElement("span");
          nameEl.className = "col";
          nameEl.textContent =  data[i].name;
          li.appendChild(nameEl);

          var priceEl = createElement("span");
           priceEl.className = "col";
          priceEl.textContent =  data[i].price;
          li.appendChild(priceEl);

          console.log(nameEl.compareDocumentPosition(document.getElementById("xx")));
           console.log(nameEl.isSameNode(priceEl));
           console.log(nameEl.isContentEditable);
          li.setAttribute("data-value",data[i].price)
          // console.log(li.getUserData("data-value"));
          fragment.append(li);
        }
        ul.appendChild(fragment);
        var attrul = document.createAttribute("id");
        attrul.value ="10";
        ul.setAttributeNode(attrul);
        document.getElementById("xx").appendChild(ul);  

      }
      
       
     
      function createElement(type) {
         return document.createElement(type);

      }

     global.hello = hello;
     global.initPage = initPage;


     global.initModule = {
        hello:hello,
        initPage:initPage
     }

})(window)

image.png

基于原生JS的模块，快速操作DOM的fragment,动态创建DOM元素和属性的方式。

下面这篇文章对一些基础概念做了比较好的讲解
https://blog.csdn.net/liujie19901217/article/details/52088182

1.变量，值类型，引用类型

• 栈内存中存放的是基本数据类型值，堆内存中存放的是引用类型值，引用类型值在内存中的地址存放在栈中，也就是我们常说的对象对象引用(指针)。

• 在变量复制方面，基本类型和引用类型也有所不同，基本类型复制的是值本身，而引用类型复制的是内存地址。
  2，this
  3，执行环境及作用域
  4，内存泄漏常见情况

• 闭包，循环引用，计时器清除