JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像什么js那年有的,谁写的这些,我们尊重创造者,不过用人家之前先提人家一次拿就是有点愚蠢了!

1.js的认识

只要是做web,大家即使不会用js,也会听说过js,js是松散性的语言,写法不用非常的严格,js包含三部分:dom,bom和ecmascript。dom和bom我们已经介绍过了,

dom:http://my.oschina.net/u/2352644/blog/489384

bom:http://my.oschina.net/u/2352644/blog/490636

es还没有介绍到,其实es才是最最重要的,我们用dom做实例的时候,创建变量,使用for循环,if判断这些都是es的语法,没有es,dom和bom就真的low掉了,项目开始的核心是语言,语言的核心就是函数,es可能需要过很久才会把博客补充上吧,近期要忙着换工作了,哈哈哈,换了工作肯定忙啊,新地方狠狠的表现,能推倒明年写了。不过除了es,对js相关的ui框架(jqui,bootstrap)和js类库(zepto.js)很快就介绍到了,还有es的核心函数也会写一篇内容。

2.js的类库

类这个概念,对于了解语言的都不陌生,java,php都有,不过js并没有真正的类,js的类是通过构造函数模拟产生的类,

什么是构造函数,去看我的博客,对js函数的介绍。

我们一直在开发中就在使用类库,jquery就是js的类库,并且几乎成为网站开始必不可少的了,类库的作用就是快速开发,js我们知道存在大量的兼容问题,我们学习dom就深深体会到了,各种能力检测的处理,类库为我们处理了这些问题,我们可以少些很多的代码,调用jq写好的接口就好了,对开发速度起了很重要作用,如果不让你用jq,你觉得开发项目什么感觉?

js的类库除了我们最熟悉的jq,其实还有很多的,像mootools,zepto,extjs等,每一款类库都有自己的优点和缺点,等我们都了解了,就会通过经验知道这个项目要用什么!

我说过了,js的类就是构造函数模拟产生的,js的构造函数代码

function Sha(name,sex){

this.name=name;

this.sex=sex;

},

我们比较普通函数,看见了this,我们现在知道模样就好了。

3.js的插件

类库插件傻傻分不清,我们项目中会常常用到大量基于jq的插件,如焦点图,日期,表单验证等,同样我们不基于jq,基于js也是可以开发的,我这里的插件介绍,主要指代基于jq的扩展了,一切为了常用开发了解吗,插件和类库作用差不多,都是为了快速的开发,避免每次都是开车造轮子。

4.js相关技术,mv*框架

我们已经介绍到一款很流行的mvc框架了,angular.js,我们的项目,会大量运用ajax去处理数据,让交互效果更好,每次都去写ajax,然后绑定在标签上,如果一个页面有大量的这种处理,我们会看到大篇幅的ajax的代码,非常的混乱!

为了让结构更清晰,代码更加的优雅整洁,一种绑入ajax数据和绑出数据到标签的js功能类库该出现了!

这种实现双绑定的技术就是js的mvc框架流行的有anjular.js还有backbone.js,

anjular.js的介绍在这里 http://my.oschina.net/u/2352644/blog/488777

5.js相关技术,ui组件

我们在开发中,可能缺少了设计的环节,但是还希望自己的项目比较美观,我们就会迫切的希望,出现一款html+css+js都写好的技术,这里面把大量经常使用的页面结构被定义好,我们拖入需要的html标签就出现很漂亮的样子。

ui组件出现了,不管是html的结构还是css的表现,还是常见的js交互效果(弹出框,验证,日期等),都只需要拖入指定的html和相应的处理属性就自动完成。

UI组件我们常用的有jqui,里面的拖拽功能非常的强大。多设备的bootstrap,解决了css3响应式难写问题,还有基于jq的

jq easy ui 主要用于后台页面,jq mobi 主要是手机页面,还有非常强大的extjs等。

6.服务端js

用js做开发后台的语言了,我们以前觉不可能,不过到今天他的发展已经在领域中举足轻重,nodejs这门单线程非阻塞的技术。

nodejs的安装http://my.oschina.net/u/2352644/blog/487488

