属性名必须加双引号,Null类型也只有一个值

2019-07-17 作者:小鱼儿主页高手论坛   |   浏览(67)

 简介

在JavaScript中留存那样两种原始类型:Null与Undefined。那三种档期的顺序平时会使JavaScript的开采职员产生嫌疑,在怎样时候是Null,几时又是Undefined?

 觉得Mootools难以置信?想理解Dojo是什么样兑现的?对JQuery的技艺以为惊愕?在那篇教程里,大家将追寻框架背后的心腹,然后试着温馨入手创设多个你所热爱的框架的总结版本。

简介

今后最常用的JavaScript库之一是RequireJS。近来自个儿到场的各样门类,都用到了RequireJS,或许是自家向它们推荐了增添RequireJS。在那篇文章中,小编将陈诉RequireJS是何许,以及它的局地基础场景。
异步模块定义(英特尔)

Undefined类型独有几个值,即undefined。当评释的变量还未被初步化时,变量的暗中同意值为undefined。

我们大约天天都在应用五颜六色的JavaScript框架。当您刚入门的时候,方便的DOM(文档对象模型)操作让您感觉JQuery那样的东西极屌。那是因为:首先,对于菜鸟来讲DOM太难精通了;当然,对于一个API来讲难以驾驭可不是什么好事。其次,浏览器间的包容性难点特别让人困扰。

JSON即JavaScript Object Natation,它是一种轻量级的数据调换格式,非常适合于服务器与 JavaScript 的互相。
JSON是一种数据沟通格式,像XML和YAML一样是一种在各个不一致语言间传递结构化音信的办法。从一边来讲,javascript对象是javascript语言中的一种数据类型,仿佛PHP中的数组、C 中类和结构体。

提起RequireJS,你不能够绕过聊起JavaScript模块是什么,以及英特尔是什么。

Null类型也只有多个值,即null。null用来表示并未有存在的对象,常用来代表函数企图重回二个不设有的靶子。

  •     大家将元素包装成靶子是因为我们想要能够为对象增加方法。
  • 在那个课程里,我们将试着起来达成这一个框架之一。是的,那会很风趣,不过在您太过兴奋前自个儿要澄清几点:
  •     那不会是一个成效很圆满的框架。的确,大家要写过多事物,但它还算不上JQuery。然则我们就要做的事情会让您感受到在真正编写框架的感觉。
  •     我们不准备有限帮忙全体的兼容性。我们将要编写的框架能够在 Internet Explorer 8 、Firefox 5 、Opera 10 、Chrome和Safari上干活。
  •     大家的框架不会覆盖到全体比异常的大也许的职能。比方说,大家的append和preappend方法独有在您传给它贰个我们框架的实例时本领源办公室事;大家不会用原生的DOM节点和节点列表。

定义JSON与javascript对象

JavaScript模块只是依据SRP(Single Responsibility Principle单一任务标准)的代码段,它揭示了叁个公开的API。在现今JavaScript开垦中,你可以在模块中封装大多成效,何况在非常多连串中,各类模块都有其协调的文书。那使得JavaScript开辟者日子有一点优伤,因为它们需求不停不断的关怀模块之间的借助,依照多个一定的相继加载那一个模块,不然运转时将会放生错误。

复制代码 代码如下:

    另外:固然在课程中我们不会为大家的框架编写测量试验用例,然则本人早已在率先次支付它的时候做好了。你能够从 Github上收获框架和测量试验用例的代码。

在javascript程序中定义对象的时候,对象的性质名能够加双引号也得以不加双引号。若是属性名富含特殊字符(如!、if等)的时候,就亟须加双引号。
在定义JSON的时候,属性名必须加双引号。

当您要加载JavaScript模块时,就可以动用script标签。为了加载依赖的模块,你将要先加载被重视的,之后再加载依赖的。使用script标签时,你供给服从此特定顺序安顿它们的加载,何况剧本的加载是手拉手的。能够动用async和defer关键字使得加载异步,但只怕就此在加载进程中错失加载的依次。另贰个精选是将兼具的脚本捆绑打包在一同,但在绑扎的时候你照样需求把它们依照科学的一一排序。

var oValue; 
alert(oValue == undefined); //output "true" 

