Best Practice: Maintaining scripts in your SharePoint project

Introduction

Branding is the most important part of any SharePoint project. If you are planning to deliver branding in your release, you have to make sure your developer team is proactive to deliver quality branding from early stage of the project. In most of the branding project, jQuery and JavaScript becomes must-have part. Here, we will discuss practices that can be followed to ensure quality deliverables.

Practice

• Manage script files
  From the very starting stage of your project, split your all JavaScript code in three files.
• jQuery.min.js - This will contain jQuery reference and should be reference first in order.
• jQuery.plugins.js - This should contain all custom plugins we used in it.
• ProjectName.js - This should contain all your custom code written to get your project pages work properly.
• Choosing plugins for your project
• Download plugin bundle to your local computer.
• Generally plugin will contain sample html files, jQuery and plugin script files.
• First thing to check is jQuery version you are using in your project and the one which is used in the plugin.
• If they are different, replace their jQuery.min.js with the one we are using.
• Properly test the sample provided in plugin in all browsers you are planning to support.
• Once browser and version compatibility matches paste plugin's min.js at end of jQuery.plugins.js file.
• Implement plugin specific mark up wherever applicable.
• Always use projectName.js to initialize plugin.
• Repeat above process when you choose to add any jQuery plugin
• Resolving CONFLICTS!
  Another challenging part is, jQuery ready not working or custom plugin you are using is disturbing your site's CSS. Here are thoughts on the same:
• Always use _spBodyOnLoadFunctionNames.Push("yourFunctionName") to initialize your scripts in page load.
• Always use only necessary CSS from what plugin CSS has provided and prefix class or ID in CSS as application. For example if a generic class .clear is used and you are calling plugin using $('#news') you should replace that with #news .clear. Do this for all CSS you include for the class.

Final thoughts

Here we've pointed out some of the best practices. Like this post? You would like to add/correct something? please provide your feedback on the same. 

If you have any questions you can reach out our SharePoint Consulting team here.