一前言

　js 是一门神奇的语言。我们在使用js过程中，难免会使用到自己封装的小接口，即使我们已经有了完备的jquery框架。因此我准备记录下来laz.js 框架的编写过程，也是记录自己的学习过程。

框架编写除了有好的抽象思维和恰当的使用环境之外，自然需要最简单的接口。而正如水里的鸭子，表面平静水下抓狂，一个接口越简单，那么实现这个接口的方法就越复杂。难免的，就要接触到关于传出参数的种种处理。

<body>
<ul>
<li>1</li>
<li>
<divclass="div_class"><divclass= "part0">1</div><divclass= "part1">2</div><divclass= "part2">3</div>
</div>
</li>
</ul>
</body><!--一段这样的html代码 使用laz.js 可以这样:-->
<body>
<ul>
<li>1</li>
<li>
<script>$$Div
({class:"div_class"}$$Div({class:"part0"}).setHTML('1'),$$Div({class:"part1"}).setHTML('2'),$$Div({class:"part2"}).setHTML('3')
).addToNext();</script>
</li>
</ul>
</body>

二进入正题

1.关于参数

javascript的每一个方法都支持不定参数：

functionparams_test()
{//arguments 就是该方法的参数列表var argList =arguments;
};

因为这种参数列表的存在，我们可以玩出很多花样。比如默认参数的实现:

functiondefault_param()
{//设置默认参数var param0  = arguments[0]==undefined?'default value':arguments[0];
}

*注意这里 arguments[0]==undefined?a:b 而不是 arguments[0]?a:b 是因为arguments[0] 也就是这个默认参数很有可能是一个boolean值并且是一个false 也有可能是一个number类型的0，这些都会导致程序选择默认值而不是传入参数，

我们之后在编写类型判断方法的时候也会提到。

或者不定参数的实现：

functionlot_params()
{for(var i inarguments){//遍历参数
}
}

2. 关于类型判断

　　我不认为js是一种无类型的语言，准确的说，对于类型，我们不用操心的就是它那自由的 var 变量声明和赋值操作吧。

　　Object 是 javascript语言的基本类型。我们可以说数组是Array 类型也可以说数组是Object 类型，同理String等等也是。因此在类型判断的时候，我会将是否是Object的类型判断放在最后，因为但部分情况下，判断一个参数是否是Object的，意义并不太大。

以下是因为懒，所以加入进laz.js中的类型判断方法。

//判断是否是一个数组类型 用法如 is_array(tmp)
functionis_array()
{return !arguments[0] ? false : arguments[0].constructor ==Array;
};//判断是否是一个字符串类型 用法如上。
functionis_string()
{return !arguments[0] ? false : arguments[0].constructor ==String;
};//判断是否是一个数字 int类型
functionis_number()
{return (arguments[0] != 0 && !arguments[0]) ? false : (arguments[0].constructor == Number || typeof arguments[0] == "number" || (!isNaN(arguments[0])));
};//判断是否是bool类型//正如上文提到的：和is_number一样 数字0 和bool 的false 都会被认为是'非'逻辑//因此在处理这种类型时 绝对不能简单的if(param)
functionis_bool()
{return (arguments[0] == undefined) ? false : arguments[0].constructor ==Boolean
};//是否是element 节点类型
functionis_element()
{　　return !arguments[0]?false:(arguments[0] instanceofElement);
};//是否是Text 文字文本类型
function is_text(){return !arguments[0]?false:(arguments[0] instanceofText);};//是否是一个function/ 方法
function is_function(){return !arguments[0] ? false : typeof arguments[0] == "function";};//这里用到统一的consturtor 用法如 is_type(param,MyClass)
function is_type(p1,p2){return !p1?:false:p1.constructor?p1.constructor == p2:false;};

* constructor 属性返回对创建此对象的数组函数的引用 -- W3School 我的理解就是一个类的构造函数。我们可以通过自己编写的is_type方法传入参数1 一个对象参数2 一个类/类型进行判断

3.关于HTML 节点的获得和创建

document 下element节点的获得有很多种方式因为在项目中如果只获得几个节点我会直接采用id的形式而多个节点的获取，我会直接通过下面要介绍的laz.js 创建html 节点同时保留相对应的js对象来直接获取，