nodejs采用js的语法,底层是c和c++,使用commmonjs规范,借助nodejs我们可以构建全部基于js语法的项目。

7.Hybrid App(混合应用)开发

了解之前,我们先认识与他相关的技术

webapp,这个这几年很是流行,我们做好的网站,通过转化工具,可以直接生成app这种软件应用,通过html+css和js技术开发,我们可以试一试,把自己的web站打包成web app应用,web性能非常的差,不该你做的你去做,哎

百度的转化webapp工具 http://siteapp.baidu.com/

nativeapp,本地app开发,也就是安卓就是用java,ios用ios的相关语言开发app了,与webapp相比,这个就比较麻烦了,一个app要用2中语言对2中平台去实现,不过这个也是最多的,除了跨平台,性能等其他有绝对的优势

混杂app,这种技术处在上面2种性能之中,跨平台不错,性能也还可以,这种开发技术把本地功能方法做了js的实现,也就是用js和本地语言做了映射。举个例子,在ios里面可能调用objapen是打开摄像头,我们做一个映射,js也封装一个objopen方法,调用这个js的方法,就只内部链接到ios语言方法的处理,间接打开ios的摄像头了。

对于混杂app,开发工具有hbuilder  phonegap salama等。

我们学习了js可以做页面行为层效果实现,可以ajax的异步处理数据,可以做服务端,可以开发app,当然还有很多!!!!!!

时间: 2024-10-12 04:42:10

JS杂谈系列-js的认识和js相关技术的了解的相关文章

Android的JS调用Java代码或使用了Javascript相关技术改如何混淆

http://www.androidren.com/index.php?qa=282&qa_1=android的js调用java代码或使用了javascript相关技术改如何混淆 Android 4.2开始 JS调用Java代码的时候必须加上@JavascriptInterface才能调用. 加上@JavascriptInterface之后就必须要考虑混淆时候的问题,如果混淆的时候把@JavascriptInterface搞丢了你的程序就无法调用了. 其实很简单,你只需要在混淆里面加上: -ke

JS杂谈系列-函数知识、函数模式

函数,函数,function,function,go go go! 创建函数: 第一种:function aa(){alert(1)}; 第二种:var aa=function(){alert(1)}; 其实对于使用没有太大的区别,第一个是用函数关键字创建,第二个是创建变量,然后赋值为一个函数. 同样我们还可以创建匿名函数 function(){alert(1)}; 函数的里面可以传递参数arg function aa(arg){alert(arg)}; function aa(arg1,arg

JS杂谈系列-常用开发工具介绍

一.分类比较齐全的js效果下载地址 1.jq插件库(各类jq插件,收费下载,大家可以想个办法免费的) 地址: http://www.jq22.com/ 2.开源中国插件分类 地址:http://www.oschina.net/project/tag/286/?lang=0&os=0&sort=time&p=3 3.jq-school的插件提供 地址: http://www.jq-school.com/Article.aspx 4.爱编程(分类很不错) 地址:http://www.w

js调试系列:断点和动态调试[基础篇]

js调试系列: 断点与动态调试[基础篇] js调试系列目录: - js调试系列: 初识控制台 js调试系列: 控制台命令行API js调试系列: 源码定位与调试[基础篇] js调试系列: 断点与动态调试[基础篇] js调试系列: 调试基础与技巧 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. 文本 function votePost(n,

js调试系列: 源码定位与调试[基础篇]

js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码其实非常简单,点放大镜选中那个推荐即可.这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置.其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看.我在控制台输入 voteP

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

自定义JS组件——系列1(TableGrid | Toolbar | LinkButton | Pager)

2月份第一次JS组件,写了几个:TableGrid, Toolbar, LinkButton, Pager,现在发出来. TableGrid可以包含Toolbar, Pager. Toolbar可以包含LinkButton.这样就构成了具有工具栏.分页栏的数据表格控件.也就是说,这4个组件可以独立使用,也可以结合使用.通篇只采用一种结构来编写,若能看懂编写规则,往后就可以按照这种模式自定义JS控件了. 1 var fjn=fjn?fjn:{}; 2 (function($,global){ 3

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数.