先是步: 创建框架模板

代码示例:

速龙正是那般一种对模块的概念,使模块和它的依据能够被异步的加载,但又依据科学的种种。

这段代码展现为true,代表oVlaue的值即为undefined,因为大家从没起头化它。

大家将从部分卷入代码早先,它将容纳大家的满贯框架。那是数一数二的立刻函数(IIFE).  

1.定义javascript对象

图片 1

复制代码 代码如下:

window.dome = (function () {
 function Dome (els) {
 }
 var dome = {
  get: function (selector) {
  }
 };
 return dome;
}());

复制代码 代码如下:

 CommonJS, 是对通用的JavaScript情势的标准尝试,它包括有 AMD 定义 ,作者建议您在三回九转本文以前先读一下。在ECMAScript 6这几个下一版本JavaScript 标准中,有关于出口,输入以及模块的科班定义,那个将改为JavaScript语言的一片段,何况那不会太久。那也可能有关RequireJS我们想说的事物。

alert(null == document.getElementById('notExistElement')); 

你能够看来,大家的框架叫做dome,因为它是一个主干的DOM框架。没错,基本(lame有“瘸子”、“不完全”的意趣,dom加lame等于dome)的。

var obj={name:"tudouya","sex":"man"};  #八个本性能够加双引号也得以不加
var obj={"!":"hello world"};  #属性名包括特殊字符时必须加双引号

RequireJS?

当页面上空中楼阁id为"notExistElement"的DOM节点时,这段代码彰显为"true",因为我们品尝得到三个不设有的对象。

小编们早已有了一些东西。 首先,大家有了三个函数;它将成为构造框架的靶子实例的构造函数;那么些对象将会饱含大家选取和创办的要素。

2.定义JSON字符串

RequireJS是三个Javascript 文件和模块框架,能够从 Studio也得以通过Nuget获取。它援助浏览器和像node.js之类的服务器遭遇。使用RequireJS,你能够顺序读取仅要求有关信赖模块。

复制代码 代码如下:

接下来,大家有了四个dome对象,它就是我们的框架对象;你能够观望它聊起底作为函数的重回值再次来到给了函数调用者(译注:赋值给了window.dome)。这里还会有一个空的get函数,大家将用它从页面里挑选成分。那么,我们来填充代码吧。

复制代码 代码如下:

RequireJS所做的是,在你利用script标签加载你所定义的借助时,将那么些依赖通过head.appendChild()函数来加载他们。当重视加载现在,RequireJS总计出模块定义的相继,并按精确的相继举办调用。这表示你要求做的只是是运用多少个“根”来读取你须求的装有作用,然后剩下的事体只要求付出RequireJS就行了。为了科学的接纳那几个功能,你定义的具备模块都需求利用RequireJS的API,否者它不会像梦想的那么行事。

alert(typeof undefined); //output "undefined" 
alert(typeof null); //output "object" 

其次步: 获取成分

var jsonString={"name":"tudouya"};  #定义JSON时务必加双引号

RequireJS API 存在于RequireJS载入时创立的命名空间requirejs下。其利害攸关API首假诺底下八个函数:

首先行代码很轻便驾驭,undefined的项目为Undefined;第二行代码却令人疑忌,为何null的花色又是Object了啊?其实那是JavaScript最初完成的二个荒唐,后来被ECMAScript沿用下去。在明日我们得以解释为,null便是二个空中楼阁的指标的占位符,然而在骨子里编码时依然要留意这一表征。

dome的get函数唯有一个参数,但是它能够是比较多事物。借使它叁个string(字符串),咱们将假定它是贰个CSS(层叠样式表)选用器;但是我们也说不定获得一个DOM节点还是DOM节点列表。  

javascript对象调换为JSON

  1.     define– 该函数用户创制模块。每种模块具有三个独一的模块ID,它被用于RequireJS的运维时函数,define函数是三个大局函数,没有要求使用requirejs命名空间.
  2.     require– 该函数用于读取信赖。同样它是二个大局函数,没有供给选拔requirejs命名空间.
  3.     config– 该函数用于配置RequireJS.

复制代码 代码如下:

