"Nodejs Development Crypto Currency" 27: Developing common HTML Components

Man's laziness is often the beginning of trouble. Most programmers want their work once and for all, once and for all, and used everywhere as a goal for everyone, and I am no exception. Originally wrote "Nodejs Development cryptocurrency" series of articles, because do not like to set up to write, so the directory is modified repeatedly, simply made a small tool gitbook-summary; When writing an introductory article, repeatedly searching for GitHub, simply integrate the search and mapping together, Got a development language search statistics tool (see "node. js makes your front-end development like a bullet fly" article example); reading the source code, manually organize the UML diagram is very hard, simply written js2uml tools (see "Easy to generate UML class diagram from JS file" article example). Here is another example, but not the auxiliary writing, but the simplification of web development, hope to use it later convenient point, but also one of the results of laziness. Then there will be, related to the book writing, but also related to the billion book project, is the visual deployment (described in the deployment section). Compared with these gadgets, billion books are counted as relatively large items. These tools improve my productivity, but it also adds a lot of work.

  The solution of a problem often breeds the birth of another problem, so as long as the writing and work constantly, the related development will not be broken. Fortunately, in addition to the individual circumstances under a little pressure, I always enjoy it. However, as a complete project with a little scale, clear development principles and a roadmap for development are still necessary. One of the important principles is to ensure that each function is as independent as possible and can be reused. This not only facilitates project management, but also facilitates code maintenance, so, a development, everywhere available, should be reflected in each link. This kind of thought makes me very fond of choosing that kind of strong, binding software product or development platform, such as Ruby on Rails, Ember and other development frameworks. Once learned, can let me "once and for all" according to a thinking logic to think and solve the problems encountered. But there are also smart small partners who prefer to have strong control of their own, and such a framework may not be suitable for him.   No matter what kind of framework products, if a framework, although strong, but will reject a lot of existing tools outside the door, will certainly not be accepted by everyone. Ember binding strong, belongs to my personal hobbies, the original version of the development package has a poor compatibility, but now do a great improvement, with a good expansion capability, this article combined with the Ember-cli-fullpagejs plug-in development process, Introduce the details of EMBER-CLI plug-in development and see how easy it is to package a third-party library www.ycyc66.cn/  into a small component.   Introduction   (1) Source code   (2) Use   install using the command  $ npm install Ember-cli-fullpagejs--save-dev11 then, as long as in the template file, use the label { www.sbbtianli.cn/{#full-page}}{{/full-page}} instead of <div id= "Fullpage" ></div>, others are the same as using Fullpage.js.   Required HTML structure  {{#full-page}}    <div    class= "section" >some section</div>     &LT;DIV class= "section" >some section</div>    <div class= ' section ' >some section</div>    <div class= "section" >some www.fanku1.com  sectwww.mrencai888.cn   ion </div>{{/full-page}}12345671234567 to create sliders in an area, each slider defaults to the element containing the slide class:  <div class= "section" >     <div class= "Slide" > Slide 1 </div>    <div class= "Slide" > slide 2 </div>&n Bsp   <div class= "Slide" > Slide 3 </div>    <div class= "Slide" > Slide 4 </div></div >1234www.feishenbo.cnhttp://www.sbsbo.ccwww.sbyigouyule.cn56123456 options   can add options directly to the tag, such as:  {{#full-page Autoscrolling= ' true ' navigation= ' true ' anchors= ' [' firstpage ', ' secondpage '] '}} {{/full-page}}123123 Note: Option values must use single quotes instead of double quotes. All options are as follows, please refer to:  concept interpretation   (1) Agreement over configuration (Convention over config)   We have a brief list of Ember's points of attention in the Panorama scan of static website development. In particular, the agreement is better than the problem of configuration, which is the cause of many small partners to start difficulties. Some people are very strange, this is the people have advocated, it is good, how has become a problem? Yes, if you are accustomed to (in fact, remember) the agreement, the development difficulty will be greatly reduced, the efficiency is greatly improved, because the framework itself has helped you do all this. On the contrary, not remembering so many engagements, or you simply do not know that there are such a convention, it will bring you a lot of trouble. This is the moment when we are learning a lot of so-called framework knowledge and shouldSpecial attention. This kind of framework, the reason why learning cost is higher, on the one hand because of too many rules, on the other hand, the rules and our inherent habits conflict too much.   As a simple example, when we use third-party libraries, such as "fullpage.js" in the example below, we usually use tags to introduce them, and then follow the logic of the library. But as a constrained front-end framework, similar to the work, you have to think about it first, whether it has its own rules. In fact, under the Ember framework, the correct way to use it is to first introduce the file in the Index.js file, and then use the component's life cycle (see Reference), which is handled by the appropriate hook method, which is the Didinsertelement () method. If the original practice continues, the best case is not to get any results, and the worst is to produce strange results.   This makes it very difficult for us to use our existing third-party libraries, which are a lot of good tools that are already available and are so lame to use. Many small partners therefore, directly abandoned the ember, to the other less constrained framework to go. Here, we do not measure the merits of the framework, or directly consider how to solve this small problem. This small example can help us to transform the existing library directly into the Ember available plug-in, allowing it to integrate into the Ember system, reducing the difficulty of binding. Because the plug-in development process, and the actual development has a lot of similarities, just a few more simple configuration process, so we put the specific development process into the plug-in development together with the introduction. Of course, this is not enough to introduce all aspects of Ember, at least to address what I think is most troubling us, to reduce the difficulty of ember development.   (2) components in the browser World  ember components (Component) is a very important concept, especially after the v2.0.0 version, all replace the view (view), can be understood as ember everything is a component. Everything is a component concept that greatly simplifies the problem logic, maintains maximum compatibility with the browser, and can even be compatible with future browser standards. I personally feel that the Ember team has finally come out of the shackles of Ruby on Rails, and began to return to rationality, really facing the front-end. After all, the focus of all the functions on a browser page (single page application), but also hard to pull the MVC, really let the developers Tangled.   We can think of the most primitive browser buttons, links, drop-down boxes and other tag elements, as Ember the most basic components to understand. With Ember, you can process an article, a list, a picture display area into a component, so that there are at least three benefits: first, the development of MVC requirements, you can do the data and template separation, like the development of a separate page, clear thinking, fast and efficient;On the use, the component itself is no different from the basic components of the browser, very simple and straightforward, can be freely combined nesting; third, a development, anywhere can be used, or even compatible with future browsers.   Look at official documents and see the concepts of controllers and models, but they are alternative components that can be understood as extensions of components. In this way, the use of Ember to simplify the development of browser components, and the use of ember development of components are also more powerful, the use of common browser components are not separate, so that both development and use are extremely simplified. If we figure out today's example, basically, we can put any repetitive functions into a variety of components, and then packaged into plug-ins, when needed, directly installed on these plug-ins, can be used everywhere, and then achieved once and for all.   Development process   Now, let's take a look at Ember-cli-fullpagejs's complete development process.   Plugin Basics   (1) Scenario  ember CLI Plugin API, currently supports the following scenario:  Add a preprocessor to the default registry via the Ember-cli-build.js operation Emberapp (main application) provides a custom application tree with application consolidation provides customized specialized (service) middleware to add custom templates to generate relevant project files for the main program (2) command-line Options The  ember CLI has a addon command with the following options:  ember addon <addon-name> <options...>  creates a new folder an D runs Ember Init in it. --dry-run (default:false)  --verbose (default:false)  --blueprint (Default:add ON)  --SKIP-NPM (default:false)  --skip-bower (default:false)  --skip-git (Default:false) 1234567812345678 Note: A plugin will not be created in an existing application   (3) Create a plugin   Create a basic plugin:  ember addon <addon-name>  Run the command and you willProduce the following files:  $ ember addon fullpagejsversion x.y.zzinstalling  Create .bowerrc  Create .editorconfig  Create tests/dummy/.jshintrc  ...  Create index.js installing packages for tooling via npminstalled Browser packages via bower.12345678910111234567891011 plug-in engineering structure   through the above command, automatically generate plug-in engineering catalogs and related files, plug-in engineering follows these structural conventions:  app/- Merge into the application's namespace (meaning that it can be used directly in the application using the plugin). addon/-the namespace portion of the plugin. Blueprints/-Contains all the blueprint template files for the plugin, each stored in a separate folder. public/-application uses static files, css,images,fonts etc., path prefix/your-addon/*test-support/-merge to Application tests/tests/-Test folder, including a "dummy" Test the application and acceptance Test Assistant. vendor/-third party proprietary files, such as stylesheets, fonts, external packages, etc. Ember-cli-build.js-Compile settings. Package.json-node.js meta data, dependent libraries, etc. Index.js-node.js entry (Follow NPM conventions). (1) package.json  plug-in Package.json file, like this: {  "name": "Ember-cli-fullpagejs",//Plugin name   "Version": " 0.0.1 ",//Plugin version  " directories ": {   " Doc ":" Doc ",   " test ":" Test " }, " scripts ": {& nbsp   "Start": "Ember Server",    "BuiLD ":" Ember Build ",   " test ":" Ember Test " }, " repository ":" https://github.com/repo-user/ My-addon ", " engines ": {   " node ":" >= 0.10.0 " }, " keywords ": [   " Ember-addon "    //Add more keywords for easy classification plugins  ],  "Ember-addon": {   //Plugin Configuration Properties     "Configpath": "tests/d Ummy/config " }, " author ":" ",//Your name  " license ":" MIT ",//protocol  " Devdependencies ": {   " b Ody-parser ": ^1.2.0",    ...//Add a dedicated dependency library! }} 1234567891011121314151617181920212223242526272829303112345678910111213141516171819202122232425262728293031Ember The CLI will check whether a plug-in exists by detecting the Package.json file for each application's dependent package, see if there is a ember-addon keyword in the keywords section. We can also add some extra metadata to better categorize the plugin:   "keywords": [    "Ember-addon",    "Fullpagejs",    "Fullpage.js"  ],1234512345 (2) Plug-in entry   the so-called plug-in portal, which is the first file to be executed by the plug-in, each programming language is required. The plugin will take advantage of NPM conventions and look for a index.js file as an entry point unless another entry point is specified through the "main" attribute of the Package.json file. Recommended UseIndex.js as the plug-in entry point. The   generated index.js file is a simple JS object (POJO) that can be customized and extended, like this:  //index.jsmodule.exports = {  Name: ' Ember-cli-fullpagejs ',  included:function (app, Parentaddon) {    var target = (Parentaddon | | app);   //Here you can modify the main app (APP)/parent plugin (Parentaddon). For example, if you want to include    //A custom actuator, you can add it to the target registrar, such as:   //    Target.registry.add (' JS '), Mypreprocessor); }};1234567891012345678910 in the build process, the included Hook method is executed, directly manipulating the main application or its parent plug-in, improving the processing power of the plugin. This object extends the Addon class, so any hook method that exists in the Addon class can be overridden. Please refer to "Introduction to several important hooks in Ember"   plug-in development design   (1) Add plug-in dependencies   here, we will package the third-party package Fullpagejs as a plug-in dependency package, packaged into the plug-in. The installation client relies on the ' Bower ':  bower install--save-dev fullpagejs11 the above command to automatically add Bower components to the development dependency  //bower.js{  "name": " Ember-cli-fullpagejs ", " dependencies ": {    ...   " fullpage.js ":" ^2.7.8 " }} 1234567812345678 (2) custom components   We want to customize fullpage.js as a common browser component, and hopefully you can use it this way:  {{#full-page autoscrolling= ' true ' Navigation= ' true '}} {{/full-paMr. Ge}}123123 as a component, you can use the following command:  $ ember Generate component Full-page11 the component name has at least one "-" line, which is the Convention, remember. This command automatically generates the necessary files, as well as the test files, as long as you add logic code inside. In order to allow applications to use plug-in components without manually importing statements, the components should be placed under the application's namespace, the App/components directory, and the commands above are automatically generated for you, as follows:  //app/components/ Full-page.js export {default} from ' Ember-cli-fullpagejs/components/full-page '; 123123 this line of code imports the component from the plug-in path and then exports it to the application. The code for the actual component is placed in the Addon/components/full-page.js:  import Ember from ' Ember ';  export default Ember.Component.extend ({  tagName: ' div ', ///The options here are consistent with the Fullpage.js package, please refer to: https://github.com/alvarotrigo/fullPage.js#options   Options: {   //navigation    menu: ' #menu ',    lockanchors:false,    ... & nbsp },   Didrender () {    Ember.run.scheduleOnce (' AfterRender ', this, function () {      var options = Clone (this, this.options);      ember.$ ("#fullpage"). Fullpage (Options);   }); nbsp },   willdestroyelement () {    EMber.$.fn.fullpage.destroy (' All '); }}); 12345678910111213141516171819202122231234567891011121314151617181920212223Ember components render after the label, default to <div></ Div&gt, so if you need to change to a different label, such as span, you can define the TabName property to override. Didrender () and willdestroyelement () are two hook methods that are part of the lifecycle of a component that executes after the component's static content is fully rendered and plays the role of the Ready () method, so you can ensure that the Ember . ("#fullpage") is executed when the element is present, and the latter, when the element is destroyed (usually when the page is refreshed), because Ember is a single page application, no matter how you jump or refresh, the global variable ember.$ always remains, so you must clean it manually.   The question here is, why use Didrender () instead of the didinsertelement () Hook method? Look at the official hooks. The documentation is available for the initial rendering and re-rendering (refresh) of the page, which is used only during initial rendering. That is, the former can be guaranteed to refresh the page, but also to ensure that the effect, the latter can only be loaded when the page has an effect, which is also a good deal.   It is also important to explain that this component is also handled in accordance with the principle of "constraint is better than configuration". For example: The default is {{#full-page}} tags surrounded by the code, will be wrapped in <div id= "Fullpage" ></div>, which avoids the user forgot to set the ID, and caused an error. In addition, the options of the processing, the default options are placed under the properties options, but we can be in use to rewrite, such as {{#full-page autoscrolling= ' true ' navigation= ' true '}, Here is a default handling of the Ember component, that is, the option that is written in the Component tab, which automatically becomes the property of the Component object, so autoscrolling and navigation naturally become one of the properties of the full-page component, and then I customize the Clone method, Rewrite them to the options. Looking at the code is simple, but it implies a lot of knowledge, and the document is not provided directly.   Loading third-party libraries &NBSP; (1) The default Blueprint template   The so-called blueprint template, is how we install the plug-in, the JS or CSS files should be loaded into the main program, which is like a third-party library download. For example, we should download the Fullpage.js to the main program when we install the plugin. To create a blueprint template, add a file Blueprints/ember-cli-fullpagejs/index.js, which is the naming convention for the standard Ember Blueprint template.  module.exports = {  Description: ' Ember-cli-fullpagejs ',   normalizeentityname:function () {    //allows us to run ember-g Ember-cli-fullpagejs and not blow up   //Because Ember CLI normally expects the format   //ember generate <entitiyName> <blueprint> },   afterinstal L:function (options) {    return this.addbowerpackagetoproject (' fullpage.js ', ' ^2.7.8 '); }}; 1234567891011121312345678910111213 (2) Load library file   Then we can import it into the main application, You need to import these files in the Index.js file using the included hooks in the correct order, as follows:  //index.jsmodule.exports = {  name: ' Ember-cli-fullpagejs ',    Included:function included (app) {    this._super.included (APP);    // Workaround for Https://github.com/ember-cli/ember-cli/issues/3718    if (typeof app.import!== ' function ' && app.app) {      app = app.app;  &N Bsp }     var fullpagejspath = Path.join (app.bowerdirectory, ' fullpage.js/dist ');     App.import (Path.join (Fullpagejspath, ' jquery.fullpage.min.css '));    App.import (Path.join ( Fullpagejspath, ' Jquery.fullpage.min.css.map '), {      DestDir: ' Assets '    } ';   & nbsp App.import (Path.join (Fullpagejspath, ' jquery.fullpage.min.js '));    App.import (Path.join (Fullpagejspath , ' Jquery.fullpage.min.js.map '), {      DestDir: ' Assets '    } '; }}; 1234567891011121314151617181920212223242512345678910111213141516171819202122232425 This step is equivalent to our usual use of <script> </script> tags, but the advantage here is that you can compress the package into the main program directly.   (3) Import static files   pictures, fonts and other static files, usually placed in the/public folder, such as a picture, can be saved in the Your-addon/public/images/foo.png path, when used, so call:  .foo {background:url ("/your-addon/images/foo.png");} 11 (4) AdvancedCustom   Generally, if you go beyond the built-in or want/need more advanced controls, here are the available hooks (keys) for some plug-in objects in Index.js. All hooks want a function as its value (the hook should be a function).  includedcommands:function () {},blueprintspath://return path as StringpreBuild:postBuild:treeFor:contentFor: Included:postprocesstree:servermiddleware:linttree:1234567891012345678910 For example, here's the Contentfor hook method, You can insert the corresponding content in the main program index.html with the {{content-for "header"}} tag.   Test plug-in   plug-in project contains a/tests folder that contains the basic files for running and setting up plug-in tests. The/tests folder has the following structure: The  /dummy/helpers/unitindex.htmltest_helper.js/dummy folder contains a basic dummy app for testing plug-ins. The  /helpers folder contains various Qunit assistants, including custom to keep the test concise. The  /unit folder contains unit tests that test the plug-in for a variety of available scenarios. The  integration/folder contains integration tests.  test_helper.js is the primary help file that should be referenced in any test file, and it imports the resolver assistant, which can be found in the/helpers folder for parsing pages in dummy.  index.html contains the test page loaded in the browser to display the results of running unit tests.   for how to set up and run the test, see the official documentation, we will also use an article specifically described.   Blueprint Templates   Blueprint templates are template files with optional installation logic. It is used to generate specific application files based on some parameters and options. A plug-in can have one or more blueprint templates.   (1) Create a Blueprint template   Create a blueprint: ember addon <blueprint-name>--blueprint  for the plugin by convention, The plug-in's main blueprint template should have the same name as the plug-in: Ember addon <addon-name>--blueprint  In our example, use the command:  ember addon Fullpagejs--blueprint  This will generate a folder Blueprints/ember-cli-fullpagejs for the plugin, where you can define the logic and template files for the blueprint template. You can define multiple blueprint templates for a plug-in. The final blueprint template that is loaded overwrites the existing (same-named) Blueprint template, which can be from Ember or other plug-ins (based on Paukka)   (2) Blueprint Template Conventions   Blueprint templates should be placed in the Blueprints folder of the plug-in root directory. It's like a blueprint template that overrides the project's root directory. If you put them in the other directory of the plugin, you need to tell Ember-cli where to find it by setting the plugin's Blueprintspath property (see the Advanced customization section below), if you are familiar with Yeoman (or rails) generator, Blueprint templates conform to similar conventions and structures. For a deeper understanding of blueprint template design, see Ember CLI Blueprints.   (3) template file structure  blueprints/  fullpagejs/    index.js    files/      app/& nbsp       components/          __name__/  unbutton    index.js  &N Bsp files/      config/        __name__.js123456789101112123456789101112 Note: This is named __name __ Special files or folders that will (when the command is run) produce a file/folder in the main application and replace __name__ with the first command-line argument (name).   ' ember G Fullpagejs My-button   This results in a folder App/components/my-button in the main application.   Auxiliary Tools   (1Development-Time Link plug-in   when developing and testing, you can run NPM link at the root of the plug-in project, so you can use the plugin locally using the plugin name. Then, when you plan to use the application engineering root directory, run NPM link <addon-name&gt, the plug-in is linked to the application's Node_modules folder and added to the Package.json file. In this way, any changes in the plugin will directly function in any project linking to the plugin.   It is important to note that NPM link does not run the default Blueprint template (that is, not calling the hook method, downloading or generating the associated library file) as it does with the install command, and it needs to be handled manually using Ember G. In addition, when we use this link to test the plug-in, to provide legal version information "<addon-name>": "Version", the following version can use * instead, and older versions of NPM may need to be manually added to Package.json.   (2) Publish plugins   use NPM and Git to publish plugins like a standard NPM package. &NBSP;NPM version 0.0.1git push origin Mastergit push Origin--TAGSNPM publish12341234 These commands will be executed:  Use the version number label version (TAG) to push the submitted plugin code to the Repository (Origin branch) to push new tags to the Repository (Origin branch) release plugin to the Global NPM Library (3) to install and use plug-ins   in order to use plugins in the main app, Install the plugin using the following command: &NBSP;NPM install ember-cli-<your-addon-name-here>--save-dev.  for our Fullpagejs plugin, so use: &NBSP;NPM Install Ember-cli-fullpagejs--save-dev.  run Fullpagejs Blueprint Template:  ember generate fullpagejs  (4) Update plugin   update a plug-in by running the Ember init command in the project root, just like updating the Ember app.   Summary   This article describes in detail the method of encapsulating a third-party library as a reusable component using the Ember Framework (of course, in EMBER framework) simplifies the use of third-party libraries, removing an obstacle to our use of ember. However, in turn, this article may not be suitable for just-getting-started small partners to read and use, because a lot of basic knowledge, you need to browse the official documents to supplement, and then combined with this article, do deep thinking. I personally feel that Ember's goals and code gave me a lot of touches, it is really suitable for a relatively comprehensive large projects, like billion books such applications, most of the functions will be concentrated in the client, so with Ember development will be very convenient. But this does not mean you can also choose, so do what you like, good and valuable things, is the beginning of success.

Nodejs developing Crypto Currency 27: Developing common HTML Components