在编写一个js库之前需要准备许多基础知识。

本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下:

1、如何整理代码结构,使模块与模块分开又不至于出现调用困难的现象?

  首先讲一下上面两个参考的库使用的方法,visjs是一个相对较小的开源库,目前已经更新了很多个版本,但是最具参考意义的应该是0.0.9版,因为之后的版本增删改太多,命名方式也改的很奇葩,基本看不懂,读者可以从github上下载历史版本。他的代码整理工具用的是nodejs,通过一个生成方法,将多个文件拼装到一起并做一些后期处理。我认为这是最简单但是略显简陋的一种方式,因为所有的外层对象都互相可见,随着代码量的增大,变量重名的可能性增大,出错查不到那就会很蛋疼。另外一个库echarts使用的也是nodejs,但在代码管理上还增加了一套AMD规则库,esl.js,可以对代码进行按需加载,且不容易出现变量重名的现象,而且由于模块被define函数包裹,coder可以控制哪些模块函数对外可见。

  综上,本文编写的类库也将使用esl作为模块加载器,并在需要的时候配合使用nodejs。当然如果你的库是要发布的,那么请在发布之前做好模块的拼装,不要出现过多的HTTP请求,导致页面加载缓慢。具体的使用方法:

 模块定义:

define(function () {
function Math(msg) {//定义了一个函数模块
this.Message = msg;
} Math.prototype.Add = function (a, b) {//给函数模块的原型添加了Add方法
return a + b;
}; return Math;//输出模块,只有输出模块才对外可见,无论define内部有多少个函数
});

模块使用:

var Math = require(["YouPath/jsFileName"]);//在另一个文件中向esl请求该模块

alter(Math.Add(1,2));//

2、js库开发使用哪个IDE较好

  这个得看个人习惯,以及开发的库的内容,我这次要开发的是一个动态窗口生成+动态数据加载的库,经过一段时间的搜索和磨合,最终我选择了使用WebStrom9.0+chrome这套组合。(话说webStorm是要收费的,不过你懂的,呵呵)为什么呢?主要原因是webStorm的页面漂亮,注释功能和代码整理功能强大,适合我。话说使用一套IDE最好能知道一些快捷键,这会是编码更加高效,毕竟脑子走的太快了,手根本跟不上。

js库编写的环境和准备工作的更多相关文章

  1. 【转载】写一个js库需要怎样的知识储备和技术程度?

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  2. js库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

  3. 如何写JS库,JS库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

  4. 循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

    之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套 ...

  5. typescript+webpack构建一个js库

    依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...

  6. 仿照jquery封装一个自己的js库(二)

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  7. javascript学习(一)构建自己的JS库

    库是一个饱受争议的热门话题.一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的:另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖,会助长懒惰的风气从而导致开发者素质下降 库是一个饱 ...

  8. 主流JS库一览

    主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报   ...

  9. 绘制3D的js库

      有哪些值得推荐的绘制3D的js库?   4 个回答 默认排序​ 草皮子 HTML5/GAME 4 人赞同了该回答 只用过three.js,所以推荐这个.不清楚你打算用来做什么,总的来说,得看你的运 ...

随机推荐

  1. "float: left;" div 不换行显示

    <div id='p'> <div id='c1'> </div> <div id='c2'> </div> <div id='c3' ...

  2. 请阐述调用Activity有哪几种方法,并写出相关的Java代码

    请阐述调用Activity有哪几种方法,并写出相关的Java代码. 答案:可以采用两种方式调用Activity:显示调用和隐式调用.显示调用直接指定了Activity,代码如下: Intent int ...

  3. Mysql中存储方式的区别

    MySQL的表属性有:MyISAM 和 InnoDB 2种存储方式: MyISAM 不支持事务回滚 InnoDB 支持事务回滚 可以用 show create table tablename 命令看表 ...

  4. [转] JS运算符 &&和|| 及其优先级

    第一.&& (逻辑与)运算,看一个简单的例子: var a = 1 && 2 && 3; var b = 0 && 1 &&am ...

  5. jquery中attr、prop、data

    在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元 ...

  6. Android Framework------之ActivityManagerService与Activity之间的通信

    研究Android系统的童鞋,想必都已经了解一个Activity的启动过程了.而且在网上,关于Activity的启动的文章非常多,很容易就能找到的.这篇文章的重点放在ActivityManagerSe ...

  7. 转:解决方案your project contains error s please fix them before running your application

    文章来自于:http://www.mythroad.net/2013/08/05/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88your-project-contains-e ...

  8. PHP 中的超全局变量

    (1)$_GET[].一个包含所有PHP 从客户端浏览器接收的GET变量的数组. (2)$_POST[].一个包含所有PHP 从客户端浏览器接收的POST变量的数组. (3)$_COOKIE[].一个 ...

  9. Web前端开发

    由于互联网的各种兴起,网页开发似乎也火了,催生了github上各种js的轮子,各种重复,各种框架和库,什么Jquery,bootstrap等等.面对这么多框架和库我们在工程上该如何取舍(trade-o ...

  10. rsyslog 读取单个文件测试

    rsyslog 测试(rsyslog 必须yum 安装uat-web02:/root# rpm -qa | grep rsyslog rsyslog-8.21.0-1.el6.x86_64) //读取 ...