get: function (selector) {
 var els;
 if (typeof selector === "string") {
  els = document.querySelectorAll(selector);
 } else if (selector.length) {
  els = selector;
 } else {
  els = [selector];
 }
 return new Dome(els);
}

1.javascript目标转变为JSON

在后面,咱们将教你假若利用那一个函数,但第一让大家先领会下RequireJS的加载流程。

alert(null == undefined); //output "true" 

大家用document.querySelectorAll来回顾的选项成分:当然,这将范围大家的浏览器包容性,可是对于这种意况或然基本上能用的。若是selector不是string类型,大家将检查它的length属性。若是存在,咱们就了解大家赢得的是一个节点列表;不然,即是一个独自的要素,大家将它放到一个数组里。那是因为我们要在底下向Dome传递二个数组。你能够看出,大家再次回到了二个新的Dome对象。让大家回来Dome函数何况为它填充代码。

小编们能够动用javascript的停放函数将javascript对象转换为JSON,这几个函数就是JSON.stringify().
代码示例:

data-main属性

ECMAScript感到undefined是从null派生出来的,所以把它们定义为相等的。可是,假使在有的情形下,我们必就要有别于那多少个值,那应该怎么做呢?可以使用上边包车型大巴三种方法。

第三步: 创建Dome实例

复制代码 代码如下:

当你下载RequireJS之后,你要做的率先件业务就是领略RequireJS是怎么开端职业的。当RequireJS被加载的时候,它会选拔data-main属性去寻觅一个本子文件(它应当是与使用src加载RequireJS是一律的台本)。data-main需求给持有的台本文件设置一个根路线。依照那一个根路线,RequireJS将会去加载全部有关的模块。下边包车型地铁脚本是三个利用data-main例子:
 
<script src="scripts/require.js" data-main="scripts/app.js"></script>

复制代码 代码如下:

这是Dome函数:  

var obj={name:"tudouya",sex:"man"};
var jsonObj=JSON.stringify(obj);
console.log(jsonObj);
##出口结果为:{"name":"tudouya","sex":"man"}

别的一种艺术定义根路劲是采取安顿函数,前边大家将会看出。requireJs要是全体的信赖都以本子,那么当您声澳优个本子依赖的时候你无需动用.js后缀。

alert(null === undefined); //output "false" 
alert(typeof null == typeof undefined); //output "false" 

function Dome (els) {
 for(var i = 0; i < els.length; i   ) {
  this[i] = els[i];
 }
 this.length = els.length;
}

在将javascript对象调换为JSON的时候,有一点点是亟需大家注意的:
如若指标中隐含有值为函数和日期的习性,JSON会忽略值为函数的习性,并将值为日期的特性调换为字符串。
代码示例:

安插函数

动用typeof方法在前面已经讲过,null与undefined的品种是不均等的,所以输出"false"。而===代表相对等于,在此地null === undefined输出false。

    笔者刚强提议你去浓厚钻研一些你喜欢的框架

复制代码 代码如下:

一经你想改换RequireJS的私下认可配置来选择本人的配置,你能够运用require.configh函数。config函数须要传入一个可选参数对象,那个可选参数对象包罗了重重的布署参数选项。上边是部分你能够接纳的布局:

您大概感兴趣的篇章:

  • Javascript中判别多少个值是或不是为undefined的形式详解
  • JS中call/apply、arguments、undefined/null方法详解
  • 详解javascript中原本数据类型Null和Undefined
  • javascript中undefined与null的区别
  • 缓和JSON数据因为null导致数据加载退步的章程
  • js推断输入字符串是或不是为空、空格、null的不二秘籍总括
  • iOS中json剖析出现的null,nil,NSNumber的解决办法
  • js的Boolean对象早先值示例
  • Javascript Boolean、Nnumber、String 强制类型调换的界别详细介绍
  • JavaScript基本项目值-Undefined、Null、Boolean

那极度简单:大家只是遍历了els的保有因素,何况把它们存款和储蓄在多个以数字为索引的新对象里。然后我们增多了一个length属性。