再加上jquery的选择器已经相当出色的，所以在懒人框架laz.js中并没有加入节点选择器的相关方法。下面主要说说创建节点。

<divclass="div_class"><divclass= "part0">1</div><divclass= "part1">2</div><divclass= "part2">3</div>
</div><!--Html 编写大概是这样的>

使用xml形式来描述一个树状结构，可能再恰当不过了。在写laz.js之初，我就在想如何能让js写的像xml一样。= = 于是就有了下面的样式：

<script>

$$Div
({class:"div_class"}$$Div({class:"part0"}).setHTML('1'),$$Div({class:"part1"}).setHTML('2'),$$Div({class:"part2"}).setHTML('3')
).addToNext();

</script>

是的，使用懒人js laz.js 这样写就可以实现跟上面html一样的内容。$$Div 是一个方法名主要用来创建 document.createElement('div'),同时通过参数类型判断，给这个节点加入子节点和加入attributes。

当然也就是说你要想创建一个h3节点对象那么你必须要有$$H3方法。开始我是通过一个配置表使用eval 生成常用的一些html 节点方法但是奈何使用eval生成方法编辑器的代码提示不够只能，所以就把脏活一口气干完了。

function $$Ul(){ return _cook_node('ul',arguments)};function $$Text(){ return _cook_node('text',arguments)};function $$Li(){ return _cook_node('li',arguments)};function $$Div(){ return _cook_node('div',arguments)};function $$Input(){ return _cook_node('input',arguments)};function $$P(){ return _cook_node('p',arguments)};function $$H1(){ return _cook_node('h1',arguments)};function $$H2(){ return _cook_node('h2',arguments)};function $$H3(){ return _cook_node('h3',arguments)};function $$Button(){ return _cook_node('button',arguments)};function $$Iframe(){ return _cook_node('iframe',arguments)};function $$Form(){ return _cook_node('form',arguments)};function $$Label(){ return _cook_node('label',arguments)};function $$Thead(){ return _cook_node('thead',arguments)};function $$Tr(){ return _cook_node('tr',arguments)};function $$Td(){ return _cook_node('td',arguments)};function $$Th(){ return _cook_node('th',arguments)};function $$Tbody(){ return _cook_node('tbody',arguments)};function $$Thead(){ return _cook_node('thead',arguments)};function $$Nav(){ return _cook_node('bav',arguments)};function $$Table(){ return _cook_node('table',arguments)};function $$A(){ return _cook_node('a',arguments)};function $$Span(){ return _cook_node('span',arguments)};function $$Br(){ return _cook_node('br',arguments)};function $$I(){ return _cook_node('i',arguments)};function $$B(){ return _cook_node('b',arguments)};function $$Ol(){ return _cook_node('ol',arguments)};function $$Img(){ return _cook_node('img',arguments)};function $$Strong(){ return _cook_node('strong',arguments)};function $$H4(){ return _cook_node('h4',arguments)};function $$H3(){ return _cook_node('h3',arguments)};function $$Article(){ return _cook_node('Article',arguments)};

嗯。这是我目前能想到的最好的方法。如果有更好的建议，请留言给我~ 接下来放上_cook_node 方法：

