|
|
|
|
移动端
创建专栏

JavaScript写库前的准备工作

虽然我觉得这个鄙视链很幼稚,但是不能不说很多人拿自己写库作为一个技能区分标准,不管怎样写库都是一个提升技能的好办法,然而并不难。

作者:面包理想学院|2018-01-25 16:23

人工智能+区块链的发展趋势及应用调研报告


能够独立的书写一个库,是很多开发者或者HR认为区分技能的一个标志,而且还存在一个鄙视链:

切图的<用JS<从网上趴代码<自己写简单js<自己写组件<自己数据交互<自己写库给别人用<写nodejs等后台js<自己写后台组件和数据库交互的,

虽然我觉得这个鄙视链很幼稚,但是不能不说很多人拿自己写库作为一个技能区分标准,不管怎样写库都是一个提升技能的好办法,然而并不难。

好,我们看看写库之前需要什么准备知识。

1.严格模式

很多库一开始就是这样子的,

  1. (function(global){ 
  2.     //严格模式 
  3.     'use strict' 
  4. })(window); 

不墨迹直接说严格模式的好处,

1.更利于调试,当不定义变量直接用的时候如果不适用严格模式不会报错,而是结果不对。这个很难调试,因为大部分时间这种错误是你单词拼写错误,不报错。

2.防止出现低级错误,除了上面的问题,还有比如if里面定义函数造成问题的情况

3.修复了很多不利的bug和擅长无用功能,比如with。

听不懂我上面那三条也没事记住一个字就够了,以后必须用!

2.初始化。

举个例子写一个jquery的css方法,简单点儿,只实现设置宽高颜色。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>大彬哥版权所有翻录必究</title> 
  6.     <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"
  7.     <meta name="copyright" content="尼古拉斯·屌·大彬哥"
  8.     <meta name="viewport" 
  9.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge"
  11.     <style> 
  12.  
  13.     </style> 
  14.     <script> 
  15.         function css(obj,width,height,color){ 
  16.  
  17.             obj.style['width'] = width+'px'
  18.             obj.style['height'] = height+'px';; 
  19.             obj.style['background'] = color; 
  20.         } 
  21.         document.addEventListener('DOMContentLoaded',function(){ 
  22.             var oDiv = document.querySelector('#div1'); 
  23.             css(oDiv,200,100,'red'); 
  24.         },false); 
  25.     </script> 
  26.  
  27. </head> 
  28. <body> 
  29.     <div id="div1"></div> 
  30. </body> 
  31. </html> 

这样写至少有两问题,

1.参数多了我记不住顺序,就死翘翘了。

2.参数多了我忘写两个,就死翘翘了。

怎么解决用json的无序和增加默认值。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>大彬哥版权所有翻录必究</title> 
  6.     <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"
  7.     <meta name="copyright" content="尼古拉斯·屌·大彬哥"
  8.     <meta name="viewport" 
  9.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge"
  11.     <style> 
  12.  
  13.     </style> 
  14.     <script> 
  15.         function css(obj,json){ 
  16.             json.width = json.width||100; 
  17.             json.height = json.height||100; 
  18.             json.background =  json.background||'#cccccc';    
  19.             obj.style['width'] = json.width+'px'
  20.             obj.style['height'] = json.height+'px';; 
  21.             obj.style['background'] = json.background; 
  22.         } 
  23.         document.addEventListener('DOMContentLoaded',function(){ 
  24.             var oDiv = document.querySelector('#div1'); 
  25. //            css(oDiv,{width:200,height:50,background:'red'}); 
  26.             css(oDiv,{background:'red'}); 
  27.         },false); 
  28.     </script> 
  29. </head> 
  30. <body> 
  31.     <div id="div1"></div> 
  32. </body> 
  33. </html> 

简单吧。

3.数据类型判断

我们有时候经常要判断用户输入的数据类型。上代码,重点是对象和数组的判断。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>大彬哥版权所有翻录必究</title> 
  6.     <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"
  7.     <meta name="copyright" content="尼古拉斯·屌·大彬哥"
  8.     <meta name="viewport" 
  9.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge"
  11.     <style> 
  12.  
  13.     </style> 
  14.     <script> 
  15.         //usbnofunc 
  16.         // undefine string boolean number  
  17.         //这几个直接用typeof 不考虑new Number这些情况,神经病才这么用,这里不墨迹 
  18.        // alert(typeof 'abc' === 'string'); 
  19.         //看看null,不要以为null类型是object 这孙子是一个bug 
  20. //        alert(typeof null === 'object'); 
  21.         // 判断数组 
  22.         var arr = [1,3]; 
  23.         function isArray(value){ 
  24.             if (typeof Array.isArray === "function") { 
  25.                 return Array.isArray(value); 
  26.             }else
  27.                 return Object.prototype.toString.call(value) === "[object Array]"
  28.             } 
  29.         } 
  30.         alert(isArrayFn(arr));// true   
  31.          
  32.     </script> 
  33. </head> 
  34. <body> 
  35.     <div id="div1"></div> 
  36. </body> 
  37. </html> 

知道你可能不了解数组的判断方式,但是我想告诉你,两件事:

1.看别人的库很有必要,因为你写的不周全,人家已经很周全拿过去用就行了,前提是你知道原理。

2.不是每一个东西都会用到,不要为了学一个东西而去学,你一定是解决实际问题,比如很多人不会用call,bind,apply。其实是因为他们不知道用在哪,学以致用。

看别人库是最快的学习方法,推荐两个库,一个是loadash,一个是underscore.

【本文为51CTO专栏作者“面包理想学院”的原创稿件,转载请通过51CTO联系作者获取授权】

戳这里,看该作者更多好文

【编辑推荐】

  1. 如何用30行JavaScript代码编写神经网络异或运算器
  2. JavaScript 运算符规则与隐式类型转换详解
  3. JavaScript Event Loop 机制详解与 Vue.js 中实践应用
  4. 30行JavaScript代码,教你分分钟创建神经网络
  5. Javascript如何监听页面刷新和关闭事件
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多