分享来自 quora 的一篇文章 https://www.quora.com/How-difficult-is-it-to-create-a-JavaScript-framework

https://code.tutsplus.com/tutorials/build-your-first-javascript-library--net-26796

This mostly depends on your JavaScript skills, but as you said, that you are using a lot of JavaScript it won't be that difficult...

There are two different words:
Library: Is a script, that supports you by completing some task(s)
Framework: Takes over everything and helps you to build the application from the first line of code till it is finished and creates lifecycles etc.

Creating the JavaScript Framework itself isn't that a difficult task. A much more difficult task though, is the design, you have to do before you actually start building the Framework.

Let's think, what would  the perfect JavaScript Framework be like?

  • Easy to use
  • Includes a router using the new HTML5 pushState function
  • Has it's own easy-to-use template engine, that also can load templates from the server
  • Loads models easily automated from the server when requested
  • Makes it easy to modularize the Controllers, that are used
  • Has it's own Message Bus System to easily trigger events (as well Events of the Framework as Events triggered by the Framework user)
  • Gives easy access to Cookie Setting and Server Communication (including Sockets)
  • Can save models on the client side with HTML5 database and filesystem features
  • Caches some server requests if told so (or even automated with some intelligent algorithm, to check whether a good idea to cache or not)
  • Makes it as easy as possible to create One-Page-Apps
  • Easy to use together with the PHP Laravel Framework or the Node.js Express Framework (sorry Ruby, i don't like you :) )
  • Easily extendable
  • Has a Life cycle, so that you are able to complete tasks before/after the Page Rendering/Model Loading/Unload etc.
  • Open Source
  • Compatible with most important JS libraries
  • Well documented (the most important thing at all and yes i know writing documentations is quite boring :) )

There are two approaches for creating any kind of apps:
The Model View Controller Approach(MVC):
(Source: http://www.wikipedia.de)
This Approach consist of Model Objects, that stores all the data of the Application, Views that define how the data should be viewed and Controllers, which - yes you guess was right - Controllers the Views and Models, and define, when which function has to be executed.
An example for this type would be backbone.js (Although Backbone.js defines itself much more as a library than a framework)
And there is the Model View ViewModel Approach (MVVM):

(Source: http://www.wikipedia.de)
Here you have Data Bindings: For example you can bind a variable to a special <p> tag. Every time the Variable get's updated the paragraph will be updated as well.

I personally prefer the MVC approach, as it makes it a lot easier to create One-Page-Apps, as you don't simply bind your variables to one element in the HTML-Source, which makes it possible to have different UX types in your main content a lot easier.

Now here I will give you some tips for the design&building process:

  • Only use one global namespace for your whole Framework, this also makes it easier to be compatible with other libraries
  • Draw up all your objects on a paper (yes real paper it still exists and is a pretty good option for this), so you always have an overview about what classes you have, which ones still are missing etc.
  • Pack the whole thing in a require.js module
  • Use other libraries as a base for your framework (If it is about being productive and not doing it for the craic you don't have to reinvent the wheel)
  • Always have a list of bugs and new features next to you, and mix the different things you still have to do (don't just fix bugs for one day, that could be too boring and will make you loose the enthusiasm)
  • NEVER GIVE UP!

There are a lot of frameworks out there, but if you have the time to build your own you should do it - you will learn a lot if you do so.
And the more fun you have building it the less hard the work it is going to be for you.
Alright I hope I was able to help you out, if you have further questions don't bother to ask :)

How difficult is it to create a JavaScript framework?的更多相关文章

  1. best javascript framework list -- 最好的js框架

    Javascript Framework List | Top Javascript Framework List | Best Javascript Framework List http://co ...

  2. Create an Embedded Framework in Xcode with Swift

    转自:http://zappdesigntemplates.com/create-an-embedded-framework-in-xcode-with-swift/ Post Series: Cre ...

  3. Object.create 函数 (JavaScript)

    创建一个具有指定原型且可选择性地包含指定属性的对象. 语法 Object.create(prototype, descriptors) 参数 prototype 必需.  要用作原型的对象.  可以为 ...

  4. Javascript Framework Scenario

    Mobile----- zepto, jQuery Scroll------ iscrollhttp://cubiq.org/iscroll-4 jo.js widget----- jquery pl ...

  5. KISSY - A Powerful JavaScript Framework

    KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的工具集合如 DOM.Event.Ajax.Anim 等,它还提供了经典的面向对象.动态加载.性能优化解决方案 ...

  6. javascript framework vue.js

    vue.js 参考: http://cn.vuejs.org/guide/installation.html   不管使用何框架,首先都是要创建它的实例: var vue = new Vue({//参 ...

  7. javascript framework js常用框架

    js常用框架 一.node.js   二.angularjs.js   三.react.js   四.webpack.js   五.flux.js   六.vue.js   七.bootstrap   ...

  8. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  9. 12款简化 Web 开发的 JavaScript 开发框架

    前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...

随机推荐

  1. Qt之打包发布(NSIS详解)

    来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101fer8.html 发布方式    Qt发布的时候,通常使用两种方式:   (1)静态编译  (2)动态编译 ...

  2. 【素数】 poj 2739 一个数能有多少种连续素数相加方案

    简单题 素数打表   根据数据量  用n2算法遍历  开一个save[k]素数存前k个素数和即可. #include <iostream> #include <cstdio> ...

  3. 【iOS 】UIView 中有一个autoresizingMask的属性

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum  ...

  4. 火狐解决OCSP回应包含过期信息的问题

    连接 addons.mozilla.org 时发生错误. OCSP 回应包含过期信息. (错误码: sec_error_ocsp_old_response)hosts文件添加 vi /etc/host ...

  5. android 中ImageButton按下改变背景图片的效果

    最近在做一个app的登陆界面,才发现原来认为很简单的UI效果,其实背后却蕴含的知识很多,积累一个算一个吧. 实现方法有两种:一种是添加代码,一种是配置xml文件. 方法一:代码添加 ImageButt ...

  6. protobuf与json互相转换

    Java http://code.google.com/p/protobuf-java-format/ maven <dependency> <groupId>com.goog ...

  7. JavaScript返回上一页并自动刷新

    返回并刷新 <script>alert("恭喜您,操作成功!"); window.location.href=document.referrer; </scrip ...

  8. Vold工作流程分析学习

    一 Vold工作机制分析 vold进程:管理和控制Android平台外部存储设备,包括SD插拨.挂载.卸载.格式化等: vold进程接收来自内核的外部设备消息. Vold框架图如下: Vold接收来自 ...

  9. 关于tomcat启动没有进行编译或者编译报错的问题

    关于tomcat 的问题 如果项目没有编译 解决方案:1: 把项目刷新一下 然后Clean一下,之后等待右下角编译完成100%2: 有可能tomcat conf 里的配置文件的错误 进入查看下3: 如 ...

  10. AngularJS Front-End App with Cloud Storage Tutorial Part 1: Building a Minimal App in Seven Steps

    原文 : http://www.codeproject.com/Articles/1027709/AngularJS-Front-End-App-with-Cloud-Storage-Tutoria ...