function_cook_node(tag,arr){if (tag == "text"){//如果是纯文本if (is_string(arr)){return document.createTextNode(arr);}else{console.log("纯文本只支持字符串作为参数");}}else{var element =document.createElement(tag);for(var i inarr){var tmp =arr[i];//类型判断 如果是element 或者text 就把它 加入到节点中//如果不是， 那就作为系欸但的属性参数if (is_element(tmp) ||is_text(tmp)){element.appendChild(tmp);}else{for (var key intmp) {element.setAttribute(key, tmp[key]);};}}returnelement;}
};

我们通过以上的方法创建出节点对象，然后需要把这个对象添加到父节点中。

因为跟jq不同，我们放回的是一个纯element对象，因此可以直接调用element的方法。

最常用的可能是下面几种情况：

1. 添加到当前javascript标签的前面或者后面比如：

<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<!--我想创建一个li对象 并且放到这里-->
<li>4</li>
</ul>
</div>
</body>

在不通过id class tag name等情况下，将自己创建的element的对象插入到指定位置，该如何实现呢？

我的思路是这样的。首先我们知道html 和js 包括css 是至上而下依次加载的，我们就通过这一特性，开始展开。

<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<!--我想创建一个li对象 并且放到这里-->
<script>//我们此时获取的script标签 其实是html页面加载到这个位置的所有script//也可以理解为 这个列表的最后一个 就是当前的这个script标签varslist=document.getElementsByTagName('script');</script>
<li>4</li>
</ul>
</div>
</body>

注意这句：也可以理解为 这个列表的最后一个 就是当前的这个script标签。 因此我们可以获得当前的script标签的节点 也可以获得当前script标签的父节点。 那么我们创建的子节点就自然而然‘找到爸爸’了。下面是针对Element对应的做的扩展。

//在script节点之前插入
Element.prototype.addToNext = function()
{var slist = document.getElementsByTagName('script');if (slist.length > 0){var s = slist[slist.length - 1];var p =s.parentNode;p.appendChild(this);}return this;
};//在script节点之后插入
Element.prototype.addToLast = function()
{var slist = document.getElementsByTagName('script');if (slist.length > 0){var s = slist[slist.length - 1];var p =s.parentNode;p.insertBefore(this,s);}return this;
};

当然为了在编写js的时候可以实现‘不间断调用方法’ 比如a.to1().to2().... 我习惯在没有返回值的方法后面return this。也因此针对element 扩展了其他方法，大多都是为了可以连续调用接口而写的:

Element.prototype.addChildElement = function() {this.appendChild(arguments[0]);return this;
};Element.prototype.addTo= function() {arguments[0].appendChild(this);return this;
};
Element.prototype.addToBody= function() {this.appendTo(document.body);return this;
};
Element.prototype.setHTML= function()
{if (arguments[0] ==undefined)return this;var t = ""+arguments[0];if (t.indexOf('<') == -1 && t.indexOf('>') == -1){this.appendChild(document.createTextNode(t));}else{this.innerHTML = this.innerHTML +t;}return this;
};

2. 通过选择器获得某个节点的对象然后直接appendChild()

3. 插入到body

4 等等

4. 关于动画

碎觉了。。希望明天能坚持记录下来。。

转载于:https://www.cnblogs.com/bluen/p/5055878.html

js渐渐入门之懒人框架- laz.js相关推荐

MvvmLazy Android懒人框架
MvvmLazy Android懒人框架(kotlin版) 目前,android流行的MVC.MVP模式的开发框架很多,然而一款基于MVVM模式开发框架却很少. 个人搜寻了市面上大量的开源框架,秉承减 ...
Node.js开发入门（一）——安装Node.js及编辑器配置
Node.js是一个轻松构建快速,可扩展的网络应用平台建立在Chrome的JavaScript运行.Node.js使用事件驱动,非阻塞I/O模型,使得它重量轻,高效,完美的数据密集型实时应用程序运行在 ...
TensorFlow.js快速入门
by Pau Pavón 通过保罗·帕文(PauPavón) TensorFlow.js快速入门 (A quick introduction to TensorFlow.js) TensorFlow ...
HTML5 单页应用/框架 - View.js介绍
单页应用框架: View.js - http://view-js.com 什么是单页应用单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
Node.js开发入门—使用jade模板引擎
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本 ...
JS解密入门案例：python有道翻译JS解密
前言嗨喽!大家好呀,这里是魔王~ 课程亮点: 系统分析网页结构动态数据抓包演示 json数据解析 JS解密环境介绍: python 3.8 pycharm >>> 需要安装no ...
Node.js开发入门—语音合成示例
出于项目需要,搞了一个语音合成(TTS)的小示例,使用的是OKVoice. 我想在PC上测试,OKVoice的快速接入API可以实现我的目的,文档在这里:http://dev.okvoice.com/ ...

js渐渐入门之懒人框架- laz.js

一前言

二进入正题

1.关于参数

2. 关于类型判断

3.关于HTML 节点的获得和创建

4. 关于动画

js渐渐入门之懒人框架- laz.js相关推荐

最新文章

热门文章

js渐渐入门之懒人框架- laz.js

一 前言

二 进入正题

1.关于参数

2. 关于类型判断

3.关于HTML 节点的获得和创建

4. 关于动画

js渐渐入门之懒人框架- laz.js相关推荐

最新文章

热门文章

一前言

二进入正题