谈谈原生 JS

最新推荐文章于 2022-04-06 11:26:16 发布

技术与健康

最新推荐文章于 2022-04-06 11:26:16 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

文章标签： js java javascript python react

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Practicer2015/article/details/108444909

本文探讨了在前端开发中使用原生JavaScript的重要性，并对比了使用框架如React、Vue等的利弊。学习原生JS有助于理解DOM操作、原型、闭包等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在的前端开发，大部分人一上手，就是去用 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)