var obj={
 name:"tudouya",
 birthday:new Date(),
 action:function (){
  document.write("walk");
 }
};
var jsonObj=JSON.stringify(obj);
console.log(jsonObj);
##输出结果为:{"name":"tudouya","birthday":"贰零壹陆-08-12T10:05:00.497Z"}

  •     baseUrl——用于加载模块的根路线。
  •     paths——用于映射不设有根路线上边包车型地铁模块路线。
  •     shims——配置在剧本/模块外面并未动用RequireJS的函数依赖並且伊始化函数。即使underscore并不曾采取  RequireJS定义,不过你依然想透过RequireJS来利用它,那么您就要求在配置中把它定义为七个shim。
  •     deps——加载信赖关周密组

而是那有何样含义呢?为啥不直接重回成分?因为:大家将成分包装成靶子是因为我们想要可以为对象增多方法;那些点子能够让我们遍历这么些因素。实际上这就是JQuery的消除方案的浓缩版。

javascript中解析JSON

上面是使用布署的二个例子:  

大家的Dome对象已经回到了,今后让大家来为它的原型(prototype)增添一些方法。笔者会直接把那四个方法写在Dome函数上面。

在老版本的JS中,大家常见都选取eval()函数来解析JSON,不过ECMAScript5给我们提供了多少个深入分析JSON的新函数JSON.parse()。

require.config({
  //By default load any module IDs from scripts/app
  baseUrl: 'scripts/app',
  //except, if the module ID starts with "lib"
   paths: {
    lib: '../lib'
  },
  // load backbone as a shim
  shim: {
    'backbone': {
      //The underscore script dependency should be loaded before loading backbone.js
      deps: ['underscore'],
      // use the global 'Backbone' as the module name.
      exports: 'Backbone'
    }
  }
});

第四步:加多多少个实用工具

本条函数的选取形式相比轻松,我们可以自行尝试。当对有个别JSON字符串应用该函数未来,该JSON就被调换为javascript的指标,也正是说当用typeof运算符查看该函数的品类时,重临的值是Object。
一模二样有几许亟待留心的是,该函数是ECMAScript5事后才支撑的,若是是旧版本的浏览器那么也许不扶助该函数。消除的法子是加载三个落实该函数的js文件,即json2.js。假诺利用的是JQuery框架,jQuery.parseJSON(),该函数调用了JSON.parse()方法。
有关利用eval()方法分析JSON,这一个等深入学习后会记录下来。

在这些例子中把根路线设置为了scripts/app,由lib起初的各种模块都被布署在scripts/lib文件夹上边,backbone 加载的是二个shim重视。

要加多的首先批功能是些轻便的工具函数。由于Dome对象大概带有至少二个DOM成分,那么大家要求在大概每贰个措施里面都遍历全数因素;那样,那么些工具才会给力。

二个很要紧的概念

用RequireJS定义模块

我们从叁个map函数初始:     

用作二个前端新手,日常听到别人说“JSON对象”,但是事实上并未“JSON对象”这几个定义,JSON真正的表现格局是字符串。

模块是进展了里面贯彻封装、暴光接口和成立界定范围的靶子。ReuqireJS提供了define函数用于定义模块。按章惯例每一个Javascript文件只应该定义一个模块。define函数接受三个重视数组和一个涵盖模块定义的函数。常常模块定义函数会把前边的数组中的正视模块按梯次做为参数接收。举个例子,上面是三个简短的模块定义:  

Dome.prototype.map = function (callback) {
 var results = [], i = 0;
 for ( ; i < this.length; i  ) {
  results.push(callback.call(this, this[i], i));
 }
 return results;
};

你恐怕感兴趣的稿子:

  • JavaScript得到内定对象大小的不二等秘书诀
  • JavaScript对象属性检查、扩大、删除、访谈操作实例
  • javascript中JSON对象与JSON字符串相互转变实例
  • javascript落到实处类似java中getClass()获得指标类名的艺术
  • JavaScript数组对象赋值用法实例
  • JavaScript的面向对象编制程序基础
  • javascript中html字符串转化为jquery dom对象的主意
  • JavaScript对象学习小结
  • 浅谈Javascript中Object与Function对象
  • 详解JavaScript对Date对象的操作难题(生成多个尾数7天的数组)
  • 深深学习JavaScript对象

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:属性名必须加双引号,Null类型也只有一个值

关键词: 小鱼儿玄机30码